当前位置：首页 > React

react如何播放rtsp

2026-02-26 02:33:04React

在React中播放RTSP流的方法

RTSP（Real Time Streaming Protocol）是一种实时流媒体协议，常用于监控摄像头等场景。由于浏览器原生不支持RTSP流，需要借助第三方库或转码服务实现播放。

使用FFmpeg转码为HLS

将RTSP流转码为HLS（HTTP Live Streaming）格式，浏览器可通过hls.js播放。

安装hls.js：

npm install hls.js

React组件示例：

import React, { useEffect, useRef } from 'react';
import Hls from 'hls.js';

const RTSPPlayer = () => {
  const videoRef = useRef(null);

  useEffect(() => {
    const video = videoRef.current;
    const hls = new Hls();

    // 替换为转码后的HLS地址（需后端服务支持）
    hls.loadSource('http://your-server/stream.m3u8');
    hls.attachMedia(video);
    hls.on(Hls.Events.MANIFEST_PARSED, () => {
      video.play();
    });

    return () => {
      hls.destroy();
    };
  }, []);

  return <video ref={videoRef} controls />;
};

export default RTSPPlayer;

使用WebRTC中转

通过WebRTC技术将RTSP流转发到浏览器。

安装peerjs：

npm install peerjs

示例代码：

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

const WebRTCPlayer = () => {
  const videoRef = useRef(null);

  useEffect(() => {
    const peer = new Peer();
    peer.on('open', (id) => {
      // 此处需要与信令服务器交互，建立WebRTC连接
    });

    return () => {
      peer.destroy();
    };
  }, []);

  return <video ref={videoRef} autoPlay playsInline />;
};

使用第三方服务

考虑使用现成的视频管理平台如：

Wowza Streaming Engine
Ant Media Server
Unreal Media Server

这些服务提供RTSP转WebRTC或HLS的解决方案。

后端转码方案

通过Node.js等后端服务转码RTSP流：

const ffmpeg = require('fluent-ffmpeg');

ffmpeg('rtsp://your-stream')
  .inputOptions('-rtsp_transport', 'tcp')
  .outputOptions([
    '-c:v libx264',
    '-preset ultrafast',
    '-tune zerolatency',
    '-f hls',
    '-hls_time 2',
    '-hls_list_size 5',
    '-hls_flags delete_segments'
  ])
  .save('public/stream.m3u8');