WebRTC使用承诺-两端都看不到远程视频

早些时候，我已经发布了一些关于这个问题的问题。当时我有两个独立的程序，分别用于呼叫者和接收者。我还使用了老式的回调API。多亏了@jib在那篇文章中的帮助，我才能够理解一些根本性改变的必要性。我重写了这个程序，使之成为调用方和接收方的集成程序，并使用了WebRTC API。我的问题是，我无法从两端获取远程视频。我理解但不知道解决方案的一部分：接收器首先不为视频创建SDP，只为音频创建SDP。调用者部分确实为视频和音频创建SDP，但在接收器端没有为远程流生成事件

我通过控制台日志检查了核心功能是否正常工作。报价SDP创建、发送、接收、应答SDP创建、发送、接收等。候选人也可以交换和添加。但是.onaddstream事件处理程序从未被触发。播放本地视频，但这并不重要

我在这上面花了很多时间。我只需要得到那种两头都能看到远程视频的激动人心的感觉，这让我继续前进。我们将衷心感谢您的帮助

<script>
$(document).ready(function () {

  var iceCandidates = [], countIceCandidates=0;
  var socket = io.connect();
  socket.on('connect',function() { console.log("Socket connected"); });

  var pc = new RTCPeerConnection({"iceServers":[{"url":"stun:stun.l.google.com:19302"}]});

  //If remote video stream comes in, display it in DIV vid2
  pc.onaddStream = function (event) {
     stream = event.stream;
     var video = $('#vid2'); 
     video.attr('src', URL.createObjectURL(stream));
     video.onloadedmetadata = function(e) { video.play(); }
  }

  //Display media in both Caller and Receiver
  navigator.mediaDevices.getUserMedia({ audio: true, video: true })
  .then(function(stream) {
      var video = $('#vid1'); 
      video.attr('src', URL.createObjectURL(stream));
      video.onloadedmetadata = function(e) { video.play(); };
      pc.addStream(stream);
   })
  .catch(function(err) { console.log(err);});


 //INITIATE CALL
 $('#call').click(function() {
   pc.createOffer({ offerToReceiveVideo: true, offerToReceiveAudio: true })
   .then(function(offer) {
     localSessionDescription = new RTCSessionDescription(offer);
     pc.setLocalDescription(localSessionDescription)
     .then (function() { socket.emit('sdpOffer',localSessionDescription); })
     .catch(function(err) { console.log("Error in setLocalDescription"); console.log(err); })
     .catch(function(err) { console.log("Error in createOffer"); console.log(err); })
   });
 })

  pc.onicecandidate = function (event) {
    socket.emit('candidate',event.candidate);
  };

  socket.on('candidate',function (data) {
  if (data != null) {
    pc.addIceCandidate(new RTCIceCandidate(data))
     .then(function() { console.log("peer candidate added");})
     .catch(function(err) {console.log(err); console.log("Error during peer candidate addition");});
   }
  });

  socket.on('disconnect',function() { alert("Disconnected"); });

  function error(err) {
   console.log("The following error occurred: " + err.name);
  }

  socket.on('sdpAnswer',function(data) {  
    sdpAnswer = new RTCSessionDescription(data.sdpAnswer);
    pc.setRemoteDescription(sdpAnswer)
    .then(function() { console.log("Answer SDP Set:"); console.log(sdpAnswer); })
    .catch(function(err) { console.log("Error enountered when setting remote SDP Answer"); console.log(err)});
  });

  socket.on('sdpOffer', function(data) {
    sdpOffer = new RTCSessionDescription(data.sdpOffer);
    pc.setRemoteDescription(sdpOffer)
    .then(function() { console.log("Remote SDP set in receiver"); 
      pc.createAnswer()
        .then(function(sdpAnswer) {
           localSessionDescription = new RTCSessionDescription(sdpAnswer);
       socket.emit('sdpAnswer',localSessionDescription);
       pc.setLocalDescription(localSessionDescription)
         .then(function(){
                 console.log("Local SDP Description set in receiver:"); 
               })
            .catch(function(err) { console.log("Error enountered when setting local SDP in receiver"); console.log(err)});
    })
         .catch(function(err) { console.log("Error enountered when creating answer SDP in receiver"); console.log(err)});
     });
   });
}); //End of document.ready function

</script>

---

将

pc.onaddStream

重命名为

pc.onaddStream

将

pc.onaddStream

重命名为

pc.onaddStream

-：）太棒了！两个远程流都工作得很好。你让我开心！！！没有你的帮助，我不可能做到这一点。谢谢。最后一个问题-：）虽然我在两端都看到远程流，但在接收器端生成的ICE候选者，以及来自该端的两个候选者，只有类型为“audio”的sdpMid，但我也可以从呼叫端的接收器看到视频，反之亦然。是的，我正在读RFC5245，但如果你知道答案，那会有帮助。我花了相当多的时间找到一个有“视频”sdpMid的候选人。确保日志记录或信号传输不泄漏。chrome和firefox都支持一种称为BUNDLE的东西，允许在同一候选对上传输多种流/媒体类型。所以你不需要视频候选人。-:）太棒了！两个远程流都工作得很好。你让我开心！！！没有你的帮助，我不可能做到这一点。谢谢。最后一个问题-：）虽然我在两端都看到远程流，但在接收器端生成的ICE候选者，以及来自该端的两个候选者，只有类型为“audio”的sdpMid，但我也可以从呼叫端的接收器看到视频，反之亦然。是的，我正在读RFC5245，但如果你知道答案，那会有帮助。我花了相当多的时间找到一个有“视频”sdpMid的候选人。确保日志记录或信号传输不泄漏。chrome和firefox都支持一种称为BUNDLE的东西，允许在同一候选对上传输多种流/媒体类型。所以你不需要视频候选人。

 io.sockets.on('connection', function(socket) {
   socket.on('sdpOffer', function(data) {
     sdpOffer = data.sdp;
     socket.broadcast.emit('sdpOffer',{"sdpOffer":data});
   });
   socket.on('sdpAnswer', function(data) {
     sdpAnswer = data.sdp;
     socket.broadcast.emit('sdpAnswer',{"sdpAnswer":data});
   });
   socket.on('candidate', function(data) {
     socket.broadcast.emit('candidate',data);
   });
 });