(人脸识别)在视频中截取图片
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