WebRTC 支持 Firefox、Android 和 iOS

过去几周来,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 支持 mozGetUserMediamozRTCPeerConnectionDataChannel(但别忘了设置 about:config 偏好设置!)

下面是 DataChannel 在 Firefox 中运行的屏幕截图:

Firefox DataChannel 屏幕截图

此演示的网址为 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!