它的全称是WEB Real-time communication。一开始我还觉得是一种通讯技术。这里的communication主要是人与人之间的,因此它解决了在网页视频、音频的播放和获取的问题。它的目标是但愿用户之间直接通讯,而不是经过服务器来进行交互。简单地说就是在浏览器上实现视频通话,并且最好不须要中央服务器。html
你们应该仔细看看这个教程 ,我但愿这篇笔记能够更快地帮助你们理解,说明一下比较容易困惑的点,少走一些弯路,而不是取代这篇教程。html5
- getUserMedia() : 获取视频和音频。git
- MediaRecorder : 记录视频和音频。github
- RTCPeerConnection : 创建视频流。web
- RTCDataChannel : 创建数据流。浏览器
然而在现实中网络是不通畅的,2个浏览器之间没法直接创建链接,甚至都没法发现对方。为此须要额外的技术来完成链接。服务器
JSEP:
socket
- 首先建立 RTCPeerConnection 对象,仅仅是初始化。
- 使用 createOffer/createAnswer 来交换SDP,sdp中包含网络信息,RTCPeerConnection 对象得以创建链接。
- 激活onicecandidate完成链接。
WEBRTC没有规定createOffer/createAnswer时使用的协议,所以signaling server 只要能够与浏览器交换SDP便可。能够用socket.io/wensocket等通讯技术把createOffer/createAnswer中的SDP给送到对方手里就行了。
下面我将用一个简单的例子来讲明链接是如何创建的。
为了更好地说明信号服务器的做用,我把它直接给拿掉了。取而代之的是一块公告牌。
在sendMessage
和receiveMsg
中,将要发送的信息写在页面的msg下方。没错,人工复制便可。
- 首先打开2个页面,一个主动方点击call,另外一个被动方点击recv
- 将caller的消息复制到receiver的answer按钮边上的文本框内,再点击answer。
- 将receiver的消息复制到caller的answer按钮边上的文本框内,再点击answer。
- 点击send将send左边的文本发送到对方send右侧的文本框内。
-
建立对象 。
-
绑定回调函数。
peerConn = new RTCPeerConnection(pcConfig); peerConn.onicecandidate = handleIceCandidate; dataChannel = peerConn.createDataChannel('1'); channel.onopen = function() { console.log('CHANNEL opened!!!'); }; channel.onmessage = function(event){ remoteText.innerText = event.data; };
-
提供服务:createOffer。
这期间要发送offer,candidate消息。 `peerConn.createOffer(onLocalSessionCreated, logError);` 在`onLocalSessionCreated`中调用`sendMessage`。 随后会触发`handleIceCandidate`调用`sendMessage`。
-
建立应答: createAnswer。
peerConn.setRemoteDescription(new RTCSessionDescription(message), function() {}, logError); peerConn.createAnswer(onLocalSessionCreated, logError);
注意,这一步是在receiver端进行的。 跟createOffer相似,createAnswer会发送一个answer消息,随后发送candidate消息。
-
添加candidate
peerConn.addIceCandidate(new RTCIceCandidate({ candidate: message.candidate }));
-
链接创建
原文作者:菜鸟学院