UPD

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)相同。

最后，混合使用回调和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，例如working fiddle使用iframe postMessage进行信号传输。

onaddstream事件未调用

UPD

1 个答案: