WebRTC

创建WebRTC流程

A B <!--创建本地媒体流-->
    navigator.mediaDevices.getUserMedia(constraints).then(function (stream) {
        //绑定本地媒体流到video标签用于输出
        $('.localVideo').attr('src', URL.createObjectURL(stream));
        localStream = stream;
    })
A --oncall-->B
B --accept-->A

A  <!--创建peerConnection-->
    pc = new RTCPeerConnection(iceServer);
    pc.onicecandidate = function(event){
       //发送ice_candidate
    }
    pc.onaddstream = function (event) {
       //设置远端stream
    }
    pc.addStream(localVideo);

A   <!--创建offer-->
    pc.createOffer.then(function (offer) {
        return pc.setLocalDescription(offer);  //触发onicecandidate发送ice
    }).then(function () {
        <!--发送offer事件和pc.localDescription-->
    }
A --offer-->B

B   <!--创建answer-->
    pc.setRemoteDescription(data.sdp).then();  //触发onaddstrean将远端视频流放入video
    pc.createAnswer().then(function (answer) {
        return pc.setLocalDescription(answer); //触发onicecandidate发送ice
    }).then(function () {
        <!--发送answer事件和pc.localDescription-->
    })

B --answer-->A
A   <!--收到answer-->
    pc.setRemoteDescription(data.sdp).then();

多人视频

创建多个peerConnection,放入对象或数组集合

WebRTC的断线重连

var pc = new RTCPeerConnection();
var state = pc.iceConnectionState;

iceGatheringState(检测本地ice状态)有3个状态：

• new 刚创建，还没网络信息
• gathering 正在获取本地candidates
• complete 已经完成所有candidates获取

iceConnectionState(获取远端ice状态)有7个状态：

• new 正在获取本地candidates，也在等待对端的- candidates
• checking 正在尝试连接，起码收到一个对端的candidate，但同时可能还在获取candidates中
• connected 已经找到一个连接是有效的，但还在尝试其他的。
• completed 已经确定一个将用来使用的连接。
• failed 所有candidate都尝试过都失败
• disconnected 间歇性发生，可能会内部解决。一段时间连接不上会转化为failed
• closed 表示 ICE agent关闭

检测到iceConnectionState == 'failed’时，重置peerConnection,创建一个offer发送给对方