js 构造 H264 自定义 SEI 信息

Question

Webcodecs 支持了 Web 编码，加上开源的 muxer（如 mp4box.js）就能使用原生 js 封装视频文件了，而在直播场景经常需要在视频流中插入自定义 SEI，开放对视频流的操作能力是 Webcodecs 的动机之一（WebRTC 做不到），以下是为了 验证 自定义 SEI 确实可行，仅是学习笔记，若想在生产使用，需完成标注未完成的任务。

NALU 组成结构

SEI 是一种特殊的 NALU

SEI 组成结构

代码实现

function buildStrSEINALU (str) {
  const txtEncoder = new TextEncoder()
  let uuidStr = ''
  for (let i = 0; i < 16; i++) {
    uuidStr += ((Math.random() * 16) | 0).toString(16)
  }
  const uuidBuf = txtEncoder.encode(uuidStr)
  const strBuf = txtEncoder.encode(str)
  const seiPayloadSize = uuidBuf.byteLength + strBuf.byteLength

  const seiBuf = new Uint8Array([
    // annexb start code；1. 不支持 avcC
    0, 0, 0, 1,
    // naul header sei type
    6,
    // payload type, User Data Unregistered
    5,
    // payload size；2. size 可能超过 255，需要多个字节表示（小端序)
    seiPayloadSize,
    // payload uuid；3. uuidBuf、strBuf 防竞争字节 检查替换
    ...uuidBuf,
    // payload content
    ...strBuf,
    // end flag
    0x80
  ])

  return seiBuf
}

// 使用示例
const encoder = new VideoEncoder({
  output: (chunk) => {
    let buf = new ArrayBuffer(chunk.byteLength)
    chunk.copyTo(buf)
    // 连接 H264 裸流数据与 SEI
    buf = concatAB(buf, buildStrSEINalu('hello Webcodecs'))
    // 查看 mp4box.js 文档
    outputFile.addSample(vTrackId, buf, opts)
  }
})

未完成的任务

1. 支持 avcC
2. size 可能超过 255，需要多个字节表示（小端序)
3. uuidBuf、strBuf 防竞争字节 检查替换
4. 支持 HEVC

参考

• 如何理解和使用 SEI（媒体补充增强信息）？
• AnnexB 和 avcC
• VideoEncoder MDN
• Webcodec + mp4box demo
• Concatenates two ArrayBuffers
• mp4box.js