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 后端 API 故障时使用此技能,尤其适用于以下任务:分析日志、跨 Controller、Service 和 Mapper 层追踪请求、定位异常根因、检查 SQL 执行或参数流转,以及生成简洁的诊断结论与修复方案。
- 从
MediaStreamTrackProcessor或captureStream()获取的帧自带timestamp(单位微秒),可直接使用 - 若手动构造帧(如 Canvas 绘制后转 VideoFrame),需用
new VideoFrame(bitmap, { timestamp: performance.now() * 1000 })补全 - 确保帧按时间递增顺序输入,避免跳帧或重复送同一帧
接收并暂存 EncodedVideoChunk
编码输出是零散的 EncodedVideoChunk,不是完整文件,需自行收集与管理:
-
output回调中拿到 chunk 后,用chunk.copyTo(new Uint8Array(chunk.byteLength))提取二进制数据 - 注意区分 key frame(
type === 'key')和 delta frame,这对后续封装或流式传输很关键 - 别在回调里做耗时操作(如立即写入 IndexedDB),建议推入队列由独立任务处理
结束编码要 flush 并关闭
编码器内部有缓冲,不显式终止会导致末尾几帧丢失:
- 所有帧送完后,调用
encoder.flush()强制输出剩余 chunk - 收到最后一批 output 后,调用
encoder.close()释放编解码器资源 - 未 close 可能导致后续创建新 encoder 失败,或触发内存警告
大量免费API接口:立即使用
涵盖生活服务API、金融科技API、企业工商API、等相关的API接口服务。免费API接口可安全、合规地连接上下游,为数据API应用能力赋能!










