在HTML中调用打开摄像头

 1 <img src="imgs/qr.png" alt="">
 2 <video src=""></video>
 3 <canvas  id="canvas" width=200 height=250 ></canvas>
 4
 5
 6
 7  // 视频大小
 8   var constraints = { video: {width: 200,height: 250}};
 9   // 开启视频
10   navigator.mediaDevices.getUserMedia(constraints).then(function(mediaStream) {
11     console.log('getUserMedia:', mediaStream)
12     var video = document.querySelector('video');
13     video.srcObject = mediaStream;
14     video.onloadedmetadata = function(e) {
15       video.play();
16     };
17
18     // 使用canvas进行拍照
19     //  var canvas = document.getElementById('canvas')
20     //  $('button').on('click', function () {
21     //   canvas.getContext('2d').drawImage(video, 0, 0, 200, 250);
22     //   $('img').css('src', canvas.toDataURL("image/png"))
23     //  })
24
25   }).catch(function(err) {
26     console.log(err.name + ": " + err.message);
27   });

在调用的时候需要注意几个点

　　1、该一旦开启摄像头便无法关闭，除非关闭页面或者刷新页面。

　　2、该方法摄像头无法在http协议中被调用，只能在https协议中使用，如果想在http下运行只能使用localhost（ε=(´ο｀*)))）。

　　　　如果在http下运行，可能打开会导致你的页面出现白屏加载不出来的情况。