Web Codecs 编码需分步控制原始帧→压缩块→封装输出,关键在正确配置、按时送帧、及时收 chunk、主动释放资源:先用 isConfigSupported() 检查硬件支持并设 hardwareAcceleration,输入 VideoFrame 需带准确递增时间戳,output 回调中提取 EncodedVideoChunk 二进制数据并区分关键帧,最后调用 flush() 和 close() 确保完整输出与资源释放。

Web Codecs 的编码不是“调个 API 就出 MP4”,而是分步控制原始帧→压缩块→封装输出的底层流程。关键在正确配置、按时送帧、及时收 chunk、主动释放资源。
准备编码器并确认硬件支持
先用 VideoEncoder.isConfigSupported() 检查目标格式是否被支持,尤其关注硬件加速能力:
- H.264(如
avc1.42E01E)和 VP9 在 Chrome/Edge 中普遍支持硬件编码;AV1 支持度正在提升但需实测 - 配置中显式设
hardwareAcceleration: 'prefer-hardware',浏览器会自动选用 GPU 或专用编解码单元(若可用) - 必须提供
width、height(偶数)、bitrate、framerate等基础参数,缺一不可
输入 VideoFrame 要带准确时间戳
编码器依赖时间信息生成 GOP 和同步元数据,乱序或缺失 timestamp 会导致花屏、音画不同步:
在 Java 中初始化和管理阿里云 SDK客户端。包括单例模式、线程安全、endpoint 与 region 配置、VPC 终端节点、同步与异步等。
- 从
MediaStreamTrackProcessor或captureStream()获取的帧自带timestamp(单位微秒),可直接使用 - 若手动构造帧(如 Canvas 绘制后转 VideoFrame),需用
new VideoFrame(bitmap, { timestamp: performance.now() * 1000 })补全 - 确保帧按时间递增顺序输入,避免跳帧或重复送同一帧
接收并暂存 EncodedVideoChunk
编码输出是零散的 EncodedVideoChunk,不是完整文件,需自行收集与管理:
立即学习“Java免费学习笔记(深入)”;
-
output回调中拿到 chunk 后,用chunk.copyTo(new Uint8Array(chunk.byteLength))提取二进制数据 - 注意区分 key frame(
type === 'key')和 delta frame,这对后续封装或流式传输很关键 - 别在回调里做耗时操作(如立即写入 IndexedDB),建议推入队列由独立任务处理
结束编码要 flush 并关闭
编码器内部有缓冲,不显式终止会导致末尾几帧丢失:
- 所有帧送完后,调用
encoder.flush()强制输出剩余 chunk - 收到最后一批 output 后,调用
encoder.close()释放编解码器资源 - 未 close 可能导致后续创建新 encoder 失败,或触发内存警告

















