构建WebRTC视频聊天应用程序

2021-07-31

随着WebRTC的出现和浏览器实时处理对等通信的能力不断增强，构建实时应用程序比以往任何时候都容易。在本文中，我们将了解 SimpleWebRTC公司以及如何使用该平台实现WebRTC技术。我们还将研究其他可以帮助我们实现相同目标的替代方案。

如果您需要一些关于WebRTC和点对点通信的背景知识，我建议您阅读鈥WebRTC的曙光 Holmium and holmium用户API简介 ”.

由于构建自定义WebRTC应用程序的复杂性，本文将不作为构建WebRTC应用程序的分步教程。相反，我们将研究构建自己可靠应用程序所需的库和服务器类型。我将提供完整的示例应用程序的链接，你可以在构建你的应用程序时参考。

我们的重点是 SimpleWebRTC公司作为一个平台。稍后，我们将简要介绍其他商业和开源替代方案，它们可能有助于您实现同样的目标。

什么是WebRTC

WebRTC（Web实时通信）是一个开源项目，它允许Web浏览器之间的点对点实时通信，在网络上传输实时视频、音频和数据流。现代桌面和移动浏览器，如googlechrome、Mozilla Firefox、Safari、Opera和其他基于Chrome的浏览器已经在本地实现了这项技术。这是个好消息，因为用户不必安装第三方插件或应用程序来访问该技术。

旧版浏览器和旧版浏览器（如Internet Explorer）没有此项技术。用户需要使用最新的浏览器。你可以检查支持的浏览器的完整列表 :

2021年1月，WebRTC 1.0规范从候选人推荐到建议状态由万维网联盟. 考虑到这项技术10年前首次向公众发布，这是一项了不起的成就。

WebRTC规范涵盖了浏览器如何访问本地媒体设备，以及如何使用一组实时协议将媒体和通用应用程序数据传输到浏览器。它通过一组JavaScript api来实现这一点，前面链接的文章已经介绍了这些api。该规范还确保所有通信都是加密的，并且不需要的第三方不能窃听流。

需要注意的是，WebRTC并不包括所有内容，比如发信号，启动浏览器之间连接的过程。为了防止潜在的新技术的限制，规范的这一部分被省略了。第二个原因是WebRTC主要是客户端技术，而诸如会话之类的问题最好使用服务器技术来处理。

Web浏览器的信令工作原理

WebRTC的定义就是web浏览器之间的对等通信。事实上，大多数浏览器运行在NAT（网络地址转换）设备和防火墙（可选）后面的计算机上。NAT设备，通常是路由器或调制解调器，允许具有私有IP地址的计算机通过一个公共IP地址连接到Internet。

NAT设备保护个人计算机不被恶意用户通过IP地址直接利用。不幸的是，它还阻止具有私有IP地址的设备通过Internet连接到另一个私有IP设备。

为了克服这一挑战ICE（交互式连接建立）协议是由互联网工程工作队允许专用IP计算机通过公用网络发现并连接到其他专用计算机。

这涉及到使用公共信令服务器两个客户端都可以轻松连接到。对等计算机连接到此服务器并使用它交换数据源和接收器所需的IP地址和端口。有了这些信息，他们可以建立彼此的直接连接，并开始流式传输视频、音频和数据。

下面是一个动画演示：

webrtc stun only signaling

图片来源：WebRTC信令

要设置WebRTC信令，ICE框架要求您提供两种类型的服务器，详细信息如下。

1.眩晕服务器

这个STUN（NAT会话遍历实用程序）服务器正是我刚才描述的。它只是提供了一个与计算机进行信息交流的空间。一旦交换了信息，对等计算机之间就建立了一个连接，然后STUN服务器就不在剩下的对话中了。

下面是一个在客户机上运行的示例脚本，它允许浏览器通过STUN服务器启动连接。该脚本允许在一个失败的情况下提供多个STUN服务器url：

function createPeerConnection() {
  myPeerConnection = new RTCPeerConnection({
    iceServers: [
      {
        urls: "stun:stun.stunprotocol.org",
      },
    ],
  });
}

通过STUN服务器建立的连接是WebRTC通信的最理想和最经济的类型。用户几乎没有任何运行成本。不幸的是，由于每个对等端使用的NAT设备的类型，某些用户可能无法建立连接。在这种情况下，ICE协议要求您提供回退，这是一种不同类型的信令服务器，称为转弯服务器

2.转动服务器

ATURN（使用中继NAT进行遍历）服务器是STUN服务器的扩展。它与前一代的不同之处在于它处理整个通信会话。

基本上，在对等点之间建立连接之后，它接收来自一个对等点的流并将其中继到另一个对等点，反之亦然。这种类型的通信更昂贵，主机必须支付运行TURN服务器所需的处理和带宽负载。

以下是整个信令过程的图形化描述，首先涉及STUN服务器，然后是TURN服务器作为后备服务器：

webrtc stun turn signalling

图片来源：完整的体系结构图，显示整个WebRTC过程。

构建自定义视频聊天应用程序

虽然可以使用普通JavaScript代码和免费的公共STUN服务器来设置自己的视频聊天解决方案，但并不是每个人都能在您的平台上相互连接。如果您想为所有用户提供可靠的服务，则必须使用TURN服务器。

如前所述，设置WebRTC平台可能很复杂。对我们来说幸运的是，我们有一个多功能的商业平台，使得构建一个WebRTC视频聊天应用程序变得轻而易举。现在让我们看看SimpleWebRTC如何减轻我们的负担。

SimpleWebRTC是什么

SimpleWebRTC是一个平台，它为开发人员使用React构建和部署定制的实时应用程序提供了一个简单且经济高效的服务。具体来说，它们提供了以下内容：

  • SimpleWebRTCSDK：前端库
  • 托管：STUN/TURN和SFU（选择性转发单元）服务器
  • 技术支持
  • 定制应用程序开发和WebRTC咨询服务
  • 单一租户和内部基础设施
  • 健谈的：完全使用SimpleWebRTC构建的免费视频聊天应用程序

下面是他们帮助客户开发和启动的一些自定义视频聊天项目的屏幕截图。

web talky

图片来源： 健谈的

web tutoring

图片来源：网络辅导应用

SimpleWebRTC平台提供的主要WebRTC服务包括：

  • 视频、语音和屏幕共享的安全流
  • 端到端加密
  • 最多支持30个并发用户
  • 无限客房

在定价方面，他们提供以下服务计划 :

  • 小组：最多6名参与者，每月5美元起
  • 大型团队：最多30名参与者，每月3美元起

与大型组计划相比，小型组计划具有端到端加密可用的优点。在小组计划中，60-80%的会话是对等连接，媒体流从不接触服务器。这类会话的带宽消耗是不收费的。

对于大型组计划，流量通过一个名为选择性转发单元，所有的溪流都被计量。

值得注意的是，大多数商业替代品，我们稍后将简要介绍，都有每分钟定价。乍一看，它确实显得相当实惠。但是，对等连接确实要收费，SimpleWebRTC是免费的。

先决条件

SimpleWebRTC客户端库依赖于React和Redux生态系统。你需要具备以下方面的基本技能：

SimpleWebRTC SDK的未来版本将包括对其他框架的支持，如React Native、Angular、Fltter和Vue.js。此外，还计划发布“无代码”视频聊天解决方案，允许用户自动部署自定义品牌版本的 健谈的 .

设立帐户

去simplewebrtc.com 超出范围注册页面并注册一个新帐户。如果您注册了他们的新闻稿，您将获得2GB的带宽和另外3GB的带宽。这个津贴应该足够开发和测试你的视频聊天应用程序。

account sign up

注册后，您需要确认您的电子邮件地址。完成这一步应该会引导您进入仪表板页面，在那里您将收到API密钥。

sign up api key

使用此API密钥，您可以开始构建自己的自定义WebRTC应用程序。在下一节中，我们将运行SimpleWebRTC团队构建的完整示例应用程序。

构建并运行示例应用程序

在运行示例应用程序之前，让我们简单地看看如何从头开始。首先，您需要设置一个使用webpack进行开发的React项目。这个创建react应用程序发电机可以帮你

接下来，您需要至少安装以下Redux依赖项：

npm install redux redux-thunk react-redux

最后，安装SimpleWebRTC提供的客户端库：

npm install @andyet/simplewebrtc

安装包后，您需要更新index.js文件如下：

import { Provider } from "react-redux";
import React from "react";
import ReactDOM from "react-dom";
import * as SWRTC from "@andyet/simplewebrtc";

// ====================================================================
// IMPORTANT SETUP
// ====================================================================
// Replace `YOUR_PUBLISHABLE_API_KEY` here with the Publishable API Key
// you received when signing up for SimpleWebRTC
// --------------------------------------------------------------------
const API_KEY = "YOUR_PUBLISHABLE_API_KEY";
// ====================================================================

const ROOM_NAME = "YOUR_ROOM_NAME";
const ROOM_PASSWORD = "YOUR_ROOM_PASSWORD";
const CONFIG_URL = `https://api.simplewebrtc.com/config/guest/${API_KEY}`;

const store = SWRTC.createStore();

ReactDOM.render(
  <Provider store={store}>
    <SWRTC.Provider configUrl={CONFIG_URL}>
      {/* Render based on the connection state */}
      <SWRTC.Connecting>
        <h1>Connecting...</h1>
      </SWRTC.Connecting>

      <SWRTC.Connected>
        <h1>Connected!</h1>
        {/* Request the user's media */}
        <SWRTC.RequestUserMedia audio video auto />

        {/* Enable playing remote audio. */}
        <SWRTC.RemoteAudioPlayer />

        {/* Connect to a room with a name and optional password */}
        <SWRTC.Room name={ROOM_NAME} password={ROOM_PASSWORD}>
          {(props) => {
            /* Use the rest of the SWRTC React Components to render your UI */
          }}
        </SWRTC.Room>
      </SWRTC.Connected>
    </SWRTC.Provider>
  </Provider>,
  document.getElementById("app")
);

正如您在上面的代码中看到的，SimpleWebRTC库处理媒体连接、文件室创建，并在Redux的帮助下跟踪连接状态。不幸的是，我们不会继续这个例子，因为这将弥补相当长的教程。

相反，我们将查看一个完整的示例项目，您可以从中下载 github，你可以看到它们是如何组合在一起的。下载后，您需要在public/index.html，如下所示：

<!DOCTYPE html>
<html lang="en">
  <head>
    <!-- IMPORTANT SETUP -->
    <!-- Change the YOUR_API_KEY section of the config URL to match your API key -->
    <meta
      name="simplewebrtc-config-url"
      content="https://api.simplewebrtc.com/config/guest/<PLACE YOUR API KEY HERE>"
    />
  </head>
  <body>
    ...
  </body>
</html>

以下是有关设置示例应用程序的分步说明：

# Download sample app to your workspace
git@github.com:simplewebrtc/simplewebrtc-talky-sample-app.git

# Install Package dependencies
cd simplewebrtc-talky-sample-app
npm install

# Edit public/index.html as described above

# Start the dev server
npm start

浏览器应在上自动打开localhost:8000. 建立视频聊天会议基本上有三个步骤：

  1. 指定房间名称
  2. 允许摄像机和麦克风过程
  3. 加入呼叫

完成上述步骤后，您将看到类似于下面所示的屏幕。

simplewebrtc talky sample app

要在本地测试应用程序，可以使用同一本地网络上的另一个设备连接到该应用程序。您所要做的就是提供主机的IP地址和端口。您可能还需要在主机上配置防火墙，以允许外部网络设备连接到应用程序的端口。

部署

为了部署simplewebrtc-talky-sample-app，则需要运行命令npm运行构建. 这将生成一个dist文件夹。复制此文件夹的内容并通过FTP上载到您的web托管平台。您也可以使用诸如 一网情深为您主持应用程序。但是，部署过程不同。您需要执行以下操作：

  1. 分叉或上载simplewebrtc-talky-sample-app你自己的GitHub帐户。确保你已经承诺索引.html用你的API密钥
  2. 转到Netlify仪表板，单击来自Git的新站点，选择GitHub，授权Netlify访问您的GitHub帐户，然后找到并选择simplewebrtc-talky-sample-app存储库
  3. 在“生成设置”页中，确保build命令是npm run build以及发布目录是dist. 单击部署站点按钮

几分钟后，Netlify将获取源代码，安装依赖项，运行build命令，并将其部署到其平台上唯一的子域中。从这里，你可以与世界上任何你想视频聊天的人分享这个网址。

SimpleWebRTC的替代品

正如我们所承诺的，我们将以一些SimpleWebRTC的替代品结束。

每天

日报.co是一个可供选择的商业平台，为开发者提供实时视频API。如果您想快速托管自己的webRTC应用程序，它提供了最简单的设置过程。你要做的就是注册帐户在他们的平台上获得一个唯一的子域。

您还需要在浏览器上执行快速视频测试，以确认API视频通话技术在您的终端上工作。接下来，您将被重定向到需要创建文件室的仪表板。就这么说吧hello现在。仪表板为您的房间提供了许多可配置的设置，如隐私、屏幕共享和录制权限。

设置好房间后，可以创建HTML文件并复制以下代码：

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Vite App</title>
  </head>
  <body>
    <div id="root"></div>
    <script type="module" src="/src/main.jsx"></script>
    <script src="https://unpkg.com/@daily-co/daily-js"></script>
    <script>
      callFrame = window.DailyIframe.createFrame();
      callFrame.join({ url: "https://you.daily.co/hello" });
    </script>
  </body>
</html>

上callFrame.join({ url: "https://you.daily.co/hello" })线路，你需要更换你你的子域，和hello你房间的名字。您可以在浏览器中本地打开页面，并且应该能够进行视频通话。但是，您需要将此页面托管在公共服务器上，以允许其他人与您连接。

如果您需要与远程团队进行通信，上述设置非常快速。但是，如果您需要使用自己的品牌或定制的前端功能构建一个自定义视频聊天应用程序，则需要使用每日js前端库 :

npm install @daily-co/daily-js

您的应用程序将需要像webpack或Rollup这样的捆绑程序才能使用此库。不幸的是，Vite和packet用户运气不佳。在他们的网站上有一个完整的React应用程序示例github回购你可以去看看。这里有关于如何配置应用程序以及如何将其部署到Netlify的说明。

尽管这个库做了很多繁重的工作，但是您会注意到提供的示例非常复杂，因为您需要跟踪大量的边缘案例和需要提供的功能，以便为用户提供可靠的视频聊天体验。

其他替代方案

下面我将列出SimpleWebRTC和Daily的许多其他替代方案。商业类包括：

Twilio、Vonage和Frozen Mountain为开发人员提供构建和运行实时视频聊天解决方案所需的前端库和后端服务器。Xirsys只提供后端服务器，即STUN和TURN服务器。您需要使用开放源代码库（如PeerJS）来连接客户机库。

有许多开源的WebRTC库可以在线使用。但是，除以下情况外，大多数未被积极维护：

在本教程的指导下 谷歌代码实验室，您可以使用普通JavaScript和几个Node.js库来构建一个简单的视频聊天应用程序。但是，本指南中没有涵盖许多边缘情况，您必须自己解决。

结论

总之，在使用商业平台时，使用WebRTC构建实时视频聊天解决方案更容易。走开源路线是可行的，但您需要托管自己的TURN服务器，以确保所有用户的连接可靠。在任何情况下，构建过程都可能非常耗时，考虑到我们所看到的示例应用程序的相对复杂性。

他们要问自己的关键问题是，花时间构建自己的定制实时解决方案是否值得。除非您计划将WebRTC作为您的核心业务，否则您可能需要首先咨询一家拥有处理该技术经验的公司。