WebRTC Node.js 教程：开发实时视频聊天应用程序

在本文中，我将向您展示如何编写允许在两个连接的用户之间共享视频和音频的视频聊天应用程序。它非常简单，没有什么花哨的，非常适合JavaScript语言训练——更准确地说是WebRTC技术和Node.js。

什么是WebRTC？

Web Real-Time Communications 网页实时通信，简称WebRTC。WebRTC是一个HTML5规范，它允许用户在浏览器之间直接进行实时通信，不需要任何第三方插件。WebRTC可用于多种情境（比如文件共享），但端对端实时音频和视频通信是其主要功能。本文将着重为大家介绍这两项。

WebRTC所做的就是允许接入设备。你可以借WebRTC来实时使用麦克风、摄像头和分享你的屏幕。

所以，WebRTC可以用最简单的方式在网页中实现音频和视频通信。

WebRTC JavaScript API

WebRTC说起来很复杂，它涉及到很多技术。但建立连接、通信和传输数据的操作是通过一套JS API来实现的，还比较简单。其中主要的API包括：

RTCPeerConnection：创建和导航端对端连接。

RTCSessionDescription：描述连接（或潜在连接）的一端，以及它的配置方式。

navigator.getUserMedia：捕捉音频和视频。

为什么选择Node.js？

若要在两个或多个设备之间进行远程连接，你就需要一个服务器。在这种情况下，你也需要一个处理实时通信的服务器。Node.js是为实时可扩展的应用而构建的。要开发自由数据交换的双向连接应用程序，你可能会用到WebSockets，它允许在客户端和服务器之间建立一个会话窗口。来自客户端的请求会以循环的方式，更准确的说是事件循环进行处理，这时Node.js是我们很好的一个选择，因为它采取 “非阻塞（non-blocking） “的方式来解决请求。这样我们在这该过程中就能实现低延迟和高吞吐量。

思路拓展：我们要创建的是什么？

我们会创建一个非常简单的应用程序，它能让我们将音频和视频流传输到连接的设备——一个基础款视频聊天应用程序。我们会用到的技术有:

Express库，提供静态文件，比如代表用户界面（UI）的HTML文件；

socket.io库，在两个设备之间用WebSockets建立连接；

WebRTC，允许媒体设备（摄像头和麦克风）在连接的设备之间传输音频和视频流。

实现视频会话

我们要做的第一件事是给我们的应用程序提供一个作为UI的HTML文件。让我们通过运行：npm init.js来初始化新的node.js项目。然后，我们需要通过运行：npm i -D typescript ts-node nodemon @types/express @types/socket.io安装一些开发依赖项，运行：npm i express socket.io安装生产依赖项。

之后我们就可以在package.json文件中定义脚本，来运行我们的项目了。

{
 "scripts": {
   "start": "ts-node src/index.ts",
   "dev": "nodemon --watch 'src/**/*.ts' --exec 'ts-node' src/index.ts"
 },
 "devDependencies": {
   "@types/express": "^4.17.2",
   "@types/socket.io": "^2.1.4",
   "nodemon": "^1.19.4",
   "ts-node": "^8.4.1",
   "typescript": "^3.7.2"
 },
 "dependencies": {
   "express": "^4.17.1",
   "socket.io": "^2.3.0"
 }
}

当我们运行npm run dev命令时，nodemon会监控src文件夹中每个以.ts结尾的文件有无任何变化。现在，我们要创建一个src文件夹。在这个文件夹中，我们会创建两个typescript文件：index.ts和server.ts。

在server.ts中，我们会创建server类，并使其与express和socket.io一起工作。

import express, { Application } from "express";
import socketIO, { Server as SocketIOServer } from "socket.io";
import { createServer, Server as HTTPServer } from "http";
 
export class Server {
 private httpServer: HTTPServer;
 private app: Application;
 private io: SocketIOServer;
 
 private readonly DEFAULT_PORT = 5000;
 
 constructor() {
   this.initialize();
 
   this.handleRoutes();
   this.handleSocketConnection();
 }
 
 private initialize(): void {
   this.app = express();
   this.httpServer = createServer(this.app);
   this.io = socketIO(this.httpServer);
 }
 
 private handleRoutes(): void {
   this.app.get("/", (req, res) => {
     res.send(`<h1>Hello World</h1>`); 
   });
 }
 
 private handleSocketConnection(): void {
   this.io.on("connection", socket => {
     console.log("Socket connected.");
   });
 }
 
 public listen(callback: (port: number) => void): void {
   this.httpServer.listen(this.DEFAULT_PORT, () =>
     callback(this.DEFAULT_PORT)
   );
 }
}

为正常运行服务器，我们需要在index.ts文件中创建一个新的Server类实例并调用listen方法。

import { Server } from "./server";
 
const server = new Server();
 
server.listen(port => {
 console.log(`Server is listening on http://localhost:${port}`);
});

现在，如果我们运行：npm run dev会看到下面这样的情景：

当打开浏览器，输入http://localhost:5000，我们应该注意到左上的 “Hello World “信息。

然后我们就可以在public/index.html中创建一个新的HTML文件了。

<!DOCTYPE html>
<html lang="en">
 <head>
   <meta charset="UTF-8" />
   <meta name="viewport" content="width=device-width, initial-scale=1.0" />
   <meta http-equiv="X-UA-Compatible" content="ie=edge" />
   <title>Dogeller</title>
   <link
     href="https://fonts.googleapis.com/css?family=Montserrat:300,400,500,700&display=swap"
     rel="stylesheet"
   />
   <link rel="stylesheet" href="./styles.css" />
   <script src="https://cdnjs.cloudflare.com/ajax/libs/socket.io/2.3.0/socket.io.js"></script>
 </head>
 <body>
   <div class="container">
     <header class="header">
       <div class="logo-container">
         <img src="./img/doge.png" alt="doge logo" class="logo-img" />
         <h1 class="logo-text">
           Doge<span class="logo-highlight">ller</span>
         </h1>
       </div>
     </header>
     <div class="content-container">
       <div class="active-users-panel" id="active-user-container">
         <h3 class="panel-title">Active Users:</h3>
      </div>
       <div class="video-chat-container">
         <h2 class="talk-info" id="talking-with-info"> 
           Select active user on the left menu.
         </h2>
         <div class="video-container">
           <video autoplay class="remote-video" id="remote-video"></video>
           <video autoplay muted class="local-video" id="local-video"></video>
         </div>
       </div>
     </div>
   </div>
   <script src="./scripts/index.js"></script>
 </body>
</html>

在这个新文件中，我们创建了两个视频元素：一个用于远程视频连接，另一个用于本地视频。你可能已经注意到我们也在导入本地脚本了。现在我们就来创建一个新的文件夹“脚本”，并在这个目录下创建index.js文件。至于样式，你可以从GitHub库中下载它们。

接下来你需要给浏览器提供index.html。首先，你需要告诉express你想提供哪些静态文件。为了实现这一点，我们决定在Server类中实现一个新方法。

private configureApp(): void {
   this.app.use(express.static(path.join(__dirname, "../public")));
 }

不要忘记在initialize中调用configureApp。

private initialize(): void {
   this.app = express();
   this.httpServer = createServer(this.app);
   this.io = socketIO(this.httpServer);
 
   this.configureApp();
   this.handleSocketConnection();
 }

当你输入http://localhost:5000后，你应该能看到你的index.html文件在运行。

下一步要实现的是允许摄像头和视频访问并将其流式传输到local-video元素。要做到这一点，你需要打开public/scripts/index.js文件，并用以下方法实现它。

navigator.getUserMedia(
 { video: true, audio: true },
 stream => {
   const localVideo = document.getElementById("local-video");
   if (localVideo) {
     localVideo.srcObject = stream;
   }
 },
 error => {
   console.warn(error.message);
 }
);

当回到浏览器时，界面会出现一个提示请求访问你的媒体设备，在接受请求后，你电脑的摄像头就开始工作了。

如何处理socket连接？

接下来我们讲讲如何处理socket连接。我们需要将客户端与服务器连接起来。为此，我们将使用socket.io。在public/scripts/index.js中，添加以下代码：

this.io.on("connection", socket => {
     const existingSocket = this.activeSockets.find(
       existingSocket => existingSocket === socket.id
     );
 
     if (!existingSocket) {
       this.activeSockets.push(socket.id);
 
       socket.emit("update-user-list", {
         users: this.activeSockets.filter(
           existingSocket => existingSocket !== socket.id
         )
       });
 
       socket.broadcast.emit("update-user-list", {
         users: [socket.id]
       });
     }
   }

页面刷新后，电脑会弹出一条消息，显示 “Socket已连接”

然后我们回到server.ts中，把已连接的socket存储在内存中，这只是为了保留唯一连接。所以，我们需要在Server类中添加一个新的私有字段，如下：

private activeSockets: string[] = [];

然后我们需要在socket连接中检查socket是否已经存在。如果不存在，把新的socket推送到内存中，并向已连接的用户发送数据。

this.io.on("connection", socket => {
     const existingSocket = this.activeSockets.find(
       existingSocket => existingSocket === socket.id
     );
 
     if (!existingSocket) {
       this.activeSockets.push(socket.id);
 
       socket.emit("update-user-list", {
         users: this.activeSockets.filter(
           existingSocket => existingSocket !== socket.id
         )
       });
 
       socket.broadcast.emit("update-user-list", {
         users: [socket.id]
       });
     }
   }

你还需要在socket断开连接时及时响应，所以在socket连接中，你需要添加：

socket.on("disconnect", () => {
   this.activeSockets = this.activeSockets.filter(
     existingSocket => existingSocket !== socket.id
   );
   socket.broadcast.emit("remove-user", {
     socketId: socket.id
   });
 });

客户端(即public/scripts/index.js)这边，你需要妥善处理那些信息：

socket.on("update-user-list", ({ users }) => {
 updateUserList(users);
});
 
socket.on("remove-user", ({ socketId }) => {
 const elToRemove = document.getElementById(socketId);
 
 if (elToRemove) {
   elToRemove.remove();
 }
});

以下是 updateUserList 函数：

function updateUserList(socketIds) {
 const activeUserContainer = document.getElementById("active-user-container");
 
 socketIds.forEach(socketId => {
   const alreadyExistingUser = document.getElementById(socketId);
   if (!alreadyExistingUser) {
     const userContainerEl = createUserItemContainer(socketId);
     activeUserContainer.appendChild(userContainerEl);
   }
 });
}

以及createUserItemContainer函数:

function createUserItemContainer(socketId) {
 const userContainerEl = document.createElement("div");
 
 const usernameEl = document.createElement("p");
 
 userContainerEl.setAttribute("class", "active-user");
 userContainerEl.setAttribute("id", socketId);
 usernameEl.setAttribute("class", "username");
 usernameEl.innerHTML = `Socket: ${socketId}`;
 
 userContainerEl.appendChild(usernameEl);
 
 userContainerEl.addEventListener("click", () => {
   unselectUsersFromList();
   userContainerEl.setAttribute("class", "active-user active-user--selected");
   const talkingWithInfo = document.getElementById("talking-with-info");
   talkingWithInfo.innerHTML = `Talking with: "Socket: ${socketId}"`;
   callUser(socketId);
 }); 
 return userContainerEl;
}

需要注意的是，我们给用户容器元素添加了一个可以调用callUser函数的点击监听器——但现在，它可以是一个空的函数。接下来，当运行两个浏览器窗口（其中一个作为私人窗口）时，你应该注意到你的Web应用程序中有两个已经连接的socket。

点击列表中的活跃用户，这时我们需要调用callUser函数。但是在实现之前，你还需要在window对象中声明两个类。

const { RTCPeerConnection, RTCSessionDescription } = window;

我们会在callUser函数用到这两个类：

async function callUser(socketId) {
 const offer = await peerConnection.createOffer();
 await peerConnection.setLocalDescription(new RTCSessionDescription(offer));
 
 socket.emit("call-user", {
   offer,
   to: socketId
 });
}

现在我们要创建一个本地请求并发送给选定的用户。服务器会监听一个叫做call-user的事件、拦截请求并将其转发给选定的用户。让我们用server.ts来实现该操作：

socket.on("call-user", data => {
   socket.to(data.to).emit("call-made", {
     offer: data.offer,
     socket: socket.id
   });
 });

对于客户端，你需要就call-made事件作出调整：

socket.on("call-made", async data => {
 await peerConnection.setRemoteDescription(
   new RTCSessionDescription(data.offer)
 );
 const answer = await peerConnection.createAnswer();
 await peerConnection.setLocalDescription(new RTCSessionDescription(answer));
 
 socket.emit("make-answer", {
   answer,
   to: data.socket
 });
});

之后，在你从服务器得到的请求上设置一个远程描述，并为这个请求创建一个答复。对于服务器端，你只需要将适当的数据传递给选定的用户即可。然后我们再在server.ts里面添加一个监听器。

socket.on("make-answer", data => {
   socket.to(data.to).emit("answer-made", {
     socket: socket.id,
     answer: data.answer
   });
 });

对于客户端，我们需要处理 answer-made 事件。

socket.on("answer-made", async data => {
 await peerConnection.setRemoteDescription(
   new RTCSessionDescription(data.answer)
 );
 
 if (!isAlreadyCalling) {
   callUser(data.socket);
   isAlreadyCalling = true;
 }
});

我们可以使用标志isAlreadyCalling，它能帮助确保我们只需调用一次用户。

最后你需要做的是添加本地轨道，包括音频和视频到你的连接端。只有做到这一点，我们才能够与连接的用户共享视频和音频。要做到这一点，我们需要在navigator.getMediaDevice回调中调用peerConnection对象的addTrack函数。

navigator.getUserMedia(
 { video: true, audio: true },
 stream => {
   const localVideo = document.getElementById("local-video");
   if (localVideo) {
     localVideo.srcObject = stream;
   }
 
   stream.getTracks().forEach(track => peerConnection.addTrack(track, stream));
 },
 error => {
   console.warn(error.message);
 }
);

另外，我们还需要为ontrack事件添加一个适当的处理程序。

peerConnection.ontrack = function({ streams: [stream] }) {
 const remoteVideo = document.getElementById("remote-video");
 if (remoteVideo) {
   remoteVideo.srcObject = stream;
 }
};

如图示，我们已经从传递的对象中获取了流，并改变了远程视频中的srcObject来使用接收到的流。所以现在当你点击活跃用户后，你应该建立一个视频和音频连接，像下图这样：