Simple WebRTC example not working

[Taiiwo Llort]

So, I probably just am misunderstanding something here, but I've studied a working example line by line, and I can't figure out why these two peer connections aren't connecting. Am I wrong in assuming that if both local and remote descriptions are set correctly on both peers, with them sending their ice candidate events to each other properly, that they should connect? Is there another step I have to take that I'm missing?

I rewrote my application into the simplest form I could, referencing this: https://developer.mozilla.org/en-US/docs/Web/API/WebRTC_API/Simple_RTCDataChannel_sample

Here's what I got (This example doesn't use signalling, so it should run without setup):

<script src="https://webrtc.github.io/adapter/adapter-latest.js"></script>
<script>
var cfg = {'iceServers': [{'url': 'stun:23.21.150.121'}]},
  con = { 'optional': [{'DtlsSrtpKeyAgreement': true}] }


var client = new RTCPeerConnection(cfg, con);
var host = new RTCPeerConnection(cfg, con);

host.onicecandidate = function(can){client.addIceCandidate(can)}
client.onicecandidate = function(can){host.addIceCandidate(can)}

host.createOffer()
    .then(offer => host.setLocalDescription(offer))
    .then(() => client.setRemoteDescription(host.localDescription))
    .then(() => client.createAnswer())
    .then(answer => client.setLocalDescription(answer))
    .then(() => host.setRemoteDescription(client.localDescription))
</script>

In the above example, both host and client have localDescription and remoteDescription set. In chromium, host is "checking", and client is "new". In FF both host and client is "new".

I managed to make a connection by mistake one time, so I know that this is all the steps required (I have a feeling the icecandidates is optional), so am I doing something in the wrong order? Is there an update that deprecated the example?

[steve...@webrtc.org]

Hi,

You'll need to first add either a data channel or a track on the offerer side (in this case, the host) before creating the offer.

A suggestion for the code: add a .catch handler at the end of the chain of .then (e.g., .catch(console.error);). That will report any errors found when resolving the promise to the console. In this case, Firefox reports this error: DOMException: "Cannot create offer when there are no valid transceivers."

(Also, as a note: onicecandidate is not optional. There needs to be a way to communicate ICE candidates between the peers for a connection to be established. There are other ways to do this, but listening for onicecandidate is the most performant.)

Hope that helps.