html5调用摄像头
代码片段如下：
css部分代码：
html部分代码：
|
1 2 3 4 |
Html代码 id="video" width="480" height="320" autoplay> id="canvas" width="480" height="320"> id="take_photo" type="button" value="take_photo"/> |
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 |
Js代码 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); |
做自己喜欢做的，跟家人同等重要