掌握 WebRTC：构建实时视频聊天应用程序

本文我们将使用 WebRTC 从零开始创建一个实用的视频聊天应用程序。无论您是经验丰富的开发人员还是好奇的初学者，本指南都将让您掌握利用 WebRTC 进行实时通信的知识。

什么是 WebRTC？

WebRTC（Web实时通信）是一个开源项目，它使Web应用程序和网站能够捕获并播放音频和/或视频媒体。它还允许在对等方之间交换任何类型的数据，从而使开发人员能够构建功能强大的视频聊天、文件传输和游戏应用程序。

前提条件

要学习本教程，您需要

JavaScript、HTML 和 CSS 的基础知识
安装好 Node.js
代码编辑器（如 VS Code）
一个 Chrome 浏览器或 Firefox 浏览器）

设置项目

让我们从设置项目结构和初始化 Node.js 项目开始。

步骤 1：项目结构

为项目创建一个新目录并导航进入：

mkdir webrtc-video-chat
cd webrtc-video-chat

初始化一个新的 Node.js 项目：

npm init -y

安装必要的依赖项：

npm install express socket.io

项目结构如下所示：

webrtc-video-chat/
├── node_modules/
├── public/
│   ├── index.html
│   ├── style.css
│   └── script.js
├── server.js
└── package.json

构建后端

使用 Express 为 HTML 文件提供服务，并使用 Socket.IO 在对等机之间发送信号。

步骤2：创建服务器

在根目录下创建 server.js 文件，并添加以下代码：

const express = require('express');
const http = require('http');
const socketIo = require('socket.io');
const app = express();
const server = http.createServer(app);
const io = socketIo(server);
app.use(express.static('public'));
io.on('connection', (socket) => {
  console.log('A user connected');
  socket.on('offer', (offer) => {
    socket.broadcast.emit('offer', offer);
  });
  socket.on('answer', (answer) => {
    socket.broadcast.emit('answer', answer);
  });
  socket.on('candidate', (candidate) => {
    socket.broadcast.emit('candidate', candidate);
  });
  socket.on('disconnect', () => {
    console.log('A user disconnected');
  });
});
server.listen(3000, () => {
  console.log('Server is running on http://localhost:3000');
});

步骤3：创建前端

创建前端，使我们能够捕捉视频、建立对等连接并处理信号。

在public目录下创建一个 index.html 文件：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>WebRTC Video Chat</title>
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <h1>WebRTC Video Chat</h1>
  <div id="videos">
    <video id="localVideo" autoplay muted></video>
    <video id="remoteVideo" autoplay></video>
  </div>
  <script src="/socket.io/socket.io.js"></script>
  <script src="script.js"></script>
</body>
</html>

在 public目录下创建一个 style.css 文件，为视频元素设计样式：

body { 
  font-family : Arial, sans-serif; 
  display : flex; 
  flex-direction : column; 
  align-items : center; 
  justify-content : center; 
  height : 100vh ; 
  margin : 0 ; 
  background-color : #f0f0f0 ; 
} 

#videos { 
  display : flex; 
  gap : 10px ; 
} 
video { 
  width : 300px ; 
  height : 200px ; 
  background-color : black; 
}

在 public目录下创建一个 script.js 文件，用于处理视频捕捉和信号发送：

const socket = io();
const localVideo = document.getElementById('localVideo');
const remoteVideo = document.getElementById('remoteVideo');
let localStream;
let remoteStream;
let peerConnection;
const servers = {
  iceServers: [
    {
      urls: 'stun:stun.l.google.com:19302'
    }
  ]
};
async function startVideoChat() {
  localStream = await navigator.mediaDevices.getUserMedia({ video: true, audio: true });
  localVideo.srcObject = localStream;
  peerConnection = new RTCPeerConnection(servers);
  localStream.getTracks().forEach(track => peerConnection.addTrack(track, localStream));
  peerConnection.ontrack = event => {
    remoteStream = event.streams[0];
    remoteVideo.srcObject = remoteStream;
  };
  peerConnection.onicecandidate = event => {
    if (event.candidate) {
      socket.emit('candidate', event.candidate);
    }
  };
  socket.on('offer', async (offer) => {
    await peerConnection.setRemoteDescription(new RTCSessionDescription(offer));
    const answer = await peerConnection.createAnswer();
    await peerConnection.setLocalDescription(answer);
    socket.emit('answer', answer);
  });
  socket.on('answer', async (answer) => {
    await peerConnection.setRemoteDescription(new RTCSessionDescription(answer));
  });
  socket.on('candidate', async (candidate) => {
    await peerConnection.addIceCandidate(new RTCIceCandidate(candidate));
  });
  const offer = await peerConnection.createOffer();
  await peerConnection.setLocalDescription(offer);
  socket.emit('offer', offer);
}
startVideoChat();