W3C: 媒体制作 API (3)

来源：SMPTE 内容整理：李昊勇 主讲人：Chris Cunningham 这篇文章主要介绍了 WebCodecs 一个大概实现及其可设置选择的一些参数。

W3C: 媒体制作 API (1)

W3C: 媒体制作 API (2)

目录

• 开场
• WebCodecs
• Video decoding flow
• WebCodecs实战：解码
• WebCodecs实战：音频解码渲染
• WebCodecs实战：编码
• WebCodecs VideoEncoderConfig

开场

来自 WebCodecs 的技术主管 Chris Cunningham 将首先介绍一些 WebCodecs 的 API，并会介绍一些关于视频编码器的设置。

WebCodecs

类似于其他已有的编解码 API，如 ffmpeg，AVFoundation，MediaCodec 等，WebCodecs 也是一个类似的编解码 API。这些库都已经很多年作为浏览器的依赖，并支持了很多视频和 WebRTC，Chris 再把这些方法都统一起来并直接给到 Javascript 里。

Video decoding flow

视频解码流框图

Chris 展示了一个典型的视频解码流框图，其中大的蓝色的框就是 WebCodecs，这个图展示了一些已经编码的帧从网络或者内存中交付给解码 API，并把解码后的帧交付给画布或者媒体流的过程。讲者接着展示了一个小 demo 来实现这部分的内容。

WebCodecs实战：解码

首先 Chris 展示了一个用 WebCodecs 解码并输出到画布上的例子。

WebCodecs 解码并输出到画布上的例子 1

其中 mp4box 和 MP4Demuxer 是 MP4 格式文件的 demuxer，它会把 MP4 文件打开，并把其中的媒体轨输出给外界，并通过 getVideoTrackInfo 来获取视频的宽高以及一些编解码参数信息，并设置为画布的宽高。并通过 paintFrame 函数把一帧内容显示到画布上。decoder 解码类需要两种回调，一个是 paintFrame 函数，另一个则是报错。config 用于设置解码器的一些参数，这些参数都来自于 getVideoTrackInfo 返回的参数信息，此外还需要判断一些这些参数是否可以支持。

WebCodecs 解码并输出到画布上的例子 2

WebCodecs实战：音频解码渲染

Chris 展示了一个类似的 demo，是一个与视频同步的音频播放，它使用 AudioDecoder 解码以及使用 AudioWorklet 而不是画布进行渲染。

Chris 展示了 AudioDecoder 的接口，与视频解码接口非常相似。不是输出一个 VideoFrame，AudioDecoder 会输出一个 AudioData 对象，它只是一个 PCM 样本的缓冲区。Flush 将强制编解码器刷新所有已完成工作的 pipe。因为它将承认任何可能已经准备好但还没有完全进入输出回调的输出。

另一个 Chris 没有提到的是 reset。reset 将完全重置编解码器。它会停止所有活动中的任务和所有排队中的任务，以及活动配置。

WebCodecs实战：编码

对于视频编码来说也是类似的，只是把整个过程反过来，然后把 decode 替换成 encode 就可以了。

附上演讲视频：http://mpvideo.qpic.cn/0bc3qyabqaaakmanxxlukfrfbbwddcdaagaa.f10002.mp4?dis_k=00eb7c885f252c3344a0f022f742879d&dis_t=1653459497&vid=wxv_2386176564796686336&format_id=10002&support_redirect=0&mmversion=false

WebCodecs VideoEncoderConfig

VideoEncoderConfig

WebCodecs 不会像 RTC 一样默认情况牺牲很多视频质量来换取延迟，而是默认使用 VBR 模式，并且也允许 B 帧等存在，不过也可以通过设置这些参数来最大化延迟。当开始编码时，输出的返回也会输出一个字典类，其中就是这些视频编码的参数设置，这对于解码来说非常重要。

Chris 展示了一个 VideoEncoderConfig 字典，首先就是选用的编解码器，如 H.264，VP9 等，可以在 WebCodecs 上注册的所有编解码器中选择。其次就是视频的宽高，就是编码的视频的宽度和高度。然后就是一些可选参数，如显示的宽高，这是由于在有些需求场景下，主要是 RTC 一类，可能实际渲染显示的视频宽高与实际视频宽高不同。下一项就是码率，这项的默认值是实现定义的，比如 Chrome 中的 Libvpx 定义的，因此 Chris 更推荐自己设置这一项内容。下一项 Chris 也推荐自行设置，就是帧率，这项可以是模糊的，像常见的可变帧率视频。但是这项其实主要是为了指导码率控制器来更好地适应码率。BitrateMode，即码率模式，默认情况是可变模式，也可以选择为固定模式。HardwareAcceleration，可以设置为"no-perference"或者"prefer hardware"，这一值其实在浏览器中也可能只是一个仅供参考的值。如果出现了选择"prefer hardware"然而不具备硬件条件的情况下，你可以使用"isConfigSupported"来提前检查这些设置是否有效。ScalabilityMode，是一个字符串，可扩展性模式。这是一个字符串，用于标识可扩展编解码器的分层模式，通常这可能只有一层。但是这对于 RTC 开发者很重要，此处链接的规范 WebRTC SVC 在可扩展性分层的图表和模式中有更多详细信息。LatencyMode，默认来说值是"quality"，而另一个可选值就是"real-time"，取决于视频实际的使用场景不同，如交互式视频等类型就更需要实时性。

附上演讲视频：

http://mpvideo.qpic.cn/0bc3nqabiaaapyanaltujjrfa3gdcrwaafaa.f10002.mp4?dis_k=d940799431d4b761008570eb5fb25a32&dis_t=1653459497&vid=wxv_2386177589817475074&format_id=10002&support_redirect=0&mmversion=false