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();    })    })    .catch(function (err) {        console.log(err.message);    });}

Answer 1

首先，addStream和onaddstream已弃用，在其他浏览器中将无法使用。请改用addTrack和ontrack。

第二，时机。

您正在致电peerConn.createOffer()，peerConn.addStream(stream)因此不会接听曲目。

与peerConn.createAnswer()以前一样peerConn.addStream(stream)。

最后，混合使用回调和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);

    });

}

请注意，您的代码（和我的回复）仍然缺少关键的内容：候选者交换，并且您没有显示setRemoteDescription(answer)代码来完成协商循环。

请注意，大多数示例都倾向于在两侧使用相同的JS，例如使用iframe postMessage进行信号传递的这种工作方式。