Basic WebRTC DataChannel MCVE not working in Chrome

Question

I'm working on a web app that uses WebRTC DataChannel, and I can't get the channel open in Chrome. I've reduced it to a simple test that opens two RTCPeerConnection instances on the same page with signaling directly in the code (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');
};

Please note that on the jsfiddle page I am using the WebRTC adapter to shim the browser API to the spec.

When you run this script with the Javascript console open, I expect to see the DataChannel reported open amidst all the logging:

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

I do see this on Firefox 43, but not on Chrome 48 (stable) or 50 (canary).

Where am I going wrong with Chrome? I have tried other samples that use DataChannel and some work, so I know Chrome supports it. Sample code often uses older or browser-specific APIs which I would rather not simply copy. As far as I can tell I am doing the same things, but that is obviously not the case.

rhashimoto rhashimoto · Accepted Answer · 2016-02-17T19:22:18

Aha, the problem seems to be this setting which I picked up from sample code on several sites:

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

Apparently the RtpDataChannels is a legacy Chrome thing which is no longer supported. If I remove that extra argument from the RTCPeerConnection constructors then things work on Chrome.

I filed an issue on Chrome.

Basic WebRTC DataChannel MCVE not working in Chrome

1 Answers