当前位置：首页 > React

react实现视频通话

2026-01-27 03:31:37React

React 实现视频通话功能

在 React 中实现视频通话功能通常需要结合 WebRTC 技术和相关库。以下是实现的基本方法：

安装必要依赖

使用 peerjs 和 simple-peer 库简化 WebRTC 实现：

npm install peerjs simple-peer

设置视频组件

创建用于显示本地和远程视频流的组件：

import { useRef, useEffect } from 'react';

function Video({ stream }) {
  const ref = useRef();

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

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

建立 Peer 连接

初始化 Peer 实例并处理连接：

import { useState, useEffect } from 'react';
import Peer from 'peerjs';

function VideoCall() {
  const [localStream, setLocalStream] = useState(null);
  const [remoteStream, setRemoteStream] = useState(null);
  const peerInstance = useRef();

  useEffect(() => {
    navigator.mediaDevices.getUserMedia({ video: true, audio: true })
      .then(stream => {
        setLocalStream(stream);

        const peer = new Peer();
        peer.on('open', id => {
          // 这里可以通过信令服务器交换ID
        });

        peer.on('call', call => {
          call.answer(stream);
          call.on('stream', remoteStream => {
            setRemoteStream(remoteStream);
          });
        });
      });
  }, []);

  return (
    <div>
      <Video stream={localStream} />
      <Video stream={remoteStream} />
    </div>
  );
}

发起呼叫功能

添加发起呼叫的逻辑：

const callUser = (remoteId) => {
  const call = peerInstance.current.call(remoteId, localStream);
  call.on('stream', stream => {
    setRemoteStream(stream);
  });
};

信令服务器实现

需要实现简单的信令服务器来交换 Peer ID 和连接信息：

// 使用Socket.io或类似技术实现信令
// 客户端代码需要监听和发送信令消息

错误处理和优化

添加错误处理和优化用户体验：

useEffect(() => {
  const cleanup = () => {
    if (localStream) {
      localStream.getTracks().forEach(track => track.stop());
    }
  };
  return cleanup;
}, [localStream]);