# WebCodecs 编码字符串(codec)介绍

笔者的 Web 音视频系列文章

视频播放经常会看到这样的字符串 video/mp4; codecs="avc1.4d002a",WebCodecs 编解码器初始化也需要配置 codec 参数 (opens new window),本文尝试简单介绍编码字符串含义。

视频编码分许多种类,每个种类还分多个版本,不同种类、版本对应的编解码算法、支持的能力(分辨率上限、色深等等)不同。

所以编码字符串(比如 avc1.4d002a)就是规格符号,表示该文件是采用哪种规格生产出来的如果要正确解码该文件的数据,就需要使用同样规则符号去初始化一个解码器。


最常见的 AVC 编码字符串模式是 avc1[.PPCCLL] (opens new window),说明及翻译如下。

PPCCLL are six hexadecimal digits specifying the profile number (PP), constraint set flags (CC), and level (LL). See AVC profiles for the possible values of PP. PPCCLL 是六个十六进制数字,指定配置文件编号 ( PP )、约束集标志 ( CC ) 和级别 ( LL )。请参阅 AVC 配置文件以了解 PP 的可能值。

The constraint set flags byte is comprised of one-bit Boolean flags, with the most significant bit being referred to as flag 0 (or constraint_set0_flag, in some resources), and each successive bit being numbered one higher. Currently, only flags 0 through 2 are used; the other five bits must be zero. The meanings of the flags vary depending on the profile being used. 约束集标志字节由一位布尔标志组成,最高有效位称为标志 0(或在某些资源中为 constraint_set0_flag ),并且每个连续位的编号较高。目前,仅使用标志 0 到 2;其他五位必须为零。标志的含义根据所使用的配置文件而有所不同。

The level is a fixed-point number, so a value of 14 (decimal 20) means level 2.0 while a value of 3D (decimal 61) means level 6.1. Generally speaking, the higher the level number, the more bandwidth the stream will use and the higher the maximum video dimensions are supported. Level 是定点数,因此值 14 (十进制 20)表示级别 2.0,而值 3D (十进制 61)表示级别 6.1。一般来说,级别数越高,流将使用的带宽就越多,支持的最大视频尺寸就越高。

avc1.4d002a 为例

  1. avc1 表示采用 AVC (也称 H.264)来编码(压缩)图像数据

  2. 4d00 的含义可从 avc1[.PPCCLL] (opens new window) 后面查询到

  3. 2a Level 值对应 4.2(2a 转 10 进制等于 42,再除以 10 等于 4.2),它对视频参数的限制参考 wiki (opens new window)

    As the term is used in the standard, a "level" is a specified set of constraints that indicate a degree of required decoder performance for a profile. For example, a level of support within a profile specifies the maximum picture resolution, frame rate, and bit rate that a decoder may use. A decoder that conforms to a given level must be able to decode all bitstreams encoded for that level and all lower levels. 在标准中,"Level"是指一组指定的约束条件,用于指示配置文件所需的解码器性能水平。例如,在一个配置文件中,支持的级别指定了解码器可以使用的最大图像分辨率、帧率和比特率。符合特定级别的解码器必须能够解码该级别及所有较低级别编码器输出的数据。

从以上分析可以 avc1.4d002a 支持的最大分辨率是 2048×1080,如果使用此规格初始化编码器,试图编码超过最大分辨率的图像就会抛出错误;
假设要编码生成 4k 视频,就需要选择一个合适的编码字符串去初始化编码器,比如 avc1.640034


其他编码格式(如av1)虽然字符串模式不完全一致,但可用相同的方法进行分析。

# 附录

💗 博主正处于裸辞待业状态,欢迎 商务合作 💗

相关文章

WebAV SDK(Web 视频编辑)V1 发布

前言 WebAV 是基于 WebCodecs 构建的 SDK,用于在 Web 平台上创建/编辑视频文件。 V1 对项目来说是里程碑版本,意味着 API 已经稳定,且功能的稳定性也经过了长时间的考验,可用于生产环境。 我在 20 年加入 B 站,开始接触 Web 音视频相关的知识(Web 播放器), WebCodecs API 在 21 年发布; 我预期 WebCode ...

纯 Web 视频剪辑

前言 WebCodecs API 为 Web 平台提供了音视频编解码能力,使得在 Web 平台(网页、Electron)上实现高效、专业的视频剪辑成品成为可能。 读者可阅读笔者的入门系列文章获取更详细的信息,或直接使用 WebAV 开源项目在浏览器中创建/编辑音视频文件。 背景 & 方案 为了解决主播投稿场景中,需要对直播视频进行简单编辑的诉求, ...

WebCodecs 性能表现及优化思路

笔者开源 WebAV 已经一年半,还写了系列文章帮助初学者入门 Web 音视频。 之前一直隐隐担心在 Web 平台处理音视频与 Native APP 会有明显性能差距,因为 WebCodecs API 毕竟被浏览器代理了一层,且一些数据处理需要 js 配合,不确定有多大的性能损耗。 相信刚接触 WebCodecs 的读者也非常关心它的性能表现如何。 ...

WebCodecs 开启 Web 音视频新篇章

你可以先略过下面的无聊文字,体验一番 WebCodecs 的实力 WebCodecs 是什么 WebCodecs 是一个 Web 规范,21 年 9 月份在 Chrome 94 中实现 WebCodecs 提供访问编解码能力的接口,可精细控制音视频数据 Web 音视频 API 存在什么问题 音视频技术在 Web 平台上的应用非常广泛,已有许多 Web ...

【译】WebCodecs 说明

本文翻译至 WebCodecs Explainer 问题与动机 已有许多 Web API 在内部使用媒体编解码器来支持特定用途,比如: HTMLMediaElement and Media Source Extensions WebAudio (decodeAudioData) MediaRecorder WebRTC 但是还没有一种通用的方式来灵活 ...

Web 音视频(六)图像素材处理

Web 音视频目录 前序章节介绍了如何在浏览器中解析、创建视频,以及给视频添加一些自定义素材(图片、音频、文字...); 本章介绍如何给图像素材加特效、加动画,实现转场、移动水印、图像滤镜美化等功能。 你可以跳过原理介绍,直接查看 WebAV 示例 素材动画 在视频制作中实现动画跟其他场景略有不同,因为视频 ...

Web 音视频(七)中期回顾

Web 音视频目录 个人回顾 本系列更新至今,持续了一个月时间,内容可以总结为音频、视频数据的 解析 - 处理 - 合成,在浏览器中比较粗粒度地实现音视频编辑的主要环节,差不多是把 WebAV 项目的原理讲完了。 讲解的知识非常浅,目标读者是准备在 Web 平台进行音视频开发的新手; 这是我第一次进行高频率技术写作,将一 ...

Web 音视频(五)在浏览器中合成视频

Web 音视频目录 经过前序章节的介绍,读者能大致了解如何在播放器中解析、创建视频; 本章介绍何在浏览器中合成视频,这是视频编辑中最基础的功能。 你可以跳过原理介绍,直接查看 WebAV 合成视频示例 在视频上叠加素材 常见的素材有:视频、音频、图片、文字 [在浏览器中创建视频](/posts/2 ...

Web 音视频(四)在浏览器中处理音频

Web 音视频目录 为什么单独介绍音频处理? 网络上缺乏音频处理的资料,绝大多数示例都是针对视频而略过音频,很多人在网上寻找音频处理的示例 对前端开发者来说,音频处理相对视频略微复杂一些 所以,本文专门针对音频数据,汇总讲解采集-处理-编码-封装全过程,帮助初学者入门。 ![audio-data-flow](./audio ...

Web 音视频(三)在浏览器中创建视频

Web 音视频目录 音视频工作流程 在 WebCodecs 之前,由于编解码能力的缺失,几乎无法在纯浏览器中编辑、创建视频。 WebCodecs 补齐了编解码能力,相当于在浏览器中提供了视频创作能力。 预计 WebCodecs 将会像 HTML5 技术(Video、Audio、MSE...)一样 ...