React-Native中H264流ArrayBuffer的JS解码方案求助

你的核心问题在于H264裸流没有标准容器结构（比如MP4、FLV），react-native-video无法直接识别裸流，所以之前转Blob的方法失效。以下是几个可行的JS/库实现方案：

1. 使用专门处理H264裸流的RN库 #

直接用react-native-h264-player这类库，它原生支持喂入H264 ArrayBuffer进行解码播放，无需转格式：

import H264Player from 'react-native-h264-player';

// 假设data是你的H264 ArrayBuffer
<H264Player
  buffer={data}
  style={{ width: 300, height: 200 }}
  fps={30} // 根据你的流帧率调整
/>

2. 在JS端将H264裸流封装为MP4容器 #

用mp4box.js把H264帧打包成标准MP4文件，再交给react-native-video播放。注意需要先提取H264流中的SPS/PPS参数（裸流开头通常包含这些信息）：

import MP4Box from 'mp4box';

function wrapH264ToMP4(h264Buffer) {
  const mp4File = MP4Box.createFile();
  // 替换为你的H264实际编码参数（codec、分辨率等）
  const track = mp4File.addTrack({
    type: 'avc',
    codec: 'avc1.42E01E',
    width: 1920,
    height: 1080,
  });

  // 写入帧数据，需同步时间戳（示例为30fps）
  mp4File.addSample(track.id, h264Buffer, {
    duration: 1000 / 30,
    dts: 0,
    pts: 0,
    is_sync: true, // 标记为关键帧（根据实际帧类型调整）
  });

  // 生成MP4 Blob
  const buffers = [];
  mp4File.onSegment = (_, buffer) => buffers.push(buffer);
  mp4File.flush();
  
  return new Blob(buffers, { type: 'video/mp4' });
}

// 使用示例
const mp4Blob = wrapH264ToMP4(data);
const videoUrl = URL.createObjectURL(mp4Blob);

3. 写入本地文件（适合大流量/实时流场景） #

如果内存占用过高（比如长时间实时流），可以用react-native-fs将H264流逐帧写入本地MP4文件，再让react-native-video播放本地路径：

import RNFS from 'react-native-fs';
import MP4Box from 'mp4box';

async function writeH264ToLocalFile(h264Buffer) {
  const filePath = `${RNFS.DocumentDirectoryPath}/stream.mp4`;
  const mp4File = MP4Box.createFile();
  const track = mp4File.addTrack({
    type: 'avc',
    codec: 'avc1.42E01E',
    width: 1920,
    height: 1080,
  });

  mp4File.addSample(track.id, h264Buffer, {
    duration: 1000 / 30,
    dts: 0,
    pts: 0,
    is_sync: true,
  });

  // 生成MP4分段并追加到本地文件
  mp4File.onSegment = async (_, buffer) => {
    await RNFS.appendFile(filePath, buffer.toString('base64'), 'base64');
  };
  mp4File.flush();

  return filePath;
}

// 播放本地文件
<Video source={{ uri: `file://${filePath}` }} />

关键注意事项 #

• 必须确保H264流包含SPS/PPS参数，否则解码器无法初始化；如果流中没有，需要单独传入这些参数给播放器/封装库
• 实时流场景要严格同步帧的DTS/PTS时间戳，避免播放卡顿、跳帧
• 不同设备对H264的profile/level支持有差异，需确保编码参数与播放器兼容

内容的提问来源于stack exchange，提问作者Stéphane R.