构建WEBRTC视频聊天应用程序

WebRTC的兴起以及浏览器处理实时点对点通信能力的增强，使得构建实时应用程序比以往任何时候都更容易。本文将探讨SimpleWebRTC及其在WebRTC技术实现中的应用，并介绍其他可实现相同目标的替代方案。

如果您需要了解WebRTC和点对点通信的背景知识，建议阅读“WebRTC的黎明”和“getUserMedia API简介”。

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

我们将主要关注SimpleWebRTC平台。稍后，我们将简要介绍其他商业和开源替代方案，这些方案可以帮助您实现相同的目标。

关键要点

• WebRTC允许在Web浏览器内直接进行点对点实时通信，无需第三方插件，支持Chrome、Firefox和Safari等现代浏览器。
• WebRTC中的信令（用于建立对等连接的关键）依赖于STUN和TURN服务器来绕过NAT（网络地址转换）和防火墙，确保在各种网络配置下的连接性。
• SimpleWebRTC提供了一个构建和部署WebRTC应用程序的综合平台，提供SDK、托管服务和技术支持，使开发人员更容易实现自定义视频聊天解决方案。
• SimpleWebRTC的替代方案，例如Daily.co和其他商业平台，提供了不同程度的易用性和自定义选项，以满足从快速设置到完全品牌化解决方案的需求。
• WebRTC应用程序的部署需要考虑网络可靠性、安全性以及浏览器兼容性，商业平台简化了许多与自定义开发相关的复杂性。

什么是WebRTC？

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

较旧的浏览器版本和传统浏览器（如Internet Explorer）不具备这项技术。用户需要使用最新的浏览器。您可以查看完整的受支持浏览器列表：

2021年1月，万维网联盟（W3C）将WebRTC 1.0规范从候选推荐状态转变为推荐状态。考虑到这项技术是在10年前首次发布的，这是一个非凡的成就。

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

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

浏览器信令的工作方式

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

NAT设备保护个人计算机免受互联网上恶意用户通过IP地址的直接攻击。不幸的是，它也阻止具有私有IP地址的设备通过互联网连接到另一个私有IP设备。

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

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

这是一个动画演示：

图片说明：WebRTC信令

要设置WebRTC信令，ICE框架需要您提供以下两种类型的服务器。

1. STUN服务器

STUN（用于NAT的会话遍历实用程序）服务器的功能正如我上面所描述的那样。它只是为计算机交换联系信息提供一个会议空间。一旦信息交换完毕，对等计算机之间就建立了连接，然后STUN服务器就离开了其余的对话。

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

<code class="language-javascript">function createPeerConnection() {
  myPeerConnection = new RTCPeerConnection({
    iceServers: [
      {
        urls: "stun:stun.stunprotocol.org",
      },
    ],
  });
}</code>

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

2. TURN服务器

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

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

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

图片说明：显示整个WebRTC过程的完整架构图。

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

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

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

什么是SimpleWebRTC？

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

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

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

图片说明：Talky

图片说明：网络辅导应用程序

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

• 安全传输视频、语音和屏幕共享
• 端到端加密
• 支持多达30个并发用户
• 无限房间

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

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

小型组计划的好处是可以使用端到端加密，而大型组计划则不能。在小型组计划中，60-80%的会话是对等连接，媒体流永远不会接触服务器。此类会话的带宽消耗不收费。

对于大型组计划，流量通过称为SFU（选择性转发单元）的服务器路由，所有流都会被计量。

需要注意的是，大多数商业替代方案（我们稍后将简要介绍）采用按分钟计费。乍一看，它似乎相当实惠。但是，您确实会因对等连接而收费，而SimpleWebRTC则免费提供。

(以下内容由于篇幅过长，将进行精简，保留核心信息和代码示例。完整的原文请参考原文档。)

先决条件

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

• React
• Redux
• 异步Redux库——例如Redux Thunk、Redux Saga和Redux Observables

设置帐户

访问simplewebrtc.com的注册页面并注册新帐户。您将获得2GB带宽，如果您注册他们的新闻通讯，则会额外获得3GB带宽。此配额应该足以开发和测试您的视频聊天应用程序。

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

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

构建和运行示例应用程序

（代码示例精简）

部署

（部署步骤精简）

SimpleWebRTC的替代方案

（替代方案简要介绍）

结论

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

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

(FAQ部分精简)

以上是构建WEBRTC视频聊天应用程序的详细内容。更多信息请关注PHP中文网其他相关文章！