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)，因此不会拾取曲目。

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)完成协商循环的代码。

请注意，大多数示例倾向于在双方使用相同的 JS，例如这个工作小提琴使用 iframe postMessage 进行信号发送。