如何在客户端使用JavaScript检查WebRTC数据通道的兼容性？

Question

如何在客户端使用JavaScript检查WebRTC数据通道的兼容性？

3

WebRTC数据通道仅在Firefox夜间版中可用。在客户端上如何检查它？

代码如下所示：

if (/Firefox[\/\s](\d+\.\d+)/.test(navigator.userAgent)){ //test for Firefox/x.x or Firefox x.x (ignoring remaining digits); 

 var ffversion=new Number(RegExp.$1) // capture x.x portion and store as a number

 if (ffversion>=5)

  document.write("You're using FF 5.x or above")

 else if (ffversion>=4)

  document.write("You're using FF 4.x or above")

 else if (ffversion>=3)

  document.write("You're using FF 3.x or above")

 else if (ffversion>=2)

  document.write("You're using FF 2.x")

 else if (ffversion>=1)

  document.write("You're using FF 1.x")
}

else
 document.write("n/a")

- usercode

我听说它在Chrome上也可以运行。你为什么不测试一下呢？ - Bergi

好吧，在Chrome Canary中没有演示可以测试。如果您能提供演示，那就太好了。我是从HTML5 rock webRTC重定向到使用Mozilla的。无论哪种情况，我都需要一个JS来检查兼容性问题，以便我可以开始开发原型。 - usercode

请使用特性检测，而不是UA字符串匹配！ - Bergi

我使用了 if (!window.RTCDataChannel) document.write("error, browser doesn't support it")，但是它并没有起作用，即使浏览器支持它也会出现错误！ - usercode

也许它是有前缀的，就像RTCPeerConnection一样？ - Bergi

这里有一个 Chrome 演示，网址是 simpl.info/dc。 - Sam Dutton

8个回答

5

现在有一个Chrome的RTCDataChannel演示，网址为simpl.info/dc。

这个演示还不是非常健壮和完整，但你可以创建一个webkitRTCPeerConnection对象，然后检查它是否有一个createDataChannel成员：

try { // or if (webkitRTCPeerConnection) {...}
  var pc = new webkitRTCPeerConnection(null);
  if (pc && pc.createDataChannel) {
    var dc = pc.createDataChannel("sendDataChannel", {reliable: false});
    if (!!dc) {
      // doSomething()
    } 
  }
} catch (e) {
  // try some other instantiation 
}

- Sam Dutton

我正在阅读你的文章，做得很好。但是是否有在两个Chrome浏览器之间进行传输的演示？因为simpl.info/dc是在单个浏览器中的。我不确定他们是否使用任何信令？ - usercode

1

我知道：目前还没有两个浏览器之间的演示 :(. 我正在努力解决 :). 可以根据apprtc.appspot.com（代码位于https://code.google.com/p/webrtc-samples/source/browse/trunk/apprtc/#apprtc）的思路调整simpl.info/dc演示。 - Sam Dutton

谢谢。我会等着看的。与此同时，我会尝试按照你的步骤学习。那么，有没有数据传输方面的示例，比如聊天？ - usercode

2

还有一个 https://webrtc-experiment.appspot.com/chat-hangout -- 我没能让它工作，但可能只是我自己的问题！另外还有一个文件传输演示在 http://filetransfer.jstroem.com。 - Sam Dutton

不幸的是，后者也卡在了0%。第二个对你有用吗？ - usercode

显示剩余3条评论

2

使用JavaScript

var prefix;
var version;
if (window.mozRTCPeerConnection || navigator.mozGetUserMedia) {
  prefix = 'moz';
  version = parseInt(navigator.userAgent.match(/Firefox\/([0-9]+)\./)[1], 10);
} else if (window.webkitRTCPeerConnection || navigator.webkitGetUserMedia) {
  prefix = 'webkit';
  version = navigator.userAgent.match(/Chrom(e|ium)/) && parseInt(navigator.userAgent.match(/Chrom(e|ium)\/([0-9]+)\./)[2], 10);
}

if(prefix == 'moz' || prefix == 'webkit' && version > 41){
  console.log("Browser Support WebRTC")
} else {
  console.log("This Browser Not Support WebRTC")
}

- Jijo Paulose

2

请查看 webrtcsupport 包，它似乎支持跨浏览器（Chrome 和 FF）。 https://www.npmjs.org/package/webrtcsupport 如果您不想使用 NPM 包，请在此处找到主要逻辑。 https://github.com/HenrikJoreteg/webrtcsupport/blob/master/index-browser.js

- Gábor Imre

1

很惊讶没有人提到检查原型。

您可以通过以下方式检查createDataChannel是否存在：

if (!window.RTCPeerConnection.prototype.createDataChannel) {
    // Data Channels not supported
}

- Helder Esteves

1

最佳答案不正确。

if (window.RTCDataChannel) {
    // the browser support dataChannel
} else {
   // the browser does not support dataChannel
}

如果浏览器支持RTCPeerConnection，并不意味着它也支持RTCDataChannel。例如，Edge浏览器上，在RTCPeerConnection实例上调用createDataChannel会抛出异常。

- AJLoveChina

0

另一个检查WebRTC支持的包是DetectRTC https://github.com/muaz-khan/DetectRTC

- gpkamp

0

我已经弄明白了。感谢您的所有帮助。 http://mozilla.github.com/webrtc-landing/

- usercode

1

实际上，detect.js并没有做你想要的事情：它只是一个浏览器嗅探工具 - 在Web开发中已经不再使用。因此，你不能检测到对webRTC的支持。这个检查在view-source:http://mozilla.github.com/webrtc-landing/的第53行进行，并且与我之前发布的检查完全相同。 - ZER0

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- ZER0 · Accepted Answer

你可以简单地测试浏览器当前是否支持你要使用的功能。例如：

if (!window.mozRTCPeerConnection)
    // error, browser doesn't support it

如果你感兴趣，这里有一篇有趣的文章：Hello Chrome, it’s Firefox calling! 你可以在Chrome中使用webkit前缀来实现与moz相同的功能。