HTML5调用摄像头实例
2016-04-05 17:24
2021 查看
HTML布局:
该布局比较简陋,video标签主要是用来实时显示摄像头画面的,canvas则是点击拍照后显示的某一瞬间的画面
<body> <video id="video" width="640" height="480" autoplay></video><br> <button id="snap" >拍照</button> <br> <canvas id="canvas" width="640" height="480"></canvas> </body>
js实现:
<script type="text/javascript"> //为window对象扩展addEventListener方法 window.addEventListener("DOMContentLoaded", function() { var canvas = document.getElementById("canvas"), context = canvas.getContext("2d"), video = document.getElementById("video"), videoObj = { "video": true }, errBack = function(error) { console.log("Video capture error: ", error.code); }; // 解决兼容性问题 if(navigator.getUserMedia) { // edge,IE //alert("支持navigator.getUserMedia"); navigator.getUserMedia(videoObj, function(stream) { video.src = stream; video.play(); }, errBack); } else if(navigator.webkitGetUserMedia) { // chrome //alert("支持navigator.webkitGetUserMedia"); navigator.webkitGetUserMedia(videoObj, function(stream){ video.src = window.webkitURL.createObjectURL(stream); video.play(); }, errBack); } else if(navigator.mozGetUserMedia) { // Firefox //alert("支持navigator.mozGetUserMedia"); navigator.mozGetUserMedia(videoObj, function(stream){ video.src = window.URL.createObjectURL(stream); video.play(); }, errBack); } // 触发拍照动作 document.getElementById("snap").addEventListener("click", function() { context.drawImage(video, 0, 0, 640, 480); }); }, false); </script>
注意事项:不同浏览器下正确打开方式
1.谷歌浏览器下直接打开文件绝对地址无法实现调用摄像头,要放在apache服务器文件中才能打开(windows 下安装wampserver)?
2.火狐浏览器可以直接打开,也可以在apache下打开
3.win10的edge浏览器不管是直接打开还是在apache下都无法调用摄像头,会出现闪退的情况
4.最后惊喜的发现chrome和firefox所得的图片都是反的!!!
(adsbygoogle = window.adsbygoogle || []).push({});相关文章推荐
- html5调用摄像头实例
- Android上 用Html5做界面,javascript调用摄像头实例
- HTML5 调用手机相册和摄像头的方法并上传微信下测试通过
- 利用html5调用本地摄像头拍照上传图片
- 【JNI】 Android调用JNI的进阶实例(摄像头预览数据转码RGB播放)
- Android调用JNI的进阶实例(摄像头预览数据转码RGB播放)
- (亲测可用)html5调用手机摄像头
- 利用html5调用本地摄像头拍照上传图片
- html5调用摄像头实现拍照并本地保存
- C#实现调用本机摄像头实例
- 用html5和javascript调用摄像头实现拍照功能
- HTML5调用摄像头录制视频
- html5调用摄像头使用Getusermedia和canvas
- HTML5调用手机摄像头拍照的实现思路及代码
- HTML5 调用手机摄像头扫描二维码
- Unity调用外接摄像头的实例代码(C#)
- 利用html5调用本地摄像头拍照上传图片
- HTML5调用本地摄像头
- JAVA摄像头调用_实例---Win7
- 基于Aforge摄像头调用简单实例