Document

--- theme: juejin --- # 前言大学四年，疫情三年。当年在腾讯会议上了一节又一节的课，因此毕设我结合教育的背景，用了janus搭了个课堂直播间 `WebCodecs`提供编解码，`WebGPU`可以提供更加高效的视频渲染，`WebTransport`可以有效改善实时数据传输的延迟，缺少的算法还可以编译现成的`C/C++`到`WebAssembly`给web使用，因此未来的音视频方向（云端剪辑、云游戏等）一定是百花齐放的。很庆幸上班后还对音视频留有兴趣，于是今年上半年研究了一波剪映，并实现了一个简易版的剪映由于在写文章的时候，剪映网页版下线了。因此本文的图来自剪映客户端！！！ 2025.2.20 剪映网页版升级了 ![image.png](https://p3-xtjj-sign.byteimg.com/tos-cn-i-73owjymdk6/98cd4d519a1246e385d787410e923b37~tplv-73owjymdk6-jj-mark-v1:0:0:0:0:5o6Y6YeR5oqA5pyv56S-5Yy6IEAg6LS-6ZOt:q75.awebp?rk3s=f64ab15b&x-expires=1764831358&x-signature=V1ygSD8S2%2FOArWeXjxYPSIdzjPo%3D) # 1 核心功能 ![image.png](https://p3-xtjj-sign.byteimg.com/tos-cn-i-73owjymdk6/a4f1728e34864a7da1eedae0e809c977~tplv-73owjymdk6-jj-mark-v1:0:0:0:0:5o6Y6YeR5oqA5pyv56S-5Yy6IEAg6LS-6ZOt:q75.awebp?rk3s=f64ab15b&x-expires=1764831358&x-signature=H7wPGYgZviFI6oJUw9ME2b2TDxE%3D)

我实现的demo

![image.png](https://p3-xtjj-sign.byteimg.com/tos-cn-i-73owjymdk6/a95c79744fee414693ba44ea2a443ae7~tplv-73owjymdk6-jj-mark-v1:0:0:0:0:5o6Y6YeR5oqA5pyv56S-5Yy6IEAg6LS-6ZOt:q75.awebp?rk3s=f64ab15b&x-expires=1764831358&x-signature=Yh1kjF3X9UaDwebleayMez0xEvE%3D)

剪映PC端

剪映主要分为四个模块：素材管理、视频渲染及播放、视频/素材参数调节、时间轴还有其他的一些功能：视频模板、AI工具 # 2 重难点分析 * 这么多素材，应该存哪（存内存、后端、opfs？） * 如何编解码音视频，并且播放对应的帧 * 如何实现视频转场 * 视频轨道编辑器编辑器（视频缩略图、音频波形图、拖拽轨道、时间轴缩放等）解决完以上难点，剩下的就是实现一个类似低代码的图片编辑器如果我们把图片编辑器看成二维的，那么音视频编辑器就是在这基础上加上时间的维度因此在编辑器素材数据结构的设计上，可以参考一些低代码的数据结构，再存上什么时间范围内渲染什么素材，就功德圆满了 ## 2-1 解码视频市面上常见的网页端处理音视频的方案大概有两种： * 使用[FFmpeg的WASM版本](https://ffmpegwasm.netlify.app/docs/overview) * 使用浏览器自带的API [WebCodes](https://developer.mozilla.org/zh-CN/docs/Web/API/WebCodecs_API) 假如使用ffmpeg解码，需要考虑以下因素 **性能**：B站做过[相关测试](https://juejin.cn/post/7329573765087756314)

来自B站的测试

**获取视频信息**：需要通过`ffmpeg.run('-i', filePath)`调用，但是结果的输出是通过logger输出文本的，因此还需要写一段解析输出的逻辑 ```javascript this.ffmpeg.setLogger(logs => { const s = logs.message; if (s.includes('Duration')) { const duration = s.slice( s.indexOf('Duration:') + 'Duration: '.length, s.indexOf(',') ); const bitRate = s.slice(s.indexOf('bitrate:') + 'bitrate: '.length); this.videoInfo.duration = duration; this.videoInfo.bitRate = bitRate; } if (s.includes('Video:') && s.includes('tbr')) { console.warn(s); const fps = s.match(/, ([\d.]+) fps,/)?.[1] ?? ''; const wh = s.match(/, (\d+)x(\d+)/); const width = wh?.[1] ?? ''; const height = wh?.[2] ?? ''; this.videoInfo.fps = fps; this.videoInfo.width = width; this.videoInfo.height = height; } }); ``` **封装ffmpeg命令**：ffmpeg.wasm就是把ffmpeg编译成了wasm，对音视频进行操作还是离不开命令行参数，因此需要熟悉命令行参数并且要封装一些命令工具函数。 ```javascript commands: ["-i",filePath,"-vf",`fps=${fps}`,"-s",`${size.w}x${size.h}`,`${framePath}${fileName}`]; ``` **可能需要封装任务队列**：ffmpeg.wasm不能同时执行多条命令，因此我想要连续执行一些命令需要维护一个任务队列，等上一个任务完成接着执行下一个任务。 **维护文件系统**：ffmpeg自己实现了一个文件系统，所有api操作视频都是基于这个文件系统的，例如读取文件系统中的一张图片。 ```javascript const data = this.ffmpeg.FS('readFile', 'output.jpg'); const url = URL.createObjectURL( new Blob([data.buffer], { type: 'image/jpeg' }) ); this.rmFile('output.jpg'); ``` 因此，如果通过new多个ffmpeg实例来解决不能同时执行多条命令，还需要考虑输出的文件在哪个实例上、如何跨实例传输文件内容。 **资源大小**：这3个东西23M ![image.png](https://p3-xtjj-sign.byteimg.com/tos-cn-i-73owjymdk6/05f1018fed674d25a3bd505c0fc03753~tplv-73owjymdk6-jj-mark-v1:0:0:0:0:5o6Y6YeR5oqA5pyv56S-5Yy6IEAg6LS-6ZOt:q75.awebp?rk3s=f64ab15b&x-expires=1764831358&x-signature=G%2FwTwCBDMH4lzTuCsOnRokwi3ak%3D) 而使用浏览器自带的WebCodes只需要熟悉浏览器api即可 ### 认识MP4结构一个MP4文件里面都有什么可以通过在线查看MP4文件的结构 ![image.png](https://p3-xtjj-sign.byteimg.com/tos-cn-i-73owjymdk6/4bdea247e3ce47bfb930c613fea977ce~tplv-73owjymdk6-jj-mark-v1:0:0:0:0:5o6Y6YeR5oqA5pyv56S-5Yy6IEAg6LS-6ZOt:q75.awebp?rk3s=f64ab15b&x-expires=1764831358&x-signature=X%2FMRatdUpuog9NXbJ1kUNXRGIUA%3D) ![image.png](https://p3-xtjj-sign.byteimg.com/tos-cn-i-73owjymdk6/45ad521f9f6d4d098986c9ca80847737~tplv-73owjymdk6-jj-mark-v1:0:0:0:0:5o6Y6YeR5oqA5pyv56S-5Yy6IEAg6LS-6ZOt:q75.awebp?rk3s=f64ab15b&x-expires=1764831358&x-signature=qPkCt3nRqBYNjLVMEOn2PdJwMi4%3D)

MP4文件结构

MP4文件由若干个box组成，每个box有类型和长度，box可以接着套box，就像json一样。一个MP4由下面3大类box组成： 1. **“ftyp” 类型box**：一个MP4文件的开头会有且只有一个 “ftyp” 类型的box（File Type Box），包含关于文件的一些信息：版本、兼容协议等 2. **“moov”类型box**：之后会有且只有一个“moov”类型的box（Movie Box），包含文件媒体的metadata信息：视频的分辨率、帧率、码率，音频的采样率、声道数等 3. **“mdat”类型box**：“mdat”类型的box（Media Data Box），存放实际的媒体数据其中还有一些重要的子box * **mvhd**记录了时长等信息 ![image.png](https://p3-xtjj-sign.byteimg.com/tos-cn-i-73owjymdk6/aee495fed745421d97d4541e25e5e943~tplv-73owjymdk6-jj-mark-v1:0:0:0:0:5o6Y6YeR5oqA5pyv56S-5Yy6IEAg6LS-6ZOt:q75.awebp?rk3s=f64ab15b&x-expires=1764831358&x-signature=UIFuWIL9TK7IC2ba0zJZJbySH64%3D) * **stss**记录了关键帧的位置 ![image.png](https://p3-xtjj-sign.byteimg.com/tos-cn-i-73owjymdk6/2de7b234a5f5408b95b3acb29aaaf86c~tplv-73owjymdk6-jj-mark-v1:0:0:0:0:5o6Y6YeR5oqA5pyv56S-5Yy6IEAg6LS-6ZOt:q75.awebp?rk3s=f64ab15b&x-expires=1764831358&x-signature=zBGfrmzdotgY44kOZMlnZk9KTiY%3D) **stss**记录了每一帧的播放时间 ![image.png](https://p3-xtjj-sign.byteimg.com/tos-cn-i-73owjymdk6/1066e3ea51644407a7d661307eee0e16~tplv-73owjymdk6-jj-mark-v1:0:0:0:0:5o6Y6YeR5oqA5pyv56S-5Yy6IEAg6LS-6ZOt:q75.awebp?rk3s=f64ab15b&x-expires=1764831358&x-signature=lf%2Bx9nPdJzidraL9ZldPti1GwJw%3D) 由mdhd box得timescale=15360，由stss box的sample\_deltas=256，把1s分成15360份，每一帧占256份，也就是每帧占0.016s。sample\_counts=16440，意思是前16440帧，每一帧的时间是0.016s。我们可以计算出，这个MP4的fps是60，时长是16440\*0.016s=274s=4.5分钟，和ffmpeg的信息一样 `ffmpeg -hide_banner -i .\video.mp4` ![image.png](https://p3-xtjj-sign.byteimg.com/tos-cn-i-73owjymdk6/4e29a02094ff43c5b404b57132f93c6f~tplv-73owjymdk6-jj-mark-v1:0:0:0:0:5o6Y6YeR5oqA5pyv56S-5Yy6IEAg6LS-6ZOt:q75.awebp?rk3s=f64ab15b&x-expires=1764831358&x-signature=VhrC8Hobn3K4CkFUXf494bFVHOo%3D) 因为stss box是已经存在的，因此，点播场景（类似B站看视频这种）比较适合用MP4格式，可以通过stss box等box计算帧的位置并且很快地跳转而直播就不行了，因为MP4的这些box要等直播完才能生成，直播更适合用flv * **stsz**记录了每一帧的大小（单位byte） ![image.png](https://p3-xtjj-sign.byteimg.com/tos-cn-i-73owjymdk6/5d671d511f1a411b8e1db9c36d491201~tplv-73owjymdk6-jj-mark-v1:0:0:0:0:5o6Y6YeR5oqA5pyv56S-5Yy6IEAg6LS-6ZOt:q75.awebp?rk3s=f64ab15b&x-expires=1764831358&x-signature=I53i2pRVe1zP6BKc9iFgHBf3MOc%3D) 在浏览器中，我们可以通过[mp4box.js](https://gpac.github.io/mp4box.js/)解码MP4文件 ```JavaScript import MP4Box from "MP4Box"; async function handleArrayBuffer(buffer) { const videoSamples = []; const file = MP4Box.createFile(); const mp4InfoPromise = new Promise((resolve, reject) => { // 当“moov”被解析时，即当有关文件的元数据被解析时，会调用回调。 file.onReady = resolve; file.onError = reject; }); buffer.fileStart = 0; file.appendBuffer(buffer); const mp4Info = await mp4InfoPromise; const vTrack = mp4Info.videoTracks[0]; const vTrackId = vTrack?.id; if (vTrackId != null) file.setExtractionOptions(vTrackId, "video", { nbSamples: 100 }); const totalFrameCount = vTrack.nb_samples; let sampleFrameCount = 0; return new Promise((resolve) => { file.onSamples = (id, type, samples) => { sampleFrameCount += samples.length; videoSamples.push( ...samples.map((s) => { // 格式化时长 return { ...s, cts: (s.cts / s.timescale) * 1e6, dts: (s.dts / s.timescale) * 1e6, duration: (s.duration / s.timescale) * 1e6, timescale: 1e6, }; }) ); if (totalFrameCount === sampleFrameCount) { resolve([videoSamples, file, mp4Info]); } }; file.start(); }); } export default function App() { return (

{ const file = event.target.files[0]; const res = await handleArrayBuffer(await file.arrayBuffer()); console.log(res); }} />

); } ``` ![image.png](https://p3-xtjj-sign.byteimg.com/tos-cn-i-73owjymdk6/d15fc4f057e24d618ca4fa1329018649~tplv-73owjymdk6-jj-mark-v1:0:0:0:0:5o6Y6YeR5oqA5pyv56S-5Yy6IEAg6LS-6ZOt:q75.awebp?rk3s=f64ab15b&x-expires=1764831358&x-signature=sM%2FjerLDFO9XgBzMBDqShrAWZaI%3D) ![image.png](https://p3-xtjj-sign.byteimg.com/tos-cn-i-73owjymdk6/a294b62c64c44785b35752810cf731a4~tplv-73owjymdk6-jj-mark-v1:0:0:0:0:5o6Y6YeR5oqA5pyv56S-5Yy6IEAg6LS-6ZOt:q75.awebp?rk3s=f64ab15b&x-expires=1764831358&x-signature=kFPrqUuGDnezZSPsFixxFUa6pFQ%3D) ![image.png](https://p3-xtjj-sign.byteimg.com/tos-cn-i-73owjymdk6/a9e0ed489e964c878969deb5e9fb42c1~tplv-73owjymdk6-jj-mark-v1:0:0:0:0:5o6Y6YeR5oqA5pyv56S-5Yy6IEAg6LS-6ZOt:q75.awebp?rk3s=f64ab15b&x-expires=1764831358&x-signature=qXAE4ZfvbXFH9OSoX8x2LwpKE%2FQ%3D) 这样，我们就解析出了视频的数据 > 在解析的时候，对duration这些参数进行了操作 `s.duration / s.timescale` > > 这是因为 timescale 是文件媒体在1秒时间内的刻度值，可以理解为1秒长度的时间单元数 > > 例如：一个 videoTrack 的 timescale = 600, duration = 30000，那么它的时长是30000/600=50s ### 一次性解析视频全部帧 ```javascript import MP4Box from "MP4Box"; async function handleArrayBuffer(buffer) { const videoSamples = []; const file = MP4Box.createFile(); const mp4InfoPromise = new Promise((resolve, reject) => { // 当“moov”被解析时，即当有关文件的元数据被解析时，会调用回调。 file.onReady = resolve; file.onError = reject; }); buffer.fileStart = 0; file.appendBuffer(buffer); const mp4Info = await mp4InfoPromise; const vTrack = mp4Info.videoTracks[0]; const vTrackId = vTrack?.id; if (vTrackId != null) file.setExtractionOptions(vTrackId, "video", { nbSamples: 100 }); const totalFrameCount = vTrack.nb_samples; let sampleFrameCount = 0; return new Promise((resolve) => { file.onSamples = (id, type, samples) => { sampleFrameCount += samples.length; videoSamples.push( ...samples.map((s) => { // 格式化时长 return { ...s, cts: (s.cts / s.timescale) * 1e6, dts: (s.dts / s.timescale) * 1e6, duration: (s.duration / s.timescale) * 1e6, timescale: 1e6, }; }) ); if (totalFrameCount === sampleFrameCount) { resolve([videoSamples, file, mp4Info]); } }; file.start(); }); } // 生成videoDecoder.config需要的参数 function getExtractFileConfig(mp4File, mp4Info) { const vTrack = mp4Info.videoTracks[0]; let videoDesc; // 生成VideoDecoder.configure需要的description信息 const entry = mp4File.moov.traks[0].mdia.minf.stbl.stsd.entries[0]; const box = entry.avcC ?? entry.hvcC ?? entry.vpcC; if (box != null) { const stream = new MP4Box.DataStream( undefined, 0, MP4Box.DataStream.BIG_ENDIAN ); box.write(stream); // slice()方法的作用是移除moov box的header信息 videoDesc = new Uint8Array(stream.buffer.slice(8)); } const videoDecoderConf = { codec: vTrack.codec, codedHeight: vTrack.video.height, codedWidth: vTrack.video.width, description: videoDesc, }; return videoDecoderConf; } // 将视频全部帧解析出来，并转化成ImageBitmap存下来 function genFrame(videoSamples, config) { const { codedWidth: width, codedHeight: height } = config; return new Promise((resolve, reject) => { const pngPromises = []; let cnt = 0; const resolver = async () => { const frames = await Promise.all( pngPromises.map(async (v) => ({ ts: v.ts, img: await v.img, })) ); resolve({ width, height, duration: videoSamples[videoSamples.length - 1].dts, frames, }); }; const videoDecoder = new VideoDecoder({ output: (videoFrame) => { cnt++; const cvs = new OffscreenCanvas(width, height); const ctx = cvs.getContext("2d"); ctx.drawImage(videoFrame, 0, 0, width, height); const bitmap = cvs.transferToImageBitmap(); // 解码出来的每一帧，用数组把他存下来 pngPromises.push({ ts: videoFrame.timestamp, img: bitmap, }); // 用完及时close，VideoFrame会占用大量显存 videoFrame.close(); // 解码完毕 if (cnt === videoSamples.length - 1) { resolver(); } }, error: (err) => { console.error("videoDecoder错误：", err); }, }); videoDecoder.configure(config); // videoDecoder开始解析每一帧 videoSamples.forEach((s) => { videoDecoder.decode( // 将sample转换成EncodedVideoChunk，可以被VideoDecoder进行解码 new EncodedVideoChunk({ type: s.is_sync ? "key" : "delta", timestamp: (1e6 * s.cts) / s.timescale, duration: (1e6 * s.duration) / s.timescale, data: s.data, }) ); }); }); } export default function App() { return (

{ const file = event.target.files[0]; const [videoSamples, mp4File, mp4Info] = await handleArrayBuffer( await file.arrayBuffer() ); const { frames } = await genFrame( videoSamples.slice(0, 1000), getExtractFileConfig(mp4File, mp4Info) ); let i = 0; const canvas = document.querySelector("canvas"); const ctx = canvas.getContext("2d"); const draw = () => { const { img } = frames[i]; ctx.clearRect(0, 0, canvas.width, canvas.height); ctx.drawImage(img, 0, 0, canvas.width, canvas.height); i++; if (i === frames.length) { return; } setTimeout(draw, 33); }; draw(); }} />

); } ``` 选择一个**小一点的文件**（一共152帧），我们就能播放了

**注意：** 1. `genFrame函数`会把每一帧都转化成`ImageBitmap`存下来，因此只能使用小文件来试，不然会很占内存 2. 为什么要把`VideoFrame`转化成`ImageBitmap`而不是直接存下来我们改造一下`genFrame函数` 实验1，不及时把videoFrame关闭 ```JavaScript const videoDecoder = new VideoDecoder({ output: (videoFrame) => { // videoFrame.close(); console.count(); } }) ``` **结果：** 能完全解析全部帧，并且报了个错

实验2，把`VideoFrame`存在数组里，不及时把videoFrame关闭 ```JavaScript const videoFrames = []; const videoDecoder = new VideoDecoder({ output: (videoFrame) => { videoFrames.push(videoFrame); // videoFrame.close(); console.count(); } }) ``` **结果：** 只能解析17个帧，然后没有反应了

实验3，把`VideoFrame`存在数组里，过一秒才关闭 ```JavaScript const videoFrames = []; const videoDecoder = new VideoDecoder({ output: (videoFrame) => { videoFrames.push(videoFrame); setTimeout(() => { videoFrame.close(); }, 1000); // videoFrame.close(); console.count(); } }) ``` **结果：** 每过1s输出17个结果，最后能解析完全部帧

**结论：** 浏览器只能保存大约17个`VideoFrame`对象。因此不能直接把`VideoFrame`存下来，需要转化成其他格式 3. `genFrame函数`加一点抽帧的条件限制（每经过X帧抽一次帧）就能实现视频缩略图的功能了。可以将抽出来的帧降低分辨率，压缩画质，存在[OPFS](https://developer.mozilla.org/zh-CN/docs/Web/API/File_System_API)里

4. `VideoFrame`要及时close。`VideoDecoder`要及时close。不要一次给`VideoDecoder`太多帧进行解析，解码器可能会来不及处理（可以通过`encodeQueueSize`查看队列中待解码的数量） ### 认识视频帧本来这一节可以直接参考 [I帧、P帧、B帧、GOP、IDR 和PTS, DTS之间的关系](https://www.cnblogs.com/yongdaimi/p/10676309.html) 的，但是为了防止文章失效、或者博客园不干了，还是整理一下吧 *** #### RGB和YUV 需要编解码的视频图像一般不使用**RGB**色彩空间，而是使用一种称为**YUV**的色彩空间。在YUV格式中，“Y”代表亮度，也就是我们通常所说的灰度值，它决定了图像的明暗程度。而“U”和“V”则代表色度，它们负责描述图像的色彩和饱和度，帮助我们区分不同的颜色。它是基于人眼对亮度变化比色度变化更敏感的原理设计的，还实现了**彩色电视和黑白电视的兼容**。不同于RGB图像一般按像素存储（如RGBRGBRGBRGB），YUV图像一般按平面存储，即将所有的Y放到一起，所有的U放到一起，所有的V放在一起（如YYYYUUUUVVVV），其中每一部分称为一个平面。这种存储方式的一个好处就是，在广播电视中，当接收到一帧图像时，黑白电视机只需要播放Y平面（黑白图像），而忽略代表颜色的U和V平面。当然，彩色电视机则需要播放所有平面的数据。

因此，**YUV格式广泛应用于视频压缩和传输，因为它兼容性更好，并且在保持图像质量的同时，能够有效地减少数据量** *** **在H.264压缩标准中I帧、P帧、B帧用于表示传输的视频画面。**

IPB帧示意图

#### I帧即Intra-coded picture（帧内编码图像帧）。I帧表示**关键帧**，你可以理解为这一帧画面的完整保留。**解码时只需要本帧数据就可以完成（因为包含完整画面）** I 帧通常是每个 GOP（MPEG 所使用的一种视频压缩技术）的**第一个帧**，经过适度地压缩，做为随机访问的参考点，可以当成图像。在MPEG编码的过程中，部分视频帧序列压缩成为I帧；部分压缩成P帧；还有部分压缩成B帧。I帧法是帧内压缩法，也称为“关键帧”压缩法。 I帧法是基于离散余弦变换DCT（Discrete Cosine Transform）的压缩技术，这种算法与JPEG压缩算法类似。采用I帧压缩可达到1/6的压缩比而无明显的压缩痕迹。【**I帧特点**】 1. 它是一个全帧压缩编码帧。它将全帧图像信息进行JPEG压缩编码及传输 2. 解码时仅用I帧的数据就可重构完整图像 3. I帧描述了图像背景和运动主体的详情 4. I帧不需要参考其他画面而生成 5. I帧是P帧和B帧的参考帧（其质量直接影响到同组中以后各帧的质量） 6. I帧是帧组GOP的基础帧（第一帧），在一组中只有一个I帧 7. I帧不需要考虑运动矢量 8. I帧所占数据的信息量比较大 #### P帧即Predictive-coded Picture（前向预测编码图像帧）。P帧表示的是这一帧跟之前的一个关键帧（或P帧）的差别，解码时需要用之前缓存的画面叠加上本帧定义的差别，生成最终画面。（也就是差别帧，**P帧没有完整画面数据，只有与前一帧的画面差别的数据**）

P帧示意图

【**P帧特点**】 1. P帧是I帧后面相隔1\~2帧的编码帧 2. P帧采用运动补偿的方法传送它与前面的I或P帧的差值及运动矢量（预测误差） 3. 解码时必须将I帧中的预测值与预测误差求和后才能重构完整的P帧图像 4. P帧属于前向预测的帧间编码。它只参考前面最靠近它的I帧或P帧 5. P帧可以是其后面P帧的参考帧，也可以是其前后的B帧的参考帧 6. 由于P帧是参考帧，它可能造成解码错误的扩散 7. 由于是差值传送，P帧的压缩比较高 #### B帧即Bidirectionally predicted picture（双向预测编码图像帧)。B帧是双向差别帧，也就是**B帧记录的是本帧与前后帧的差别**，换言之，要解码B帧，**不仅要取得之前的缓存画面，还要解码之后的画面**，通过前后画面的与本帧数据的叠加取得最终的画面。B帧压缩率高，但是解码时CPU会比较累。

B帧示意图

【**B帧特点**】 1. B帧是由前面的I或P帧和后面的P帧来进行预测的 2. B帧传送的是它与前面的I帧或P帧和后面的P帧之间的预测误差及运动矢量 3. B帧是双向预测编码帧 4. B帧压缩比最高，因为它只反映丙参考帧间运动主体的变化情况,预测比较准确 5. B帧不是参考帧，不会造成解码错误的扩散【**为什么需要B帧**】从上面的看，我们知道I和P的解码算法比较简单，资源占用也比较少，I只要自己完成就行了，P呢，也只需要解码器把前一个画面缓存一下，遇到P时就使用之前缓存的画面就好了，如果视频流只有I和P，解码器可以不管后面的数据，边读边解码，线性前进，大家很舒服。那么为什么还要引入B帧？网络上的电影很多都采用了B帧，因为B帧记录的是前后帧的差别，比P帧能节约更多的空间，但这样一来，文件小了，解码器就麻烦了，因为在解码时，不仅要用之前缓存的画面，还要知道下一个I或者P的画面（也就是说要预读预解码）而且，B帧不能简单地丢掉，因为B帧其实也包含了画面信息，如果简单丢掉，并用之前的画面简单重复，就会造成画面卡（其实就是丢帧了），并且由于网络上的电影为了节约空间，往往使用相当多的B帧，B帧用的多，对不支持B帧的播放器就造成更大的困扰，画面也就越卡。

显示和解码顺序示意图（上面是帧的显示顺序，下面是帧的解码顺序）

#### GoP 在IPB这种编码算法下，如果编码后一帧的数据丢失，则会影响后面的解码，如果强行解码，就会出现花屏等现象（因为部分图像间的差异信息找不到了）。因而，在实际的编码器上，一般会对图像进行分组，分组后的图像称为**GoP**(Group of Pictures)。每隔一定数量（比如100帧）的图像，就对一帧完整的图像进行编码。一个序列的第一个图像叫做 IDR 图像（立即刷新图像），IDR 图像都是 I 帧图像。因此整个GoP序列的第1帧也被称为**关键帧**。这样，即使前面丢了很多数据，只要一个新的关键帧到来，就能继续正确地解码。如果前一个序列出现重大错误，在这里可以获得重新同步的机会。IDR图像之后的图像永远不会使用IDR之前的图像的数据来解码。 GoP可以是固定的，也可以是按需的（比如没有数据丢失就不用生成关键帧，或者丢失比较严重时就多生成几个关键帧）。

GoP示意图

### 只解析对应时间的帧前面介绍过，在MP4中只有关键帧是可以独立解码的，其他帧的解码都依赖于之前解码的帧，所以第一步必须找到关键帧，从关键帧开始解码到目标帧。因此，实现思路是寻找对应时间所在的GoP序列，再将整个GoP序列解码并转化为ImageBitmap保存 ```javascript function createFindFrameHelper(videoSamples, config) { const { codedWidth: width, codedHeight: height } = config; let videoFrames = []; let videoDecoder; function reset() { videoFrames = []; videoDecoder = new VideoDecoder({ output: (videoFrame) => { const cvs = new OffscreenCanvas(width, height); const ctx = cvs.getContext("2d"); ctx.drawImage(videoFrame, 0, 0, width, height); const bitmap = cvs.transferToImageBitmap(); videoFrames.push({ ts: videoFrame.timestamp, bitmap: bitmap }); videoFrame.close(); }, error: (err) => { console.error("videoDecoder错误：", err); }, }); videoDecoder.configure(config); } // 寻找对应关键帧所对应的GoP，并进行解码 async function decode(time) { let hasFrame = false; let startIndex = 0; let endIndex = videoSamples.length; for (let i = 0; i < videoSamples.length; i++) { const curFrame = videoSamples[i]; if (time < curFrame.cts) { hasFrame = true; } // 将关键帧的索引存下来 if (curFrame.is_sync) { if (!hasFrame) { startIndex = i; } if (hasFrame) { endIndex = i; break; } } } const chunks = videoSamples.slice(startIndex, endIndex); chunks.forEach((v) => { videoDecoder.decode( new EncodedVideoChunk({ type: v.is_sync ? "key" : "delta", timestamp: (1e6 * v.cts) / v.timescale, duration: (1e6 * v.duration) / v.timescale, data: v.data, }) ); }); videoDecoder.flush().catch((e) => console.log(e)); } // 等待解码完成 async function wait() { return new Promise((resolve) => { if (videoDecoder.decodeQueueSize > 0) { const id = setInterval(() => { if (videoDecoder.decodeQueueSize === 0) { clearInterval(id); resolve(null); } }, 50); } else { resolve(null); } }); } reset(); return async function find(time) { // 如果当前有已经解析好的视频帧就尝试寻找 if (videoFrames.length > 0) { // 如果要找的时间对应的帧不在这个数组内，就重新解码 if ( time < videoFrames[0].ts || time > videoFrames[videoFrames.length - 1].ts ) { reset(); decode(time); await wait(); } } else { reset(); decode(time); await wait(); } for (let i = 0; i < videoFrames.length; i++) { if (time <= videoFrames[i].ts) { return videoFrames[i]; } } }; } export default function App() { const helper = useRef(); const [max, setMax] = useState(100); return (

{ const file = event.target.files[0]; const [videoSamples, mp4File, mp4Info] = await handleArrayBuffer( await file.arrayBuffer() ); setMax(videoSamples.length); // const { frames } = await genFrame( // videoSamples, // getExtractFileConfig(mp4File, mp4Info) // ); // console.log(frames); helper.current = createFindFrameHelper( videoSamples, getExtractFileConfig(mp4File, mp4Info) ); }} /> { const res = await helper.current(v * 16666.66); const canvas = document.querySelector("canvas")!; const context = canvas.getContext("2d")!; context.clearRect(0, 0, canvas.width, canvas.height); if (res?.bitmap) { context.drawImage(res.bitmap, 0, 0, canvas.width, canvas.height); } }} style={{ width: 200 }} />

); } ```

解码得到的每帧视频所占用的内存是巨大的，假设一个RGB像素需要24bit，那么一帧1080P的视频将占用将近6MB的内存。在2-1节介绍stss时，示例视频每隔300帧才有一个关键帧，把300帧图像存到内存中显然是不合适的为了减少内存中保存帧的数量，我们可以从最近时刻的关键帧开始解码，边解码边close不是我们需要的帧，直到获取到目标时刻的帧可以参考[webav](https://github.com/bilibili/WebAV/blob/main/packages/av-cliper/src/clips/mp4-clip.ts#L592) 中的`VideoFrameFinder`中的`#parseFrame`方法贴一下旧版的代码，这个易读一些 ```typescript #parseFrame = async ( time: number, dec: VideoDecoder | null, aborter: { abort: boolean }, ): Promise => { if (dec == null || dec.state === 'closed' || aborter.abort) return null; if (this.#videoFrames.length > 0) { const vf = this.#videoFrames[0]; if (time < vf.timestamp) return null; // 弹出第一帧 this.#videoFrames.shift(); // 第一帧过期，找下一帧 if (time > vf.timestamp + (vf.duration ?? 0)) { vf.close(); return this.#parseFrame(time, dec, aborter); } // 符合期望 return vf; } // 缺少帧数据 if (this.#outputFrameCnt < this.#inputChunkCnt && dec.decodeQueueSize > 0) { // 解码中，等待，然后重试 await sleep(15); } else if (this.#videoDecCusorIdx >= this.samples.length) { // decode completed return null; } else { // 启动解码任务，然后重试 let endIdx = this.#videoDecCusorIdx + 1; // 该 GoP 时间区间有时间匹配，且未被删除的帧 let hasValidFrame = false; for (; endIdx < this.samples.length; endIdx++) { const s = this.samples[endIdx]; if (!hasValidFrame && !s.deleted && time < s.cts + s.duration) { hasValidFrame = true; } // 找一个 GoP，所以是下一个关键帧结束 if (s.is_sync) break; } // 如果该 GoP 区间存在要找的那一帧，就开始解码 if (hasValidFrame) { const samples = this.samples.slice(this.#videoDecCusorIdx, endIdx); // 如果第一帧不是关键帧 if (samples[0]?.is_sync !== true) { Log.warn('First sample not key frame'); } else { // 格式化MP4box.js得到的sample，并且创建EncodedVideoChunk对象 const chunks = await Promise.all( samples.map((s) => sample2Chunk(s, EncodedVideoChunk, this.localFileReader), ), ); // Wait for the previous asynchronous operation to complete, at which point the task may have already been terminated if (aborter.abort) return null; this.#lastVfDur = chunks[0]?.duration ?? 0; // 开始解码 for (const c of chunks) dec.decode(c); this.#inputChunkCnt += chunks.length; // windows 设备 flush 可能不会被 resolved dec.flush().catch((err) => { // 异常处理 }); } } this.#videoDecCusorIdx = endIdx; } return this.#parseFrame(time, dec, aborter); }; ``` ## 2-2 解码音频 ### 认识PCM #### 采样音频文件的生成过程是将声音信息**采样、量化和编码**产生的数字信号的过程，人耳所能听到的声音，最低的频率是从20Hz起一直到最高频率20KHz，因此音频文件格式的最大带宽是20KHz。 ![image.png](https://p3-xtjj-sign.byteimg.com/tos-cn-i-73owjymdk6/9acdf19862964be096f337181ce25f67~tplv-73owjymdk6-jj-mark-v1:0:0:0:0:5o6Y6YeR5oqA5pyv56S-5Yy6IEAg6LS-6ZOt:q75.awebp?rk3s=f64ab15b&x-expires=1764831358&x-signature=KOWs9EXz3SPrCxvGLMFTTG6P5es%3D) * **红色曲线**：表示原始信号。 * **蓝色垂直线段**：表示当前时间点对原始信号的一次采样。采样是一系列基于振幅（amplitude和相同时间间隔的样本。这也是为什么采样过程被称为PAM的原因。 * **PAM**：(Pulse Amplitude Modulation)是一系列离散样本之的结果。每秒钟的样本数也被称之为采样率（Sample rate）。在Sampling图示案例中，采样率为每秒34次。意味着在一秒的时间内，原始信号被采样了34次（也就是蓝色垂直线段的数量）。通常，采样率的单位用Hz表示，例如1Hz表示每秒钟对原始信号采样一次，1KHz表示每秒钟采样1000次。根据奈奎斯特的理论，只有采样频率高于声音信号最高频率的两倍时，才能把数字信号表示的声音还原成为原来的声音，所以音频文件的采样率一般在40\~50KHz（CD音质采样率44.1KHz，数字电视、DVD、电影采样率48KHz）。 #### 量化 **位深：** 用于描述采用多少二进制位表示一个音频模拟信号采样，常见的位深有8bit（只能记录 256 个数）、16bit（可以到 65536 个数, CD 标准）、32bit，其中16bit最常见。显而易见，位深度越大对模拟信号的描述越真实，对声音的描述更加准确。 ![image.png](https://p3-xtjj-sign.byteimg.com/tos-cn-i-73owjymdk6/52da6fde70bd4f0bbcccb70513c5e6b4~tplv-73owjymdk6-jj-mark-v1:0:0:0:0:5o6Y6YeR5oqA5pyv56S-5Yy6IEAg6LS-6ZOt:q75.awebp?rk3s=f64ab15b&x-expires=1764831358&x-signature=YJK9%2Fy%2F0BiSPmbwjmLlW%2B0q92Vs%3D) 上图使用8bit位深来描述 #### 编码编码是将量化后的信号转换为二进制的过程，编码出来的数据就是PCM数据。对声音进行采样、量化并进行编码过程被称为脉冲编码调制（Pulse Code Modulation），简称PCM。**PCM数据是最原始的音频数据完全无损**，理论上来说采样率大于40kHz的音频格式都可以称之为无损格式。采样率越高，声音的还原程度越高，质量就越好，同时占用空间会变大。为了压缩PCM，出现了各种压缩格式，**无损压缩（ALAC、APE、FLAC）和有损压缩（MP3、AAC、OGG、WMA）** ### 音频帧音视频文件播放时，为了保证音视频同步，程序需要根据每帧的播放时间戳进行有序播放。但是每个音频采样数据太小了，如果每个采样数据都记录播放时间戳的话，那数据量就大了，因此有了音频帧。音频帧实际上就是把一小段时间的音频采样数据打包起来 ### 解析MP4中的音频帧 ```javascript import { Button, Slider } from "@arco-design/web-react"; import MP4Box from "MP4Box"; import { useEffect, useRef, useState } from "react"; async function handleArrayBuffer(buffer) { const audioSamples = []; const file = MP4Box.createFile(); const mp4InfoPromise = new Promise((resolve, reject) => { file.onReady = resolve; file.onError = reject; }); buffer.fileStart = 0; file.appendBuffer(buffer); const mp4Info = await mp4InfoPromise; const aTrack = mp4Info.audioTracks[0]; const aTrackId = aTrack?.id; if (aTrackId != null) file.setExtractionOptions(aTrackId, "audio", { nbSamples: 100 }); return new Promise((resolve) => { file.onSamples = (id, type, samples) => { audioSamples.push( ...samples.map((s) => { // 格式化时长 return { ...s, cts: (s.cts / s.timescale) * 1e6, dts: (s.dts / s.timescale) * 1e6, duration: (s.duration / s.timescale) * 1e6, timescale: 1e6, }; }) ); if (audioSamples.length === aTrack.nb_samples) { resolve([audioSamples, mp4Info.audioTracks[0]]); } }; file.start(); }); } function createFindFrameHelper(audioSamples, config) { let audioFrames = []; let audioDecoder; function reset() { audioFrames = []; audioDecoder = new AudioDecoder({ output: (audioFrame) => { // 假设format是f32-planar const pcm = []; for (let i = 0; i < audioFrame.numberOfChannels; i += 1) { const size = audioFrame.allocationSize({ planeIndex: i }); const buffer = new ArrayBuffer(size); audioFrame.copyTo(buffer, { planeIndex: i }); pcm.push(new Float32Array(buffer)); } audioFrames.push({ pcm, ts: audioFrame.timestamp }); audioFrame.close(); }, error: (err) => { console.error("AudioDecoder错误：", err); }, }); audioDecoder.configure(config); } function decode(time0, time1) { let beginIndex = 0; let endIndex = 0; let findBegin = false; for (let i = 0; i < audioSamples.length; i++) { if (!findBegin && audioSamples[i].cts >= time0) { beginIndex = i; findBegin = true; } if (audioSamples[i].cts >= time1) { endIndex = i; break; } } const samples = audioSamples.slice(beginIndex, endIndex + 1); samples.map((v) => audioDecoder.decode( new EncodedAudioChunk({ type: "key", timestamp: v.cts, duration: v.duration, data: v.data, }) ) ); } async function wait() { return new Promise((resolve) => { if (audioDecoder.decodeQueueSize > 0) { const id = setInterval(() => { if (audioDecoder.decodeQueueSize === 0) { clearInterval(id); resolve(null); } }, 5); } else { resolve(null); } }); } reset(); return async function find(time0, time1) { audioFrames = []; decode(time0, time1); await wait(); return audioFrames; }; } const concatPCM = (audios) => { const len = audios.reduce((prev, cur) => prev + cur.pcm[0].length, 0); const left = new Float32Array(len); const right = new Float32Array(len); let index = 0; for (let i = 0; i < audios.length; i++) { const [l, r] = audios[i].pcm; for (let j = 0; j < l.length; j++) { left[index] = l[j]; right[index] = r[j]; index++; } } return [left, right]; }; function App() { const [max, setMax] = useState(1); const [, update] = useState({}); const [isPlaying, setIsPlaying] = useState(false); const [sampleRate, setSampleRate] = useState(48000); const finder = useRef(); const playSecond = useRef(0); const timeDuration = 0.5 * 1e6; useEffect(() => { if (!finder.current || !isPlaying) { return; } const ctx = new AudioContext(); let startAt = 0; const intervalId = setInterval(() => { playAudio(); }, timeDuration / 1e3); const playAudio = async () => { const t = String(playSecond.current); console.time(t); const audios = await finder.current( 1e6 * playSecond.current, 1e6 * playSecond.current + timeDuration ); console.log(audios); if (playSecond.current >= max) { playSecond.current = 0; } playSecond.current += timeDuration / 1e6; update({}); const audio = concatPCM(audios); const len = audio[0]?.length ?? 0; if (len === 0) return; const buf = ctx.createBuffer(2, len, sampleRate); buf.copyToChannel(audio[0], 0); buf.copyToChannel(audio[1], 1); const source = ctx.createBufferSource(); source.buffer = buf; source.connect(ctx.destination); startAt = Math.max(ctx.currentTime, startAt); source.start(startAt); startAt += buf.duration; console.timeEnd(t); }; return () => { clearInterval(intervalId); }; }, [isPlaying]); return (

{ const file = event.target.files[0]; const [audioSamples, aTrack] = await handleArrayBuffer( await file.arrayBuffer() ); setSampleRate(aTrack.audio.sample_rate); const lastSample = audioSamples[audioSamples.length - 1]; setMax(Math.floor(lastSample.cts / lastSample.timescale)); finder.current = createFindFrameHelper(audioSamples, { codec: aTrack.codec, numberOfChannels: aTrack.audio.channel_count, sampleRate: aTrack.audio.sample_rate, }); }} /> { playSecond.current = v; update({}); }} style={{ width: 200 }} />

); } export default App; ``` 和解析视频帧类似，先通过MP4box.js解封装，接着使用`AudioDecoder`解码出音频帧 AudioDecoder的output输出的是AudioData格式，还需要对音频帧进行处理才是原始的PCM数据 > PCM音频原始数据的存储排列方式中，有planar、packed > > 双通道的planar，格式为：LLLL...RRRR...（L 左声道 R 右声道） > > 双通道的packed，格式为：LRLRLRLR... 每个音频的位深不一样（代码中audioFrame.[format](https://developer.mozilla.org/en-US/docs/Web/API/AudioData/format)=f32-planar，f32表示位深是32，音频样本使用32位浮点数表示，planar表示使用LLLL...RRRR...的格式存储），需要把位深转化成统一的，可以参考[audiodata2pcm](https://github.com/yankeguo/audiodata2pcm)或webav的工具函数[extractPCM4AudioData](https://github.com/bilibili/WebAV/blob/HEAD/packages/av-cliper/src/av-utils.ts#L46)。代码里面默认是f32-planar 得到PCM数据后，就能用[Web audio api](https://developer.mozilla.org/zh-CN/docs/Web/API/Web_Audio_API)播放音频了 > 一个简单而典型的 Web audio 流程如下： > > 1. 创建音频上下文 > 2. 在音频上下文里创建源 — 例如 `