Firefox 24 for Android 默认支持 WebRTC

WebRTC 现在不仅在 Firefox for Android 上可用,也在 Firefox 桌面版中可用!Firefox 24 for Android 现在默认支持 mozGetUserMedia、mozRTCPeerConnection 和 DataChannels。mozGetUserMedia 自 Firefox 20 桌面版本以来就已存在,mozPeerConnection 和 DataChannels 自 Firefox 22 桌面版本以来就已存在,我们很高兴 Android 现在加入桌面版本,支持这些酷炫的新功能!

你可以做什么

启用 WebRTC 后,开发者可以

  • 直接使用 JavaScript 从 Firefox Android 捕获摄像头或麦克风流(我们知道开发者已经期待这个功能一段时间了!),
  • 进行浏览器到浏览器的通话(音频和/或视频),你可以使用像 appspot.apprtc.com 这样的网站进行测试,
  • 共享数据(中间没有服务器)以启用点对点应用程序(例如,文本聊天、游戏、尤其是通话时的图像共享)

我们迫不及待地想看到开发者想出的主意!

针对早期采用者和反馈

在这个阶段,我们的支持主要针对开发者和早期采用者,以便从他们那里获得反馈。工作组规范尚未完成,我们还有更多功能需要实现,还有质量改进需要进行。我们现在主要专注于使一对一(人对人)通话稳定 - 与多人通话相反,我们会稍后再专注于多人通话。我们欢迎您的测试和试验。请给我们反馈,提交错误报告,并开始基于这些新功能构建新应用程序。

如果您不确定从哪里开始,请先阅读一些已经发布的 关于 Hacks 的 WebRTC 文章。特别是,请查看 WebRTC 和早期 API制作 Face to GIFPeerSquared,以及 一款 AR 游戏(赢得了我们的 getUserMedia 开发者 Derby 比赛)和 WebRTC 实验和演示

一个简单的视频帧捕获示例(以大约 15fps 的速度捕获新图像)

navigator.getUserMedia({video: true, audio: false}, yes, no);
video.src = URL.createObjectURL(stream);

setInterval(function () {
  context.drawImage(video, 0,0, width,height);
  frames.push(context.getImageData(0,0, width,height));
}, 67);

摘自 nightly-gupshup 上的“多人视频聊天”(你可以在 WebRTC 测试登陆页面 上尝试 - 完整代码在 GitHub 上

function acceptCall(offer) {
    log("Incoming call with offer " + offer);

    navigator.mozGetUserMedia({video:true, audio:true}, function(stream) {
    document.getElementById("localvideo").mozSrcObject = stream;
    document.getElementById("localvideo").play();
    document.getElementById("localvideo").muted = true;

    var pc = new mozRTCPeerConnection();
    pc.addStream(stream);

    pc.onaddstream = function(obj) {
      document.getElementById("remotevideo").mozSrcObject = obj.stream;
      document.getElementById("remotevideo").play();
    };

    pc.setRemoteDescription(new mozRTCSessionDescription(JSON.parse(offer.offer)), function() {
      log("setRemoteDescription, creating answer");
      pc.createAnswer(function(answer) {
        pc.setLocalDescription(answer, function() {
          // Send answer to remote end.
          log("created Answer and setLocalDescription " + JSON.stringify(answer));
          peerc = pc;
          jQuery.post(
            "answer", {
              to: offer.from,
              from: offer.to,
              answer: JSON.stringify(answer)
            },
            function() { console.log("Answer sent!"); }
          ).error(error);
        }, error);
      }, error);
    }, error);
  }, error);
}

function initiateCall(user) {
    navigator.mozGetUserMedia({video:true, audio:true}, function(stream) {
    document.getElementById("localvideo").mozSrcObject = stream;
    document.getElementById("localvideo").play();
    document.getElementById("localvideo").muted = true;

    var pc = new mozRTCPeerConnection();
    pc.addStream(stream);

    pc.onaddstream = function(obj) {
      log("Got onaddstream of type " + obj.type);
      document.getElementById("remotevideo").mozSrcObject = obj.stream;
      document.getElementById("remotevideo").play();
    };

    pc.createOffer(function(offer) {
      log("Created offer" + JSON.stringify(offer));
      pc.setLocalDescription(offer, function() {
        // Send offer to remote end.
        log("setLocalDescription, sending to remote");
        peerc = pc;
        jQuery.post(
          "offer", {
            to: user,
            from: document.getElementById("user").innerHTML,
            offer: JSON.stringify(offer)
          },
          function() { console.log("Offer sent!"); }
        ).error(error);
      }, error);
    }, error);
  }, error);
}

在桌面版上运行的任何代码都应该在 Android 上运行。(啊,HTML5 的魅力!)。但是,你可能需要针对 Android 进行优化,因为它现在可能在更小的屏幕设备上使用,甚至可以旋转。

这仍然是一个 危险区域,尤其是对于移动设备而言。我们已经使用了一些主要的 WebRTC 网站测试了 Android 对一对一通话的支持,包括 talky.ioapprtc.appspot.comcodeshare.io

已知问题

  • 回声消除需要改进;对于通话,我们建议使用耳机 (Bug 916331)
  • 有时会出现音频/视频同步问题或过多的音频延迟。我们在 Firefox 25 中已经有一个修复程序,可以改进延迟 (Bug 884365).
  • 在某些设备上,会出现间歇性的视频捕获崩溃;我们正在积极调查 (Bug 902431).
  • 低端设备或连接不良的设备在以良好的帧速率解码或发送更高分辨率的视频时可能会遇到问题。

请帮助我们将实时通信带入网络:构建您的应用程序,给我们反馈,报告错误,并帮助我们测试和开发。有了您的帮助、您的想法和您的热情,我们将把网络提升到一个全新的水平。

关于 Robert Nyman [荣誉编辑]

Mozilla Hacks 的技术布道者和编辑。发表关于 HTML5、JavaScript 和开放网络的演讲和博客。Robert 是 HTML5 和开放网络的坚定支持者,自 1999 年以来一直在从事网络前端开发 - 在瑞典和纽约市。他经常在 http://robertnyman.com 上发博客,喜欢旅行和结识新朋友。

更多 Robert Nyman [荣誉编辑] 的文章…


13 条评论

  1. tumira

    您好

    还没有支持 Web Audio api 吗?

    2013 年 9 月 17 日 下午 08:06

    1. Robert Nyman [编辑]

      请在 Web Audio API 进入 Firefox 中了解更多。

      2013 年 9 月 17 日 下午 10:10

  2. Laura Forrest

    恭喜 - 这是一个非常令人兴奋的发展!

    2013 年 9 月 17 日 下午 10:18

  3. Adrian

    刚刚在 Android 上测试了 Firefox beta 版(1Mbit 连接)和 Linux 上的 Firefox 23 版(4Mbit 连接)。质量还不错(有一点音频抖动),但非常卡顿,视频和音频的延迟量不同。非常令人兴奋,但期待它变得更加完善。

    2013 年 9 月 17 日 下午 14:36

  4. Tumira

    您好 Robert,那篇文章已经超过 3 个月了。我希望能它在 Firefox 24 中发布。但我猜我可能要等到 Firefox 25 才能发布。

    2013 年 9 月 17 日 下午 17:24

  5. Pryka

    他们正在开发新东西。为什么他们还在 Android 上显示 16 位图像?

    2013 年 9 月 18 日 上午 06:56

  6. song zheng

    我对此版本感到非常兴奋,因为我爱 WebRTC。最近我创建了一个演示项目,可以让你使用 WebRTC 进行多人视频、音频和文本聊天,所有代码都开源在 github 上。如果你想看看 WebRTC 在 Firefox 上的出色效果,请随时查看:http://opentokRTC.com

    2013 年 9 月 18 日 下午 14:06

  7. Galaxy

    太棒了!o/

    2013 年 9 月 19 日 上午 00:32

  8. Kataskeui Istoselidon Thessaloniki

    这是一个非常好的发展!!:D

    2013 年 9 月 22 日 上午 06:14

  9. Ian

    用户如何防止恶意 JavaScript 在未经许可的情况下打开摄像头和麦克风?

    2013 年 9 月 25 日 下午 14:44

    1. Robert Nyman [编辑]

      它需要用户批准才能访问摄像头和麦克风,也就是说,如果没有用户的批准,就无法访问。

      2013 年 9 月 26 日 上午 01:27

      1. dobberx

        那只是一步。但它主要是在第一次获得使用摄像头和麦克风的权限之后才起作用,如果用户收到了请求通知,但大多数情况下是静默的。或者每次连接都需要一个 ID。显示谁获得了权限。

        2013 年 10 月 4 日 上午 07:14

  10. Bashir Ahmed

    您好,

    恭喜您做出如此好的举动。我将为我的三星 Galaxy Android 设备下载 FireFox,因为我一直在使用默认浏览器。

    我是桌面版 Firefox 的忠实粉丝,我不会使用其他浏览器,你知道为什么吗?因为 Firefox 是一款快速、安全且用户友好的浏览器。

    谢谢!

    2013 年 10 月 5 日 下午 19:40

本文的评论已关闭。