Page 303 - Web性能权威指南

➑ 生成描述端连接的 SPD 提议并发送到对端
➒ 通过发信通道向对端增量发送 ICE 候选项
➓ 注册远程 ICE 候选项以开始连接检查
把远程视频流输出到视频元素（远程视图）

看第一遍可能会让人觉得整个过程有点难理解，不要灰心。既然我们已经理解了每
一步的工作过程，整个过程也不如此：初始端连接和发信通道，取得并注册媒体流，
发送提议，递增提交 ICE 候选项，最后再输出取得的媒体流。如果实现再完整一
些，还应该注册更多回调函数，以跟踪 ICE 收集和连接状态，从而为用户提供更多
反馈。

建立连接后，应用仍然可以通过 RTCPeerConnection 对象添加或移除流。
每次添加或移除后，都会自动触发新的一次 SDP 协商，重复一遍初始化
过程。

2. 响应WebRTC连接
响应新 WebRTC 连接请求的过程十分类似，主要区别是在发信通道交付 SDP 提议
之后才会开始执行大部分逻辑。下面我们就实际地看一看：

<video id="local_video" autoplay></video>
<video id="remote_video" autoplay></video>

<script>
var signalingChannel = new SignalingChannel();

var pc = null;
var ice = {"iceServers": [
{"url": "stun:stunserver.com:12345"},
{"url": "turn:user@turnserver.com", "credential": "pass"}
]};

signalingChannel.onmessage = function(msg) {
if (msg.offer) { ➊
pc = new RTCPeerConnection(ice);
pc.setRemoteDescription(msg.offer);

navigator.getUserMedia({ "audio": true, "video": true },
gotStream, logError);
} else if (msg.candidate) { ➋
pc.addIceCandidate(msg.candidate);
}
}
function gotStream(evt) {

WebRTC ｜ 293