javascript - 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);
    });
}

更新

在我更改代码后，按照受人尊敬的@jib的建议，我两侧的本地和远程流都成功添加到了RTCPeerConnection对象中。我在控制台中成功获得以下消息:调用者收到了新流并且被调用者也接受了报价并获得了流。最后一个问题是 - 为什么这段代码不起作用:

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

视频未播放。

Answer 1

首先，addStream 和 onaddstream 已弃用，并且无法在其他浏览器中工作。使用addTrack和 ontrack相反。

第二，时机。

您在 peerConn.addStream(stream) 之前调用 peerConn.createOffer()，因此不会拾取轨道。

与 peerConn.addStream(stream) 之前的 peerConn.createAnswer() 相同。

最后，混合回调和 promise 会混淆这里的事物顺序。尝试:

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);
    });
}

请注意，您的代码(以及我的回复)仍然缺少关键部分:ice Candidate Exchange，并且您没有显示您的 setRemoteDescription(answer) 代码来完成协商循环。

请注意，大多数示例倾向于在两侧使用相同的 JS，例如这个working fiddle使用 iframe postMessage 进行信号发送。