I am learning WebRTC recently and found a usage of "promise" here (.js).

localConnection.createOffer()
    .then(offer => localConnection.setLocalDescription(offer))
    .then(() => remoteConnection.setRemoteDescription(localConnection.localDescription))
    .then(() => remoteConnection.createAnswer())
    .then(answer => remoteConnection.setLocalDescription(answer))
    .then(() => localConnection.setRemoteDescription(remoteConnection.localDescription))
    .catch(handleCreateDescriptionError);

localConnection and removeConnection are RTCPeerConnection objects. From here ,

createOffer:

void createOffer(RTCSessionDescriptionCallback successCallback, RTCPeerConnectionErrorCallback failureCallback, optional MediaConstraints constraints);

createOffer has 3 parameters. But why the above code does not have the parameters? where are the parameters?

I am learning WebRTC recently and found a usage of "promise" here (https://github./mdn/samples-server/blob/master/s/webrtc-simple-datachannel/main.js).

localConnection.createOffer()
    .then(offer => localConnection.setLocalDescription(offer))
    .then(() => remoteConnection.setRemoteDescription(localConnection.localDescription))
    .then(() => remoteConnection.createAnswer())
    .then(answer => remoteConnection.setLocalDescription(answer))
    .then(() => localConnection.setRemoteDescription(remoteConnection.localDescription))
    .catch(handleCreateDescriptionError);

localConnection and removeConnection are RTCPeerConnection objects. From here https://developer.mozilla/en-US/docs/Web/API/RTCPeerConnection,

createOffer:

void createOffer(RTCSessionDescriptionCallback successCallback, RTCPeerConnectionErrorCallback failureCallback, optional MediaConstraints constraints);

createOffer has 3 parameters. But why the above code does not have the parameters? where are the parameters?

• javascript
• webrtc
• es6-promise

2 Answers 2

Because the API has been modernized with promises, and the doc is outdated.

Before:

pc.createOffer(onSuccess, onFailure, options);

After:

pc.createOffer(options).then(onSuccess, onFailure)

where options is optional. This should work in all WebRTC-capable browsers thanks to the adapter.js polyfill (and also works natively in Firefox).

The ES6 => arrow functions work in Firefox and Chrome 45, where you can try this:

var pc1 = new RTCPeerConnection(), pc2 = new RTCPeerConnection();

var add = (pc, can) => can && pc.addIceCandidate(can).catch(failed);
pc1.onicecandidate = e => add(pc2, e.candidate);
pc2.onicecandidate = e => add(pc1, e.candidate);
pc2.onaddstream = e => v2.srcObject = e.stream;
pc1.oniceconnectionstatechange = e => log(pc1.iceConnectionState);

var start = () =>
  navigator.mediaDevices.getUserMedia({ video: true, audio: true })
  .then(stream => pc1.addStream(v1.srcObject = stream))
  .then(() => pc1.createOffer()).then(d => pc1.setLocalDescription(d))
  .then(() => pc2.setRemoteDescription(pc1.localDescription))
  .then(() => pc2.createAnswer()).then(d => pc2.setLocalDescription(d))
  .then(() => pc1.setRemoteDescription(pc2.localDescription))
  .catch(failed);

var log = msg => div.innerHTML += "<p>" + msg + "</p>";
var failed = e => log(e +", line "+ e.lineNumber);

<video id="v1" height="120" width="160" autoplay></video>
<video id="v2" height="120" width="160" autoplay></video><br>
<button onclick="start()">Start!</button><div id="div"></div>
<script src="https://webrtc.github.io/adapter/adapter-latest.js"></script>

Note: Chrome 45 users, use the fiddle, since the same code doesn't function in the stackoverflow code snippet!

the older one( one in docs) with three parameters, works with both firefox( including latest) and chrome, es5 pliant, the old callback based way for retriving values.( this is the one I am using my app)

the below code, is newer one, would work in latest firefox, wont work in latest chrome:

localConnection.createOffer()
    .then(offer => localConnection.setLocalDescription(offer))
    .then(() => remoteConnection.setRemoteDescription(localConnection.localDescription))...

Out of curiousity, just checked what would happen when you mix, I guess you already know that .then == successCallback and .catch == errorCallback:

localConnection.createOffer( offer => {
        console.log('in success callback', offer); 
        if(offer) localConnection.setLocalDescription(offer);
    }, error => {
        console.log('in error callback', error);             
    })
    .then(offer => {
        console.log('in promise then', offer); 
        if(offer) localConnection.setLocalDescription(offer);
    }).then(() => remoteConnection.setRemoteDescription(localConnection.localDescription))...

in chrome: it would run success callback, also throw error that undefined has no method then.
in firefox: it would run success callback, also resolve with a value undefined.