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进行信号传递的这种工作方式。