码迷,mamicode.com
首页 > Web开发 > 详细

在HTML中调用打开摄像头

时间:2020-10-18 10:00:35      阅读:19      评论:0      收藏:0      [点我收藏+]

标签:use   function   host   tps   UNC   meta   ice   draw   开会   

 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下运行,可能打开会导致你的页面出现白屏加载不出来的情况。

  

 

在HTML中调用打开摄像头

标签:use   function   host   tps   UNC   meta   ice   draw   开会   

原文地址:https://www.cnblogs.com/CandyTT/p/13831939.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有 京ICP备13008772号-2
迷上了代码!