用WebRTC做一个简单的视频通话

作者:scaledrone(原文链接

翻译:刘通

原标题:WebRTC Tutorial: Simple video chat

simplechat1

这篇文章会教给你:

# 如何创建一个一对一视频通话

# 如何用Scaledrone进行信令,好不再需要编写服务器代码

点击此处运行演示程序

HTML标记

HTML比较基础。我们需要两个视频元素。一个给我们网络摄像头产生的视频流,另一个给远端连接。让我们将我们这端的视频静音,这样就只能听到远端视频的声音了。

WX20190108-180209@2x

你可以通过点击此处链接跳转查看完整的index.html文件。

设置JavaScript

对于那些需要同时支持多于一个通话的应用来说,会给每个聊天室产生一个不同的URL哈希。

让我们从URL的哈希部分读取聊天室的名称。如果URL没有哈希部分,那我们就生成一个。然后可以把这个现生成的URL发送给朋友。

// Generate random room name if needed
if (!location.hash) {
 location.hash = Math.floor(Math.random() * 0xFFFFFF).toString(16);
}
const roomHash = location.hash.substring(1);

configuration会传给RTCPeerConnection实例。我们可以使用Google的公共STUN服务器。

simplechat4

onSuccessonError函数会被用来进行更清晰的回调处理。

simplechat5

连接到信令服务器

信令是用来发现WebRTC对等端并且与之进行协商过程的。让我们使用Scaledrone作为我们的信令服务器,因为这样我们不需要编写任何服务器代码就可以使用WebRTC了。但是,如果你用的是自己写的信令服务器或者其他家的服务器,本篇教程还是适合的

Scaledrone的工作方式是将你加入到一个房间中,然后它会广播信息发给这个房间中所有的用户。这让Scaledrone非常适合进行WebRTC信令。

想要加入Scaledrone就需要在结尾的</head>之前添加这个脚本标签:

simplechat6

连接到Scaledrone之后,我们要加入一个房间(房间名可以从URL哈希处获得)。members事件会告知谁加入进了房间,包括我们:

# 如果我们是当前房间中的唯一一个人,我们会启动WebRTC代码然后等待另一个用户的加入申请。

# 如果我们是第二个加入的用户,我们会启动WebRTC代码,然后发送申请给第一个用户。

# 第三个或者更多用户连接的时候房间就已经满了。

simplechat7

sendMessage函数会发送一条信令消息给另一个连接。

simplechat8

WebRTC

终于到了有趣的部分!

RTCPeerConnection示例中,pc表示的是本地电脑和远端对等端之间的WebRTC连接。

RTCPeerConnection发出处理

# onicecandidate返回本地产生的ICE候选项来信令给其他用户。我们将它传递给我们的信令服务。

# onnegotiationneeded当发生改变需要进行会话协商时被出发。这个事件开启createOffer处理,并且只会被请求方用户处理。

# onaddstream返回远端用户的远端视频和音频流。将它们设成远端视频元素的源。

最后,我们得到音频和视频流,将其设成本地视频流的源,并且将其加入到连接中。

simplechat9

为了收听从信令服务来的消息,我们定义一个startListentingToSignals函数。我们对两类消息感兴趣;它们就是我们在上面代码中发出的消息:

# message.sdp – 会话描述协议是一个描述远程连接本低端的字符串。从另一端接收到请求或者应答之后我们就可以回应它。

# message.candidate – 在我们连接远端描述中加入新的ICE候选。

simplechat10

localDescCreated在创建请求以及响应的时候被调用。它会更新对于连接的本地描述。

simplechat11

总结

正如你看到的,使用WebRTC创建一个视频聊天还是挺简单的,大约只需要100行代码就能完成。如果你不用自己写任何服务器端代码的话,做视频聊天会更简单。

 

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

WebRTC 中文社区由

运营