Arkon Arkon - 1 year ago 385
Node.js Question

WebRTC: RTCDataChannel is not 'open'

I followed an entire tutorial about WebRTC and implementing a simple p2p chat. My signaling server is working aside on localhost:9090.
When I try to send a message, I am receiving:

RTCDataChannel.readyState is not 'open'

However, the connection seems to have been established properly:

Got message {"type":"login","success":true}
RTCPeerConnection object was created
RTCPeerConnection {localDescription: RTCSessionDescription, remoteDescription: RTCSessionDescription, signalingState: "stable", iceGatheringState: "new", iceConnectionState: "new"…}
Channel created
Got message {"type":"answer","answer":{"type":"answer","sdp":"v=0\r\no=- 5123156273253761787 2 IN IP4\r\ns=-\r\nt=0 0\r\na=group:BUNDLE data\r\na=msid-semantic: WMS\r\nm=application 9 UDP/TLS/RTP/SAVPF 127\r\nc=IN IP4\r\nb=AS:30\r\na=rtcp:9 IN IP4\r\na=ice-ufrag:aWnc+x1ot0kpmCj6\r\na=ice-pwd:o8BH8EIsb/FVLBDkUt5Mw6V4\r\na=fingerprint:sha-256 D6:18:83:20:FC:3F:0B:87:8F:FB:D8:5D:D6:33:13:FE:C6:EE:53:3D:18:69:DD:C0:BF:23:35:95:F7:26:4D:F2\r\na=setup:active\r\na=mid:data\r\na=sendrecv\r\na=rtcp-mux\r\na=rtpmap:127 google-data/90000\r\na=ssrc:2024832766 cname:y/zAQto2dzSH04r0\r\na=ssrc:2024832766 msid:myDataChannel myDataChannel\r\na=ssrc:2024832766 mslabel:myDataChannel\r\na=ssrc:2024832766 label:myDataChannel\r\n"}}
Got message {"type":"candidate","candidate":{"candidate":"candidate:2633341356 1 udp 2113937151 54721 typ host generation 0 ufrag aWnc+x1ot0kpmCj6","sdpMid":"data","sdpMLineIndex":0}}
candidate added

Here is the code of client.js:

How can I make sure that each client is really connected to the other and that the answer / SDP was correct? Any tips for this: maybe the channel creation as done too early and should only be done after the whole "handshake"? Thanks a lot

__ EDIT After Jib's 1st answer __

var connectedUser, myConnection, dataChannel;

//when a user clicks the login button
loginBtn.addEventListener("click", function(event) {
name = loginInput.value;
type: "login",
name: name

//handle messages from the server
connection.onmessage = function (message) {
console.log("Got message",;
var data = JSON.parse(;

switch(data.type) {
case "login":
case "offer":
case "answer":
case "candidate":

//when a user logs in
function onLogin(success) {

if (success === false) {
alert("oops...try a different username");
} else {
//creating our RTCPeerConnection object
var configuration = {
"iceServers": [{ "urls": "" }]

myConnection = new webkitRTCPeerConnection(configuration, {
optional: [{RtpDataChannels: true}]
//ondatachannel is defined a bit later, commented out this line.
//myConnection.ondatachannel = event => dataChannel =;
console.log("RTCPeerConnection object was created");

//setup ice handling
//when the browser finds an ice candidate we send it to another peer
myConnection.onicecandidate = function (event) {

if (event.candidate) {
type: "candidate",
candidate: event.candidate
myConnection.oniceconnectionstatechange = e => console.log(myConnection.iceConnectionState);
myConnection.ondatachannel = function(ev) {
console.log('Data channel is created!'); = function() {
console.log('Data channel is open and ready to be used.');

connection.onopen = function () {

connection.onerror = function (err) {
console.log("Got error", err);

// Alias for sending messages in JSON format
function send(message) {
if (connectedUser) { = connectedUser;


//setup a peer connection with another user
connectToOtherUsernameBtn.addEventListener("click", function () {

var otherUsername = otherUsernameInput.value;
connectedUser = otherUsername;

if (otherUsername.length > 0) {
//Create channel before sending the offer
//make an offer
myConnection.createOffer(function (offer) {
type: "offer",
offer: offer

}, function (error) {
alert("An error has occurred.:", error);

//when somebody wants to call us
function onOffer(offer, name) {
connectedUser = name;
myConnection.setRemoteDescription(new RTCSessionDescription(offer));

myConnection.createAnswer(function (answer) {
type: "answer",
answer: answer

}, function (error) {
alert("oops...error: ", error);

//when another user answers to our offer
function onAnswer(answer) {
myConnection.setRemoteDescription(new RTCSessionDescription(answer));

//when we got ice candidate from another user
function onCandidate(candidate) {
myConnection.addIceCandidate(new RTCIceCandidate(candidate));
console.log("candidate added");

//creating data channel
function openDataChannel() {

var dataChannelOptions = {
dataChannel = myConnection.createDataChannel("myDataChannel", dataChannelOptions);
console.log("Channel created");

dataChannel.onerror = function (error) {
console.log("Error:", error);

dataChannel.onmessage = function (event) {
console.log("new message received");
console.log("Got message:",;
dataChannel.onopen = function() {
console.log("channel opened");

//when a user clicks the send message button
sendMsgBtn.addEventListener("click", function (event) {
console.log("send message");
var val = msgInput.value;

jib jib
Answer Source

Data channel creation is asymmetric, just like the offer/answer exchange. Only the offerer calls pc.createDataChannel(), while the answerer listens to pc.ondatachannel.

Move your createDataChannel call to right before you call createOffer, and add somewhere:

myConnection.ondatachannel = event => dataChannel =;

In addition, use dataChannel.onopen to learn when the channel is opened (works on both ends).

How can I make sure that each client is really connected to the other and that the answer / SDP was correct?

You can do two things:

  1. Check the ICE connection state ("checking", "connected"):

    pc.oniceconnectionstatechange = e => console.log(pc.iceConnectionState);

  2. Add error callbacks. Calls like setLocalDescription can fail, and tell you why, but you're not checking for failure.

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download