当前位置：首页 > React

react前端实现直播

2026-01-27 02:47:07React

实现React前端直播的方案

在React中实现直播功能，通常需要结合视频流技术和WebRTC或第三方直播服务。以下是几种常见的实现方式：

使用WebRTC实现P2P直播

WebRTC适合低延迟的直播场景，可以直接在浏览器间传输视频流。

安装必要的依赖：

npm install simple-peer socket.io-client

创建视频组件：

react前端实现直播

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

const VideoStream = ({ stream }) => {
  const videoRef = useRef(null);

  useEffect(() => {
    if (videoRef.current && stream) {
      videoRef.current.srcObject = stream;
    }
  }, [stream]);

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

建立WebRTC连接：

const startStreaming = async () => {
  const stream = await navigator.mediaDevices.getUserMedia({ video: true, audio: true });
  const peer = new SimplePeer({ initiator: true, stream });

  peer.on('signal', data => {
    // 通过信令服务器发送offer
    socket.emit('offer', data);
  });

  socket.on('answer', answer => {
    peer.signal(answer);
  });
};

使用HLS或DASH协议

对于大规模直播，建议使用自适应流媒体协议：

安装hls.js：

react前端实现直播

npm install hls.js

实现HLS播放器：

import Hls from 'hls.js';

const HLSPlayer = ({ url }) => {
  const videoRef = useRef(null);

  useEffect(() => {
    if (Hls.isSupported()) {
      const hls = new Hls();
      hls.loadSource(url);
      hls.attachMedia(videoRef.current);
    } else if (videoRef.current.canPlayType('application/vnd.apple.mpegurl')) {
      videoRef.current.src = url;
    }
  }, [url]);

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

集成第三方直播SDK

使用专业直播平台SDK可以快速实现功能：

import AgoraRTC from 'agora-rtc-sdk-ng';

const LiveBroadcast = () => {
  const client = AgoraRTC.createClient({ mode: 'live', codec: 'h264' });

  const joinChannel = async () => {
    await client.join(APP_ID, CHANNEL, TOKEN);
    const localStream = await AgoraRTC.createMicrophoneAndCameraTracks();
    await client.publish(localStream);
  };

  client.on('user-published', async (user, mediaType) => {
    await client.subscribe(user, mediaType);
    if (mediaType === 'video') {
      // 渲染远程视频
    }
  });

  return <button onClick={joinChannel}>开始直播</button>;
};

实现弹幕功能

为直播添加互动元素：

const Danmu = ({ messages }) => {
  return (
    <div className="danmu-container">
      {messages.map((msg, i) => (
        <div key={i} className="danmu-item">{msg.text}</div>
      ))}
    </div>
  );
};