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 将分配给该变量，rest 将为 null。类似地，如果浏览器是 Firefox，然后将本机方法 navigator.mozGetUserMedia 分配给此变量，rest 将为 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。

希望这会有所帮助。