WebRTC 支持 Firefox、Android 和 iOS

过去几周,WebRTC 取得了诸多进展。该更新啦!

特别是,我们非常高兴看到 WebRTC 即将出现在多个浏览器和平台上。

现在,在 Chrome 中使用 getUserMedia 时不带标志,以及 Opera 和 Firefox Nightly/Aurora(但对于 Firefox,您需要设置偏好设置)。请访问 simpl.info/gum 看看 getUserMedia 的跨浏览器演示,并查看 Chris Wilson 提供的精彩示例,了解如何使用 getUserMedia 作为网络音频的输入。

webkitRTCPeerConnection 现已在 Chrome 稳定版中推出,并且无标记。Chrome 24 及更高版本支持 TURN 服务器。欢迎前往 simpl.info/pc 访问 Chrome 的 RTCPeerConnection 实现方式的超级简单演示,并访问 apprtc.appspot.com 访问这个超棒的视频聊天应用(简单说明这个名称:经过多次迭代,目前称为 webkitRTCPeerConnection。其他名称和实现已弃用。当标准流程稳定后,webkit 前缀将被移除。)

此外,目前还在 Firefox Nightly 和 Aurora 的桌面设备上实现了 WebRTC,通过 Ericsson Bowser 浏览器为 iOS 和 Android 设备实现了 WebRTC。

DataChannel

DataChannel 是一种 WebRTC API,用于任意数据的高性能、低延迟、点对点通信。该 API 与 WebSocket 类似,但通信是直接在浏览器之间进行的,因此 DataChannel 即使需要中继 (TURN) 服务器,也会比 WebSocket 快得多(当针对防火墙的“打孔”失败且 NAT 失败时)。

我们计划在 Chrome 版本 25 中使用 DataChannel,但版本带有标志,不过可能会错过此版本。这仅用于实验目的,可能无法完全正常运行,而且无法与 Firefox 实现进行通信。更高版本中的 DataChannel 应该更加稳定,并且将实现该值以支持在 Firefox 中与 DataChannel 进行交互。

Firefox Nightly/Aurora 支持 mozGetUserMediamozRTCPeerConnectionDataChannel(但别忘了设置您的 about:config 偏好设置!)

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

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 博客。我们将于 2013 年初在 Firefox 18 中发布基本的 WebRTC 支持,并计划支持其他功能,包括 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 上提交遇到的任何错误!