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 : { 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