0

作者:Philipp Hancke(原文链接

翻译:刘通

原标题:WebRTC Externals – the cross-browser WebRTC debug extension

externals1

我是Chrome中webrtc-internals工具的忠实粉丝。这是针对WebRTC最重要的debug工具之一,在它2012年被加入Chrome中去的时候我的工作就变容易了很多。我最近还与Tsahi Levent-Levi一并写了一系列的博文,介绍了如何使用webrtc-internals来进行debug

Firefox也有一个相似的工具,about:webrtc网页,展示了每个网页的本地和远端SDP以及一个非常有用的ICE候选项网格。但是与Chrome不同,它不会显示API的准确顺序或者从getStats API获得的图表。Edge和Safari还没有类似的debug工具。

分别使用这些不同功能的debug工具来支持WebRTC服务是比较麻烦的事情,要是有一个统一的WebRTC debug工具那该有多好。所以我决定做一个。我最后从我们WebRTC Notifier中提取了一些老代码并且将其移植到WebExtension中。结果还挺让人满意的:

externals2

externals3

externals4

并且在三个不同的浏览器中我都得到了同一个debug工作流。希望Safari也很快就能支持—能够截获API调用的技术已经包含在Safari中,所以我们只需要等待Safari能够支持WebExtension API就可以了。

如何安装这个扩展?

因为这个开发者工具还处于一个非常早期的阶段,所以还没有上传到几个扩展商店内。如果大家的兴趣比较高的话,也许会将其上传到各个扩展商店中,但是现在你只能够进行手动安装。

首先从github上复制储存库

git clone https://github.com/fippo/webrtc-externals

然后按照下面写出的各个浏览器进行设置:

Chrome

1.进入chrome://extensions/

2.点击右上角的复选框来激活开发者选项

3.点击加载扩展程序

4.选择你刚才复制扩展程序的目录

5.WebRTC的标志会出现在右上角,然后点击它

6.加载你的WebRTC网页

或者你也可以点击查看官方指导

Firefox

1.使用web ext工具来运行扩展程序

  #打开终端

  #输入这些指令

npm install –global web-ext

cd webrtc-externals  #Go to the directory where you cloned webrtc-externals

web-ext run

2. WebRTC的标志会出现在右上角,然后点击它

3.加载你的WebRTC网页

很快这个插件就可以直接从addons.mozilla.org上安装。

Microsoft Edge

#按照这篇说明中的步骤在Microsoft Edge浏览器中加载扩展程序:

         ·在Edge中加载about:flags

         ·点击“启用开发人员扩展功能(这可能让设备处于危险之中) ”

         ·在菜单栏中点击-> More –> 扩展 –> 加载扩展程序

         ·找到你之前复制的webrtc-externals文件夹并且选择它

# WebRTC的标志会出现在右上角,然后点击它

#加载你的WebRTC网页

如何使用扩展程序?

坏消息是使用这个扩展程序与使用webrtc-internals差不多复杂。在打开你想要debug的WebRTC网页之前,首先确保已经通过点击右上角的WebRTC图标打开了后台页。

externals5

点击这个图标会在新的标签页中打开后台页。

然后打开你想要debug的网页。应该看起来与你在Chrome webrtc-internals网页中看到的差不多。

它是如何工作的?

WebExtensions是一个用来调整浏览器功能的新方法。它主要是获取Chrome的插件API然后在其他浏览器(像Firefox和Edge)中实现。WebExtensions在2015年出现,现在发展的已经比较成熟,所以你可以较简单的写出在所有三个浏览器中都可以运行的代码。

扩展程序包括三个部分:

         #一个浏览器动作,负责打开背景页

         #一个像chrome://webrtc-internals的背景页

         #一个内容脚本,被嵌入在网页中并且截获所有的peerConnection API调用

然后你需要webrtc-internals网页以及一些连接来使消息可以在不同部分之间传输。

浏览器动作:

你可以在清单中看到加载了一个标志,背景页,以及如下描述的内容脚本。

背景页:

实际上对于背景页来说,只是从Chrome的webrtc-internals页处复制HTML和JavaScript来说是一件非常务实的事。尽管会有一些由于Chrome中未定义而产生的控制台错误,但是它还是可以正常工作。

内容脚本

截获API调用的内容脚本本质上是老webrtc-notify扩展程序的更新版与Gustavo Garcia和我在写rtcstats的时候一些经验混合而成的产物。

一旦网页加载完毕后这个内容脚本就会被执行。这确保了同样的RTCPeerConnection API也可以在像Microsoft Edge这样的浏览器中使用。之后内容脚本会在RTCPeerConnection原型上重写像createOffer这种方法,串联参数,然后调用原生的方法。

除此之外,还有一系列事件的监听器,像icecandidate,addstream或者track。

内容脚本每秒还会轮询getStats并且给背景页发送数据,就像你之前从webrtc-internals看到的那样显示出来。

externals6

但是我个人完全倾向于使用更好的highcharts.js图表,再次使用已经存在的代码要快的多。

警告

需要注意的一点是目前这个扩展程序只能用在使用的是无前缀的RTCPeerConnection API的网页中。Google Hangouts和更好更新的Google Meet还是依赖于老的WebKitRTCPeerConnection以及navigator.webkitGetUserMedia API。

结语

将以前的代码搬运到WebExtension并且运行在三个浏览器中真的是挺简单。对于开发WebRTC应用来说,能够在不同的浏览器debug工作中获得同样的一个工作流程真的是有很大的帮助。

期待你一针见血的评论,Come on!

不用想啦,马上 "登录"  发表自已的想法.