RTCPeerConnection.createOffer "promise" 用法

Question

最近在学习WebRTC，在这里发现了"promise"的一个用法（https://github.com/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 和 removeConnection 是 RTCPeerConnection 对象。从这里 https://developer.mozilla.org/en-US/docs/Web/API/RTCPeerConnection、

createOffer:

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

createOffer 有 3 个参数。但是为什么上面的代码没有参数呢？参数在哪里？

Answer 1

旧的（docs 中的一个）具有三个参数，适用于 firefox（包括最新的）和 chrome，兼容 es5，基于旧回调的检索值的方法。（这个是我正在使用我的应用程序）

下面的代码是较新的代码，可以在最新的 firefox 中使用，但不能在最新的 chrome:

中使用

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

出于好奇，刚刚检查了混合时会发生什么，我猜你已经知道 .then == successCallback 和 .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))...

在chrome中：它会运行成功回调，也会抛出undefined没有方法then.
的错误在 firefox 中：它会运行成功回调，也用值 undefined 解析。

Answer 2

因为 API 已通过 promises 进行了现代化改造，并且文档已过时。

之前:

pc.createOffer(onSuccess, onFailure, options);

After:

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

其中 options 是可选的。由于 adapter.js polyfill（并且在 Firefox 中也可以本地工作），这应该适用于所有支持 WebRTC 的浏览器。

ES6 => 箭头函数适用于 Firefox 和 Chrome 45，您可以在其中尝试 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>

注意： Chrome 45个用户，使用fiddle，因为相同的代码在Whosebug代码片段中不起作用！

RTCPeerConnection.createOffer "promise" 用法

RTCPeerConnection.createOffer "promise" usage

javascript

webrtc

es6-promise