使用 WebRTC 和 Node.js 创建视频聊天和文件共享程序

建立实时通信有点棘手，目前还没有连接对等方的标准信令方法。我们可以使用 WebSockets 或 WhatsApp 或 Discord 等中介应用程序，这取决于我们的选择。此外，单纯的信令是不够的。要建立 WebRTC 连接，需要考虑很多因素。

从本文开始，我们将构建一个名为 Magny 的应用程序。Magny 是一个演示项目，旨在展示 WebRTC 的功能。它具有三个主要功能：

视频电话
文字聊天
文件传输

Magny是一个Web项目，因此我们将使用Node.JS来开发它。它的框架将是 Vite，一个专为现代 Web 项目设计的构建工具。将使用 TypeScript 代替 Javascript，因为它具有许多现代功能，并且可以提供更易于检查的模块化项目。话不多说，让我们来设置我们的开发环境。

设置

在开始之前，请确保您的系统中已安装 Node.JS。如果您是初学者，安装 LTS 版本是理想的选择。

Node.JS 准备就绪后，让我们创建我们的项目。打开终端并导航到要在其中创建项目的文件夹。

npm create vite@latest

该命令会询问项目名称。我们将其命名为 magny 。然后，它会提示你选择框架和变体，让我们选择 vanilla 框架和 vanilla-ts 变体。这样，项目就创建完成了。导航至项目文件夹，安装所需的节点软件包：

cd magny
npm install

在运行项目之前，我们将使用 Visual Studio Code 打开项目。由于我们可能需要在不同的设备上运行项目，因此请像这样更改 package.json：

{
  "name": "magny",
  "private": true,
  "version": "0.0.0",
  "type": "module",
  "scripts": {
    "dev": "vite --host",
    "build": "tsc && vite build",
    "preview": "vite preview"
  },
  "devDependencies": {
    "typescript": "^4.6.4",
    "vite": "^3.0.7"
  }
}

通过向开发脚本添加--host标志，如果计算机和手机连接到同一网络，就可以从手机访问该项目。查看项目：

npm run dev

您会看到项目正在运行，终端会给出两个 URL 来查看项目。您可以访问 localhost 或设备的本地网络 IP。但是，如果在本地网络 IP 下测试应用程序，浏览器将不允许您访问摄像机设备。这是因为本地网络不提供 SSL 连接，而浏览器不允许在不安全的连接下访问设备。当我们将应用程序部署到 Netlify 时，我们将对其进行跨设备测试。

如果您查看项目，会看到 Vite 提供的模板。由于我们需要一个干净的记录，因此请删除 counter.ts 和 typescript.svg。要在按钮上添加图标，我们需要 Font Awesome Kit。在 Font Awesome 注册后，他们会通过电子邮件发送你的工具包，只需将工具包放在正文结尾标签之前即可。

由于我们将专注于 WebRTC，所以我事先准备了用户界面。可以从下面的 Github 分支中克隆它：

https://github.com/OrionInnovationTRTech/magny/tree/1-first-ui

从上图可以看出，我们的目标是与远程对等点建立视频聊天。这个过程将非常简单。我们将首先启动我们的网络摄像头，这也将创建一个RTCPeerConnection. 通过拨打电话，应用程序将创建 SDP 和 ICE 候选人并将其上传到 Firestore 数据库。我们只需要将呼叫 ID 传递给远程对等点。远程对等点将粘贴呼叫 ID 并应答呼叫。让我们继续创建本地连接。

创建对等连接和数据流

首先，我们需要创建一个对等连接，并创建一些信息来连接到远程对等设备。继续创建名为 connect.ts 的文件。你会发现，该文件一创建就会出错。这是因为 Vite 变体的系统只编译 main.ts 文件。其他 TypesScript 文件都是类文件，它们需要导出简单的变量或函数。

const servers = {
    iceServers : [
        {
            urls: [ 'stun:stun.l.google.com:19302', 
                    'stun:stun1.l.google.com:19302']
        }
    ],
    iceCandidatePoolSize: 10
}

const peerConnection = new RTCPeerConnection(servers);

在建立连接之前，需要初始化一个新的 RTCPerConnection，它由几个 STUN 服务器提供。有许多 STUN 服务器可供使用，这里我们将继续使用 Google 提供的服务器。 iceCandidatePoolSize 允许我们在创建要约之前就创建 ICE 候选者。我们将获得多少 ICE 候选人取决于连接的内容。在本例中，我们将在连接中添加摄像头轨迹，并在此之前获得几个 ICE 候选者。说到摄像头，让我们同时添加视频和远程同行的视频。

export async function startLocalCamera() {
    let localStream = await navigator.mediaDevices.getUserMedia({ video: true, audio: true });

    // Push tracks from localStream to peerConnection
    localStream.getTracks().forEach( track => {
        peerConnection.addTrack(track, localStream);
    })

    // Add stream to local video element
    const localVideo = document.querySelector('#localVideo') as HTMLVideoElement;
    localVideo.srcObject = localStream;
}

export async function getRemoteCamera() {
    let remoteStream = new MediaStream();

    // Get tracks from the peerConnection
    peerConnection.ontrack = event => {
        event.streams[0].getTracks().forEach( track => {
            remoteStream.addTrack(track);
        })
    }

    // Add stream to remote video element
    const remoteVideo = document.querySelector('#remoteVideo') as HTMLVideoElement;
    remoteVideo.srcObject = remoteStream;
}

第一个功能将开始从网络摄像头获取视频。我们将同时启用视频和音频。从网络摄像头获取视频流后，我们可以通过 getTracks() 方法对其进行迭代。我们将对其进行迭代，并将其逐一添加到我们的 peerConnection 中，以便将流媒体发送到远程对等设备。

由于我们将在本地设备上测试应用程序，因此最好将音频设置为false，否则会产生回声。

第二个函数将获取远程对等设备的数据流。我们正在监听来自 peerConnection 的音轨。我们将每条轨道添加到 remoteStream，remoteStream 会将视频和音频反映到 remoteVideo 中。现在，当我们点击 “启动网络摄像头 “按钮时，应用程序是这样的：

我们迈出了建立连接的第一步，在对等方之间打开了一条轨道。要绑定这些轨道，我们需要向远程对等设备发出信号。在上一篇文章中，我们通过复制和粘贴来向远程对等设备发出信号。然而，这种解决方案并不理想，因为我们需要用户打开控制台。我们将在数据库中存储这些 SDP 对象和 ICE 候选对象，而不是获取整个 SDP。远程对等设备将从数据库中获取凭据。我们唯一需要发送的是呼叫的 ID，其中包括报价和应答候选人。为此，我们将使用 Firebase 的 Firestore 数据库。

创建并导入 Firebase 项目

Firebase 是开发移动和 Web 应用程序的绝佳工具，它被数百万开发者使用，并得到了谷歌的支持。对于我们的用例，我们将使用它作为信号发送的数据库。

登录Firebase后，单击指示的按钮进入控制台。它应该位于右上角。在控制台中，您将看到您的项目（如果有）和一些选项，例如演示项目。从头开始创建一个新项目，单击“添加项目”。

第一步，我们将项目命名为“magny”。可以将其命名为任何想要的名称，不存在诸如“此名称已被占用”之类的限制，因为 Firebase 将为每个项目分配一个 ID，这样即使它们具有相同的名称，每个项目也是唯一的。

第二步将询问您是否要为此项目启用 Google Analytics。如果您想进一步改进这个项目，启用它是一个好主意。请注意，Google Analytics 超出了本教程的范围。如果您启用它，Firebase 会要求您选择一个用于 Analytics 的帐户。现在选择默认帐户就足够了。完成此步骤后，等待项目创建，应该需要几秒钟的时间。

创建项目后，我们需要添加一个应用程序来使用数据库。对于本例，我们将选择一个 Web 项目。