当前位置：首页 > React

react如何播放rtsp

2026-02-11 16:22:14React

React 中播放 RTSP 流的方法

RTSP（Real-Time Streaming Protocol）是一种实时流媒体协议，但浏览器原生不支持直接播放 RTSP 流。在 React 中播放 RTSP 流通常需要借助转码或第三方库。

方法一：使用 FFmpeg 转码为 HLS/WebRTC

将 RTSP 流转码为浏览器支持的格式（如 HLS 或 WebRTC），再通过 <video> 标签播放。

安装 node-media-server 或类似工具：

npm install node-media-server

配置转码服务（Node.js 后端）：

const NodeMediaServer = require('node-media-server');

const config = {
  rtmp: {
    port: 1935,
    chunk_size: 60000,
    gop_cache: true,
    ping: 30,
    ping_timeout: 60
  },
  http: {
    port: 8000,
    allow_origin: '*'
  }
};

const nms = new NodeMediaServer(config);
nms.run();

前端通过 HLS 播放：

react如何播放rtsp

import React from 'react';

const VideoPlayer = () => {
  return (
    <video controls autoPlay>
      <source src="http://localhost:8000/live/stream.m3u8" type="application/x-mpegURL" />
    </video>
  );
};

方法二：使用第三方库（如 flv.js 或 hls.js）

如果 RTSP 已转码为 FLV 或 HLS，可通过以下库播放：

安装 flv.js：

npm install flv.js

React 组件示例：

react如何播放rtsp

import React, { useEffect, useRef } from 'react';
import flvjs from 'flv.js';

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

  useEffect(() => {
    if (flvjs.isSupported()) {
      const player = flvjs.createPlayer({
        type: 'flv',
        url: 'http://example.com/live/stream.flv'
      });
      player.attachMediaElement(videoRef.current);
      player.load();
      player.play();
    }
  }, []);

  return <video ref={videoRef} controls style={{ width: '100%' }} />;
};

方法三：使用 WebRTC 代理

通过 WebRTC 技术（如 Janus Gateway）将 RTSP 转为 WebRTC 流。

安装 janus-gateway 并配置：

docker pull janusgraph/janusgraph

前端集成示例：

import Janus from './janus.js';

const JanusPlayer = () => {
  useEffect(() => {
    Janus.init({
      debug: true,
      callback: () => {
        // 连接 Janus 网关并播放流
      }
    });
  }, []);
  return <video id="janus-video" controls />;
};