【JS 视频截屏】视频快照（js视频截帧）

做视频处理时，会有截屏的场景，也称视频快照。今天介绍一下多张快照和单点快照。

视频快照

• 支持单点快照，即视频播放到某个时间点，获取快照
• 多张快照，即从某个时间点开始，间隔一定时间，批量生成多张快照
• 可定制快照张数
• 可定制快照时间间隔
• 快照可下载

代码实现

1. canvas绘制截屏

// 截图
    function captureScreenshot() {
        const {width,height} = mediaInfo;
        const canvas = document.createElement('canvas');
        const ctx = canvas.getContext('2d')!;
        // 设置画布尺寸为视频原始分辨率
        canvas.width = width;
        canvas.height = height;

        // 绘制视频帧到画布
        ctx.drawImage(videoRef.current!, 0, 0, canvas.width, canvas.height);
        const url = canvas.toDataURL('image/png');
        return url;
    }

2. 多张快照

// batch 批量生成快照
const batchCreateShots = async(count:number) => {
        if (!file) {
            alert('请先选择文件');
        };
        setloading(true);
        setList([]);
        // 获取当前视频时间点
        const cur_time = videoRef.current!.currentTime;
        for (let i = 0; i < count i const video='videoRef.current;' ifvideo return const time='+(cur_time' i intervaltime.tofixed2 const currenttime='Math.min(time,mediaInfo.duration);' videoref.current.currenttime='currentTime;' await new> {
                // 监听视频帧绘制完成事件
                videoRef.current!.addEventListener('seeked', async()=>{
                    resolve(true);
                }, { once: true });
            });
            console.log('videoRef.current!.currentTime===', videoRef.current!.currentTime);
            const url = captureScreenshot();
            setList(pre=>[...pre,url]);
            await sleep(100);
        }
        setloading(false);
    }

3. 获取音视频的信息

/**
 * 获取音视频文件的元数据信息
 * @param file - 音视频文件对象
 * @returns 包含文件名、大小、时长、分辨率、类型等信息的Promise对象
 */
export async function getMediaInfo(file: File): Promise<{ name: string size: number duration: number width: number height: number type: string> {
  return new Promise((resolve, reject) => {
    const video = document.createElement('video');
    video.preload = 'metadata';
    video.src = URL.createObjectURL(file);

    video.onloadedmetadata = () => {
      resolve({
        name: file.name,
        size: file.size,
        type: file.type,
        duration: video.duration,
        width: video.videoWidth,
        height: video.videoHeight
      });
      URL.revokeObjectURL(video.src); // 释放内存
    };

    video.onerror = (error) => {
      URL.revokeObjectURL(video.src);
      reject(new Error('无法解析媒体文件'));
    };
  });
}

4. 设置多张快照时，注意监听视频的seeked事件，该事件是视频播放位置变化时的回调函数，可用于video.currentTime = xx时的，去调用快照方法。
5. 完整代码在next-demo: next-demo，感兴趣的朋友可以看看