从视频中获取图片用到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截取一帧数据就实现拍照功能。
}