Использование обещания RTCPeerConnection.createOffer

Недавно я изучаю 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,

создатьПредложение:

void createOffer(RTCSessionDescriptionCallback successCallback, RTCPeerConnectionErrorCallback failureCallback, необязательные ограничения MediaConstraints);

createOffer имеет 3 параметра. Но почему в приведенном выше коде нет параметров? где параметры?


javascript webrtc es6-promise
person derek    schedule 20.08.2015    source источник

Ответы (2)


arrow_upward
5
arrow_downward

Потому что API модернизировали промисами, а документ устарел.

До:

pc.createOffer(onSuccess, onFailure, options);

После:

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

где options не является обязательным. Это должно работать во всех браузерах с поддержкой WebRTC благодаря полифиллу adapter.js (а также изначально работает в Fire Fox).

Стрелочные функции ES6 => работают в Firefox и Chrome 45, где вы можете попробовать это:

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 следует использовать скрипту, так как этот код не во фрагменте кода stackoverflow!

person jib    schedule 25.08.2015
comment
Код работает отлично, спасибо. URL-адрес для adapter.js также следует заменить на https://webrtc.github.io/adapter/adapter-latest.js в скрипке. - person Philippe Sultan; 19.10.2017

arrow_upward
1
arrow_downward

старый (один в 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.

person mido    schedule 20.08.2015
comment
Включите adapter.js, чтобы использовать обещанную версию WebRTC API даже в Chrome. - person jib; 23.08.2015