HTML5调用摄像头实例

最新推荐文章于 2024-09-10 12:55:25 发布

weixin_34315665

最新推荐文章于 2024-09-10 12:55:25 发布

阅读量416

点赞数

文章标签： javascript ViewUI

原文链接：https://my.oschina.net/lgr6/blog/653005

版权

为什么80%的码农都做不了架构师？>>>

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所得的图片都是反的！！！

转载于:https://my.oschina.net/lgr6/blog/653005