如何在ReactJS中使用RTSP播放IP摄像头实时视频

浏览器原生不支持RTSP协议，直接在React里播放RTSP URL行不通，必须通过转码为浏览器兼容格式或中间层转发实现，以下是几种实用方案：

方案一：转RTSP为HLS/HTTP-FLV（最常用） #

先通过流媒体服务器或FFmpeg将RTSP流转码为HLS（.m3u8）或HTTP-FLV格式，再在React中用视频库播放转码后的流。

1. 转码工具示例 #

• FFmpeg命令转HLS：

  ffmpeg -i rtsp://your-camera-username:password@camera-ip:port/stream-path \
  -c:v libx264 -c:a aac -f hls \
  -hls_time 2 -hls_list_size 3 -hls_flags delete_segments \
  ./hls-output/stream.m3u8
  

  把生成的.m3u8文件放到HTTP服务器（比如Nginx）上，前端就能通过HTTP地址访问。

• 流媒体服务器（Nginx-RTMP/SRS）：
  配置Nginx-RTMP模块接收RTSP流并转推为HLS/FLV，比FFmpeg更适合长期稳定的流服务。

2. React中播放转码后的流 #

用hls.js库处理HLS流，步骤如下：

1. 安装依赖：

   npm install hls.js
   

2. 编写React组件：

   import React, { useEffect, useRef } from 'react';
   import Hls from 'hls.js';
   
   const RtspPlayer = () => {
     const videoRef = useRef(null);
   
     useEffect(() => {
       const video = videoRef.current;
       if (!video) return;
   
       if (Hls.isSupported()) {
         const hls = new Hls({
           enableWorker: true,
           lowLatencyMode: true, // 开启低延迟模式
         });
         hls.loadSource('http://your-server-url/stream.m3u8');
         hls.attachMedia(video);
   
         return () => hls.destroy();
       } else if (video.canPlayType('application/vnd.apple.mpegurl')) {
         // Safari原生支持HLS
         video.src = 'http://your-server-url/stream.m3u8';
       }
     }, []);
   
     return (
       <video
         ref={videoRef}
         autoPlay
         muted
         controls
         style={{ width: '100%', maxWidth: '800px' }}
       />
     );
   };
   
   export default RtspPlayer;
   

方案二：WebSocket转发视频流 #

通过后端服务接收RTSP流，将视频帧转为WebSocket消息发送给前端，React用Canvas渲染。

1. 后端示例（Node.js） #

用node-rtsp-stream库转发：

npm install node-rtsp-stream

const Stream = require('node-rtsp-stream');

const stream = new Stream({
  name: 'camera-stream',
  streamUrl: 'rtsp://your-camera-url',
  wsPort: 9999,
  ffmpegOptions: {
    '-stats': '',
    '-r': 30,
  },
});

2. React前端接收 #

import React, { useEffect, useRef } from 'react';

const WebSocketPlayer = () => {
  const canvasRef = useRef(null);

  useEffect(() => {
    const canvas = canvasRef.current;
    if (!canvas) return;
    const ctx = canvas.getContext('2d');

    const ws = new WebSocket('ws://your-backend-ip:9999');
    ws.binaryType = 'arraybuffer';

    ws.onmessage = (event) => {
      const blob = new Blob([event.data], { type: 'image/jpeg' });
      const img = new Image();
      img.onload = () => {
        ctx.drawImage(img, 0, 0, canvas.width, canvas.height);
      };
      img.src = URL.createObjectURL(blob);
    };

    return () => ws.close();
  }, []);

  return <canvas ref={canvasRef} width={800} height={600} />;
};

export default WebSocketPlayer;

方案三：使用第三方React视频组件 #

比如react-player，它依赖转码后的流（HLS/FLV），示例：

npm install react-player

import React from 'react';
import ReactPlayer from 'react-player';

const CameraPlayer = () => {
  return (
    <ReactPlayer
      url="http://your-server-url/stream.m3u8"
      playing
      muted
      controls
      width="100%"
      height="auto"
    />
  );
};

export default CameraPlayer;

注意事项 #

• CORS配置：确保流媒体服务器或后端服务配置跨域允许，避免React请求被浏览器拦截。
• 延迟控制：HTTP-FLV和WebSocket方案延迟通常比HLS更低，适合实时性要求高的场景。
• 性能优化：转码时合理设置分辨率、帧率，避免前端加载压力过大。

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