React Native(Expo)中如何将UDP接收的Raw RTP字节流转为视频显示？

1. 解析RTP数据包 #

Raw RTP字节流首先要剥离头部，提取出视频编码的有效负载。RTP基础头固定为12字节，解析时直接跳过这部分即可拿到负载数据：

// 从原始UDP数据中解析RTP负载
function extractRtpPayload(rawUdpData) {
  const RTP_HEADER_LENGTH = 12;
  if (rawUdpData.length < RTP_HEADER_LENGTH) return null;
  
  // 可选：提取负载类型、序列号等信息用于后续校验
  const payloadType = rawUdpData[1] & 0x7F;
  const sequenceNumber = (rawUdpData[2] << 8) | rawUdpData[3];
  
  // 返回核心负载数据
  return {
    payload: rawUdpData.slice(RTP_HEADER_LENGTH),
    payloadType,
    sequenceNumber
  };
}

2. 处理视频编码负载（以H.264为例） #

多数RTP视频流采用H.264编码，其RTP封装分两种情况，需要针对性处理：

单一NAL单元模式 #

如果负载的第一个字节Type字段（低5位）不是28（FU-A）或29（FU-B），说明这是完整的NAL单元，可直接用于解码。

FU-A分片模式 #

如果是分片传输的NAL单元（Type=28），需要将多个分片重组为完整单元：

// 重组H.264 FU-A分片
function assembleFuAFragments(fragmentPayload) {
  const fuIndicator = fragmentPayload[0];
  const fuHeader = fragmentPayload[1];
  
  const isStartFragment = (fuHeader & 0x80) !== 0;
  const isEndFragment = (fuHeader & 0x40) !== 0;
  // 还原原始NAL单元类型
  const originalNalType = fuHeader & 0x1F;
  // 重构NAL单元头部
  const newNalHeader = (fuIndicator & 0xE0) | originalNalType;
  
  return {
    nalHeader: newNalHeader,
    nalData: fragmentPayload.slice(2),
    isStart: isStartFragment,
    isEnd: isEndFragment
  };
}

需要维护一个缓冲区，收集分片数据直到收到结束标记，再输出完整的NAL单元。

3. 在Expo中渲染视频流 #

Expo原生组件不直接支持实时RTP流解码，推荐以下两种实现方案：

方案一：使用react-native-webrtc（需Expo预构建） #

WebRTC原生支持媒体流处理，可将解析后的H.264数据注入到MediaStream中渲染：

1. 先执行Expo预构建：

npx expo prebuild

2. 安装依赖：

npm install react-native-webrtc

3. 注入数据并渲染：

import { RTCView, MediaStream, MediaStreamTrack } from 'react-native-webrtc';

// 创建空的视频媒体流
const videoTrack = MediaStreamTrack.createFromStaticMedia({ video: true });
const mediaStream = new MediaStream([videoTrack]);

// 将重组后的NAL单元写入流（需转换为Annex B格式，添加起始码）
function pushNalUnitToStream(nalUnit) {
  const startCode = new Uint8Array([0x00, 0x00, 0x00, 0x01]);
  const fullNal = new Uint8Array([...startCode, ...nalUnit]);
  // 通过WebRTC底层API注入数据，具体实现需参考MediaStreamTrack的扩展接口
}

// 渲染组件
function RtpVideoPlayer() {
  return (
    <RTCView
      streamURL={mediaStream.toURL()}
      style={{ flex: 1, backgroundColor: '#000' }}
    />
  );
}

方案二：自定义原生模块 #

如果WebRTC不符合需求，可编写原生模块：

• iOS端：用AVFoundation的AVAssetWriter或VTDecompressionSession解码H.264，通过UIView渲染
• Android端：用MediaCodec解码H.264，通过SurfaceView渲染
  然后通过Expo的原生模块桥接，将解码后的视频帧传递给RN层显示。

4. 关键优化点 #

• 乱序处理：根据RTP序列号对数据包重新排序，避免帧错乱
• 时间戳同步：利用RTP时间戳控制帧播放节奏，保证视频流畅度
• 线程隔离：UDP接收、RTP解析、视频解码逻辑放在后台线程执行，避免阻塞JS主线程

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