CODEWITHSUNDEEP
javascriptwebsocketwebrtcstunturn
Saurav Deb Purkayastha
Saurav Deb Purkayastha

Reputation: 159

WebRTC - RTCDataChannel's onmessage event is not firing

I am trying to write a basic implementation of WebRTC to send text data using RTCDataChannel. My signalling is working properly. LocalDescription and RemoteDescription is set on both peers and icecandidate events fire properly and ice candidates are shared to both peers. DataChannel onopen event also gets fired. But, when I try to send message using send() function of RTCDataChannel the onmessage event doesn't get fired on the other peer.

This is how I am opening the data channel -

private openDataChannel() {
    this.dataChannel = this.peerConnection.createDataChannel(`myDataChannel_${this.username}`, { ordered: true, protocol: 'tcp', });
    this.dataChannel.onerror = error => console.log('Data Channel Error:', error);
    this.dataChannel.onmessage = message => {
      console.log('data channel message', message);
      this.messages.push(message.data);
    };
    this.dataChannel.onopen = event => console.log('data channel opened', event);
}

I am sending data using this.dataChannel.send(this.msgToSend);

And this is the part where I am creating the RTCPeerConnection -

this.peerConnection = new RTCPeerConnection({
    iceServers: [{ urls: 'stun:stun.stunprotocol.org:3478' }]
});
console.log('RTCPeerConnection created');
console.log(this.peerConnection);

this.peerConnection.onicecandidate = event => {
    if (event.candidate) {
      console.log('onicecandidate', event)
      this.sendToServer({
        type: 'candidate',
        candidate: event.candidate
      })
    }
}

this.openDataChannel();

After creating RTCPeerConnection and calling this.openDataChannel I invoke the signalling server through which I set remoteDescription and localDescription on both peers.

I tried to debug with chrome://webrtc-internals/ . In it I can see two data channels on both peers. And I can see messagesReceived count is incrementing everytime I am sending data from other peer. But, on js the onmessage event isn't firing enter image description here

The thing I am suspecting here is that from peer B I am sending data via myDataChannel_B (since that is the data channel created there). On peer A webrtc-internals shows messagesReceived count under myDataChannel_B. But, on peer A I am subscribed to onmessage event of myDataChannel_A. This seems odd. What am I doing wrong here?

Upvotes: 4

Views: 1176

Answers (1)

Sators
Sators

Reputation: 3136

I encountered this exact same issue as well, and turns out I was creating a separate data channel on every side of the connection.

As outlined in the createDataChannel examples, if you are attempting to create a data channel via either side of the connection, they will need to have a shared id value, such as 0:

// Both sides
const pc = new RTCPeerConnection(options);
const channel = pc.createDataChannel("chat", { negotiated: true, id: 0 });

It's worth noting that the ondatachannel callback, or datachannel event, is only fired when a remote peer has created a data channel, not when you have created the channel locally. When negotiated is set to true, the ondatachannel event is not fired. See datachannel event for more details.

If you are successful, viewing chrome://webrtc-internals/ should only show one RTCDataChannel.

Upvotes: 2

Related Questions