WebRTC: Unable to successfully complete signalling process using DataChannel

Question

I've been having trouble establishing a WebRTC session and am trying to simplify the issue as much as possible. So I've written up a simple copy & paste example, where you just paste the offer/answer into webforms and click submit.

The HTML+JS, all in one file, can be found here: http://pastebin.com/Ktmb3mVf

I'm on a local network, and am therefore removing the ICE server initialisation process to make this example as bare-bones as possible.

Here are the steps I'm carrying out in the example:

Page 1

1. Page 1 (loads page), enters a channel name (e.g. test) and clicks create.

2. A new Host object is created, new PeerConnection() and createDataChannel are called.

3. createOffer is called, and the resulting offerSDP is pasted into the offer textarea.

Page 2

4. Copy offerSDP from Page 1 and paste into offer textarea on Page 2, click join.

5. New Guest object is created, PeerConnection and an ondatachannel handler is set.

6. setRemoteDescription is called for the Guest object, with the offerSDP data.

7. createAnswer is called and the result is pasted into the answer textarea box.

Page 1

8. The answerSDP is copied from Page 2 and pasted into the answer textarea of Page 1, submit answer is clicked.

9. Host.setRemoteDescription is called with the answerSDP data. This creates a SessionDescription, then peer.setRemoteDescription is called with the resulting data.

Those are the steps carried out in the example, but it seems I'm missing something critical. After the offerer's remoteDescription is set with the answerSDP, I try to send a test message on the dataChannel:

Chrome 40

"-- complete"
> host.dataChannel.send('hello world');
VM1387:2 Uncaught DOMException: Failed to execute 'send' on 'RTCDataChannel': RTCDataChannel.readyState is not 'open'

Firefox 35

"-- complete"
ICE failed, see about:webrtc for more details
> host.dataChannel.send('hello world');
InvalidStateError: An attempt was made to use an object that is not, or is no longer, usable

I also had a more complicated demo operating, with a WebSocket signalling server, and ICE candidates listed, but was getting the same error. So I hope this simplification can help to track down the issue.

Again, the single-file code link: http://pastebin.com/Ktmb3mVf

Answer 1

To enable webRTC clients to connect to each other, you need ICE. While STUN and TURN, which you don't need for such a test, are part of that, even without these helpers you still need to use ICE to tell the other end which IP/port/protocol to connect to.

There are two ways to do this: Google's "trickle ice", where the SDP (answer/offer) is passed on without any ICE candidates. These are then transported over a separate signaling layer and added as they are discovered. This speeds up the connection process, as ICE takes time and some late ICE candidates might not be needed.

The classic method is to wait until all ICE candidates have been gathered, and then generate the SDP with these already included.

I have modified your latest version to do that: http://pastebin.com/g2YVvrRd

You also need to wait for the datachannel/connection to become available before being able to use it, so I've moved the sending of the message to the channels onopen event.

The significant changes to the original code:

The interface callbacks were removed from Host.prototype.createOffer and Guest.prototype.createAnswer, instead we attach the provided callback function to the respective objects for later use.

self.cb = cb;

Both Host and Guest have an added ICE handler for the PeerConnection:

var self = this;
this.peer.onicecandidate = function (event) {
    // This event is called for every discovered ICE candidate.
    // If this was trickle ICE, you'd pass them on here.
    // An event without an actual candidate signals the end of the
    // ICE collection process, which is what we need for classic ICE.
    if (!event.candidate) {
        // We fetch the up to date description from the PeerConnection
        // It now contains lines with the available ICE candidates
        self.offer = self.peer.localDescription;
        // Now we move on to the deferred callback function
        self.cb(self.offer);
    }
}

For the guest self.offer becomes self.answer

The interface handler $("#submitAnswer").click() does not send the message anymore, instead it is send when the datachannel is ready in the onopen event defined in setChannelEvents().

channel.onopen = function () {
    console.log('** channel.onopen');
    channel.send('hello world!');
};