从视频中获取图片用到canvas。 将video当作源截取一帧数据显示，实现拍照功能。
//html <video autoplay playsinline id="player"></video> <button id="snapshot">拍照</button> <canvas id="picture"></canvas> //js 'use strict' var videoplay = document.getElementById('player'); //获取button 和canvas var snapshot = document.getElementById('snapshot'); var picture = document.getElementById('picture'); //音视频数据 function gotMediaStream(stream) { videoplay.srcObject = stream;//将获取到的流赋给video标签 } function handleError(err) { console.log(err.name + " : " + err.message); } if (!navigator.mediaDevices || !navigator.mediaDevices.getUserMedia) { console.log("你的浏览器不支持getUserMedia") } else { var constraints = { video: true, audio: true } navigator.mediaDevices.getUserMedia(constraints) .then(gotMediaStream) .catch(handleError); } picture.width = 320 picture.heigth = 320 snapshot.onclick = function () { picture.getContext('2d').drawImage(videoplay, 0, 0, picture.heigth, picture.heigth);//将videoplay当作源使用drawImage截取一帧数据就实现拍照功能。 }