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

最新推荐文章于 2025-06-10 13:59:06 发布

weixin_30603633

最新推荐文章于 2025-06-10 13:59:06 发布

阅读量4.5k

点赞数

CC 4.0 BY-SA版权

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

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

本文介绍了一个简单的网页应用，通过HTML5的媒体设备API实现摄像头拍照功能。该应用能够在多种浏览器环境下运行，包括Chrome、Firefox等，并提供了兼容性的解决方案。用户可以通过点击按钮进行拍照，照片会被实时显示。

 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>