<!DOCTYPE html> <html> <head> </head> <body> <video id="video" autoplay="autoplay" style="width:640px;height:480px"></video> <button id="picture">PICTURE</button> <canvas id="canvas" width="640" height="480"></canvas> <script type="text/javascript"> var video = document.getElementById("video"); var context = canvas.getContext("2d"); var errocb = function (code) { console.log(code); }; if (navigator.getUserMedia) { navigator.getUserMedia({"video": true}, function (stream) { video.src = stream; video.play(); }, errocb); } else if (navigator.webkitGetUserMedia) { alert(2); navigator.webkitGetUserMedia({"video": true}, function (stream) { video.src = window.webkitURL.createObjectURL(stream); video.play(); }, errocb); } document.getElementById("picture").addEventListener("click", function () { context.drawImage(video, 0, 0, 640, 480); }); </script> </body> </html>
測試能夠運行javascript