通过getusermedia选择WebCams

Question

我是getusermedia的初学者，刚刚从谷歌那里得到了一些代码，我能够处理这些代码。但是我必须在我的webapp上显示选项，用户可以从主(膝上型电脑)或辅助(通过USB连接)选择WebCam。

尝试过，主要工作(笔记本电脑WebCam)，但当我添加USB WebCam，它是自动选择USB WebCam。

var canvas = document.getElementById("canvas"),
context = canvas.getContext("2d"),
video = document.getElementById("video"),
imagegrid = document.getElementById("imagegrid"),
videoObj = { "video": true },
errBack = function(error) {
console.log("Video capture error: ", error.code); 
};
var video = document.querySelector("#video");
navigator.getUserMedia = navigator.getUserMedia || navigator.webkitGetUserMedia || navigator.mozGetUserMedia || navigator.msGetUserMedia || navigator.oGetUserMedia;
if (navigator.getUserMedia) {       
navigator.getUserMedia({video: true}, handleVideo, videoError);
}
function handleVideo(stream) {
video.src = window.URL.createObjectURL(stream);
}
function videoError(e) {
// do something
}
// Trigger photo take
document.getElementById("video").addEventListener("click", function() {

draw(video, canvas, imagegrid);
});

是否可能，我可以显示两个网络摄像头的选项。

谢谢

Answer 1

函数navigator.getUserMedia()只为您提供默认的摄像机(火狐除外，它为您提供了与web应用程序共享哪个摄像头的选项)。

为了避免这个问题，您应该使用navigator.mediaDevices.enumerateDevices()，然后使用navigator.mediaDevices.getUserMedia(constraints)。

示例：

navigator.mediaDevices.enumerateDevices()
  .then(gotDevices)
  .catch(errorCallback);
...
function gotDevices(deviceInfos) {

  ...

  for (var i = 0; i !== deviceInfos.length; ++i) {
    var deviceInfo = deviceInfos[i];
    var option = document.createElement('option');
    option.value = deviceInfo.deviceId;
    if (deviceInfo.kind === 'audioinput') {
      option.text = deviceInfo.label ||
        'Microphone ' + (audioInputSelect.length + 1);
      audioInputSelect.appendChild(option);
    } else if (deviceInfo.kind === 'audiooutput') {
      option.text = deviceInfo.label || 'Speaker ' +
        (audioOutputSelect.length + 1);
      audioOutputSelect.appendChild(option);
    } else if (deviceInfo.kind === 'videoinput') {
      option.text = deviceInfo.label || 'Camera ' +
        (videoSelect.length + 1);
      videoSelect.appendChild(option);
    }

  ...

}

navigator.mediaDevices.getUserMedia(constraints)
  .then(function(stream) {
    var videoTracks = stream.getVideoTracks();
    console.log('Got stream with constraints:', constraints);
    console.log('Using video device: ' + videoTracks[0].label);
    stream.onended = function() {
      console.log('Stream ended');
    };
    window.stream = stream; // make variable available to console
    video.srcObject = stream;
  })
  .catch(function(error) {
    // ...
  }

上面的函数使用promises，需要比您更复杂的方法。因此，您需要做一些阅读，以适应这个方法。关于一些例子，请看下面的链接：

https://developers.google.com/web/updates/2015/10/media-devices