如何在React+Node.js技术栈网页中播放rtsp协议监控直播流

浏览器原生不支持RTSP协议解析，必须通过后端做协议转换，将RTSP流转为浏览器支持的直播格式后才能在前端播放，以下是3种适配你技术栈的可落地方案：

方案1：转FLV流（延迟<1秒，优先推荐给人脸检测实时场景） #

无需转码（仅转封装），性能消耗低，实时性高，实现步骤：

• 服务器环境先安装FFmpeg，确认可全局调用ffmpeg命令
• Node后端使用child_process.spawn调用FFmpeg拉取RTSP流，转封装为FLV格式，参考命令：

  ffmpeg -i `rtsp://username:password@IP:554/cam/realmonitor?channel=1&subtype=0` -vcodec copy -acodec copy -f flv -
  

  若你的RTSP流为H.265编码，将参数-vcodec copy替换为-vcodec libx264 -crf 23 -preset veryfast做视频转码即可
• Node侧启动WebSocket服务，将FFmpeg进程输出的FLV流数据实时推送给连接的前端客户端
• React前端安装flv.js库，接收WebSocket传输的FLV流数据，绑定到页面video标签即可完成播放

方案2：转HLS流（延迟2~5秒，实现最简单，适合多并发场景） #

无需WebSocket通信，依赖静态资源即可分发，实现步骤：

• Node后端调用FFmpeg将RTSP流转为HLS切片，参考命令：

  ffmpeg -i `rtsp://username:password@IP:554/cam/realmonitor?channel=1&subtype=0` -c:v libx264 -c:a aac -hls_time 1 -hls_list_size 3 -hls_flags delete_segments ./public/stream.m3u8
  

  命令会自动生成m3u8索引文件和ts切片文件，自动删除过期切片避免占用磁盘空间
• 将生成的HLS相关文件放到Node服务的静态资源托管目录
• React前端安装hls.js库，直接请求静态m3u8地址即可播放

方案3：转WebRTC流（延迟<500毫秒，实时性最高，实现复杂度稍高） #

适合对人脸检测实时性要求极高的场景，实现步骤：

• Node后端集成node-webrtc或者mediasoup作为WebRTC服务端
• 调用FFmpeg将RTSP流推到WebRTC服务端
• React前端直接使用原生RTCPeerConnection接口拉取WebRTC流，绑定到video标签即可播放

通用注意事项 #

• 不要将RTSP地址的明文用户名密码暴露到前端代码，所有RTSP拉流操作必须放在后端执行，前端仅请求你自己的Node服务获取流转后的播放地址
• 多用户并发访问时，Node侧需要做流复用，不要每个前端请求都单独启动一个FFmpeg进程拉取摄像头流，避免占满摄像头的上行带宽

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