参考网址

http://blog.csdn.net/guoquanyou/article/details/51802849


http://blog.csdn.net/dengmingrun/article/details/17374273(未测试)

<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><title>Document</title><style>video{border:1pxsolid#ccc;display:block;margin:0020px0;float:left;}#canvas{margin-top:20px;border:1pxsolid#ccc;display:block;}</style></head><body><videoid="video"width="500"height="400"autoplay></video><canvasid="canvas"width="500"height="400"></canvas><buttonid="snap">拍照</button><scripttype="text/javascript">varcontext=canvas.getContext("2d");//当DOM树构建完成的时候就会执行DOMContentLoaded事件window.addEventListener("DOMContentLoaded",function(){//获得Canvas对象varcanvas=document.getElementById("canvas");//获得video摄像头区域varvideo=document.getElementById("video");varvideoObj={"video":true};varerrBack=function(error){console.log("Videocaptureerror:",error.code);};//获得摄像头并显示到video区域if(navigator.getUserMedia){//Standardnavigator.getUserMedia(videoObj,function(stream){video.src=stream;video.play();},errBack);}elseif(navigator.webkitGetUserMedia){//WebKit-prefixednavigator.webkitGetUserMedia(videoObj,function(stream){video.src=window.webkitURL.createObjectURL(stream);video.play();},errBack);}elseif(navigator.mozGetUserMedia){//Firefox-prefixednavigator.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></body></html>