h5调用摄像头

2025-02-17 技术教程

<!DOCTYPE html><html><head> <title>摄像头测试</title></head><body>  <video id="video" autoplay ></video>  <div> <button id="capture">拍照</button> </div>  <canvas id="canvas" width="480" height="320"></canvas> <script type="text/javascript"> //访问用户媒体设备的兼容方法 function getUserMedia(constrains,success,error){ if(navigator.mediaDevices.getUserMedia){ //最新标准API navigator.mediaDevices.getUserMedia(constrains).then(success).catch(error); } else if (navigator.webkitGetUserMedia){ //webkit内核浏览器 navigator.webkitGetUserMedia(constrains).then(success).catch(error); } else if (navigator.mozGetUserMedia){ //Firefox浏览器 navagator.mozGetUserMedia(constrains).then(success).catch(error); } else if (navigator.getUserMedia){ //旧版API navigator.getUserMedia(constrains).then(success).catch(error); } } var video = document.getElementById("video"); var canvas = document.getElementById("canvas"); var context = canvas.getContext("2d"); //成功的回调函数 function success(stream){ //兼容webkit内核浏览器 var CompatibleURL = window.URL || window.webkitURL; //将视频流设置为video元素的源 video.src = CompatibleURL.createObjectURL(stream); //播放视频 video.play(); } //异常的回调函数 function error(error){ console.log("访问用户媒体设备失败：",error.name,error.message); } if (navigator.mediaDevices.getUserMedia || navigator.getUserMedia || navigator.webkitGetUserMedia || navigator.mozGetUserMedia){ //调用用户媒体设备，访问摄像头 getUserMedia({ video:{width:480,height:320} },success,error); } else { alert("你的浏览器不支持访问用户媒体设备"); } //注册拍照按钮的单击事件 document.getElementById("capture").addEventListener("click",function(){ //绘制画面 context.drawImage(video,0,0,480,320); }); </script></body></html>