js实现浏览器调用电脑的摄像头拍照

最新推荐文章于 2024-06-07 11:32:43 发布

weixin_30603633

最新推荐文章于 2024-06-07 11:32:43 发布

阅读量4.5k

点赞数

文章标签： javascript 操作系统前端 ViewUI

原文链接：http://www.cnblogs.com/zk12138/p/10608666.html

版权

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 
 4 <head>
 5   <style>
 6     * {
 7       margin: 0;
 8       padding: 0;
 9     }
10   </style>
11   <meta charset="UTF-8">
12   <meta name="viewport" content="width=device-width, initial-scale=1.0">
13   <meta http-equiv="X-UA-Compatible" content="ie=edge">
14   <title>摄像头拍照</title>
15 </head>
16 
17 <body>  
18   <video id="video" width="480" height="320" controls>
19   </video>
20   <div>
21     <button id="capture">拍照</button>
22   </div>
23   <canvas id="canvas" width="480" height="320"></canvas>
24   <script>
25     //访问用户媒体设备的兼容方法
26     function getUserMedia(constraints, success, error) {
27       if (navigator.mediaDevices.getUserMedia) {
28         //最新的标准API
29         navigator.mediaDevices.getUserMedia(constraints).then(success).catch(error);
30       } else if (navigator.webkitGetUserMedia) {
31         //webkit核心浏览器
32         navigator.webkitGetUserMedia(constraints, success, error)
33       } else if (navigator.mozGetUserMedia) {
34         //firfox浏览器
35         navigator.mozGetUserMedia(constraints, success, error);
36       } else if (navigator.getUserMedia) {
37         //旧版API
38         navigator.getUserMedia(constraints, success, error);
39       }
40     }
41 
42     let video = document.getElementById('video');
43     let canvas = document.getElementById('canvas');
44     let context = canvas.getContext('2d');
45 
46     function success(stream) {
47       //兼容webkit核心浏览器
48       let CompatibleURL = window.URL || window.webkitURL;
49       //将视频流设置为video元素的源
50       console.log(stream);
51 
52       //video.src = CompatibleURL.createObjectURL(stream);
53       video.srcObject = stream;
54       video.play();
55     }
56 
57     function error(error) {
58       console.log(`访问用户媒体设备失败${error.name}, ${error.message}`);
59     }
60 
61     if (navigator.mediaDevices.getUserMedia || navigator.getUserMedia || navigator.webkitGetUserMedia || navigator.mozGetUserMedia) {
62       //调用用户媒体设备, 访问摄像头
63       getUserMedia({
64         video: {
65           width: 480,
66           height: 320
67         }
68       }, success, error);
69     } else {
70       alert('不支持访问用户媒体');
71     }
72 
73     document.getElementById('capture').addEventListener('click', function () {
74       context.drawImage(video, 0, 0, 480, 320);
75     })
76   </script>
77 </body>
78 
79 </html>

打开浏览器，点击允许就可以使用摄像头啦！！

-----觉得有用来个关注呗比心心♥♥♥♥♥♥♥♥♥♥♥♥-----

转载于:https://www.cnblogs.com/zk12138/p/10608666.html

weixin_30603633

关注

0
点赞
踩
8

收藏

觉得还不错? 一键收藏
0
评论
js实现浏览器调用电脑的摄像头拍照

1 <!DOCTYPE html> 2 <html lang="en"> 3 4 <head> 5 <style> 6 * { 7 margin: 0; 8 padding: 0; 9 }10 </style>11 <meta cha...
复制链接

扫一扫