利用html5调用本地摄像头拍照上传图片

测试只有PC上可以,手机上不行

<!DOCTYPE HTML>
<HTML>
<HEAD>
<TITLE> New Document </TITLE>
<META NAME="Generator" CONTENT="EditPlus">
<META NAME="Author" CONTENT="">
<META NAME="Keywords" CONTENT="">
<META NAME="Description" CONTENT="">
<script>     
// Put event listeners into place

window.addEventListener("DOMContentLoaded", 
function() {
	
// Grab elements, create settings, etc.
	
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); 
		};

	
// Put video listeners into place
	
if(navigator.getUserMedia) { // Standard
		
navigator.getUserMedia(videoObj,
function(stream) {
			
video.src = stream;
			
video.play();
		
}, errBack);
	
} else if(navigator.webkitGetUserMedia) {
// WebKit-prefixed
		
navigator.webkitGetUserMedia(videoObj, 
function(stream){
			
video.src = window.webkitURL.createObjectURL(stream);
			
video.play();
		
}, errBack);
	
}
	else if(navigator.mozGetUserMedia) { // Firefox-prefixed
		
navigator.mozGetUserMedia(videoObj,
function(stream){
			
video.src = window.URL.createObjectURL(stream);
			
video.play();
		
}, errBack);
	
}
}, false);      
// 触发拍照动作

document.getElementById("snap").addEventListener("click", function() {
	
context.drawImage(video, 0, 0, 640, 480);
});
 </script> 
</HEAD>

<BODY>
<!--
	理想情况下我们应该先判断你的设备上是否
	有摄像头或相机,但简单起见,我们在这里直接
	写出了HTML标记,而不是用JavaScript先判断
	然后动态生成这些标记
-->

<video id="video" width="640" height="480" autoplay></video>
<button id="snap">Snap Photo</button>
<canvas id="canvas" width="640" height="480"></canvas>
</BODY>
</HTML>

相关推荐