WebRTC using JSON to set description

Question

Justin Uberti posted this response to a StackOverflow question about how WebRTC connections work:

why doesn't "onicecandidate" work?

Now I've spent the better part of a week setting up a stun-turn server, and when it comes to setting the connections, they tell you to send the object as a string made from JSON.stringify(description)

Now for the life of me I cannot get this to work in his JS example, which I've changed here:

var pc1, pc2, offer, answer, offer_str, offer_prsd, answer_str, answer_prsd;


pc1 = new webkitRTCPeerConnection(getServerOptionsFromUsername("mr_boombosstik"));
pc2 = new webkitRTCPeerConnection(getServerOptionsFromUsername("countdracula"));

pc1.onicecandidate = function(candidate) {
  pc2.addIceCandidate(candidate);
};

pc2.onicecandidate = function(candidate) {
  pc1.addIceCandidate(candidate);
};

//PC1 KICKS OFF THE PROCESS WITH AN OFFER!!
pc1.createOffer(onOfferCreated, onError);

function onError(err) {
  window.alert(err.message);
}

function onOfferCreated(description) {
  offer = description;
  //HERE IS THE OFFER CREATED!!!
  pc1.setLocalDescription(offer, onPc1LocalDescriptionSet, onError);
  offer_str = JSON.stringify(offer);
  //WE SET IT AS "OUR LOCAL DESCRIPTIION
}

function onPc1LocalDescriptionSet() {
    offer_prsd = JSON.parse(offer_str);
    console.log(offer_prsd.sdp);
  // after this function returns, pc1 will start firing icecandidate events
  pc2.setRemoteDescription(offer_prsd, onPc2RemoteDescriptionSet, onError);
}

function onPc2RemoteDescriptionSet() {
  pc2.createAnswer(onAnswerCreated, onError);
}

function onAnswerCreated(description) {
  answer = description;
  pc2.setLocalDescription(answer, onPc2LocalDescriptionSet, onError);
}


function onPc2LocalDescriptionSet() {
  // after this function returns, you'll start getting icecandidate events on pc2
  pc1.setRemoteDescription(answer, onPc1RemoteDescriptionSet, onError);
}

function onPc1RemoteDescriptionSet() {
  window.alert('Yay, we finished signaling offers and answers');
}

So can anyone tell me why this won't work? If I can’t get the session description set locally, how am I going to get it done through a signalling service of some kind?

Answer 1

I found this question while googling this exact problem. I'm 99% certain the cause here is the JSON stringifying/parsing of the description.

Here's proof. Take the simple RTCPeerConnection example at http://simpl.info/rtcpeerconnection/

In main.js, insert this line before line 87:

description = JSON.parse(JSON.stringify(description));

[So it'll be inserted before the line remotePeerConnection.setRemoteDescription(description); in the function gotLocalDescription(description).]

This will cause the following error:

Uncaught TypeMismatchError: Failed to execute 'setRemoteDescription' on 'RTCPeerConnection': The 1st argument provided is either null, or an invalid RTCSessionDescription object.

Apparently Javascript's string/JSON handling is shitty enough to alter the description object when converting it to and from JSON. I spent a lot of time thinking the problem was with my signaling code, but it's this JSON conversion that is the culprit.

Edit: I take back my unkind and libelous words against Javascript. My emotions got the better of me in the heat of the moment. Here's the solution.

It seems as though JSON stringify/parse cannot handle objects that have embedded methods, which makes sense. The description object has embedded _proto_ methods, which you don't need to transmit to the peer via signaling. You only need to deliver the sdp portion of the object. Actually, I don't really know if all of that is exactly true, but whatever, it works.

Example from peer A:

var msg = description.sdp;
...transmit message to peer B...

Peer B:

...receive message from peer A...
remote_descr = new RTCSessionDescription();
remote_descr.type = "offer";
remote_descr.sdp  = msg

If you want, you could use JSON stringify/parse and send both the type and sdp together in one object, instead of setting the type manually.

Answer 2

I found some errors in the code. I will highlight them below. The following code adds all the needed descriptions and ICE candidates just fine in Chrome(obviously because of webkit prefix).

    STUN = {'stun:stun.l.google.com:19302'};
    iceServers = { iceServers: [STUN] };
    DtlsSrtpKeyAgreement = { DtlsSrtpKeyAgreement: true };
    optional = { optional: [{ DtlsSrtpKeyAgreement: true}] };

    var pc1, pc2, offer, answer, offer_str, offer_prsd, answer_str, answer_prsd;


    pc1 = new webkitRTCPeerConnection(iceServers, optional);
    pc2 = new webkitRTCPeerConnection(iceServers, optional);

    pc1.onicecandidate = function (evt) { //this callback returns an ICE EVENT not a candidate
      if (pc2.remoteDescription !== null && evt.candidate !== null) //want to make sure remote description is set and that the candidate is not null(the last one will be null to indicate it being the last candidate for that signalling period)
        pc2.addIceCandidate(evt.candidate, function () { console.log("added ice", evt.candidate); }, function () { console.log("failed to addice"); }); //handle the callback functions here to be sure ice is set
    };

    pc2.onicecandidate = function (evt) {  //SAME HERE, the last candidate is always NULL
      if (pc1.remoteDescription !== null && evt.candidate !== null)
        pc1.addIceCandidate(evt.candidate, function () { console.log("added ice", evt.candidate); }, function () { console.log("failed to addice"); });
    };

    //PC1 KICKS OFF THE PROCESS WITH AN OFFER!!
    pc1.createOffer(onOfferCreated, onError);

    function onError(err) {
      window.alert(err.message);
    }

    function onOfferCreated(description) {
      offer = description;
      //HERE IS THE OFFER CREATED!!!
      offer_str = JSON.stringify(offer); //stringify and set before calling the call back. Yes, callbacks are asynchronous but you want to be sure and not get strange errors by things being called out of order
      pc1.setLocalDescription(offer, onPc1LocalDescriptionSet, onError);
      //WE SET IT AS "OUR LOCAL DESCRIPTIION
    }

    function onPc1LocalDescriptionSet() {
      offer_prsd = JSON.parse(offer_str);
      //console.log(offer_prsd.sdp);
      var desc = new RTCSessionDescription(offer_prsd); //create a SessionDescription object given the parsed object
      // after this function returns, pc1 will start firing icecandidate events
      pc2.setRemoteDescription(desc, onPc2RemoteDescriptionSet, onError);
    }

    function onPc2RemoteDescriptionSet() {
      pc2.createAnswer(onAnswerCreated, onError);
    }

    function onAnswerCreated(description) {
      answer = description;
      pc2.setLocalDescription(answer, onPc2LocalDescriptionSet, onError);
    }


    function onPc2LocalDescriptionSet() {
      // after this function returns, you'll start getting icecandidate events on pc2
      pc1.setRemoteDescription(answer, onPc1RemoteDescriptionSet, onError);
    }

    function onPc1RemoteDescriptionSet() {
      window.alert('Yay, we finished signaling offers and answers');
    }

Answer 3

Do you mean Technical Lead/Manager for the WebRTC project at Google, W3C and IETF standard committee member, previously Tech Lead for Google+ Hangouts, Google video chat, and AOL Instant Messenger's Justin Uberti?

• the code he gave is the example you can find from webrtc.org, whose source code is now hosted in github here.
• you'd better off using more recent code than a post made in 2013 as most if not all the interfaces have changed since. Example: you are using the prefixed version of the objects, which prevents you from testing cross browser, you might want to leverage adapter.js. Note: the original code needed it.
• there are more than 80 companies out there that are using this technology today. The technology works. if you cannot make it work, you might want to contact them , or use one of their solution.