基本 WebRTC DataChannel MCVE 在 Chrome 中不起作用答案

【问题标题】：Basic WebRTC DataChannel MCVE not working in Chrome基本 WebRTC DataChannel MCVE 在 Chrome 中不起作用
【发布时间】：2016-05-29 15:12:10
【问题描述】：

我正在开发一个使用 WebRTC DataChannel 的网络应用程序，但我无法在 Chrome 中打开该通道。我已将其简化为一个简单的测试，即在同一页面上打开两个 RTCPeerConnection 实例，并直接在代码中发出信号 (jsfiddle)：

'use strict';

var RTCPC_CONFIG = {
  'iceServers': [
    { 'urls': 'stun:stun.l.google.com:19302' },
  ]
};

var RTCPC_OPTIONAL = { optional: [{ RtpDataChannels: true }] };

var DATACHANNEL_OPTIONS = {
};

// Create offering peer and data channel.
var offPeer = new RTCPeerConnection(RTCPC_CONFIG, RTCPC_OPTIONAL);
var offChan = offPeer.createDataChannel('off', DATACHANNEL_OPTIONS);

offChan.onopen = function() {
  console.log('***** offering channel open *****');
};

// Create answering peer and data channel.
var ansPeer = new RTCPeerConnection(RTCPC_CONFIG, RTCPC_OPTIONAL);
var ansChan = ansPeer.createDataChannel('ans', DATACHANNEL_OPTIONS);

ansChan.onopen = function() {
  console.log('***** answering channel open *****');
};

// Create the WebRTC offer.
var exchangeDescriptions = offPeer.createOffer().then(function(offer) {
  offPeer.setLocalDescription(offer);
  console.log('offer\n' + JSON.stringify(offer, null, 2));

  // Set the offer on the other peer.
  return ansPeer.setRemoteDescription(offer);
}).then(function() {
  // Create the WebRTC answer.
  return ansPeer.createAnswer();
}).then(function(answer) {
  ansPeer.setLocalDescription(answer);
  console.log('answer\n' + JSON.stringify(answer, null, 2));

  // Set the answer on the other peer.
  return offPeer.setRemoteDescription(answer);
});

// Collect and exchange ICE candidates.
offPeer.onicecandidate = function(e) {
  if (e.candidate) {
    var ice = e.candidate;
    exchangeDescriptions.then(function() {
      // Add ICE candidate to other peer.
      console.log('offer ICE\n' + JSON.stringify(e.candidate, null, 2));
      ansPeer.addIceCandidate(ice);
    });
  }
  else
    console.log('offer ICE done');
};

ansPeer.onicecandidate = function(e) {
  if (e.candidate) {
    var ice = e.candidate;
    exchangeDescriptions.then(function() {
      // Add ICE candidate to other peer.
      console.log('answer ICE\n' + JSON.stringify(e.candidate, null, 2));
      offPeer.addIceCandidate(ice);
    });
  }
  else
    console.log('answer ICE done');
};

请注意，在 jsfiddle page 上，我使用 WebRTC adapter 将浏览器 API 填充到规范中。

当您在 Javascript 控制台打开的情况下运行此脚本时，我希望在所有日志记录中看到报告打开的 DataChannel：

***** offering channel open *****
***** answering channel open *****

我确实在 Firefox 43 上看到了这一点，但在 Chrome 48（稳定版）或 50（金丝雀）上看不到。

Chrome 哪里出了问题？我已经尝试过使用 DataChannel 的其他示例和一些工作，所以我知道 Chrome 支持它。示例代码通常使用旧的或特定于浏览器的 API，我不想简单地复制它们。据我所知，我正在做同样的事情，但显然不是这样。

【问题讨论】：

标签： javascript google-chrome webrtc

【解决方案1】：

啊哈，问题似乎是我从几个网站的示例代码中获得的这个设置：

var RTCPC_OPTIONAL = { optional: [{ RtpDataChannels: true }] };

显然 RtpDataChannels 是旧版 Chrome 的东西，即 no longer supported。如果我从RTCPeerConnection 构造函数中删除那个额外的参数，那么things work on Chrome。

我在 Chrome 上filed an issue。

【讨论】：