js摄像头


<!DOCTYPE html>  
<html lang="zh-CN">  
<head>  
    <meta charset="UTF-8">  
    <title>GetUserMedia实例</title>  
</head>  
<body>  
        <!--  
        理想情况下我们应该先判断你的设备上是否  
        有摄像头或相机，但简单起见，我们在这里直接  
        写出了HTML标记，而不是用JavaScript先判断  
        然后动态生成这些标记  
    -->  
    <video id="video" width="640" height="480" style="border:solid 1px green" autoplay></video>  
    <button id="snap">Snap Photo</button>  
    <canvas id="canvas" width="640" height="480" style="border:solid 1px gray"></canvas>    
</body>  
<script type="text/javascript">  
  // 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);  
    }

       document.getElementById("snap")  
       .addEventListener("click", function() {  
    context.drawImage(video, 0, 0, 640, 480);  
}); 
}, false);


</script>  
<html>