Page 304 - Web性能权威指南

pc.addstream(evt.stream);
var local_video = document.getElementById('local_video');
local_video.src = window.URL.createObjectURL(evt.stream);

pc.createAnswer(function(answer) { ➌
pc.setLocalDescription(answer);
signalingChannel.send(answer.sdp);
});
}

pc.onicecandidate = function(evt) {
if (evt.candidate) {
signalingChannel.send(evt.candidate);
}
}
pc.onaddstream = function (evt) {
var remote_video = document.getElementById('remote_video');
remote_video.src = window.URL.createObjectURL(evt.stream);
}
function logError() { ... }
</script>
➊ 监听并处理通过发信通道交付的远程提议
➋ 注册远程 ICE 候选项以开始连接检查
➌ 生成描述端连接的 SDP 应答并发送到对端

毫不奇怪，连代码看起来都十分相似。除了基于由共享的发信通道交付的提议消息
初始化端连接的工作流，唯一的重要区别就在于前面的代码生成的是一个 SDP 应
答（通过 createAnswer），而非提议对象。除此之外，整个过程是对称的：初始化
端连接，取得并注册媒体流，发送应答，增量提交 ICE 候选项，最后输出取得的媒
体流。

既然是这样，我们只要复制这些代码，再加上发信通道的实现，就有了一个在浏览
器中实时的、端到端的、支持视频和音频的视频会议应用。想一想，只需 100 行
JavaScript 代码，不错啦！

通过 SimpleWebRTC 初始化 WebRTC 会话

实践中，前面的代码还可以进一步简化。我们这个例子是以手工方式把所有工作
串接起来的，但实际上，没有理由不把其中大多数代码封装到一个库里。就举一
个使用 simpleWebRTC 库的例子吧：

294 ｜ 第 18 章