React Native中如何将UDP接收的MPEG-TS数据转为可播放视频流

核心思路 #

要解决这个问题，关键完成MPEG-TS流解析、格式转换和React Native播放层对接三个环节，由于纯JS处理性能不足，建议结合原生模块实现核心逻辑。

具体实现步骤 #

1. 处理UDP数据的拼接与缓存

UDP是无连接协议，存在包乱序、丢包问题，必须先做预处理：

• 维护缓存队列，根据MPEG-TS包头部的包序号（TS包前4字节包含该字段）对UDP数据包排序，保证TS流的连续性；
• 设置合理的超时机制，若某序号的包超时未收到，直接跳过（GoPro UDP流通常不支持重传，只能容错处理）；
• 将拼接完整的TS流片段喂给解析器，而非单独处理单个UDP包（MPEG-TS的PES包可能跨多个UDP包）。

2. 原生端解析MPEG-TS并提取视频裸流

React Native纯JS解析MPEG-TS性能不足，需在iOS/Android原生层实现解析：

• iOS端：
  • 用GCDAsyncUdpSocket接收UDP数据，完成拼接缓存；
  • 借助第三方库（如TSLib）或AVAssetReader解析MPEG-TS，提取出H.264编码的NAL单元（GoPro输出的通常为H.264）；
  • 若解析出的是AVCC格式（带长度前缀），需转换为WebRTC兼容的Annex B格式（带0x000001/0x00000001起始码）。
• Android端：
  • 用DatagramSocket接收UDP数据并拼接；
  • 用MediaExtractor加载TS流，分离视频轨道，提取原始H.264数据；
  • 同样完成AVCC到Annex B的格式转换（若需要）。

3. 对接播放层（WebRTC或原生播放器）

有两种主流方案可选：

• 方案一：WebRTC实时播放
  • 原生端创建RTCVideoSource（基于react-native-webrtc库），将解析后的H.264帧封装为RTCVideoFrame并注入到source中；
  • 基于source创建RTCVideoTrack，通过React Native桥接将track传递到JS层；
  • JS层将track添加到MediaStream，用RTCView组件渲染实时预览。
• 方案二：原生播放器直接播放
  • 若无需WebRTC的互动能力，可使用react-native-video组件，直接配置UDP流地址（如udp://0.0.0.0:8554），但需确认播放器底层（iOSAVPlayer/AndroidExoPlayer）支持MPEG-TS UDP流；
  • 也可在原生端将TS流转换为HLS切片，再喂给播放器，但实时性会有所下降。

4. 性能优化要点

• 将UDP接收、TS解析、格式转换逻辑放在原生端的后台线程处理，避免阻塞UI线程；
• 控制缓存长度，平衡实时性与播放连续性（缓存过多会增加延迟，过少易出现卡顿）；
• 优先使用硬件解码/编码能力，减少CPU占用。

内容的提问来源于stack exchange，提问作者Ha Doan Ngoc