大佬教程收集整理的这篇文章主要介绍了通过HTML5的getUserMedia实现拍照功能,大佬教程大佬觉得挺不错的,现在分享给大家,也给大家做个参考。
1. 通过getUserMedia调用设备的摄像头(电脑、手机都可以,取决于浏览器对这个API的@L_696_1@情况),并将资源放入video标签。
2. 将video内的视频资源通过canvas的drawImage API放入canvas里,这个canvas是不显示的。
3. 将canvas的内容转换成base64编码的webp格式的图像(如果浏览器不支持这个格式,会fallBACk到png格式)放入img里,于是你就能看到你拍的照片了。
不废话了,上代码:
<!doctype html> <html> <head> <title>html5 capture test</title> <link rel="stylesheet" href="style.css"> </head> <body> <video autoplay></video> <img src=""> <canvas style="display: none;"></canvas> <button id="capture">snapshot</button> <script src="index.js"></script> </body> </html>
var video = document.querySELEctor('video'); var canvas = document.querySELEctor('canvas'); var ctx = canvas.getContext('2d'); var localMediaStream = null; var snapshot =@R_31_3816@ () { if (localMediaStream) { ctx.drawImage(video, 0, 0); document.querySELEctor('img').src = canvas.toDataURL('image/webp'); } }; var sizeCanvas =@R_31_3816@ () { setTimeout(function () { canvas.width = video.videoWidth; canvas.height = video.videoHeight; img.width = video.videoWidth; img.height = video.videoHeight; }, 100); }; var btnCapture = document.getElementById('capture'); btnCapture.addEventListener('click', snapshot, falsE); navigator.webkitGetUserMedia( {video: truE}, @R_31_3816@ (stream) { video.src = window.URl.createObjectURL(stream); localMediaStream = stream; sizeCanvas(); }, @R_31_3816@ () { alert('your browser does not support getUserMedia'); } );
// cross platforms var myGetUserMedia = navigator.getUserMedia || navigator.webkitGetUserMedia || navigator.mozGetUserMedia || navigator.msGetUserMedia;
以上是大佬教程为你收集整理的通过HTML5的getUserMedia实现拍照功能全部内容,希望文章能够帮你解决通过HTML5的getUserMedia实现拍照功能所遇到的程序开发问题。
如果觉得大佬教程网站内容还不错,欢迎将大佬教程推荐给程序员好友。
本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。