前端视频开发之初始化MSE SourceBuffer时正确传参——H264 codecs生成

本片文章主要是对H264格式的视频源进行介绍以及生成的codecs只考虑视频源不考虑音频

一、场景介绍

使用MSE进行视频播放时，首先需要创建一个sourceBuffer用于推流，例如

const mediaSource = new MediaSource();
const sourceBuffer = mediaSource.addSourceBuffer('video/mp4; codecs="avc1.64001f"');

其中，这个codecs="avc1.64001f"是本文的主角，本文主要介绍codecs的含义以及如何从二进制中生成codecs

二、codecs介绍

以avc1.64001f为例

*     avc1：指定视频编码器
*     64：表示 profile_idc，即 H.264 的编码配置文件。
*     00：表示 profile_compatibility，用于指示编码配置的兼容性。
*     20：表示 level_idc，即 H.264 的编码级别。

三、codecs提取

H264 codecs信息可以从MP4的avcC Box中提取，avcC结构如下

avcC (Configuration Box)
  + configurationVersion (1 byte)
  + AVCProfileIndication (1 byte)       // profile_idc
  + profile_compatibility (1 byte)      // profile_compatibility
  + AVCLevelIndication (1 byte)         // level_idc
  + SPS (Sequence Parameter Set)
  + PPS (Picture Parameter Set)

四、JS代码演示

function getCodecs(avcCData:Uint8Array){
    const profileIdc = Number(avcCData[1]).toString(16).padStart(2,'0')
    const profileCompatibility = Number(avcCData[2]).toString(16).padStart(2,'0')
    const levelIdc = Number(avcCData[3]).toString(16).padStart(2,'0')
    return 'avc1.' + profileIdc + profileCompatibility + levelIdc
}