如何通过WebCodecs API播放无容器原始.h264流并提取帧？

核心逻辑梳理 #

原始H.264文件由NAL单元构成，WebCodecs的EncodedVideoChunk要求输入带正确时间戳、帧类型的NAL单元数据。针对avc1.64001e（对应H.264 High Profile Level 3.0）解码器，必须先传入SPS/PPS参数集NAL单元才能完成初始化，后续才能解码帧数据。

步骤1：解析原始H.264的NAL单元 #

原始H.264通过起始码（0x000001或0x00000001）分隔NAL单元，需从流式数据中逐个提取：

• 分段读取文件流，将新数据合并到缓冲区
• 在缓冲区中查找起始码，分割出完整的NAL单元
• 通过NAL单元首字节的低5位识别类型：SPS（类型7）、PPS（类型8）、I帧（类型5）、P帧（类型1）等

步骤2：构造合规的EncodedVideoChunk #

结合已知的分辨率、帧率、帧数，按以下规则生成Chunk：

1. 参数集Chunk：
   SPS和PPS是解码器初始化的必需数据，需优先传入，类型设为"key"，时间戳设为0：

   // 假设spsData、ppsData为提取出的Uint8Array格式参数集
   const initChunk = new EncodedVideoChunk({
     type: "key",
     timestamp: 0,
     data: new Uint8Array([...spsData, ...ppsData]) // 合并SPS与PPS
   });
   decoder.decode(initChunk);
   

2. 帧数据Chunk：

   • 时间戳计算：单帧时长为1000000 / 帧率微秒，第n帧的时间戳为(n-1) * 1000000 / 帧率
   • I帧的type设为"key"，P/B帧设为"delta"
   • 直接将单帧NAL单元的Uint8Array作为data传入：

     // 示例：处理第i帧的NAL单元数据frameData
     const frameTimestamp = (i - 1) * 1000000 / fps;
     const chunk = new EncodedVideoChunk({
       type: isKeyFrame ? "key" : "delta",
       timestamp: frameTimestamp,
       data: frameData
     });
     decoder.decode(chunk);
     

步骤3：流式处理GB级大文件 #

无需一次性加载全部数据，通过流式读取+缓冲区分割的方式处理：

// 初始化解码器
const decoder = new VideoDecoder({
  output: handleFrameOutput, // 处理解码后的VideoFrame
  error: (e) => console.error("解码错误:", e)
});

// 配置解码器，传入已知参数
decoder.configure({
  codec: "avc1.64001e",
  codedWidth: 1920, // 替换为已知宽度
  codedHeight: 1080, // 替换为已知高度
});

let buffer = new Uint8Array(0);
const reader = readableStream.getReader();
let frameIndex = 0;
const fps = 30; // 替换为已知帧率

// 流式处理函数
async function processStream() {
  while (true) {
    const { done, value } = await reader.read();
    if (done) break;

    // 合并新读取的数据到缓冲区
    const newBuffer = new Uint8Array(buffer.length + value.length);
    newBuffer.set(buffer);
    newBuffer.set(value, buffer.length);
    buffer = newBuffer;

    // 循环分割NAL单元
    let offset = 0;
    while (offset < buffer.length - 3) {
      // 识别起始码长度（3字节或4字节）
      let startCodeLength = 3;
      if (buffer[offset] === 0 && buffer[offset+1] === 0 && buffer[offset+2] === 0 && buffer[offset+3] === 1) {
        startCodeLength = 4;
      } else if (!(buffer[offset] === 0 && buffer[offset+1] === 0 && buffer[offset+2] === 1)) {
        offset++;
        continue;
      }

      const startPos = offset + startCodeLength;
      // 查找下一个起始码的位置
      let nextStartPos = buffer.length;
      for (let i = startPos; i < buffer.length - 3; i++) {
        if ((buffer[i] === 0 && buffer[i+1] === 0 && buffer[i+2] === 1) ||
            (buffer[i] === 0 && buffer[i+1] === 0 && buffer[i+2] === 0 && buffer[i+3] === 1)) {
          nextStartPos = i;
          break;
        }
      }

      // 提取NAL单元数据
      const nalData = buffer.slice(startPos, nextStartPos);
      if (nalData.length === 0) {
        offset = nextStartPos;
        continue;
      }

      // 识别NAL单元类型
      const nalType = nalData[0] & 0x1F;
      let chunkType = "delta";
      if (nalType === 5 || nalType === 7 || nalType === 8) {
        chunkType = "key";
      }

      // 解码参数集或帧数据
      if (nalType === 7 || nalType === 8) {
        const initChunk = new EncodedVideoChunk({
          type: "key",
          timestamp: 0,
          data: nalData
        });
        decoder.decode(initChunk);
      } else if (nalType === 1 || nalType === 5) {
        const timestamp = frameIndex * 1000000 / fps;
        const chunk = new EncodedVideoChunk({
          type: chunkType,
          timestamp: timestamp,
          data: nalData
        });
        decoder.decode(chunk);
        frameIndex++;
      }

      // 更新缓冲区与偏移
      buffer = buffer.slice(nextStartPos);
      offset = 0;
    }
  }
}

// 处理解码后的帧（渲染/提取特定帧）
function handleFrameOutput(frame) {
  // 示例：将帧渲染到canvas
  const canvas = document.getElementById("video-canvas");
  const ctx = canvas.getContext("2d");
  ctx.drawImage(frame, 0, 0);
  
  // 提取特定帧示例：保存第100帧
  if (frameIndex === 100) {
    const blob = await frame.convertToBlob();
    // 处理blob（下载/存储）
  }
  
  frame.close(); // 必须释放帧资源，避免内存泄漏
}

// 启动流式处理
processStream();

跳过重新封装的关键 #

无需借助mp4box重新封装，核心是直接解析原始H.264的NAL单元：

• 必须优先传入SPS/PPS参数集，否则解码器无法初始化
• 帧类型的NAL单元直接封装为EncodedVideoChunk，参数集可单独或合并传入
• 严格按帧率计算时间戳，保证播放时序正确

注意事项 #

• 处理大文件时，及时裁剪缓冲区，避免内存溢出
• 部分原始H.264文件可能存在起始码不规范的情况，需额外处理边界场景
• 解码完成后调用decoder.close()释放资源

内容的提问来源于stack exchange，提问作者FrostKiwi