之前小沃有给大家介绍过，通过html5技术打开摄像头，并且在video标签中使用的案例。目前小沃由于案子需要，需要一台电脑中使用双摄像头，原来的方法明显无法使用到这个上面。因此小沃经过潜心研究，终于发现了如何通过html5技术选择摄像头的方法。

这里，小沃就介绍一下小沃是如何发现这个方法的。

一、认真读一下之前的核心方法navigator.mediaDevices.getUserMedia

它的官方说明文档在这里，这个方法的第一个参数是一个MediaStreamConstraints对象，其中包括我们最熟悉的{ audio: true, video: true }，但是根据看文章，这里其实还可以带有其他更多参数，那么这里的参数中是否有可以区分打开不同camera的参数呢？

首先，我们打开看一下MediaStreamConstraints对象具体是个什么东西。传送门

根据文档，这个对象的参数一共有三个video、audio、peerIdentity，其中peerIdentity是一个Security参数，目前不是我们分析的重点，重点看video参数，它的类型是一个Boolean类型或是一个MediaTrackConstraints对象类型。

Boolean类型就是我们一直在使用的true，那么如果它是一个MediaTrackConstraints对象类型，是否有可能送进去更多的参数呢？当我看到这里后，开始起了这样的怀疑。

因此我有看了下MediaTrackConstraints对象的官方说明。传送门

所有的对象都有的属性

deviceId、groupId

音频对象才有的属性

autoGainControl、channelCount、echoCancellation、latency、noiseSuppression、sampleRate、sampleSize、volume

视频对象才有的属性

aspectRatio、facingMode、frameRate、height、width

当我看到deviceId时，我兴奋了。

根据程序员的直觉，这个对象就是选择不同的设备的。

而deviceId是一个ConstrainDOMString对象，所以我又看了下这个对象的说明。传送门

它只有两个属性，exact和ideal。通过读文档，最后确认了，就是要将camera对应的deviceid送给exact这里，就能成功切换摄像头了。

那么，第二个问题，如何分别获得不同的camera的deviceId呢？

这就涉及到navigator.mediaDevices的另一个方法，navigator.mediaDevices.enumerateDevices了。传送门

然后，看一下官方提供的这个方法的案例

if (!navigator.mediaDevices || !navigator.mediaDevices.enumerateDevices) {
    console.log("enumerateDevices() not supported.");
    return;
}

// List cameras and microphones.

navigator.mediaDevices.enumerateDevices().then(function(devices) {
    devices.forEach(function(device) {
        console.log(device.kind + ": " + device.label + " id = " + device.deviceId);
    });
}).catch(function(err) {
    console.log(err.name + ": " + err.message);
});

写到这里，小沃应该也就不需要再说什么了，上面的案例中很明显的出现了device.deviceId这个参数。

只要找准对应的camera，获取其对应的deviceId，然后送给MediaTrackConstraints即可。

下面是小沃写的一段代码，供大家学习使用。

  var i = 0;
  var video = document.getElementById("video");
  var img = document.getElementById("img");
  var canvas = document.createElement("canvas");
  var context = canvas.getContext("2d");
  var videoarr = new Array();
  canvas.width = 360;
  canvas.height = 240;
  navigator.mediaDevices.enumerateDevices().then(function(devices) {
      devices.forEach(function(device) {
        if(device.kind == "videoinput") {
          //console.log(device.kind + ": " + device.label + " id = " + device.deviceId);
          videoarr.push(device.deviceId);
        }
      });
      console.log(videoarr);
      navigator.mediaDevices.getUserMedia({"video":{ deviceId: {exact: videoarr[0]}}}).then(function(stream) {// videoarr[0]是一个摄像头，videoarr[1]是另一个摄像头
          var URL = window.URL || window.webkitURL;
          video.src = URL.createObjectURL(stream);
          video.play();
      }).catch(function(err) {
          console.log("当前电脑没有摄像头");
          alert("当前电脑没有摄像头");
      });
  }).catch(function(err) {
      console.log(err.name + ": " + err.message);
  });
  function paizhao() {
      context.drawImage(video, 0, 0, canvas.width, canvas.height);
      img.src = canvas.toDataURL("image/jpeg");
  }