Angular p2p视频聊天-远程流为黑色视频

Question

我正在尝试在主叫方和被叫方之间设置一个简单的p2p视频聊天。

代码如下：

var OnBroadcast
  , i
  , isCaller = true
  //just for testing pourpose
  , URLparams = $location.search()
  , iceServers = {
      'iceServers':[{
        'url':'stun:stun.l.google.com:19302'
      }]
    }
  , connOpt = {
      'optional':[{
        'DtlsSrtpKeyAgreement': true
      }]
    }
  , sdpConstraints = {
      'mandatory': {
        'OfferToReceiveAudio': true,
        'OfferToReceiveVideo': true
      }
    }
  , localVideo = $window.document.getElementById('localVideo')
  , remoteVideo = $window.document.getElementById('remoteVideo')
  , peerConnection = new RTCPeerConnection(iceServers, connOpt);

if (URLparams && URLparams.stranger) {

  isCaller = false;
}
peerConnection.onaddstream = function (stream) {
  if (!isCaller) {
    $log.info('Caller Stream is', stream);
    peerConnection.addStream(stream.stream);
    remoteVideo.src = $window.URL.createObjectURL(stream.stream);
  }
};

peerConnection.onicecandidate = function (ices) {
  if (isCaller) {

      ws.broadcast({
        'scope': 'callerICES',
        'message': ices
      });
  } else {

      ws.broadcast({
        'scope': 'calleeICES',
        'message': ices
      });
  }
};

navigator.getUserMedia({
    'audio': true,
    'video': true
  }, function (stream) {

  localVideo.src = $window.URL.createObjectURL(stream);

  if (isCaller) {
    /* VIDEO CHAT P2P----------
    * create CALLER Peer
    * CALLER addStream to peer
    * create CALLER Offer and CALLER setLocalDescription

    * send CALLER Offer to CALLEE and set CALLEE remoteDescription

    * create Answer from CALLEE and CALLEE setLocalDescription

    * send Answer to CALLER and set CALLER setRemoteDescription

    * CALLER icecandidate and send it to CALLEE and CALLEE  addIceCandidate

    * CALLEE icecandidate and send it to CALLER and CALLER addIceCandidate

    * CALLEE addStream
    */
    peerConnection.addStream(stream);

    peerConnection.createOffer(function (offer) {

      peerConnection.setLocalDescription(offer, function () {

          ws.broadcast({
            'scope': 'callerOFFER',
            'message': offer
          });
      });
    }, function (err) {
      $log.error('Unable to create Offer from Caller', err);
    });
  }
}, function (err) {
  $log.error('Unable to getUserMedia', err);
});

OnBroadcast = $rootScope.$on('comunicator:toAll', function (eventInfo, message) {

  if (message.what.scope === 'callerOFFER') {

    if (!isCaller) {

      peerConnection.setRemoteDescription(new RTCSessionDescription(message.what.message), function () {
        peerConnection.createAnswer(function (answer) {

          $log.info('Setup localDesc Callee');
          peerConnection.setLocalDescription(new RTCSessionDescription(answer), function () {

              ws.broadcast({
                'scope':'calleeANSWER',
                'message': answer
              });
          }, function (err) {
            $log.info('Unable to set localDesc for Callee', err);
          },
          sdpConstraints);
        }, function (err) {
          $log.error('Unable to create Answer from Callee', err);
        });
      });
    }
  }

  if (message.what.scope === 'calleeANSWER') {

    if (isCaller) {

      peerConnection.setRemoteDescription(new RTCSessionDescription(message.what.message), function () {

        $log.info('Setup remoteDesc Callee');
      });
    }
  }

  if (message.what.scope === 'callerICES') {

    if (!isCaller) {

      for (i = 0; i < message.what.length; i += 1) {

        peerConnection.addIceCandidate(new RTCIceCandidate(message.what[i]));
      }
      $log.info('Setup CALLEE ices', message.what);
    }
  }

  if (message.what.scope === 'calleeICES') {

    if (isCaller) {

      for (i = 0; i < message.what.length; i += 1) {

        peerConnection.addIceCandidate(new RTCIceCandidate(message.what[i]));
      }
      $log.info('Setup CALLER ices', message.what);
    }
  }
});

一切似乎都正常，但当我将远程视频连接到<video id="remoteVideo"></video>时，我只看到一个黑色视频，我在相同的url和相同的wifi上进行了测试：

主叫方: localhost:8000

被呼叫者: localhost:8000?stranger=true

有没有人能告诉我问题出在哪？

Answer 1

应该注意的是，在设置ICECandidate的remoteDescription之前，我们不应该将它添加到PeerConnection，假设这不是您当前的问题，它可能是：

peerConnection.onaddstream = function (stream) {
  if (!isCaller) {
    $log.info('Caller Stream is', stream);
    peerConnection.addStream(stream.stream);        // ---> specially this line.
    remoteVideo.src = $window.URL.createObjectURL(stream.stream);
  }
};

我不确定为什么被调用者要发回远程流，因为它是本地流，除了使用此代码之外，调用者在接收到被调用者的流时不会做任何事情。peerConnection.addStream用于与远程用户共享您的本地流。通常，被调用者不需要等待调用者的流响应它的流。所以把上面的代码改成...

peerConnection.onaddstream = function (event) {
    $log.info('add stream event:', event);
    remoteVideo.src = $window.URL.createObjectURL(event.stream);
};

...        // also add the retrieved stream to peerConnection for both caller and callee.

navigator.getUserMedia({
    'audio': true,
    'video': true
  }, function (stream) {

        peerConnection.addStream(stream);       // before if (isCaller) check
        localVideo.src = $window.URL.createObjectURL(stream);
        if (isCaller) {
...

除此之外，我希望你写的代码只是一个原型，用于测试WebRTC是否工作，它有一些设计问题，其中一些可能是：

主叫方和被叫方之间没有区别iceCandidate.

• do不喜欢显式指定主叫方的方式，callee.

• current系统不支持每个房间有多个对等点。