WebRTC 构建实时通信应用

1. 准备工作

在开始之前，确保你已经安装了 Node.js 和 npm。然后，创建一个新的 React 项目：

npx create-react-app webrtc-demo
cd webrtc-demo

接下来，安装 simple-peer，这是一个简单易用的 WebRTC 库：

npm install simple-peer

2. 创建实时通信组件

我们将创建一个简单的 React 组件来实现实时通信功能。首先，在 src 目录下创建一个新文件 WebRTC.js，并添加以下代码：

// WebRTC.js
import React, { useRef, useEffect } from 'react';
import SimplePeer from 'simple-peer';

function WebRTC() {
  const localVideoRef = useRef();
  const remoteVideoRef = useRef();
  const peerRef = useRef();

  useEffect(() => {
    navigator.mediaDevices.getUserMedia({ video: true, audio: true })
      .then((stream) => {
        localVideoRef.current.srcObject = stream;
        peerRef.current = new SimplePeer({ initiator: true, trickle: false, stream });
        peerRef.current.on('signal', (data) => {
          console.log('SIGNAL', JSON.stringify(data));
        });
        peerRef.current.on('stream', (stream) => {
          remoteVideoRef.current.srcObject = stream;
        });
      })
      .catch((error) => console.error('Error accessing media devices:', error));

    return () => {
      if (peerRef.current) {
        peerRef.current.destroy();
      }
    };
  }, []);

  return (
    <div>
      <video ref={localVideoRef} autoPlay muted></video>
      <video ref={remoteVideoRef} autoPlay></video>
    </div>
  );
}

export default WebRTC;

在这个组件中，我们使用了 useRef 钩子来创建了两个 video 元素的引用，分别用于本地视频流和远程视频流的显示。我们使用 useEffect 钩子来获取用户媒体权限，并创建了一个 SimplePeer 对象来管理 WebRTC 连接。一旦连接建立，我们可以在 signal 事件中获取和发送信令，以便进行对等连接，同时在 stream 事件中接收远程视频流并显示在页面上。

3. 在应用中使用 WebRTC 组件

接下来，我们将在应用中使用刚刚创建的 WebRTC 组件。在 src 目录下的 App.js 文件中添加以下代码：

// App.js
import React from 'react';
import WebRTC from './WebRTC';

function App() {
  return (
    <div>
      <h1>WebRTC Demo</h1>
      <WebRTC />
    </div>
  );
}

export default App;

4. 运行应用

最后，启动应用并在浏览器中查看效果：

npm start

现在，你应该可以在页面上看到两个视频框，其中一个显示本地视频流，另一个显示远程视频流。如果你在不同的浏览器窗口中打开应用，你应该能够在两个视频框之间进行实时通信。