这里遇到的问题是抓拍有时候可以抓拍到,有时候的图片显示未一片黑色
我用的方法是drawCanvas和html2canvas这两种方式,但是都不行
视频流的画面正常渲染,但是抓拍偶尔抓拍不到,所有方法都试了发现最后的问题是因为视频的帧率问题
帧率太小 如每秒只播放20帧,那么就会导致你截取的瞬间那一帧没有画面
所以使用了ffmpeg将帧率该为了60fps 这样功能成功实现了
const videoCanvas = this.$refs.videoCanvas;
const imageCanvas = document.createElement('canvas');
imageCanvas.width = videoCanvas.width;
imageCanvas.height = videoCanvas.height;
const ctx = imageCanvas.getContext('2d');
requestAnimationFrame(() => {
ctx.drawImage(
videoCanvas,
0,
0,
imageCanvas.width,
imageCanvas.height
);
imageCanvas.toBlob(
blob => {
if (blob) {
const url = URL.createObjectURL(blob);
this.downloadImage(url, 'screenshot.jpeg');
} else {
console.error('Blob creation failed');
}
},
'image/png'
);
});
