如何在 MacBook Pro 上使用 webRTC 进行外部网络摄像头的直播

Question

我必须创建一个实时流媒体视频应用程序，我必须在其中使用连接到我的 MacBook 的外部网络摄像头来阅读视频。我必须使用 WebRTC 来执行此操作。但是在执行代码时，会触发集成网络摄像头而不是外部网络摄像头。

var video = document.querySelector("#videoElement");
var constraints = { audio:true,video: { facingMode:"environment" } 

var promise = navigator.mediaDevices.getUserMedia(constraints);

promise.then(function(mediaStream) {

  video.srcObject = mediaStream;

  video.onloadedmetadata = function(e) {
    video.play();
  };
})
.catch(function(err) {

  console.log(err.name + ": " + err.message);


 });

如何触发连接的外部网络摄像头？

Answer 1

你应该看看https://developer.mozilla.org/en-US/docs/Web/API/Media_Streams_API

还有这个https://developer.mozilla.org/en-US/docs/Web/API/Media_Streams_API/Constraints

if (typeof MediaStreamTrack === 'undefined'){
  alert('This browser does not support MediaStreamTrack.\n\nTry Chrome Canary.');
} else {
  MediaStreamTrack.getSources( onSourcesAcquired);
}

function onSourcesAcquired(sources) {
  for (var i = 0; i != sources.length; ++i) {
    var source = sources[i];
    // source.id -> DEVICE ID
    // source.label -> DEVICE NAME
    // source.kind = "audio" OR "video"
    // TODO: add this to some datastructure of yours or a selection dialog
  }
}

....

constraints = {
  audio: {
    optional: [{sourceId: selected_audio_source_id}]
  },
  video: {
    optional: [{sourceId: selected_video_source_id}]
  }
};
navigator.getUserMedia(constraints, onSuccessCallback, onErrorCallback);

Answer 2

https://webrtc.github.io/samples/src/content/devices/input-output/ 是如何 select 设备的典型示例，演示了 enumerateDevices() 和 getUserMedia()

如何在 MacBook Pro 上使用 webRTC 进行外部网络摄像头的直播

How to do the live streaming of external webcam using webRTC on MacBook Pro

javascript

video-streaming

html5-video

webrtc