在HTML中调用打开摄像头
2020-12-28 23:27
标签：use function host tps UNC meta ice draw 开会 在调用的时候需要注意几个点 1、该一旦开启摄像头便无法关闭，除非关闭页面或者刷新页面。 2、该方法摄像头无法在http协议中被调用，只能在https协议中使用，如果想在http下运行只能使用localhost（ε=(′ο｀*)))）。 如果在http下运行，可能打开会导致你的页面出现白屏加载不出来的情况。 在HTML中调用打开摄像头 标签：use function host tps UNC meta ice draw 开会 原文地址：https://www.cnblogs.com/CandyTT/p/13831939.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 });
上一篇：15个 Vue.js 高级面试题
下一篇：js的一些简化代码