如何使用 WebRTC 与 Kurento 创建视频会议 App

本文做者 WebRTC Ventures 工程师。在 RTC 2018 实时互联网大会上，WebRTC Ventures 的资深软件工程师，将围绕 WebRTC 开发带来经验分享。欢迎访问 RTC 开发者社区，与更多WebRTC开发者交流经验。

了解 WebRTC 如何工做的一种简单方式是经过学习如何使用 WebRTC 和 Kurento 媒体服务器创建视频会议 App。尽管 WebRTC 初衷是创建peer-to-peer的链接，而媒体服务器对于添加诸如录制、多方通话等功能是很是有用的。咱们将会使用 Kurento，这个开源媒体服务器，来为咱们 App 在多于两个用户的状况下提供链接支持。接下来，让咱们来回顾总体的过程，咱们将经过 WebRTC 创建链接的过程分为三步：

1. 浏览器获取媒体设备（摄像头和麦克风）
2. 每个 peer 经过发信过程与其它全部 peer 交换信息。
3. 交换信息事后，peers 能够经过媒体服务器链接，并开始通讯。

注意，对于交换消息咱们依然须要一个信令服务器，对于 NAT 穿透咱们须要 STUN 或 TURN 服务器。另外，咱们添加了一个媒体服务器用来将流引到各个 peers。

咱们的 App 包括一个登录界面，在此用户输入名字和他想加入和交谈的房间号，在这个房间里他能够看到视频会议的其余参与者。

此教程的代码能够在 Github 上一个公共目录下得到，你能够将它 clone 到你的本地，直接使用，也能够跟着咱们这篇文章来一步步作起来。若是你选择后者，请下载 adapter.js 和 kurento-utils.min.js，以后咱们将会用到。

咱们使用 JavaScript 做为编程语言，使用 Node.js 做为运行引擎，所以若是你没有 node 的话须要安装它。咱们还会使用 Docker 来在本地运行媒体服务器。

让咱们从建立新文件夹开始，这将会是项目文件夹。

接着在里面建立一个叫作public的文件夹，如今将下载的library复制到这里。使用命令行，导航到项目文件夹，并输入以下命令来安装所须要的环境。在下载library的时候须要网络链接。

另外， 启动媒体服务器，在命令行输入如下命令。

开始时，咱们须要建立一个html文件包含两个divs，一个是用来登陆，另外一个用来实际交流。一样，咱们添加kurento-utils library,它须要adapter.js ， socket.io客户端library和client.js文件。

使用你最喜欢的文本编辑器，创建一个新文件夹，粘贴以下代码并保存到项目文件夹下，在public文件夹里命名为index.html.

很好，如今咱们来建立客户端的JS文件。咱们从获得网页元素的reference和声明客户用户名和房间号的变量开始，咱们一样须要声明一个变量用来储存一系列的会议参与者。接着，就像一对一版本的app同样，咱们使用socket.io链接信令服务器，并注册一个点击事件，用来向服务器发送第一条信息，这是一个‘’加入房间‘’的信息。此次咱们不直接使用socket.emit()函数，而是使用一个sendMessage()函数，它被定义在文件底部。咱们还须要声明服务器信息的handlers。

使用文本编辑器建立client.js文件，并保存在项目里的public文件夹下。

接着，咱们建立服务器。咱们首先添加所需的node packages.接着声明一对变量来存储Kurento 客户端reference，一个队列来存储在Kurento断点创建以前接收的ice candidates。

接着将App和Kurento服务器的URL设置成as_uri和ws_uri。注意，运行的时候，咱们尽可能少的使用package来为使用命令行设置这些值提供支持。

接着咱们对public文件夹创建一个static的host，并定义经过socket.io接收的events的handlers.最终咱们创建一个函数来从媒体服务器获得Kurento客户端的reference，并将App的听众设置在端口3000.

使用你最喜欢的文本编辑器来创建server.js文件并将其保存在项目文件夹下。

如今继续交谈过程，在服务器端，当咱们接收客户端发送的加入房间的信息以后，咱们调用joinRoom函数，它使用getRoom函数来管理房间。

在getRoom函数里，当第一个客户到达时，咱们建立一个新的房间，和一个新的Kurento MediaPipeline, 这个pipeline与房间和一个空的参与者的列表被分到一块儿。当另外一个客户到达时，咱们不须要建立新的pipeline，所以仅仅将客户添加到房间中。

回到joinRoom函数，在咱们获得房间以后，咱们建立一个Kurento WebRTC断点，它被分配到用户。接着若是队列中存在任何ice candidate，它将会被经过调用断点的addIceCandidate函数添加进去，接着咱们创建onIceCandidate 事件。

经过发送两条信息，函数结束：一条信息是对于其它在房间中的用户通知他们有新的参与者，另外一条信息是对当前用户通知当前存在的参与者。向server.js添加函数以下。

在客户端，两个函数管理服务器发送的newParticipantArrived’ 和 ‘existingParticipants事件，它们是receiveVideo和onExistingParticipants函数。

在onNewParticipants函数中咱们首先要创建视频元素来展现流，建立一个用户为当前参与者。用户对象将会存储新建立的视频元素和一个rtcPeer field.

在将用户对象存入全局参与者数组以后，咱们实现Kurento的API对象，并将其分配到rtcPeer filed，并准备一个请求来开始发信过程。经过调用receiveVideo函数结束函数。

每一个函数都具备它们本身的对于onOffer和onIceCandidate事件的内部函数，事件由rtcPeer对象激发，当准备好的时候，它们负责向服务器发送实际请求和ice candidates，发送receiveVideoFrom和candidate信息。将以下代码添加到client.js.

到目前为止，咱们完成了第一步，而且开始发信过程。

在服务器端，receiveVideoFrom和candidate事件由receiveVideoFrom和addIceCandidate函数处理。第三个叫作getEndpointForUser的函数一样被用来恢复与每个用户相关的Kurento WebRTC断点。

ReceiveVideoFrom函数很是简单，当它获取到合适的断点，它处理请求，产生一个应答，将其发送到客户端并开始收集ice candidates.一样方式， addIceCandidate函数接收ICE Candidate并将其添加到相应的断点中。GetEndpointForUser获取正确的断点来接收视频。添加以下代码到server.js中。

接着在客户端咱们须要处理服务器发送的receiveVideoAnswer和candidates事件，这是经过使用onReceiveVideoAnswer和addIceCandidate函数来完成的。添加它们到client.js文件中。

使用以上代码，咱们完成了发信过程，步骤2完成了。

当咱们在客户端使用kurento-utils library时，客户不须要再作额外的动做。所以步骤3自动完成。

如今是时候运行App了，在命令行，进入项目文件夹并输入以下命令

node server.js

接着使用Google Chrome或Mozilla Firefox，在三个或更多标签中打开http://localhost:3000，输入不一样的参与者姓名和相同的房间号并点击进入。