过去几周来,WebRTC 发生了许多变化。该更新啦!
我们尤其高兴看到 WebRTC 已在多个浏览器和平台上推出。
getUserMedia
现已在 Chrome(无标志)、Opera 和 Firefox Nightly/Aurora 中推出(不过,对于 Firefox,您需要设置偏好设置)。请访问 simpl.info/gum,查看 getUserMedia
的跨浏览器演示;并查看 Chris Wilson 使用 getUserMedia
作为 Web Audio 输入的精彩示例。
webkitRTCPeerConnection
现已在 Chrome 稳定版中推出,无需使用标志。Chrome 24 及更高版本支持 TURN 服务器。如需查看 Chrome 的 RTCPeerConnection 实现的极其简单的演示,请访问 simpl.info/pc;如需查看一款出色的视频聊天应用,请访问 apprtc.appspot.com。关于名称的说明:经过几次迭代,它目前被称为 webkitRTCPeerConnection
。其他名称和实现已被弃用。当标准流程稳定下来后,webkit
前缀将被移除。)
现在,我们还在 Firefox Nightly 和 Aurora 中实现了桌面版 WebRTC,并通过 Ericsson Bowser 浏览器实现了 iOS 和 Android 版 WebRTC。
DataChannel
DataChannel 是一款 WebRTC API,可实现高性能、低延迟的任意数据点对点通信。该 API 与 WebSocket 类似,但通信是直接在浏览器之间进行的,因此即使需要中继 (TURN) 服务器(当用于应对防火墙和 NAT 的“打洞”失败时),DataChannel 的速度也比 WebSocket 快得多。
DataChannel 计划在 Chrome 25 版本中通过标志启用,但可能不会在该版本中实现。这仅供实验之用,可能无法完全正常运行,并且无法与 Firefox 实现进行通信。后续版本中的 DataChannel 应该会更稳定,并且将实现以便在 Firefox 中与 DataChannel 进行交互。
Firefox Nightly/Aurora 支持 mozGetUserMedia
、mozRTCPeerConnection
和 DataChannel
(但别忘了设置 about:config 偏好设置!)
下面是 DataChannel 在 Firefox 中运行的屏幕截图:

此演示的网址为 http://mozilla.github.com/webrtc-landing/data_test.html。以下是一个代码段:
pc1.onconnection = function() {
log("pc1 onConnection ");
dc1 = pc1.createDataChannel("This is pc1",{}); // reliable (TCP-like)
dc1 = pc1.createDataChannel("This is pc1",{outOfOrderAllowed: true, maxRetransmitNum: 0}); // unreliable (UDP-like)
log("pc1 created channel " + dc1 + " binarytype = " + dc1.binaryType);
channel = dc1;
channel.binaryType = "blob";
log("pc1 new binarytype = " + dc1.binaryType);
// Since we create the datachannel, don't wait for onDataChannel!
channel.onmessage = function(evt) {
if (evt.data instanceof Blob) {
fancy_log("*** pc2 sent Blob: " + evt.data + ", length=" + evt.data.size,"blue");
} else {
fancy_log('pc2 said: ' + evt.data, "blue");
}
}
channel.onopen = function() {
log("pc1 onopen fired for " + channel);
channel.send("pc1 says Hello...");
log("pc1 state: " + channel.state);
}
channel.onclose = function() {
log("pc1 onclose fired");
};
log("pc1 state:" + channel.readyState);
}
如需详细了解 Firefox 实现并查看相关演示,请访问 hacks.mozilla.org 博客。基本 WebRTC 支持将于 2013 年初在 Firefox 18 中发布,我们计划支持其他功能,包括 getUserMedia
和 createOffer/Answer 约束条件,以及 TURN(用于允许防火墙后面的浏览器之间进行通信)。
如需详细了解 WebRTC,请参阅 WebRTC 入门。我们甚至提供了 WebRTC 图书,该图书提供印刷版和多种电子书格式。
分辨率限制
Chrome 24 及更高版本已实现约束。这些值可用于为 getUserMedia()
和 RTCPeerConnection addStream()
调用设置视频分辨率值。
如需查看示例,请访问 simpl.info/getusermedia/constraints。通过设置断点和调整值,尝试不同的约束条件。
有几个注意事项…在一个浏览器标签页中设置的 getUserMedia
约束条件会影响随后打开的所有标签页的约束条件。如果为约束条件设置不允许的值,系统会显示一个相当神秘的错误消息:
navigator.getUserMedia error: NavigatorUserMediaError {code: 1, PERMISSION_DENIED: 1}
同样,如果您尝试在本地文件系统(而非服务器)上使用 getUserMedia
,也会出现错误!
流式屏幕截图
标签页截图功能现已在 Chrome 开发者渠道中推出。这样,您就可以将标签页的可见区域捕获为数据流,然后在本地使用,或与 RTCPeerConnection 的 addStream()
搭配使用。非常适合屏幕投放和网页分享。如需了解详情,请参阅 WebRTC 标签页内容截取提案。
欢迎通过对此更新发表评论,与我们分享您使用这些 API 的情况。
...并且别忘了在 chromiumbugs.appspot.com 上报告您遇到的任何 bug!