通过HTML5的getUserMedia实现拍照功能示例
程序员文章站
2022-05-16 11:45:08
...
1. 通过getUserMedia调用设备的摄像头(电脑、手机都可以,取决于浏览器对这个API的支持情况),并将资源放入video标签。
2. 将video内的视频资源通过canvas的drawImage API放入canvas里,这个canvas是不显示的。
3. 将canvas的内容转换成base64编码的webp格式的图像(如果浏览器不支持这个格式,会fallback到png格式)放入img里,于是你就能看到你拍的照片了。
2. 将video内的视频资源通过canvas的drawImage API放入canvas里,这个canvas是不显示的。
3. 将canvas的内容转换成base64编码的webp格式的图像(如果浏览器不支持这个格式,会fallback到png格式)放入img里,于是你就能看到你拍的照片了。
不废话了,上代码:
HTML
<!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>
JS
var video = document.querySelector('video'); var canvas = document.querySelector('canvas'); var ctx = canvas.getContext('2d'); var localMediaStream = null; var snapshot = function () { if (localMediaStream) { ctx.drawImage(video, 0, 0); document.querySelector('img').src = canvas.toDataURL('image/webp'); } }; var sizeCanvas = function () { 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}, function (stream) { video.src = window.URL.createObjectURL(stream); localMediaStream = stream; sizeCanvas(); }, function () { alert('your browser does not support getUserMedia'); } );
几个注意事项:
不同浏览器对getUserMedia的支持情况不同,需要加上前缀,比如webkitGetUserMedia、mozGetUserMedia、msGetUserMedia,如果你想屏蔽这一问题的话,可以这样做:
// cross platforms var myGetUserMedia = navigator.getUserMedia || navigator.webkitGetUserMedia || navigator.mozGetUserMedia || navigator.msGetUserMedia;
Chrome对file:///做了很多的限制,跨域就不说了,geolocation也不能在本地下使用,这个getUserMedia也是。
这个sizeCanvas函数做的事情就是保证你拍到的照片的大小和摄像头拍到的大小是一样的,否则会出现拍到的照片只有摄像头录到的一部分画面的情况。
以上就是通过HTML5的getUserMedia实现拍照功能示例的详细内容,更多请关注其它相关文章!
推荐阅读
-
微信小程序MUI导航栏透明渐变功能示例(通过改变rgba的a值实现)
-
基于HTML5实现的超酷摄像头(HTML5 webcam)拍照功能 - photobooth.js
-
通过Web Service实现IP地址查询功能的示例
-
C#调用摄像头实现拍照功能的示例代码
-
html5 拖拽及用 js 实现拖拽功能的示例代码
-
HTML5 通过Vedio标签实现视频循环播放的示例代码
-
JS通过调用微信API实现微信支付功能的方法示例
-
HTML5 Plus 实现手机APP拍照或相册选择图片上传功能的实例代码
-
通过HTML5的getUserMedia实现拍照功能示例
-
JavaScript html5利用FileReader实现上传功能的示例代码