在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   });