SyntaxError sending remote ice candidates in WebRTC

Question

I'm using SimpleSignalling server to connect two peers. The basic process is:

PubNub broadcasts the creation of peer A

pubnub.subscribe( {
      channel : 'mimis/peer/awaken',
      message : function( msg ) {
          var dest_uid = msg
          if( server.uid() != dest_uid ) {
              onawaken( dest_uid )
          }
      },
  } )

Peer B creates a new PeerConnection

function onawaken( uid ) {
    var servers = null
    connections[uid] = new webkitRTCPeerConnection( servers,
                                                    { optional: [{ RtpDataChannels: true }] } )

    function gotCandidate( event ) {
        if( event.candidate ) {
            server.send( event.candidate, uid, server.room() )
        }
    }
    connections[uid].onicecandidate = gotCandidate

    try {
        channels[uid] = connections[uid].createDataChannel( "mimisChannel",
                                                            { reliable: false } )
    } catch (e) {
        console.error( 'Failed to create data channel. ' +
                       'You need Chrome M25 or later with RtpDataChannel enabled' )
    }

    function gotLocalDescription( desc ) {
        connections[uid].setLocalDescription( desc )
        server.send( desc, uid, server.room() )
    }

    connections[uid].createOffer( gotLocalDescription )
}

PeerConnection creates an response

function onoffer( offer, uid ) {
    connections[uid] = new webkitRTCPeerConnection( servers,
                                                    { optional: [{ RtpDataChannels: true }] } )

    function gotRemoteDescription( desc ) {
        connections[uid].setRemoteDescription( desc )
        server.send( desc, uid, server.room() )
    }

    connections[uid].createAnswer( gotRemoteDescription )

    function gotReceiveChannel( event ) {
        channels[uid] = event.channel
    }

    connections[uid].ondatachannel = gotReceiveChannel
}

ICE candidates are received as messages from the SimpleSignaling server.

server.onmessage = function( msg, uid, room ) {
    if( msg.type == 'offer' ) {
        onoffer( msg, uid )
    } else if( msg.candidate ) {
        try {
            connections[uid].addIceCandidate( msg )
        } catch( e ) {
            console.error( 'connections[uid].addIceCandidate', e )
        }
    } else {
        console.warn( 'server.onmessage: Unknown message type', msg )
    }
}

The onawaken onicecandidate handler seems to be performing correctly. When two tabs are opened the second will receive JSON candidate objects. When I pass those to connections[uid].addIceCandidate, I get the error `TypeMismatchError: DOM Exception 17.

The code and a demo are online.

---

What is passed to addIceCandidate needs to be a RTCIceCandidate. The final code looks like:

server.onmessage = function( msg, uid, room ) {
      var candidate = new RTCIceCandidate( msg )
      connections[uid].addIceCandidate( candidate )
}

Now I get SyntaxError: DOM Exception 12. In theory this is because I'm calling addIceCandidate before setRemoteDescription. I have setRemoteDescription in createAnswer, but the callback is never getting executed.

---

To onoffer I added:

connections[uid].setRemoteDescription( new RTCSessionDescription( offer ) )

That cleared up the syntax errors. ICE messages are now getting sent successfully, but connections[uid].ondatachannel is never getting called.

Answer 1

I added a handler for the result of createAnswer. The program now works.

server.onmessage = function( msg, uid, room ) {
    if( msg.type == 'answer' ) {
        connections[uid].setRemoteDescription( new RTCSessionDescription( msg ) )
    }
}

The working code is a wall application that connects any users with the page open. It is running at wholcomb.github.io/SimpleSignaling/.