（人脸识别）在视频中截取图片js+html

html代码：

//

//video录制视频

//

//绘制一张canvas画布

//video录制视频

<p>图片(将画布的视频帧同步生成图片)：</p>
<div id="imgbox"></div>

调通视频：

var video = document.querySelector(“video”);
//const streamVideo = document.querySelector(".stream");
//const playVideo = document.querySelector(".play");

navigator.mediaDevices.getUserMedia =
navigator.mediaDevices.getUserMedia || // use the proper vendor prefix
navigator.mediaDevices.webkitGetUserMedia ||
navigator.mediaDevices.mozGetUserMedia ||
navigator.mediaDevices.msGetUserMedia;

navigator.mediaDevices
.getUserMedia({ video: true, audio: false })
.then(function (mediaStream) {
mediaStream_ = mediaStream;
video.setAttribute(“playsinline”, true);
video.setAttribute(“webkit-playsinline”, true);
video.srcObject = mediaStream;
video.play();

});

var c=document.getElementById(“canvas”)

var delay = 1000 // 截取封面的延迟（有的视频开头可能有黑屏所以可以加一个延迟）
ctx=c.getContext(‘2d’);

// 监听可播放
video.addEventListener(‘canplay’, function() {
setTimeout(function(){
// alert(“写错了”);
// 相应视频的宽和高
var w = video.videoWidth
var h = video.videoHeight
var space = 5 // canvas的间距，可取去掉

// 绘制视频到canvas上
ctx.drawImage(video, space, space, w+space, h+space)

// 生成图片
let img = document.createElement(‘img’)
img.src = c.toDataURL(‘image/png’) // 这就是封面图片的地址
// img.src = ‘https://www.yushanshuju.com/ords/datatech/r/files/static/v70/IMAGES/IDV009_111.jpg’
img.width = w // 图片宽度，可按需调节，也可以不设置
img.height = h // 图片高度，可按需调节，也可以不设置
imgbox.appendChild(img) // 打印图片

}, delay)

//2S后截图
setTimeout(function(){

// 相应视频的宽和高
var w = video.videoWidth
var h = video.videoHeight
var space = 5 // canvas的间距，可取去掉

// 绘制视频到canvas上
ctx.drawImage(video, space, space, w+space, h+space)

// 生成图片
let img = document.createElement(‘img’)
img.src = c.toDataURL(‘image/png’) // 这就是封面图片的地址
// img.src = ‘https://www.yushanshuju.com/ords/datatech/r/files/static/v70/IMAGES/IDV009_111.jpg’
img.width = w // 图片宽度，可按需调节，也可以不设置
img.height = h // 图片高度，可按需调节，也可以不设置
imgbox.appendChild(img) // 打印图片
}, 2000)

//3S后截图

setTimeout(function(){
// alert(“写错了”);
// 相应视频的宽和高
var w = video.videoWidth
var h = video.videoHeight
var space = 5 // canvas的间距，可取去掉

// 绘制视频到canvas上
ctx.drawImage(video, space, space, w+space, h+space)

// 生成图片
let img = document.createElement(‘img’)
img.src = c.toDataURL(‘image/png’) // 这就是封面图片的地址
// img.src = ‘https://www.yushanshuju.com/ords/datatech/r/files/static/v70/IMAGES/IDV009_111.jpg’
img.width = w // 图片宽度，可按需调节，也可以不设置
img.height = h // 图片高度，可按需调节，也可以不设置
imgbox.appendChild(img) // 打印图片
}, 3000)

},false)

实现效果：

1s

g