rtsp视频流经过转码在canvas画布上进行播放,单击抓拍截取

这里遇到的问题是抓拍有时候可以抓拍到,有时候的图片显示未一片黑色
我用的方法是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'
                );
            });