Html调用摄像头并拍照
2017-02-27 12:29
465 查看
<!DOCTYPE> <html> <title></title> <meta charset="utf-8" /> <head></head> <script type="text/javascript"> // Put event listeners into place window.addEventListener("DOMContentLoaded", function() { // Grab elements, create settings, etc. var canvas = document.getElementById('canvas'); var context = canvas.getContext('2d'); var video = document.getElementById('video'); var mediaConfig = { video: true }; var errBack = function(e) { console.log('An error has occurred!', e) }; // Put video listeners into place if(navigator.mediaDevices && navigator.mediaDevices.getUserMedia) { navigator.mediaDevices.getUserMedia(mediaConfig).then(function(stream) { video.src = window.URL.createObjectURL(stream); video.play(); }); } /* Legacy code below! */ else if(navigator.getUserMedia) { // Standard navigator.getUserMedia(mediaConfig, function(stream) { video.src = stream; video.play(); }, errBack); } else if(navigator.webkitGetUserMedia) { // WebKit-prefixed navigator.webkitGetUserMedia(mediaConfig, function(stream){ video.src = window.webkitURL.createObjectURL(stream); video.play(); }, errBack); } else if(navigator.mozGetUserMedia) { // Mozilla-prefixed navigator.mozGetUserMedia(mediaConfig, function(stream){ video.src = window.URL.createObjectURL(stream); video.play(); }, errBack); } // Trigger photo take document.getElementById('snap').addEventListener('click', function() { context.drawImage(video, 0, 0, 640, 480); }); }, false); </script> <body> <video id="video" width="640" height="480" autoplay></video> <button id="snap" class="sexyButton">Snap Photo</button> <canvas id="canvas" width="640" height="480"></canvas> </body> </html>
火狐测试没问题!
相关文章推荐
- HTML 5调用摄像头并进行拍照
- HTML之调用摄像头实现拍照和摄像功能
- html调用摄像头拍照,并生成预览
- html页面通过ActiveX控件调用摄像头实现拍照上传demo代码下载
- HTML 5调用摄像头并进行拍照 (测试火狐能行)
- FootStep 40、如何调用S60的系统摄像头功能进行拍照与摄像?
- Wp7: 调用摄像头拍照并上传图片(完整版)
- Java调用摄像头进行拍照源码,并且有JMF下载地址
- Android中调用摄像头并自动对焦拍照
- 教你如何用Silverlight调用摄像头和麦克风,拍照,保存照片
- 初识安卓之自定义摄像头拍照和调用系统摄像头拍照
- iPhone开发 调用摄像头进行拍照等操作
- 通过调用系统摄像头拍照,拍视频,然后写入文件的
- android 调用系统摄像头拍照及截剪
- 通过调用系统摄像头拍照,拍视频,然后写入文件的代码范例
- android开发(15) 调用摄像头拍照,保存在照片到数据库。
- 通过调用系统摄像头拍照,拍视频,然后写入文件的代码范例.
- FootStep 40、如何调用S60的系统摄像头功能进行拍照与摄像?
- 用jmf调用摄像头视频拍照的例子
- jsp调用摄像头拍照,控制摄像头操作