如何构建WebRTC视频聊天应用程序？分步指南

2021年11月30日01:53:43 发表评论 936 次浏览

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

如果你需要一些有关 WebRTC 和点对点通信的背景知识，我建议你阅读“ WebRTC 的黎明”和“ getUserMedia API 简介”。

如何构建WebRTC视频聊天应用程序？由于构建自定义 WebRTC 应用程序的复杂性，这不是构建应用程序的分步教程。相反，我们将查看构建你自己的可靠应用程序所需的库和服务器类型。我将提供完整示例应用程序的链接，你可以在构建应用程序时参考。

我们的重点将主要放在SimpleWebRTC作为平台上。稍后，我们将简要介绍可以帮助你完成相同任务的其他商业和开源替代方案。

WebRTC视频聊天应用构建教程：什么是 WebRTC

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

较旧的浏览器版本和旧版浏览器（例如 Internet Explorer）没有此技术。用户将需要使用最新的浏览器。你可以查看支持的浏览器的完整列表：

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

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

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

Web 浏览器的信令如何工作

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

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

为了克服这一挑战，Internet 工程任务组提出了ICE（交互式连接建立）协议，以允许私有 IP 计算机通过公共网络发现并连接到其他私有计算机。

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

这是一个动画演示：

如何构建WebRTC视频聊天应用程序？分步指南

图片来源：WebRTC 信令

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

1. STUN 服务器

如何构建WebRTC视频聊天应用程序？该STUN（会话穿越应用程序的NAT）服务器不正是我刚才如上所述。它只是为计算机提供一个会议空间来交换联系信息。一旦交换了信息，在对等计算机之间建立连接，然后 STUN 服务器被排除在对话的其余部分之外。

这是一个在客户端运行的示例脚本，它允许浏览器通过 STUN 服务器启动连接。该脚本允许提供多个 STUN 服务器 URL，以防其中一个失败：

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

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

2. TURN服务器

WebRTC视频聊天程序实现示例准备：TURN（遍历使用中继NAT）服务器是STUN服务器的延伸。它与其前身的不同之处在于它处理整个通信会话。

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

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

如何构建WebRTC视频聊天应用程序？分步指南

图片来源：显示整个 WebRTC 流程的完整架构图。

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

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

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

WebRTC视频聊天应用构建教程：什么是 SimpleWebRTC

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

  • SimpleWebRTC SDK：一个前端库
  • 托管：STUN/TURN 和 SFU（选择性转发单元）服务器
  • 技术支援
  • 自定义应用程序开发和 WebRTC 咨询服务
  • 单租户和本地基础架构
  • Talky：完全使用 SimpleWebRTC 构建的免费视频聊天应用程序

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

如何构建WebRTC视频聊天应用程序？分步指南

照片来源：Talky

如何构建WebRTC视频聊天应用程序？分步指南

照片来源：网络辅导应用

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

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

在定价方面，他们提供以下计划：

  • 小团体：最多 6 人，每月 5 美元起
  • 大型团体：最多 30 人，每月 3 美元起

Small Group 计划的优点是提供端到端加密，而不是 Large Group 计划。使用 Small Group 计划，60-80% 的会话是点对点连接，其中媒体流从不接触服务器。此类会话的带宽消耗不收费。

使用大型组计划，流量通过称为SFU（选择性转发单元）的服务器进行路由，所有流都在其中进行计量。

重要的是要注意，大多数商业替代品（我们稍后将简要介绍）都有每分钟定价。乍一看，它确实看起来很实惠。但是，你确实需要为点对点连接付费，这对于 SimpleWebRTC 是免费的。

先决条件

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

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

设置账户

如何构建WebRTC视频聊天应用程序？前往 simplewebrtc.com 的注册页面并注册一个新帐户。如果你注册他们的时事通讯，你将获得 2GB 的带宽和另外 3GB 的带宽。此余量应足以开发和测试你的视频聊天应用程序。

如何构建WebRTC视频聊天应用程序？分步指南

注册后，你需要确认你的电子邮件地址。完成此步骤后，你将进入仪表板页面，你将在其中收到 API 密钥。

如何构建WebRTC视频聊天应用程序？分步指南

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

构建和运行示例应用程序

WebRTC视频聊天程序实现示例：在我们运行示例应用程序之前，让我们简要地看看如何从头开始。首先，你需要设置一个使用 webpack 进行开发的 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下载，在那里你可以看到它是如何组合在一起的。下载后，你需要在 中提供 API 密钥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. 加入通话

完成上述步骤后，你应该会看到与下图类似的屏幕。

如何构建WebRTC视频聊天应用程序？分步指南

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

WebRTC视频聊天应用构建教程：部署

为了部署simplewebrtc-talky-sample-app，你需要运行命令npm run build。这将生成一个dist文件夹。复制此文件夹的内容并通过 FTP 上传到你的网络托管平台。你还可以使用Netlify等服务为你托管应用程序。但是，部署过程是不同的。你需要执行以下操作：

  1. Fork 或上传simplewebrtc-talky-sample-app到你自己的 GitHub 帐户。确保你已提交index.htmlAPI 密钥。
  2. 转到你的 Netlify 仪表板，单击New Site from Git，选择 GitHub，授权 Netlify 访问你的 GitHub 帐户，然后找到并选择你的simplewebrtc-talky-sample-app存储库。
  3. 在构建设置页面中，确保构建命令为npm run build并且发布目录为dist。单击部署站点按钮。

几分钟后，Netlify 将拉入源代码，安装依赖项，运行构建命令，并将其部署到其平台上的唯一子域。从这里，你可以与世界上你想与之进行视频聊天的任何人共享此 URL。

SimpleWebRTC 的替代品

正如承诺的那样，我们将以 SimpleWebRTC 的一些替代方案结束。

Daily

如何构建WebRTC视频聊天应用程序？Daily.co是一个替代商业平台，为开发人员提供实时视频 API。如果你想快速托管自己的 webRTC 应用程序，它带有最简单的设置过程。你需要做的就是在他们的平台上注册一个帐户并获得一个唯一的子域。

你还需要在浏览器上执行快速视频测试，以确认 API 视频通话技术在你的终端上正常工作。接下来，你将被重定向到你需要创建房间的仪表板。让我们暂时调用它hello。仪表板为你的房间提供了许多可配置的设置，例如隐私、屏幕共享和录制权限。

WebRTC视频聊天程序实现示例：设置好房间后，你可以创建一个 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" })行，你需要更换you你的子域，hello你的房间名称。你可以在浏览器中本地打开该页面，并且应该可以进行视频通话。但是，你需要将此页面托管在公共服务器上，以允许其他人与你联系。

如果你需要与远程团队进行沟通，则上述设置既快捷又快捷。但是，如果你需要使用自己的品牌或自定义前端功能构建自定义视频聊天应用程序，则需要使用daily-js 前端库：

npm install @daily-co/daily-js

你的应用程序需要一个像 webpack 或 Rollup 这样的打包器来使用这个库。不幸的是，Vite 和 Parcel 用户运气不佳。在他们的GitHub 存储库中有一个完整的示例 React 应用程序，你可以查看。有关于如何配置应用程序以及如何将其部署到 Netlify 的说明。

尽管该库做了很多繁重的工作，但你会注意到提供的示例很复杂，因为你需要跟踪许多边缘情况以及需要提供的功能，以便为你的用户提供可靠的视频聊天体验。

其他替代品

除了 SimpleWebRTC 和 Daily 之外，还有许多其他替代方案，我将在接下来列出。商业的包括：

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

网上有许多开源 WebRTC 库。但是，除了以下内容外，大多数都没有得到积极维护：

在Google Codelabs上的本教程的指导下，你可以使用纯 JavaScript 和一些 Node.js 库来构建一个简单的视频聊天应用程序。但是，本指南未涵盖许多边缘情况，你必须自己弄清楚。

WebRTC视频聊天应用构建教程结论

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

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

木子山

发表评论

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen: