视频抽帧并保存blob

视频抽帧

/**
 *  @description 获取文件中的每一帧
 *  @param { File } file
 *  @param { Number } time 每一帧的时间间隔(单位:秒)
 *  @param { Boolean } isUseInterval 是否使用间隔 为false只会获取这一帧
 *  @returns { Map }
 *  @example await captureFrame({ file, 20  }) ==> Map { blob => {url:blobUrl,time:20},blob => {url:blobUrl,time:40} }
 */
export async function captureFrame({ file, time = 0, isUseInterval = true }) {
    const map = new Map()
    try {
        if (!file) {
            throw new Error('file is required')
        }
        if (!file.file) {
            throw new Error('file.file is required')
        }
        if (!file.file.type.includes('video')) {
            throw new Error('file.file.type must be video')
        }

        const video = document.createElement('video')
        video.muted = true
        video.autoplay = true
        video.src = URL.createObjectURL(file.file)

        await new Promise((resolve) => video.oncanplay = resolve)

        const canvas = document.createElement('canvas')
        canvas.width = video.videoWidth
        canvas.height = video.videoHeight

        function _clearCanvas() {
            canvas.getContext('2d')?.clearRect(0, 0, canvas.width, canvas.height);
        }

        function _drawImage() {
            canvas.getContext('2d')?.drawImage(video, 0, 0, canvas.width, canvas.height)
        }

        function _destroyVideoAndCanvas() {
            video.remove()
            canvas.remove()
        }

        function getBlob() {
            return new Promise((resolve) => {
                canvas.toBlob((blob) => resolve(blob));
            })
        }

        if (!isUseInterval) {
            video.currentTime = time
            await new Promise((resolve) => {
                video.onseeked = resolve;
            });
            _drawImage();
            const blob = await getBlob();
            map.set(blob, {
                url: URL.createObjectURL(blob),
            })
            _clearCanvas();
        } else {
            // 产生多帧的blob
            for (let i = 0; i < video.duration; i += time) {
                video.currentTime = i
                await new Promise((resolve) => {
                    video.onseeked = resolve;
                });
                _drawImage();
                const blob = await getBlob();
                map.set(blob, {
                    url: URL.createObjectURL(blob),
                    time: i
                });
                _clearCanvas();
            }
        }
        _destroyVideoAndCanvas();
    } catch (error) {
        console.error('Error capturing frame:', error)
    }
    return map
}