html:<video id="video" autoplay=""style=‘width:640px;height:480px‘></video><button id=‘picture‘>PICTURE</button><canvas id="canvas" width="640" height="480"></canvas></body>js:<script> var video = document.getElementById("video"); var context = canvas.getContext("2d") var errocb = function () { console.log(‘sth wrong!‘); } if (navigator.getUserMedia) { // 标准的API navigator.getUserMedia({ "video": true }, function (stream) { video.src = stream; video.play(); }, errocb); } else if (navigator.webkitGetUserMedia) { // WebKit 核心的API 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>
时间: 2024-10-07 13:25:27