如何使用 React 和 Node.js 制作视频通话应用程序

视频通话已成为许多应用程序的基本功能，可实现个人和专业用途的实时通信。在本文中，我们将使用 React 作为前端、Node.js 和 Socket.io 作为后端来创建一个视频通话应用程序。

前提条件

基本了解 Node.js 和 Express.js。
熟悉前端 React。
正常工作的 Node.js 环境。

后端：Node.js 服务器

步骤 1：设置项目

创建新的项目目录并初始化：

mkdir video-calling-app
cd video-calling-app
npm init -y

步骤 2：安装依赖项

安装所需的依赖项：

npm install express socket.io peer

步骤 3：创建server.js

在项目目录中创建一个名为server.js的文件并添加以下代码：

const express = require('express');
const http = require('http');
const socketIo = require('socket.io');
const { ExpressPeerServer } = require('peer');

const app = express();
const server = http.createServer(app);
const io = socketIo(server);
const PORT = process.env.PORT || 5000;

const peerServer = ExpressPeerServer(server, {
  debug: true,
});

app.use('/peerjs', peerServer);

io.on('connection', (socket) => {
  socket.on('join-room', (roomId, userId) => {
    socket.join(roomId);
    socket.to(roomId).broadcast.emit('user-connected', userId);

    socket.on('disconnect', () => {
      socket.to(roomId).broadcast.emit('user-disconnected', userId);
    });
  });
});

server.listen(PORT, () => {
  console.log(`Server is running on http://localhost:${PORT}`);
});

前端：React 应用程序

步骤 1：设置 React 项目

使用 Create React App 创建一个新的 React 项目：

npx create-react-app video-calling-frontend
cd video-calling-frontend

步骤 2：安装依赖项

安装所需的依赖项：

npm install peerjs socket.io-client

步骤 3：创建视频通话组件

在 src 目录中新建一个名为 VideoCall.js 的文件，并添加以下代码：

import React, { useEffect, useRef } from 'react';
import io from 'socket.io-client';
import Peer from 'peerjs';
import './VideoCall.css';

const socket = io('http://localhost:5000');

const VideoCall = () => {
  const myVideoRef = useRef();
  const userVideoRef = useRef();
  const myPeer = new Peer(undefined, {
    host: '/',
    port: '5000',
    path: '/peerjs',
  });

  useEffect(() => {
    myPeer.on('open', (id) => {
      socket.emit('join-room', 'room1', id);
    });

    myPeer.on('call', (call) => {
      navigator.mediaDevices.getUserMedia({
        video: true,
        audio: true,
      }).then((stream) => {
        call.answer(stream);
        call.on('stream', (userVideoStream) => {
          addVideoStream(userVideoRef.current, userVideoStream);
        });
      });
    });

    socket.on('user-connected', (userId) => {
      connectToNewUser(userId);
    });

    navigator.mediaDevices.getUserMedia({
      video: true,
      audio: true,
    }).then((stream) => {
      addVideoStream(myVideoRef.current, stream);

      socket.on('user-disconnected', (userId) => {
        if (peers[userId]) peers[userId].close();
      });
    });

    const connectToNewUser = (userId) => {
      const call = myPeer.call(userId, stream);
      call.on('stream', (userVideoStream) => {
        addVideoStream(userVideoRef.current, userVideoStream);
      });
      call.on('close', () => {
        userVideoRef.current.remove();
      });

      peers[userId] = call;
    };

    const addVideoStream = (video, stream) => {
      video.srcObject = stream;
      video.addEventListener('loadedmetadata', () => {
        video.play();
      });
    };
  }, []);

  return (
    <div className="video-call-container">
      <video ref={myVideoRef} className="video" muted />
      <video ref={userVideoRef} className="video" />
    </div>
  );
};

export default VideoCall;

步骤 4：设置视频通话组件的样式

在src目录中创建VideoCall.css文件并添加以下样式：

.video-call-container {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
  background-color: #f0f0f0;
}

.video {
  width: 45%;
  height: auto;
  margin: 10px;
  background-color: black;
}

步骤 5：更新应用程序组件

修改App.js文件以包含VideoCall组件：

import React from 'react';
import VideoCall from './VideoCall';
import './App.css';

function App() {
  return (
    <div className="App">
      <VideoCall />
    </div>
  );
}

export default App;

步骤 6：运行后端和前端

确保您的后端服务器正在运行：