WebRTC技术初探与个人理解

WebRTC是什么

WebRTC是一个开源项目，包含相关协议及API具体实现。WebRTC的作用是实现浏览器端到端的实时数据传输。

端到端媒体传输的建立过程（eg A with B）

A获取媒体流(MediaStream)或数据流
一般通过MediaDevices.getUserMedia()获取媒体流，媒体流包含了请求媒体类型的（音视频）轨道MediaStreamTrack。一个流可以包含视频轨道，音频轨道或其他。关于MediaDevices参考这里。
通过MediaStream的addTrack方法可以添加轨道(有坑)。
A生成一个RTCPeerConnection接口对象
RTCPeerConnection接口代表一个由本地计算机到远端的WebRTC连接。该接口提供了创建，保持，监控，关闭连接的方法的实现。
pc = new RTCPeerConnection([RTCConfiguration dictionary]) 可选参数包括ice服务器等。
A将流加入到RTCPeerConnection对象中

pc.addStream(stream);
//或者加入轨道
stream.getTracks().forEach(track => pc.addTrack(track, stream));

A生成Offer信息

pc.createOffer(function(offer)=>{
//创建完成 TODO 5
},error)

A将生成的Offer设置为本地描述
RTCSessionDescription描述了连接或者待连接的端和这端的配置信息。

pc.setLocalDescription(new RTCSessionDescription(offer),function(){
//设置完成 TODO 6
},error);

A将生成的Offer发给另一端B（服务器中转）

send json.stringify(offer)

B生成RTCPeerConnection，并按需求设置流

new RTCPeerConnection()

B将收到的Offer设置为远端描述

pc.setRemoteDescription(new RTCSessionDescription(Json.parse(offerString)),function(){
    //设置完成 TODO 9
},error);

B生成Answer，并设置为本地描述

pc.createAnswer(function(answer){
    pc.setLocalDescription(new RTCSessionDescription(answer),function(){
        //设置完成，TODO 10
    })
},error)

B把Answer发送给发起方A(服务器中转)

send json.stringify(answer)

A将Answer设置为远端描述

pc.setRemoteDescription(new RTCSessionDescription(Json.parse(answerString)),function(){
    //设置完成
},error);

交换ICE 候选地址信息
建立连接过程中，会回调onicecandidate事件，传递ICE候选地址，我们需要将其转发至另一端，并通过另一端的方法addIceCandidate方法设置对方的候选地址。

pc.onicecandidate = function(event) {
  if (event.candidate) {
    // 发送  let iceinfo = event.candidate 至另一端
  } else {
    // All ICE candidates have been sent
  }
}
//另一端
//接收到上面的iceinfo
pc.addIceCandidate(new RTCIceCandidate(iceinfo));

理想情况下，现在已经建立连接了。

交换与使用媒体流

当一方addStream或addTrack后，另一方的RTCPeerConnection会触发onaddstream或addTrack事件回调，通过事件参数可以获取对面的流或轨道数据，以此进行媒体显示等。
当前版本的协议已经不再推荐addStream方法，应使用addTrack方法。

mozilla对于addStream的解释：

当类型为MediaStreamEvent的addstream 事件发生时，通过RTCPeerConnection触发RTCPeerConnection.onaddstream 事件处理函数。当远程媒体流MediaStream 添加到连接后发送事件。当RTCPeerConnection.setRemoteDescription() 后此事件立即被调用而不需要等待SDP交换完成。

创建数据通道(未测试)

//from https://developer.mozilla.org/zh-CN/docs/Web/API/RTCPeerConnection
var pc = new PeerConnection();
var channel = pc.createDataChannel("Mydata");
channel.onopen = function(event) {
  channel.send('sending a message');
}
channel.onmessage = function(event) { console.log(event.data); }

遇到的一些问题

关于一个MediaSteam添加多个轨道的问题(原文)
本机测试无法连接
Windows(有时)开两个页面，建立连接后触发了onaddstream事件，但是赋给Video的流不播放。换成本机与虚拟机则正常，原因未知。
局域网里两个客户端连接不上
~~交换了下ice信息，加了个addIceCandidate()就好了，原因不明。~~
必须交换ice信息。