标签:视频通话 lis tcp 复杂 etl 总结 实现 desc 没有
WebRTC(Web Real-Time Communications), 是一个可以让我们在浏览器上实现P2P的协议。 我们可以使用此协议传输文字,语音,视频及文件等内容。 本文将我学习过程中的一些个人理解记录下来了。强烈建议阅读MDN的文档进行系统学习。
首先,我们有点A和点B想要互相通信。同时,我们需要一个中间人S用来传输信息,S可以是一个服务器,也可是是一个人来手动传递。
A和B分别创建RTCPeerConnection对象 - connection.
A和B分别监听各自 connection.onicecandidate 事件,此事件被调用时会提供一个唯一凭证candidate.
A首先调用connection.createOffer获得一个凭证offer, 然后调用connection.setLocalDescription(offer).之后通过S把offer传递给B.
B收到A提供的offer, 调用connection.setRemoteDescription(offer),然后通过connection.createAnswer()得到一个凭证answer,调用connection.setLocalDescription(answer),并通过S将answer返回给A.
A收到B提供的answer, 调用connection.setRemoteDescription(answer).
此时A和B都获取到了本地和远程的基本信息.
之后A和B再通过类似流程相互传递拿到的candidate, 分别调用 connection.addIceCAndidate(candidate).注意此时传入的candidate是对方提供的.
以上步骤完成后, A和B之间就建立好了P2P的链接,可以进行通信了.
RTCPeerConnection的createOffer和createAnswer方法创建的都是SDP对象,在浏览器中为RTCSessionDescription类.
SDP对象用来描述需要传输内容的一些信息,例如格式,分辨率,编码。因此在调用createOffer和createAnswer前需要先调用传输内容相关的接口,如addStream.
双方交换SDP,即可让双方知道对方要传输内容的一些基本信息。
A和B建立链接则需要分别拿到对方的candidate.
以上流程只提供了如何使A和B建立链接,那么要如何传输视频流呢?
navigator.mediaDevices.getUserMedia({ video: true, audio: false })
.then(stream => {
// 使用 stream
}).catch(err => {
console.log(‘An error occured ‘ + err);
});
一开始学习的时候我一直有疑问,现实生活中网络情况很复杂,如果没有公网ip或者不在一个网段下,WebRTC是如何让A和B互相找到对方,或者说通过哪些配置我才能让A和B互相找到。
其实是WebRTC使用了ICE协议.目前ICE主要有两种协议,分别是STUN和TURN.
我们在创建RTCPeerConnection对象时可以传入ICE有关的配置,例如:
const peerConnection = new RTCPeerConnection({
iceServers: [
{ urls: [‘turn:turn1.example.com‘, ‘turn:turn2.example.com‘] }
{ urls: ‘stun:stun1.example.com‘ }
]
});
然后WebRTC在无法直连时会依次尝试通过提供的iceServers, 直到某一个可以使用,然后调用 RTCPeerConnection.onicecandidate 回调方法,传入可以使用的ICE token. A和B分别拿到自己的ICE token, 通过S传给对放, 当A和B都拿到对方的token后就知道如何建立到对方的链接了。
因此为了可以使A和B方便的建立链接,我们需要提供一个Signal服务器S和数个支持ICE协议的服务器.其中S服务器只要负责在A和B之间传输数据,因此可以自己选择喜欢的方式实现,常用的就是使用WebSock, 类似于实现一个简单的聊天室。而支持ICE协议的服务器,coturn就可以很好的胜任,当然也可以选择自己喜欢的ICE服务器,甚至使用第三方提供的。
在学习过程中我主要依靠MDN上提供的资料和教程。
1. 视频通话demo.
1. demo代码.
1. coturn编译中openssl问题的解决方法.
标签:视频通话 lis tcp 复杂 etl 总结 实现 desc 没有
原文地址:http://www.cnblogs.com/zihuyishi/p/7647236.html