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

【问题标题】：How to do the live streaming of external webcam using webRTC on MacBook Pro如何在 MacBook Pro 上使用 webRTC 进行外部网络摄像头的直播
【发布时间】：2018-01-17 11:06:02
【问题描述】：

我必须创建一个实时流媒体视频应用程序，我必须在其中使用连接到我的 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);


 });

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

【问题讨论】：

标签： javascript video-streaming html5-video webrtc

【解决方案1】：

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

【讨论】：

我没有看到 otg 网络摄像头显示为视频输入之一。我只看到了嵌入式智能手机摄像头，但没有看到通过 otg 电缆连接到 microusv 端口的摄像头

【解决方案2】：

你应该看看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);

【讨论】：