如何在React Native应用中播放WebRTC H.265(HEVC)视频流？

背景 #

我正在开发一款React Native应用，用于播放CCTV实时监控画面，遇到了核心问题：

• react-native-webrtc的RTCView不支持H.265解码，无法直接播放WebRTC流；
• 试过支持H.265的react-native-vlc-media-player，但它不兼容WebRTC流地址；
• 目前已通过.NET网关将摄像头的RTSP流转成WebRTC流，这个方案在Safari的React.js环境能正常运行，但RN端行不通。

可行解决方案整理 #

1. 寻找支持WebRTC H.265的第三方RN库 #

官方react-native-webrtc确实未做H.265支持，但可以尝试找社区维护的衍生包：

• 在npm或GitHub上搜索带h265/hevc关键词的react-native-webrtc分支，部分开发者会自行编译开启H.265支持的libwebrtc并封装成RN库；
• 优先选择更新频繁、issue解决率高的库，避免后续维护风险。

2. 自定义原生模块（最可控方案） #

分别针对Android和iOS实现原生播放逻辑，再封装为RN可调用的组件：

Android端（Kotlin/Java）

• 编译带H.265支持的libwebrtc：libwebrtc本身支持H.265，只是默认编译未开启，自行编译后封装成RN模块，向RN层暴露播放视图；
• 利用MediaCodec硬解码：不编译libwebrtc的话，可直接接收WebRTC传输的H.265裸流，通过Android原生MediaCodec进行硬解码，将解码后的帧渲染到SurfaceView或TextureView，再封装为RN组件。

iOS端（Swift/Objective-C）

• 基于iOS原生WebRTC框架：iOS的WebKit和AVFoundation原生支持H.265解码，可使用Apple官方的WebRTC实现（或编译支持H.265的libwebrtc）创建RTCPeerConnection，接收流后用AVPlayer或自定义渲染视图播放，再封装成RN组件；
• 需确保目标设备硬件支持H.265，同时处理好SDP协商中的H.265 codec参数配置。

3. 转码折中方案 #

如果自定义原生模块成本过高，可调整网关的转码策略：

• 将RTSP流转为H.264编码的WebRTC流，这样react-native-webrtc就能直接兼容播放；
• 或者转成HTTP-FLV/HLS格式的流，用react-native-vlc-media-player或react-native-video播放；
• 注意：转码会增加服务器资源消耗，可能导致延迟升高，需根据监控场景的实时性需求权衡。

4. WebView嵌套播放 #

既然Safari能正常播放WebRTC H.265流，可在RN中用WebView加载一个极简网页，网页内通过原生JS的WebRTC API拉流播放。这种方案开发速度快，但WebView的性能、全屏控制、手势交互等体验不如原生组件，且Android端WebView对H.265的支持依赖系统版本和内核版本。

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