javascript - RTCPeerConnection.createOffer "promise" usage - Stack Overflow

admin管理员组

文章数量:1355748

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

Share Improve this question Follow edited Aug 20, 2015 at 5:39 Felix Kling 817k181181 gold badges1.1k1.1k silver badges1.2k1.2k bronze badges asked Aug 20, 2015 at 4:01 derekderek 10.3k1414 gold badges6868 silver badges110110 bronze badges

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 6

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.

本文标签： javascriptRTCPeerConnectioncreateOffer quotpromisequot usageStack Overflow