<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <input type="button" value="视频" onclick="getMedia()"/> <video src="" id="video" width="500px" height="500px"></video> <canvas id="canvas" width="500px" height="500px"></canvas> <button onclick="takPhone()" id="but">拍照</button> <script> function getMedia() { var constrints={ video:{width:500,height:500}, audio:true }; //获取摄像头区域 var video=document.getElementById('video'); /* * 该方法返回Promise对象 * 这个Promise对象返回成功后会调函数带一个MediaStream对象作为其参数 * then()时Promise的方法 * then()方法是异步执行,当then()前的所有的方法执行完后再执行then()内部的程序 * 避免数据没有获取到 * */ var promise=navigator.mediaDevices.getUserMedia(constrints); promise.then(function(MediaStream){ video.srcObject=MediaStream; video.play(); }); } function takPhone() { var video=document.getElementById("video"); var canvas=document.getElementById("canvas"); var ctx=canvas.getContext('2d'); ctx.drawImage(video,0,0,500,500); } </script> </body> </html>
