html5调用摄像头

video { border: 1px solid #ccc; display:inline-block; }
#canvas { border: 1px solid #ccc; display:inline-block;}
#take_photo{background-color:orange;width:100px;height:30px;border:0px;}

id="video" width="480" height="320" autoplay>
id="canvas" width="480" height="320">
id="take_photo" type="button" value="take_photo"/>

window.addEventListener("DOMContentLoaded", function() {
var canvas = document.getElementByIdx_x("canvas"),
context = canvas.getContext("2d"),
video = document.getElementByIdx_x("video"),
videoobj = {"video": true },
errback = function(error) {
console.log("error", error.code);
};
if(navigator.getUserMedia) {
navigator.getUserMedia(videoobj, function( stream) {
video.src = stream;
video.play();
}, errback);
} else if (navigator.webkitGetUserMedia) {
navigator.webkitGetUserMedia(videoobj,function(stream) {
video.src = window.webkitURL.createObjectURL(stream);
} , errback)
}
document.getElementByIdx_x("take_photo").addEventListener("click", function(){
context.drawImage(video, 0, 0, 480, 320);
});
}, false);