Событие onaddstream не вызывается

Question

Я использую WebRTC для подключения 2 браузеров Chrome. Я создаю offer на первом и отправляю его через signalR второму клиенту так:

function initiate_call() {
callerPeerConn = new RTCPeerConnection(peerConnCfg);
callerPeerConn.ontrack = function (event) {
    console.log('caller recived new stream');
    remoteVideo.srcObject = event.streams[0];
    console.log(event);
}
navigator.mediaDevices.getUserMedia({ audio: true, video: true })
    .then(function (stream) {
        localVideo.srcObject = stream;
        for (const track of stream.getTracks()) {
            callerPeerConn.addTrack(track, stream);
        }
        return callerPeerConn.createOffer();
    })
    .then(
    function (offer) {
        var off = new RTCSessionDescription(offer);
        callerPeerConn.setLocalDescription(
            new RTCSessionDescription(off),
            function () {
                // invite to video chat
                console.log('send offer');
            },
            function (err) {
                console.log(err.message);
            }
        )
    });
}

Когда мой второй браузер получает offer, он использует setLocalDescription и пытается создать answer, а затем отправить его вызывающей стороне так:

function accept_send_answer(){    
calleePeerConn = new RTCPeerConnection(peerConnCfg);
calleePeerConn.ontrack = function (event) {
    console.log('callee accept offer and got streams');
    remoteVideo.srcObject = event.streams[0];
}
calleePeerConn.setRemoteDescription(offer)
    .then(function () {
        return navigator.mediaDevices.getUserMedia({ audio: true, video: true });
    })
    .then(function (stream) {
        localVideo.srcObject = stream; 

        for (const track of stream.getTracks()) {
            calleePeerConn.addTrack(track, stream);
        }
        return calleePeerConn.createAnswer();
    })
    .then(function (answer) {
        // sending answer

        console.log("sending ansfer");
        var remote_streams = calleePeerConn.getRemoteStreams();
        var local_streams = calleePeerConn.getLocalStreams();

        console.log("callee remote streams");
        console.log(remote_streams);
        console.log("callee local streams");
        console.log(local_streams);
    })
    .catch(function (err) {
        console.log(err.message);
    });
}

UPD

После того, как я изменил свой код, следуя совету уважаемого @jib, мои локальные и удаленные потоки с обеих сторон были успешно добавлены в объект RTCPeerConnection. Я успешно получаю следующие сообщения в консоли: caller recived new stream и callee accept offer and got streams. Последняя проблема - почему этот код не работает:

calleePeerConn.ontrack = function (event) {
    console.log('callee accept offer and got streams');
    remoteVideo.srcObject = event.streams[0];
}

видео не воспроизводится.

Answer 1

Во-первых, addStream и onaddstream устарели и не будут работать в других браузерах.Вместо этого используйте addTrack и ontrack .

Секунда, время.

Вы звоните peerConn.createOffer() до peerConn.addStream(stream), чтобы треки не выбиралисьup.

То же самое с peerConn.createAnswer() до peerConn.addStream(stream).

Наконец, смешивание обратных вызовов и обещаний приводит в замешательство порядок вещей здесь.Попробуйте:

const peerConn = new RTCPeerConnection(peerConnCfg);
peerConn.ontrack = function (event) {
  alert('new stream added! ' + event.streams[0]);
}

function initiate_call() {
  navigator.mediaDevices.getUserMedia({audio: true, video: true})
    .then(function (stream) {
      localVideo.srcObject = stream;
      for (const track of stream.getTracks()) {
        peerConn.addTrack(track, stream);
      }
     return peerConn.createOffer();
    })
    .then(function (offer) {
      // signaling and invite
      return peerConn.setLocalDescription(off);
    })
    .catch(function (err) {
      console.log(err.message);
    });
}

function accept_send_answer(offer) {
  peerConn.setRemoteDescription(offer)
    .then(function () {
      return navigator.mediaDevices.getUserMedia({audio: true, video: true});
    })
    .then(function (stream) {
      video.srcObject = stream;
      for (const track of stream.getTracks()) {
        peerConn.addTrack(track, stream);
      }
      return peerConn.createAnswer();
    })
    .then(function (answer) {
      //signaling to caller and send answer
      return peerConn.setLocalDescription(answer);
    })
    .catch(function (err) {
      console.log(err.message);
    });
}

Обратите внимание, что в вашем коде (и моем ответе) по-прежнему отсутствуют критические фрагменты: обмен ледяными кандидатами, и вы не показываете код setRemoteDescription(answer) для завершения переговоровloop.

Обратите внимание, что в большинстве примеров, как правило, используется один и тот же JS с обеих сторон, как, например, это рабочая скрипка с использованием iframe postMessage для сигнализации.