如何创建视频聊天应用程序?(上)

常见的视频应用程序都会利用一项技术——WebRTC。 WebRTC是一项新技术,它允许开发人员通过日常使用的浏览器,在网络上交换数据甚至媒体。考虑到此类功能仅作为插件(如嵌入式插件)可用,不可不称其为十年来的巨大技术变革。

即使你没听说过WebRTC,以前也可能用过它。Whatapps、Facebook、甚至Google handout里都有它的身影。WebRTC,又称网络实时通话,能让你在浏览器之间建立直接连接。这项技术都7年了,我才赶上这趟末班车。我设法创建了自己的WebRTC应用程序,以更好地理解该工具。

这是我的WebRTC应用程序,点击这里即可查看。

本文我将介绍一些有关WebRTC的基础知识:

1. WebRTC如何运作?

魔术实际上不是魔术。只是在黑暗之处迅速完成的一系列复杂手法。就像鸭子一样。它们看起来像在水面上优雅地滑行。但当你深入幕后,就会发现都是些稀松平常的方法。

2. 运行WebRTC需要哪些组件?

网络应用程序有其各自不同的组件,大多都是我们看不见的,例如服务器等。但是它们就像汽车引擎,开车时看不到它(除非你驾驶的是Doge Charger R / T),但这并不意味着发动机并不在工作。

图片来源:carsforsale

3. STUN服务器的用途?

本节我们会详细介绍在整个过程中如何,以及何时需要STUN服务器。

4. TURN服务器的用途?

在本节中,我们会讲一下何时需要TURN服务器的。并非在所有情况下我们都需要它,如果你必须处理较少的直接用例,一个组件就够了。

5. 针对不同用例和优化的会议室容量,我们要用到哪些WebRTC架构?

说到WebRTC,它主要有四种类型的体系结构。当你使用zoom,你是否想过服务器是如何处理有160位成员及以下的会议呢?这不是魔术,实际上它需要传输大量数据,10分钟的会话就会产生数TB的数据。

为业务用例组建正确的架构,你就成功了一半。

6. 如何测试你的WebRTC和免费资源

在组建自己的WebRTC应用程序时,我找到了一些有趣的工具和资源,能和简单的WebRTC应用程序的不同组件相适配。

让我们开始回答这些问题吧!

1. WebRTC如何运作?

当第一次发起视频聊天,首先你需要向自己所在的房间发出信号。这种告诉其他人你已经就位的方式称为信令。就比如如果你是第一个来到派对的人,理论上你仍会打声招呼,但没人会回应罢了。

从技术上讲,信令是ICE 框架(Interactive Connectivity Establishment)的一部分,是相互查找,然后通过交换媒体信息来协调通信的过程。信令使用会话描述协议(SDP)来收集网络信息,例如用于媒体交换的IP地址和端口号。

作为开启和管理会话邀请的标准方法,会话描述协议(SDP) 以基于文本的格式体现浏览器的功能和首选项。

如果你的浏览器要连接到其他浏览器,要在SDP中交换的信息包含以下内容:

  • 会话控制消息,用于打开或关闭通话;
  • 错误消息;
  • 媒体元数据,例如编解码器和编解码器设置,带宽和媒体类型;
  • 密钥数据,用于建立安全连接;
  • 网络数据,例如外界看到的主机IP地址和端口。
WebRTC应用程序的架构

2. 要启动、运行WebRTC应用程序,需要哪些东西?

  • 你需要一个用户界面。

你需要一个网络应用程序,该应用程序要能在加载或单击按钮时建立连接,然后显示同一个聊天室中你这一端发送的视频数据。

技术层面上来说,就是你要创建一个RTCPeerConnection,并将其发送到远程端存储在自己的电脑中。建立好网络应用后,你可以把网络应用程序托管在服务器中的某个位置,以便朋友可以公开访问它。

  • 你需要一个服务器来发送信令。

还记得我们提到的信令吗?它用于向制定房间中的所有人提示你进入房间。当你进入时,会议室中现有的每个成员都将通过SDP记录你的细节和远程信息,并将其存储在他们的电脑上,同时也准备从你那里接收媒体数据。

技术层面上来说,WebRTC处理SDP信息的创建和处理,但不处理其发送和接收。因此这样的传输需要服务器。利用websocket服务器执行此传输和初始化是很常见的事情。

  • 你需要一个STUN服务器。

该服务器用于检索远程端的公共IP地址。简单来说,就是我们每个人都有一个公共IP地址,并使用STUN服务器获取此信息。然后这些信息会成为你刚进入房间时需要发送给另一端的SDP信息的一部分。

  • 你可能需要一个TURN服务器

如果你需要与你的远程端联系,但无法直接与其联系的话,TURN服务器可以作为媒介来为你传递消息。有网友在Quora中问到了这个问题,详细信息点此查看。

相关阅读:如何创建视频聊天应用程序?(下)

文章地址:https://blog.phuaxueyong.com/post/2020-06-15-how-to-make-a-video-chat-app/

原文作者:JOSHUA PHUA

填写常用邮箱,接收社区更新

WebRTC 中文社区由

运营