<!doctype html> <html> <head> <title>html5 capture test</title> </head> <body> <video autoplay id="myVideo"></video> <img src="" id="myImg"> <canvas style="display: none;" id="myCanvas"></canvas> <button id="capture" onclick="snapshot()">snapshot</button> <script> var video = document.getElementById("myVideo"); var canvas = document.getElementById("myCanvas"); var img = document.getElementById("myImg"); var ctx = canvas.getContext('2d'); var localMediaStream = null; var snapshot = function () { if (localMediaStream) { canvas.width = video.videoWidth; canvas.height = video.videoHeight; img.width = video.videoWidth; img.height = video.videoHeight; ctx.drawImage(video, 0, 0); document.getElementById("myImg").src = canvas.toDataURL('image/png'); } }; navigator.mozGetUserMedia( {video: true}, function (stream) { video.src = window.URL.createObjectURL(stream); localMediaStream = stream; video.play(); }, function () { alert('your browser does not support getUserMedia'); } ); </script> </body> </html>
HTML5 camera Sample for Firefox
猜你喜欢
转载自isitlikethat.iteye.com/blog/2321636
今日推荐
周排行