Web 音视频（二）在浏览器中解析视频
前言
浏览器中已经能直接播放视频，为什么还需要手动写代码解析？
因为，某些场景需要对视频进行更细致的处理，比如截取关键帧、提取视频中的文字、人物打码、极低延时播放视频等等。
总之，除了最单纯的视频播放外，对视频数据的一切处理都需要从解析开始。
MP4 简单介绍
MP4 是最流行兼容性最好的视频封装格式之一，在各种浏览器中也得到了良好支持；
本系列后续都以 MP4 视频作为示例，所以先简单介绍 MP4 的基本概念。
其它格式的视频文件需使用对应的解封装 SDK
MP4 可以分为普通 MP4 和 Fragment MP4；
普通 MP4 的元数据可在音视频数据前面（利于网络播放），也可在后面；
Fragment MP4 把音视频数据切成一个个小片段管理，非常方便直播场景，也是 MSE 唯一支持的格式。
MP4 使用 Box 的抽象概念来描述管理数据，不同的数据抽象成不同的 Box，允许多层嵌套 Box；
下图是一个普通 MP4 文件的可视化，该文件视频分辨率存储在 moov box -> trak box -> ... -> avc1 box 中，已编码（压缩）的音视频数据则存储在 mdata box 中
你可以访问 mp4box.js filereader 来可视化 MP4 文件
MP4 解封装
我们使用 mp4box.js 在浏览器中解封装（demux）MP4 文件；
解封装（demux）可以理解为提取 MP4 文件的元数据，以及将音视频数据解析成一个个包（Sample）方便处理。
而 MP4 Sample 可转换为 EncodedVideoChunk 或 EncodedAudioChunk。
WebAV 项目中的 SampleTransform 可将 MP4 文件流转换成 Sample 流(ReadableStream)
mp4FileStream.pipeThrough(new SampleTransform())即可得到 Sample 流。
解封装伪代码
mp4box.js API 文档
const file = mp4box.createFile()
file.onReady = info => {
file.setExtractionOptions(info.videoTracks[0]?.id, 'video')
file.setExtractionOptions(info.audioTracks[0]?.id, 'audio')
file.start()
}
file.onSamples = (id, type, samples) => {
// `EncodedVideoChunk` 或 `EncodedAudioChunk`
const chunks = samples.map(s => new EncodedVideoChunk({
type: (s.is_sync ? 'key' : 'delta')
timestamp: (1e6 * s.cts) / s.timescale,
duration: (1e6 * s.duration) / s.timescale,
data: s.data
}))
}
const mp4stream = await fetch('<mp4 url>').body
let inputBufOffset = 0
while (read ui8ArrBuf for mp4stream) {
const inputBuf = ui8ArrBuf.buffer
inputBuf.fileStart = inputBufOffset
inputBufOffset += inputBuf.byteLength
file.appendBuffer(inputBuf)
}
解封装过程不会消耗过多的计算资源，一般使用 js 处理也不会碰到性能瓶颈，该过程不在 WebCodecs 的覆盖范围内。
视频解码
不同的视频需要对应的解封装程序，解封装得到的数据（如 MP4 Sample）可转换为 WebCodecs 中提供的 EncodedVideoChunk 或 EncodedAudioChunk，然后分别由 VideoDecoder 或 AudioDecoder 进行解码（解压）。
使用解码器之前需要初始化配置（decoder.configure），必填参数 codec 可以在解封装时拿到（onReady）。
const videoDecoder = new VideoDecoder({
output: (videoFrame) => {
// videoFrame 可绘制到 Canvas 进行额外处理
},
error: console.error,
});
videoDecoder.configure({ codec: '<视频数据对应的编码格式>' });
解码视频数据得到多个 VideoFrame, AudioData 对象，这两个对象包含了对应帧视频、音频的原始数据，可通过其实例的 copyTo 方法将原始数据 copy 到 ArrayBuffer 中。
TIP
VideoFrame可能占用大量显存，及时close避免影响性能
VideoFrame.copyTo会将帧的原始数据从显存复制到内存，像素处理请优先使用 WebGL
VideoDecoder输出（output）的VideoFrame需要及时close否则它将暂停解码 :::
视频帧处理
在浏览器中一般配合使用 Canvas 对 VideoFrame 进行处理，如：
-
降低视频分辨率
-
绘制
VideoFrame到Canvas，ctx.draw(videoFrame, 0, 0) -
创建新的
VideoFrame，new VideoFrame(canvas, {...})
-
-
裁剪视频；使用
ctx.draw后面的定位参数，绘制VideoFrame指定区域 -
叠加视频、图片、文字等；先绘制
VideoFrame再绘制其他元素 -
降低帧率，平均抽取丢掉多余帧；如 60FPS -> 30FPS，大概每两帧丢掉一帧不绘制
-
滤镜、抠图、特效等复杂图形处理；使用 WebGL 或 WebGPU
WebAV 视频解析示例
mp4box.js 解封装配合 WebCodecs 解码原理上很简单，但需要阅读大量文档、API 以及编写很多细节逻辑，汇总起来就相对繁琐了。
@webav/av-cliper 提供了 MP4Clip 可以将视频流转换成视频帧（VideoFrame） 屏蔽许多繁琐过程
import { MP4Clip } from '@webav/av-cliper';
// 传入一个 mp4 文件流即可初始化
const clip = new MP4Clip((await fetch('<mp4 url>')).body);
await clip.ready;
let time = 0;
// 最快速度渲染视频所有帧
while (true) {
const { state, video: videoFrame } = await clip.tick(time);
if (state === 'done') break;
if (videoFrame != null && state === 'success') {
ctx.clearRect(0, 0, cvs.width, cvs.height);
// 绘制到 Canvas
ctx.drawImage(
videoFrame,
0,
0,
videoFrame.codedWidth,
videoFrame.codedHeight
);
// 注意，用完立即 close
videoFrame.close();
}
// 时间单位是 微秒，所以差不多每秒取 30 帧，丢掉多余的帧
time += 33000;
}
clip.destroy();关于优联前端
武汉优联前端科技有限公司由一批从事前端10余年的专业人才创办，是一家致力于H5前端技术研究的科技创新型公司，为合作伙伴提供专业高效的前端解决方案，合作伙伴遍布中国及东南亚地区，行业涵盖广告，教育， 医疗，餐饮等。有效的解决了合作伙伴的前端技术难题，节约了成本，实现合作共赢。开发Web前端，微信小程序、小游戏，2D/3D游戏，动画交互与UI广告设计等各种技术研发。
