H5调用摄像头

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

 参考站:https://blog.csdn.net/c_kite/article/details/78536451

上一篇:测试开发进阶——spring boot——MVC——@RequestMapping 是一个用来处理请求地址映射的注解,可用于类或方法上


下一篇:SpringBoot 使用注解进行接口参数校验