<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Insert title here</title> </head> <body> <video id="video" autoplay=""style='640px;height:480px'></video> <div><button id='picture' style=" 100%;">PICTURE</button></div> <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 () { 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> </body> </html>
来源------： http://blog.csdn.net/l30961171/article/details/46356549