一文读懂Web Codecs API:浏览器背后的媒体魔术师

2024-06-13 12:04

本文主要是介绍一文读懂Web Codecs API:浏览器背后的媒体魔术师,希望对大家解决编程问题提供一定的参考价值,需要的开发者们随着小编来一起学习吧!

引言

​在早期的Web 网页中,视频播放通常要依靠 FlashSilverlight 等插件来完成,浏览器是不支持直接播放视频的。

随着网络技术的发展,视频这种媒体方式的需求变得普遍,HTML5中,出现了一个新的元素Video,使得我们可以不借助插件播放视频。

当然,它并不支持所有的格式,而且不同的浏览器厂商支持的格式也有所不同,为什么会出现只支持部分格式?

​在 Web 中,能实现无插件播放的有3GP、 ADTS、Flac、Mpeg-4、Ogg、Mov、WebM等,为什么能播放这些呢?

其实就是浏览器内置了相关的解码器,使得我们可以对其解码播放,反之,没有对应解码器,就无法进行播放。

视频播放的步骤

大致如下:

​当然,我们今天的主角并不是 Video 元素,我们的主角是 Web Codecs Api

​什么是 Web Codecs ,顾名思义,就是 Web 中的编码解码器。

对谁编码和解码?对视频和音频

旗下主要有 AudioDecodeVideoDecoderAudioEncoderVideoEncoder 这四大将。

能干啥?能获得到对视频流的单个帧和音频数据块的底层访问能力,实现完全控制媒体。

​例子:使用 Web CodecsMP4(H264) 获取数据、解封装播放。

我们所见到的视频文件,里面往往包含视频和音频,视频其实是像幻灯片一样,由一张一张的图像组成。

而视频文件,就是一堆图像数据和音频组合起来的,通过特定的编码压缩,通过特定的协议存储。

反过来可以通过解协议、解封装、解码来进行播放。

第一步:解协议解封装。

一个MP4视频文件大致由以上部分组成。这里我们使用的是 MP4Box.js 进行解封装。

解封装获取文件的信息后,我们就需要配置解码器,需要用到的解码器有视频解码器和音频解码器,对解码后的数据进行处理就能用于播放。

基本的流程如下:

代码实现

使用类封装

// 使用MP4 Box 解封装
import Mp4box from 'mp4box'// 非worker模式export default class VideoPlayer {// options 暂时只有一个renderCanvasconstructor(options) {// 解码器this.$codecs = new Codecs(this.output.bind(this))// 渲染器this.$render = new Render(options.renderCanvas)}// 输出output(type, data) {// 输出if(type === 'frame') {this.$render.render(data)} else {this.$render.playAudio(data)}// 销毁帧data.close()}// 加载文件loadFile(file) {return new Promise((resolve, reject) => {file.arrayBuffer().then((buffer) => {buffer.fileStart = 0this.$codecs.codecFile(buffer)resolve(true)}).catch((e) => {reject(e)})})}
}

渲染类封装

// 渲染类
class Render {constructor(canvas) {this.canvas = canvasthis.ctx = canvas.getContext('2d')this.audioCtx = new AudioContext()this.audioOutput = this.audioCtx.destinationthis.interleavingBuffers = []this.trackGenerator = new MediaStreamTrackGenerator({ kind: "audio" });this.writer = this.trackGenerator.writable.getWriter()const audio = document.createElement('audio')audio.setAttribute('controls', 'controls')document.body.appendChild(audio)const mediaStream = new MediaStream([this.trackGenerator]);audio.srcObject = mediaStream;}render(frame) {const { canvas, ctx } = thiscanvas.width = frame.displayWidthcanvas.height = frame.displayHeightctx.fillStyle = '#f00'ctx.clearRect(0, 0, frame.displayWidth, frame.displayHeight)ctx.drawImage(frame, 0, 0, frame.displayWidth, frame.displayHeight)}playAudio(audioData) {this.bufferAudioData(audioData)}bufferAudioData(audioData) {const data = structuredClone(audioData)this.writer.write(audioData)}
}

解码类封装

class Codecs {// 初始化MP4public $M: any = Mp4box.createFile();constructor(output = (type, frame) => {}) {// 初始化this.$M.onReady = this.onReady.bind(this);this.$M.onSamples = this.onSamples.bind(this);// 视频解码器this.$videoCodec = new VideoDecoder({output(frame: any) {output('frame', frame);},error(e: any) {console.error(e);},});// 音频解码器this.$audioCodec = new AudioDecoder({output: (audioData: any) => {output('audioData', audioData);},error: (e: any) => {console.error(e);},});}// 当准备好了之后onReady(info: any) {const videoTrack = info.videoTracks[0];const videoConfig = {codec: videoTrack.codec,codedHeight: videoTrack.video.height,codedWidth: videoTrack.video.width,description: this.description(videoTrack),};const audioTrack = info.audioTracks[0];const audioConfig = {codec: audioTrack.codec,sampleRate: 48000,numberOfChannels: 2,description: this.description(audioTrack),};// 是否支持编码标准VideoDecoder.isConfigSupported(videoConfig).then((res) => {this.$videoCodec.configure(videoConfig);this.$M.setExtractionOptions(videoTrack.id);AudioDecoder.isConfigSupported(audioConfig).then((res) => {this.$audioCodec.configure(audioConfig);this.$M.setExtractionOptions(audioTrack.id);this.$M.start();});});}// 获取解码器的描述,才能完整解码description(track) {const trak = this.$M.getTrackById(track.id);console.log('trak', trak);for (const entry of trak.mdia.minf.stbl.stsd.entries) {if (entry.avcC || entry.hvcC) {const stream = new Mp4box.DataStream(undefined,0,Mp4box.DataStream.BIG_ENDIAN);if (entry.avcC) {entry.avcC.write(stream);} else {entry.hvcC.write(stream);}return new Uint8Array(stream.buffer, 8); // Remove the box header.}if (entry.esds) {return entry.esds.esd.descs[0].descs[0].data;}}throw 'avcC or hvcC not found';}// MP4Box 传出的样本onSamples(track_id: any, ref: any, samples: any) {if (track_id === 2) {this.decodeAudio(samples);} else {this.decodeVideo(samples);}}// 解码视频decodeVideo(samples) {for (const sample of samples) {const data = new EncodedVideoChunk({type: sample.is_sync ? 'key' : 'delta',timestamp: (1e6 * sample.cts) / sample.timescale,duration: (1e6 * sample.duration) / sample.timescale,data: sample.data,});this.$videoCodec.decode(data);}}// 解码音频decodeAudio(samples) {for (const sample of samples) {const data = new EncodedAudioChunk({type: sample.is_sync ? 'key' : 'delta',timestamp: (1e6 * sample.cts) / sample.timescale,duration: (1e6 * sample.duration) / sample.timescale,data: sample.data,});this.$audioCodec.decode(data);}}// 开始解码codecFile(file: File | ArrayBuffer) {if (file instanceof File) {file.arrayBuffer().then((buffer) => {this.$M.appendBuffer(buffer);this.$M.flush();});} else if (file instanceof ArrayBuffer) {this.$M.appendBuffer(file);this.$M.flush();}}
}

以上就是 Web Codes Api 的一个小案例,实现了基本的解码播放。

– 欢迎点赞、关注、转发、收藏【我码玄黄】,gonghao同名

这篇关于一文读懂Web Codecs API:浏览器背后的媒体魔术师的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!



http://www.chinasem.cn/article/1057250

相关文章

Java Web指的是什么

Java Web指的是使用Java技术进行Web开发的一种方式。Java在Web开发领域有着广泛的应用,主要通过Java EE(Enterprise Edition)平台来实现。  主要特点和技术包括: 1. Servlets和JSP:     Servlets 是Java编写的服务器端程序,用于处理客户端请求和生成动态网页内容。     JSP(JavaServer Pages)

BUUCTF靶场[web][极客大挑战 2019]Http、[HCTF 2018]admin

目录   [web][极客大挑战 2019]Http 考点:Referer协议、UA协议、X-Forwarded-For协议 [web][HCTF 2018]admin 考点:弱密码字典爆破 四种方法:   [web][极客大挑战 2019]Http 考点:Referer协议、UA协议、X-Forwarded-For协议 访问环境 老规矩,我们先查看源代码

EasyPlayer.js网页H5 Web js播放器能力合集

最近遇到一个需求,要求做一款播放器,发现能力上跟EasyPlayer.js基本一致,满足要求: 需求 功性能 分类 需求描述 功能 预览 分屏模式 单分屏(单屏/全屏) 多分屏(2*2) 多分屏(3*3) 多分屏(4*4) 播放控制 播放(单个或全部) 暂停(暂停时展示最后一帧画面) 停止(单个或全部) 声音控制(开关/音量调节) 主辅码流切换 辅助功能 屏

9.8javaweb项目总结

1.主界面用户信息显示 登录成功后,将用户信息存储在记录在 localStorage中,然后进入界面之前通过js来渲染主界面 存储用户信息 将用户信息渲染在主界面上,并且头像设置跳转,到个人资料界面 这里数据库中还没有设置相关信息 2.模糊查找 检测输入框是否有变更,有的话调用方法,进行查找 发送检测请求,然后接收的时候设置最多显示四个类似的搜索结果

zeroclipboard 粘贴板的应用示例, 兼容 Chrome、IE等多浏览器

zeroclipboard单个复制按钮和多个复制按钮的实现方法 最近网站改版想让复制代码功能在多个浏览器上都可以实现,最近看网上不少说我们的代码复制功能不好用的,我们最近将会增加代码高亮等功能,希望大家多多支持我们 zeroclipboard是一个跨浏览器的库类 它利用 Flash 进行复制,所以只要浏览器装有 Flash 就可以运行,而且比 IE 的

【LabVIEW学习篇 - 21】:DLL与API的调用

文章目录 DLL与API调用DLLAPIDLL的调用 DLL与API调用 LabVIEW虽然已经足够强大,但不同的语言在不同领域都有着自己的优势,为了强强联合,LabVIEW提供了强大的外部程序接口能力,包括DLL、CIN(C语言接口)、ActiveX、.NET、MATLAB等等。通过DLL可以使用户很方便地调用C、C++、C#、VB等编程语言写的程序以及windows自带的大

JavaWeb【day09】--(Mybatis)

1. Mybatis基础操作 学习完mybatis入门后,我们继续学习mybatis基础操作。 1.1 需求 需求说明: 根据资料中提供的《tlias智能学习辅助系统》页面原型及需求,完成员工管理的需求开发。 通过分析以上的页面原型和需求,我们确定了功能列表: 查询 根据主键ID查询 条件查询 新增 更新 删除 根据主键ID删除 根据主键ID批量删除

如何更优雅地对接第三方API

如何更优雅地对接第三方API 本文所有示例完整代码地址:https://github.com/yu-linfeng/BlogRepositories/tree/master/repositories/third 我们在日常开发过程中,有不少场景会对接第三方的API,例如第三方账号登录,第三方服务等等。第三方服务会提供API或者SDK,我依稀记得早些年Maven还没那么广泛使用,通常要对接第三方

利用Django框架快速构建Web应用:从零到上线

随着互联网的发展,Web应用的需求日益增长,而Django作为一个高级的Python Web框架,以其强大的功能和灵活的架构,成为了众多开发者的选择。本文将指导你如何从零开始使用Django框架构建一个简单的Web应用,并将其部署到线上,让世界看到你的作品。 Django简介 Django是由Adrian Holovaty和Simon Willison于2005年开发的一个开源框架,旨在简

web群集--nginx配置文件location匹配符的优先级顺序详解及验证

文章目录 前言优先级顺序优先级顺序(详解)1. 精确匹配(Exact Match)2. 正则表达式匹配(Regex Match)3. 前缀匹配(Prefix Match) 匹配规则的综合应用验证优先级 前言 location的作用 在 NGINX 中,location 指令用于定义如何处理特定的请求 URI。由于网站往往需要不同的处理方式来适应各种请求,NGINX 提供了多种匹