使用 WebRTC 创建视频通话应用程序

本文分享用WebRTC 的方法创建一个像视频通话的应用程序。WebRTC 是一个免费的开源项目，通过简单的 API 为网络浏览器和移动应用程序提供实时通信。

1: 了解 WebRTC 的基础知识

WebRTC 是一种 HTML5 规范，支持浏览器到浏览器的语音通话、视频聊天和文件共享应用，无需内部或外部插件。它通过提供在浏览器之间直接建立连接的方法来处理复杂的实时媒体。

2：设置项目

首先，建立一个基本的网络开发环境：

HTML/CSS/JavaScript：需要具备基础知识。
Node.js：确保为服务器端代码安装了 Node.js。
Express：一个最小且灵活的 Node.js 网络应用程序框架，用于处理服务器端操作。

为您的项目创建一个新目录，并设置一个新的 Node.js 应用程序：

mkdir video-call-app
cd video-call-app
npm init -y
npm i socket.io nodemon express simple-peer

Socket.io：用于发送信号，允许对等方交换会话信息并建立对等方连接。

Express：Express 是 Node.js 的网络应用框架。它可用于创建服务器以提供静态文件、处理信号的 HTTP 请求以及管理应用程序不同部分的路由。

Nodemon：Nodemon 是 Node.js 的一个实用工具，当检测到目录中的文件发生变化时，它可以帮助重新启动 Node 应用程序。这样，每次修改代码时，就无需手动停止和重启 Node 服务器了。

3: 创建基本服务器

初始化服务器和中间件

首先，在 Express 应用程序中加入必要的模块并设置一些基本的中间件：

// 导入必要的模块
constexpress  = require ( 'express' )      ; // 用于处理 HTTP 请求的 Express 框架
const  http = require ( 'http' );            // 内置 Node.js 模块，用于创建 HTTP 服务器
const  socketIO = require ( 'socket.io' );   // 用于在 Web 客户端和服务器之间实现实时双向通信的库
const  path = require ( 'path' );            // 用于处理文件路径的内置 Node.js 模块

// 创建 Express 应用程序
const  app = express (); 

// 使用 Express 应用程序创建 HTTP 服务器
const  server = http.创建服务器（应用程序）；

// 创建一个附加到 HTTP 服务器的 Socket.IO 实例
const  io = socketIO (server); 

// 从“public”目录提供静态文件（例如，HTML、CSS、JavaScript）
。use (express.static (path.join ( __ dirname , 'public' )));

处理 WebSocket 连接，以监听客户端之间的信号信息。

记录客户端连接服务器和断开连接的信息。为实现实时通信，可监听来自客户端的 “信号 “等自定义事件。将这些事件和数据广播给所有其他已连接的客户端，以实现无缝交互。

// 监听传入的连接
io.on('connection', socket => {
    // 用户连接时记录
    console.log('A user connected');
    
    // 监听断开事件
    socket.on('disconnect', () => {
        // 记录当用户断开连接时
        console.log('User disconnected');
    });

    // 监听来自客户端套接字的'signal' 事件
    socket.on('signal', data => {
        // 广播 'signal' 事件和数据发送到所有连接的客户端，除了发送方套接字
        socket.broadcast.emit('signal', data);
    });
});

// 定义监听的端口号
const PORT = process.env.PORT || 3000;

// 启动服务器并监听服务器指定端口
server.listen(PORT, () => {
    // 记录一条消息，表明服务器正在运行并正在监听指定端口
    console.log(`Server is running on port ${PORT}`);
});

启动服务器

您需要启动服务器，这样它才能开始处理请求。运行命令 nodemon server.js 即可。

4: 编写 HTML 标记

要为网络应用程序奠定基础，我们需要编写 HTML 标记。该标记定义了网页的结构，包括显示视频流和与 WebSocket 服务器交互的元素。

下面是 HTML 标记的示例：

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Simple WebRTC Video Call</title>
    <style>
      .video-container {
        display: flex;
      }
      video {
        width: 50%;
        border: 2px solid black;
        margin: 20px;
      }
    </style>
  </head>
  <body>
   <h1>Simple WebRTC Video Call</h1>
    <!-- 保存本地和远程视频的容器 -->
    <div class="video-container">
      <!-- 显示本地视频流的视频元素 -->
      <video id="localVideo" autoplay></video>
      <!-- 显示远端视频流的视频元素 -->
      <video id="remoteVideo" autoplay></video>
    </div>
    <!-- 用于包含所需 JavaScript 库的脚本标签 -->
    <script src="https://cdn.jsdelivr.net/npm/socket.io-client/dist/socket.io.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/simple-peer/simplepeer.min.js"></script>
    <!-- 用于包含自定义 JavaScript 文件的脚本标记 -->
    <script src="app.js"></script>
  </body>
</html>

使用<script>标记包含必要的 JavaScript 库。这些库包括：

socket.io.js：该库提供 WebSocket 功能，实现客户端与服务器之间的实时通信。
simplepeer.min.js：该库为点对点通信提供了高级 API，从而简化了 WebRTC 的实施。

5: 实现 JavaScript 逻辑

在这一步中，我们将实现 JavaScript 逻辑来处理 WebRTC 连接和视频流。该逻辑将负责设置对等连接、从用户的摄像头捕捉视频流以及处理客户端之间的信令。

下面简要介绍一下需要完成的工作：

访问用户的媒体设备（摄像头和麦克风）以捕获视频流。
初始化 Socket.IO 连接，以便与服务器进行实时通信。
使用 simple-peer 库建立对等连接，在客户端之间建立直接连接。
处理客户端之间的信令，以交换会话描述（SDP）和 ICE 候选者。
在指定的视频元素中显示本地视频流。
监听其他客户端传入的视频流，并将其显示在相应的视频元素中。

// 与服务器建立 Socket.IO 连接
const socket = io();

// 请求访问用户的媒体设备（例如相机）
navigator.mediaDevices.getUserMedia({ video: true, audio: false })
    .then(stream => {
        // 授予访问权限后，显示本地视频流
        const localVideo = document.getElementById('localVideo');
        localVideo.srcObject = stream;

        // 初始化一个新的 SimplePeer 实例以进行点对点通信
        const peer = new SimplePeer({
            initiator: true, 
            trickle: false, 
            stream: stream // 将本地媒体流传递给peer
        });

        // 监听对等方发出的 'signal' 事件
        peer.on('signal', data => {
            console.log('Signal data:', data); 
            // 使用 Socket.IO 套接字发送信号数据
            socket.emit('signal', JSON.stringify(data));
        });

        // 监听来自服务器套接字的 'signal '事件
        socket.on('signal', data => {
            console.log('Received signal:', data); 
            peer.signal(JSON.parse(data));
        });

        peer.on('stream', remoteStream => {
            console.log('Received remote stream:', remoteStream); 
            const remoteVideo = document.getElementById('remoteVideo');
            remoteVideo.srcObject = remoteStream;
        });
    })
    .catch(error => {
        console.error('Error accessing media devices:', error); // Log any errors encountered while accessing media devices
    });