webrtc和peerjs:如何在不开始自己的溪流的情况下玩流

Question

我正在使用peerjs

媒体调用

var getUserMedia = navigator.getUserMedia || navigator.webkitGetUserMedia || navigator.mozGetUserMedia;
getUserMedia({video: true, audio: true}, function(stream) {
  var call = peer.call('another-peers-id', stream);
  call.on('stream', function(remoteStream) {
    // Show stream in some video/canvas element.
  });
}, function(err) {
  console.log('Failed to get local stream' ,err);
});

答案

var getUserMedia = navigator.getUserMedia || navigator.webkitGetUserMedia || navigator.mozGetUserMedia;
peer.on('call', function(call) {
  getUserMedia({video: true, audio: true}, function(stream) {
    call.answer(stream); // Answer the call with an A/V stream.
    call.on('stream', function(remoteStream) {
      // Show stream in some video/canvas element.
    });
  }, function(err) {
    console.log('Failed to get local stream' ,err);
  });
});

问题是：要获取remoteStream，我需要显示自己的流

var call = peer.call('another-peers-id', stream);

我如何玩别人流而不必显示自己的流？

Answer 1

这不是一个错误，您只是感到困惑WebRTC API的工作原理。我们首先创建一个名为 getUserMedia的函数变量，该函数变量将映射到浏览器提供的本机webrtc方法(例如，如果浏览器为chrome，则将方法 navigator.getUserMedia分配给此变量，而剩下的则将为null。如果浏览器为firefox，则是本机组人员方法navigator.mozGetUserMedia被分配给此变量，其余的将为null等(。

一旦将适当的本机方法分配给变量getUserMedia，我们就会使用适当的参数调用此方法。第一个参数是我们要创建的呼叫类型(即媒体约束(，例如仅音频，音频 视频等。第二个参数是成功的回调(即，当浏览器能够成功访问并连接到本地麦克风和/或相机等时(。此回调函数的一个示例是

function(stream) {
  var video = document.querySelector('video');
  video.srcObject = stream;
  video.onloadedmetadata = function(e) {
    // Do something with the video here.
  };
}

getUserMedia方法有第三个参数，该方法在您的示例代码中是可选的，并且在您的示例代码中丢失，这是对另一种方法的回调，如果getusermedia方法失败，该方法将启动。失败的原因可能有很多，例如用户不允许浏览器来访问本地麦克风或相机等。使用此回电方法，您可以通知用户通话失败问题。

这是完整的示例代码(参考https://developer.mozilla.org/en-us/docs/web/api/navigator/getusermedia(

var getUserMedia = navigator.getUserMedia ||
                   navigator.webkitGetUserMedia ||
                   navigator.mozGetUserMedia;
if (getUserMedia) {
  getUserMedia({ audio: true, video: { width: 1280, height: 720 } },
  function(stream) {
    var video = document.querySelector('video');
    video.srcObject = stream;
    video.onloadedmetadata = function(e) {
      video.play();
    };
  },
  function(err) {
    console.log("The following error occurred: " + err.name);
  }
);
} else {
  console.log("getUserMedia not supported");
}

如果您不想发送自己的音频和/或视频，则只需在媒体约束中将其设置为false。

希望这会有所帮助。

Answer 2

我知道这是一个旧线程，但是对于每个人都像我一样绊倒了，我设法这样做：

let call = myPeer.call(peer_id, new MediaStream(), {
            constraints: {
              offerToReceiveAudio: true,
              offerToReceiveVideo: true,
            }
          });
call.on('stream',...)