视频抽帧并保存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 = truevideo.autoplay = truevideo.src = URL.createObjectURL(file.file)await new Promise((resolve) => video.oncanplay = resolve)const canvas = document.createElement('canvas')canvas.width = video.videoWidthcanvas.height = video.videoHeightfunction _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 = timeawait new Promise((resolve) => {video.onseeked = resolve;});_drawImage();const blob = await getBlob();map.set(blob, {url: URL.createObjectURL(blob),})_clearCanvas();} else {// 产生多帧的blobfor (let i = 0; i < video.duration; i += time) {video.currentTime = iawait 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
}