Mozilla Hacks

将 WebRTC 视频聊天直接嵌入您的网站

Avatar photo 由 Dmitry Dragilev、Paul Greenlea、Robert Nyman [荣誉编辑]

发布于 2013 年 5 月 7 日 在 精选文章 和 WebRTC 中

大多数人还记得 Mozilla Hacks 中的那篇名为 Hello Chrome, it’s Firefox calling! 的博客文章，该文章演示了 Firefox 和 Chrome 之间的 WebRTC 视频聊天。它引起了很多关注。从那时起，我们在 Fresh Tilled Soil 这里看到，大量初创公司和企业纷纷涌现，构建基于 WebRTC 视频聊天技术的各种产品。WebRTC 布道者 Tsashi Levent-Levi 一直在他的博客上采访这些公司中的大多数，这个列表 相当令人印象深刻！

WebRTC 聊天演示

与大多数早期采用者一样，我们已经尝试了很长一段时间的 WebRTC。我们当然创建了 我们自己的 WebRTC 视频聊天演示，并且最近还发布了 WebRTC 视频聊天小部件。

这些小部件的工作原理非常简单，任何人都可以获取以下 HTML 嵌入代码

并将此代码添加到任何网站或博客文章中。您将在他们的网站上看到以下小部件

从这里开始 WebRTC 视频聊天就非常简单了，只需为房间想一个名字，输入它并点击开始聊天。告诉对方也这样做，一切就准备好了。

与往常一样，请确保您在 Firefox Nightly 或 Google Chrome 的最新稳定版本中尝试一下。如果您使用的是平板电脑，请确保使用 Google Chrome beta 版（如果您使用的是 Google Chrome 浏览器）。

需要注意的是，在这个第一个版本中，我们的视频聊天仅限于每个房间两个参与者。如果一个房间名称被两个人占用，则尝试连接到此房间的第三个人将无法连接。

工作原理

不用深入研究 WebRTC 视频聊天实际工作原理背后的代码，让我们简要回顾一下当您点击开始聊天按钮时幕后实际发生的事情以及 WebRTC 视频聊天实际工作原理。以下是对实际发生情况的逐步时间线，以便您更好地理解

关于此步骤的说明：“一旦远程媒体开始流式传输，就停止添加 ICE 候选者” - 这是一个临时解决方案，可能会导致许多网络拓扑结构的媒体路由不理想。它应该只在 Chrome 的 ICE 支持修复之前使用。

一个快速且非常重要的提示，请记住，当您尝试使其工作时，我们使用了类似于“polyfill”的技术，如 Remy Sharp 在这篇文章中所述。正如 Remy 所描述的那样，我们编写了一段代码以适应 Firefox 语法以获得跨浏览器功能。

我们遇到的问题以及解决方法

正如您可能预料到的那样，我们在构建此过程中遇到了许多问题。WebRTC 正在快速发展，因此我们每天都在解决许多问题。以下只是我们遇到的问题以及解决方法。

Google Chrome 中的 PeerConnection 功能

在使用 Chrome 中的新 PeerConnection 功能时，我们发现它工作起来需要严格的操作顺序；更具体地说

  • 在发送 SIP（提议/应答 SDP）之前，对等方必须具有本地流式视频
  • 对于“应答者”；在对等方生成“应答 SDP”之前，不要添加 ICE 候选者
  • 一旦远程媒体开始流式传输，就停止添加 ICE 候选者
  • 在收到“提议 SDP”之前，切勿为应答者创建对等连接

我们通过处理这些问题并按上述顺序处理连接来解决此问题。这对使连接完美运行至关重要。在此之前，它只会偶尔工作。

由于延迟而增加的延迟

在流式传输到移动设备时，由于延迟和通过手机上网的限制，会增加延迟。

我们通过在 URL 末尾使用哈希标签来降低流式视频的分辨率来解决此问题。URL 可以选择包含 '#res=low' 以获得低分辨率流式视频和 '#res=hd' 以获得高清流式视频，作为可选的 URL 参数。这里需要快速说明的是，现在可以使用其他可配置属性，例如每秒帧数，您可以将它们用于相同的目的。

录制 WebRTC 演示

我们一直在尝试录制 WebRTC 视频演示。在录制视频时，我们使用新的 JavaScript 类型数组来保存流式数据。我们很快发现，只能单独录制视频和音频。

我们通过创建两个录音实例来解决此问题，一个用于音频，一个用于视频，它们利用了新的 JavaScript 数据类型并同时录制了两个流。

结论

涉足这些东西令人兴奋，我们非常喜欢 WebRTC，以至于我们创建了一个完整的 页面专门用于我们的实验，使用这项技术和其他我们认为将在 2013 年改变网络的技术。如果您有任何问题，请随时与我们联系。

关于 Dmitry Dragilev

Dmitry Dragilev 是 Fresh Tilled Soil 的技术布道者，这是一支由设计师、编码员和 UX 专家组成的团队，他们通过咨询、培训和活动帮助企业家和企业为 Web 和移动应用程序创造出色的用户体验。自 2005 年以来，他们已经帮助了 300 多家客户，包括通用电气、微软、麻省理工学院、哈佛大学、TEDx、时代华纳有线电视、沃博森、Hubspot 等众多公司。

更多 Dmitry Dragilev 的文章…

关于 Paul Greenlea

Fresh Tilled Soil 的高级前端开发人员和策略师。Paul 是一位发明家。他从小就喜欢捣鼓电子产品和技术。他从 12 岁开始设计和编程，当时他开始创建自己的电脑游戏，多年来，他在 UI 设计师到首席工程师等职位上领导团队完成战略、概念和执行阶段。他目前密切关注快速发展的移动行业，并坚信它是未来。

更多 Paul Greenlea 的文章…

关于 Robert Nyman [荣誉编辑]

Mozilla Hacks 的技术布道者和编辑。就 HTML5、JavaScript 和开放网络发表演讲和撰写博客。Robert 是 HTML5 和开放网络的坚定支持者，自 1999 年以来一直在为网络进行前端开发工作——在瑞典和纽约市。他还定期在 http://robertnyman.com 上发布博客，并且喜欢旅行和结识新朋友。

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

26 条评论

  1. Emanuel Hoogeveen

    这真是太棒了。我缺少的一件事是密码保护房间的能力，以及对加密的任何提及。我希望前者只是设置一个带有帐户等的前端的问题，但这也会与后者相关。

    能够为这些通话（可选）提供一两层安全性会很棒：1) 通过所选密码的哈希进行加密，以及 2) 基于标准公钥/私钥加密进行加密。当然，这会在客户端增加相当多的额外计算量，但这似乎是一个可以接受的代价，只要它仍然可行！

    2013 年 5 月 7 日 下午 07:40

    1. Adam Roach

      WebRTC 的一项真正酷的功能是它内置了加密功能；实际上，使用 WebRTC 实现无法发送未加密的媒体。目前，这是基于 DTLS-SRTP 密钥交换，它在媒体通道中进行密钥交换（RFC 5764 中的详细内容），尽管有一些讨论允许使用安全描述（RFC4568），这将允许应用程序提供他们自己的密钥材料。

      作为用户，你需要注意的一点是，加密只是确保机密性所需众多工具中的一种。例如，除非你知道加密连接的另一端是谁，否则你很容易将媒体发送到一个服务器，该服务器要么能够将你的媒体与任意第三方共享，要么实际上将你的媒体发送到一个敌对的第三方。这就是为什么 WebRTC 身份工作（参见 http://dev.w3.org/2011/webrtc/editor/webrtc.html#identity）被认为是整个机制的组成部分。虽然 Firefox 目前不支持身份机制，但我们认为这非常重要，并计划尽快添加。

      用户需要小心另一件事是确保媒体没有被 JavaScript 本身复制并发送到另一个目的地。这不是当前规范的一部分，但我们正在努力添加一个标准化的机制，该机制将允许限制特定的用户媒体流，以便它们只能通过加密通道发送到指定的身份（而不能发送到其他地方）。

      当然，作为服务提供商，你不需要担心拦截和复制问题，但你的用户可能会担心。因此，如果你真的有兴趣提供安全的通信体验，那么你将需要在这些机制变得可用时利用它们。

      2013 年 5 月 7 日 下午 8:38

      1. Emanuel Hoogeveen

        太好了！听起来你对这些事非常了解 :)

        2013 年 5 月 7 日 下午 9:54

      2. Lennie

        加密很棒，但如果你和错误的人说话，它就毫无用处。

        你应该添加一些类似 Persona 的东西，这样人们就可以确定他们在和他们期望的人交谈。

        Persona 验证电子邮件地址，所以你可以在地址验证后添加一个按钮，然后在对方屏幕上显示已验证的电子邮件地址。

        2013 年 5 月 8 日 下午 8:34

  2. Alexander Farkas

    我喜欢！

    但

    不幸的是，这个小工具脚本相当突兀。

    例如，它不能异步工作。嵌入无法异步加载的第三方脚本是一个 SPOF（单点故障）和一个重大错误。

    还有一件事，它包含 Modernizr 并覆盖所有已经存在的测试。我的页面上没有地方可以嵌入这个东西，不会破坏其他东西。

    我不知道，但编写一个脚本，其目的是将其嵌入许多其他不同的网站，需要非常防御性的脚本编写。这个脚本不是一个好例子。

    2013 年 5 月 7 日 下午 2:21

    1. alexander farkas

      我上面的评论有点太尖刻了。抱歉 :-D

      2013 年 5 月 7 日 下午 11:21

      1. Robert Nyman [编辑]

        不用担心，我认为这是有效的反馈。我会让 Dmitry/Paul 对此做出回应，并给出他们如何前进的反馈。

        2013 年 5 月 8 日 上午 2:46

    2. Dmitry Dragilev

      感谢你的评论，Alexander。这个脚本只是一个演示，展示了 WebRTC 视频聊天中可能实现的功能。这篇文章和演示的目的是展示人们可以用这项技术做些什么，以及他们应该探索哪些功能。我们希望激励开发人员尝试使用这些东西。

      这绝不是我们正在销售或试图变成一项服务的商品。这仅仅是对实际可以实现的功能的演示。正如你提到的，目前这并不适用于网络上的所有环境。这是初始版本。我们将继续改进它，并努力确保你指出的大部分问题都得到解决。

      2013 年 5 月 8 日 上午 7:31

    3. Paul Greenlea

      感谢你的反馈，Alexander！Dmitry 说得对……这是一个在几天内开发的实验，用来玩弄将这种令人兴奋的新网络功能快速嵌入页面的梦想！事后看来，我后悔采取了一些捷径；因为我只节省了一点时间（Modernizr 就是其中之一）。在我开发这个的时候，我的重点是尽可能快地将这个想法变成现实，使用 http://jsfiddle.net 和 http://codepen.io/ 作为测试平台（如果你还没有看到它的运行；可以在 jsFiddle 或 CodePen 上试试）。同时，我会在接下来的几天里根据这篇博客的反馈以及其他优化性能的想法来更新脚本！

      2013 年 5 月 8 日 下午 7:36

  3. agilob

    我的摄像头视图是上下颠倒的，有什么帮助吗？在 Linux 上，这个 known 是已知的，它存在于 v4l1compat 中。Firefox 有什么帮助吗？

    2013 年 5 月 8 日 上午 3:17

    1. Paul Greenlea

      嗯……我使用的是 html video 标签，它可以很容易地旋转 180 度（给你一个正确的向上视图）。我可以更新 JavaScript 来检测操作系统并进行旋转，但我担心这可能是设备特定的错误。你知道这个 Skype 问题是否影响运行 Linux 的所有设备吗？当我更新代码时，我会在接下来的几天里研究添加一个可选参数，该参数可以传递到 URL 中以进行旋转。

      2013 年 5 月 8 日 下午 7:48

      1. agilob

        我知道这个错误在华硕和宏碁笔记本电脑上很常见。这个错误存在于 Skype 中，但在其他任何应用程序中都不存在（至少我还没有找到其他应用程序，除了 Firefox 和 Chromium）。
        我花了几分钟时间试图用与 Skype 相同的方式解决它，遇到了一些麻烦，但我做到了 :)

        $ LD_PRELOAD=/usr/lib/libv4l/v4l1compat.so firefox
        ERROR: ld.so: object ‘/usr/lib/libv4l/v4l1compat.so’ from LD_PRELOAD cannot be preloaded: ignored.
        这对 64 位操作系统来说是错误的，摄像头仍然是上下颠倒的，会导致警告。

        但这个
        $ LD_PRELOAD=/usr/lib64/libv4l/v4l1compat.so firefox

        效果很好 :)
        使用 64 位库就足够了。

        这是硬件特定的，所以我不会将其报告为错误，我只会在我博客上描述它以帮助其他人。

        2013 年 5 月 9 日 下午 4:58

    2. Robert Nyman [编辑]

      获得帮助的最佳方式可能是 提交错误报告 并在表单中选择 WebRTC。

      2013 年 5 月 9 日 上午 3:58

  4. Fabian

    虽然我认为 WebRTC 是一项伟大的技术，但我也会遇到“严格的操作顺序”。但是，不同浏览器之间似乎没有一致的顺序，而发现顺序的唯一方法是反复尝试。

    现在，我也试图让数据通道和摄像头一起工作。在 FF aurora/nightly 中，我可以立即创建一个数据通道，交换 ICE 和 SDP，并建立连接。

    但是，我注意到，即使在 FF 中，你也需要添加本地流才能创建并发送 offer。问题是我已经创建了一个 offer 来打开数据通道。我认为解决这个问题的唯一方法是创建两个不同的对等连接：一个用于摄像头流，另一个用于数据通道。我认为这不是它的本意吧？

    2013 年 5 月 8 日 上午 4:17

    1. Fabian

      作为我对先前帖子的补充：显然，当你想要向对等连接添加新的东西时，必须有一个 negotiationneeded 事件。我现在明白了，这还没有内置，这就是为什么事情有点奇怪。正如 w3c 规范所说

      特别地，如果 RTCPeerConnection 对象正在使用 MediaStream，并且一个轨道被添加到该流的 MediaStreamTrackList 对象中（例如，通过调用 add() 方法），则 RTCPeerConnection 对象必须触发“negotiationneeded”事件。删除媒体组件也必须触发“negotiationneeded”。

      2013 年 5 月 9 日 上午 1:07

      1. Robert Nyman [编辑]

        感谢你分享你的经验！

        2013 年 5 月 9 日 上午 3:55

  5. Steve Souders

    Dmitry：这确实激励我去尝试。它非常容易获得一个工作演示 - 只需要几分钟。困难的部分是找到支持 WebRTC 的浏览器。

    我想说的是，在 Android 版 Chrome 上，演示代码说“请点击允许”，但没有“允许”按钮。相反，我进入了 chrome://flags 并启用了“WebRTC”实验。这在 Android 版 Chrome 中生成了一条提示，我可以批准它并让通道工作。

    另一个问题是我的公司网络不起作用。我切换到公共 Wi-Fi 网络，然后它就工作了。

    我发现的另一个问题是缺乏工具支持。具体来说，我想使用 Chrome 开发工具查看网络流量，但 WebRTC 不会在那里显示。我的同事（Ilya Grigorik）向我指出了 chrome://webrtc-internals。这还可以 - 但我不得不刷新页面。我宁愿看到流量实时发生。当然，工具会出现的，但我希望它现在就在那里 - 在这些早期阶段，我们最需要帮助。

    感谢你提供这个很棒的代码段。（嗨，Robert！）

    2013 年 5 月 8 日 上午 9:59

    1. Robert Nyman [编辑]

      嗨，Steve。:-)

      感谢你的反馈！
      我同意工具肯定需要改进，但相信正在尝试这项技术的人 - 比如你、Dmitry 和其他人 - 也帮助我们了解了技术本身和开发人员工具如何才能改进以支持这一点。

      这是激动人心的早期阶段！

      2013 年 5 月 9 日 上午 3:54

  6. Roy

    你能分享一个 gist，展示你如何使用类型化数组来录制视频和音频流吗？

    2013 年 5 月 8 日 上午 10:20

  7. xinzhou ye

    我如何使用 WebRTC 仅音频？我的意思是，没有视频对我来说是可以的。

    2013 年 5 月 8 日 下午 7:40

  8. ash

    我在我的三星 Note 10.1 上尝试了 Chrome 和 Firefox，它们都要求执行无法完成的操作，Chrome 说点击允许，但没有允许可以点击，Firefox 说类似的话，但没有明显的动作。真可惜。

    2013 年 5 月 9 日 上午 6:08

    1. Dmitry Dragilev

      嗨，Ash - 我们还没有在三星 Note 上尝试过，让我们尝试解决这个问题。你在你的三星 Note 上运行了哪个版本的 Chrome？Chrome Beta？Firefox 的哪个版本？

      可能是你的分辨率需要改变，因为“允许按钮”被隐藏了吗？

      2013 年 5 月 9 日 上午 7:34

  9. ash

    好的，Chrome 版本是 26.0.1410.58，它似乎因设备而异，Firefox 20.0.1 也因设备而异。

    当我通过笔记本电脑访问时，你会从地址栏下方获得允许下拉菜单，但在三星上什么也没有发生，Firefox 也是一样，你会看到摄像头图标，但在 Note 上什么也没有发生，我会看看 Note 上是否存在一些摄像头和访问权限的设置

    2013 年 5 月 9 日 上午 8:39

  10. 巴黎合格暖气工：暖气维修

    感谢你提供这篇很棒的文章，但我仍然想问你，你在三星 Note 上运行的是哪个版本的 Chrome，换句话说，是 Chrome Beta 还是 Firefox 浏览器！

    2013 年 5 月 16 日 上午 11:17

    1. Dmitry Dragilev

      感谢你的问题，暖气工。我们实际上是在 Nexus 7 上运行演示，而不是三星 Note。我们从未在三星 Note 上尝试过，我们没有这台设备。我们会尝试在三星 Note 上使用 Mozilla nightly 和 Chrome beta，看看它们是否适合你。

      2013 年 5 月 16 日 下午 2:10

  11. Gozzin

    这非常令人兴奋。桌面共享会被包含在内吗？

    2013年5月25日 09:29

本文评论已关闭。