@vvfx/sdk 0.2.7 → 0.2.9

package/dist/exporter/export-media.js

@@ -0,0 +1,878 @@
+/**
+ * @description 导出多媒体素材
+ * 如：导出 MP4 / AlphaMaskVideo / GIF / Images
+ */
+import JSZip from '@progress/jszip-esm';
+import { merge } from 'lodash-es';
+import { EventEmitter, Player, assertExist } from '../shared';
+import { asserts, logger } from '../utils';
+import { STATUS_MAP, MEDIA_TYPE, STAGE_MAP, EXPORT_NEED_TRANS_IMAGES_MAP, GIF_QUALITY_TO_FFMPEG_ARGS, APNG_QUALITY_TO_FFMPEG_ARGS, } from './const';
+import { WavAudio } from './wav-audio';
+import { getTwoDecimal, getAlphaMaskImage, canvasToArrayBuffer, sleepForOneFrame, padZero, drawToOutputCanvas, parseArgs, loadFFmpegHelper, loadWebpHelper, clearPlayerAssets, } from './utils';
+const loggerPrefix = ['@vvfx/sdk', 'exporter'];
+export class ExportMedia extends EventEmitter {
+    // 当前状态，存在 准备/可执行/销毁 三种状态
+    status = STATUS_MAP.READY;
+    // 当前阶段，存在 空闲/转帧图片/视频转码/音频处理 四种阶段
+    stage = STAGE_MAP.IDLE;
+    player;
+    #options;
+    #timeOuter;
+    #requestAnimationFrameId = 0;
+    #playerCanvas;
+    #ffmpegCore;
+    #img2WebPCore;
+    #mediaRecorder;
+    #recordedChunks = [];
+    #wavAudio;
+    #audioFileName;
+    #imageFileNames = [];
+    // 当前处理的任务索引
+    #currentTaskIndex = 0;
+    // 当前处理的任务
+    #currentTask;
+    // 已完成任务的进度集合
+    #completedTaskPercentArray = [];
+    // 当前任务的帧索引
+    #currentTaskFrameIndex = 0;
+    // 当前任务的总帧数
+    #currentTaskTotalFrames = 0;
+    // 所有任务的总帧数
+    #allTaskFrames = 0;
+    // 当前任务的转码帧索引
+    #currentTaskInTranscodingFrameIndex = 0;
+    #allSuccessTaskInfos = [];
+    // 所有成功任务的输出集合
+    #allSuccessTaskBuffers = [];
+    // 所有成功任务的额外输出集合
+    #allSuccessTaskExtraBuffers = null;
+    // 所有任务是否成功
+    #allTaskSuccess = true;
+    constructor(options) {
+        super();
+        this.#options = merge({ loggerInTranscoding: false, multiThreading: false }, options);
+        void this.onInit();
+    }
+    setMediaType(curMediaType) {
+        if (curMediaType !== this.#options.mediaType) {
+            this.#options.mediaType = curMediaType;
+            this.onReset();
+            this.clearAllListeners();
+            void this.onInit();
+        }
+    }
+    setOptions(options) {
+        const newOptions = merge({}, this.#options, options);
+        if (this.#options.mediaType !== newOptions.mediaType) {
+            this.setMediaType(newOptions.mediaType);
+        }
+        this.#options = newOptions;
+    }
+    get canceled() {
+        return this.status === STATUS_MAP.DISPOSE;
+    }
+    get config() {
+        const compositions = this.player?.getCompositions() ?? [];
+        const composition = compositions?.[0];
+        const name = composition?.name ?? new Date().getTime().toString();
+        const oldTotalTime = composition?.getDuration() ?? 0;
+        const startTime = composition?.startTime ?? 0;
+        const newTotalTime = this.#currentTask?.time;
+        const fps = this.#currentTask?.fps ?? 30;
+        const backgroundColor = this.#currentTask?.backgroundColor ?? '#000000';
+        const loop = this.#currentTask?.loop ?? true;
+        const audioEnable = this.#currentTask?.audioEnable ?? false;
+        return { name, startTime, oldTotalTime, newTotalTime, fps, backgroundColor, loop, audioEnable };
+    }
+    get mp4Config() {
+        return this.#currentTask?.mp4Config;
+    }
+    get gifConfig() {
+        return this.#currentTask?.gifConfig;
+    }
+    get apngConfig() {
+        return this.#currentTask?.apngConfig;
+    }
+    get progress() {
+        const CONVERT_IMAGE_PROPORTION = 0.4;
+        const TRANSCODING_PROPORTION = 0.6;
+        const totalFrames = this.#currentTaskTotalFrames || 1;
+        const allTaskFrames = this.#allTaskFrames || 1;
+        // 计算当前任务所占总任务的百分比
+        const percent = Math.min(totalFrames / allTaskFrames, 1);
+        // 计算当前任务获取序列帧进度，占2/5
+        const convertImageProgress = (Math.min(this.#currentTaskFrameIndex, totalFrames) / totalFrames) * CONVERT_IMAGE_PROPORTION;
+        // 计算当前任务转码进度，占3/5
+        const transcodingProgress = (Math.min(this.#currentTaskInTranscodingFrameIndex, totalFrames) / totalFrames) * TRANSCODING_PROPORTION;
+        const currentCompleted = Math.min(convertImageProgress + transcodingProgress, 1);
+        // 将当前任务的占比更新到数组中
+        this.#completedTaskPercentArray[this.#currentTaskIndex] = percent;
+        // 默认当前任务之前的任务已经完成，进行累加
+        const completedPercent = this.#completedTaskPercentArray.reduce((sum, p, idx) => (idx < this.#currentTaskIndex ? sum + (p || 0) : sum), 0);
+        const result = completedPercent + currentCompleted * percent;
+        return Math.min(getTwoDecimal(result), 1);
+    }
+    get transImageType() {
+        if (this.#options.mediaType === MEDIA_TYPE.MP4) {
+            return EXPORT_NEED_TRANS_IMAGES_MAP.JPEG;
+        }
+        if (this.#options.mediaType === MEDIA_TYPE.WebP) {
+            return EXPORT_NEED_TRANS_IMAGES_MAP.WEBP;
+        }
+        return EXPORT_NEED_TRANS_IMAGES_MAP.PNG;
+    }
+    async onInit() {
+        try {
+            logger('log', [...loggerPrefix, 'ready'], 'starting');
+            this.status = STATUS_MAP.READY;
+            await this.loadHelper(this.#options.mediaType);
+            this.status = STATUS_MAP.EXECUTABLE;
+            logger('log', [...loggerPrefix, 'ready'], 'success');
+            this.emit('ready', this.#options.mediaType);
+        }
+        catch (e) {
+            this.status = STATUS_MAP.DISPOSE;
+            this.onError(e);
+        }
+        finally {
+            return this.status;
+        }
+    }
+    onReset() {
+        this.stage = STAGE_MAP.IDLE;
+        clearTimeout(this.#timeOuter);
+        window.cancelAnimationFrame(this.#requestAnimationFrameId);
+        this.#requestAnimationFrameId = 0;
+        this.#timeOuter = undefined;
+        this.player?.pause();
+        this.clearTaskInfo();
+        this.setProgress();
+    }
+    onError(error) {
+        logger('log', [...loggerPrefix, 'error'], error);
+        this.onFinish(false, this.#allSuccessTaskInfos, this.#allSuccessTaskBuffers, this.#allSuccessTaskExtraBuffers);
+        this.emit('error', error);
+        this.dispose();
+    }
+    onFinish(success, taskInfos, buffers, extras) {
+        if (success) {
+            logger('log', [...loggerPrefix, 'finish'], 'success');
+        }
+        else {
+            logger('log', [...loggerPrefix, 'finish'], 'failed');
+        }
+        this.emit('progress', 1);
+        this.emit('finish', success, taskInfos, buffers, extras);
+    }
+    async loadHelper(mediaType) {
+        const isLoadWebP = mediaType === 'WebP' && !this.#img2WebPCore;
+        const isLoadFFMpeg = 
+        //@ts-expect-error pick some types
+        [MEDIA_TYPE.MP4, MEDIA_TYPE.APNG, MEDIA_TYPE.GIF, MEDIA_TYPE.AlphaMaskVideo].includes(mediaType) &&
+            !this.#ffmpegCore;
+        if (isLoadWebP) {
+            this.#img2WebPCore = await loadWebpHelper();
+        }
+        if (isLoadFFMpeg) {
+            this.#ffmpegCore = await loadFFmpegHelper({ multiThreading: this.#options.multiThreading });
+            assertExist(this.#ffmpegCore);
+            this.#ffmpegCore.on('log', ({ message }) => {
+                if (this.#options.loggerInTranscoding) {
+                    logger('log', [...loggerPrefix, 'transcoding log'], message);
+                }
+                // 取消或当前阶段不是转码阶段，则不处理
+                if (this.canceled || this.stage !== STAGE_MAP.TRANSCODING) {
+                    return;
+                }
+                const match = /frame=\s*(\d+)/.exec(message);
+                const target = match?.[1];
+                const frame = Number(target);
+                if (frame >= this.#currentTaskInTranscodingFrameIndex) {
+                    this.setProgress({
+                        currentTaskInTranscodingFrameIndex: frame,
+                    });
+                }
+            });
+        }
+    }
+    getAllTaskFrames(options) {
+        return options.reduce((sum, opt) => {
+            const { scene, fps } = opt;
+            const duration = scene.compositions?.[0]?.duration ?? 0;
+            return sum + Math.round(duration * (fps ?? 30));
+        }, 0);
+    }
+    setProgress(options) {
+        if (options?.completedTaskPercentArray !== undefined) {
+            this.#completedTaskPercentArray = options.completedTaskPercentArray;
+        }
+        if (options?.currentTaskFrameIndex !== undefined) {
+            this.#currentTaskFrameIndex = options.currentTaskFrameIndex;
+        }
+        if (options?.currentTaskTotalFrames !== undefined) {
+            this.#currentTaskTotalFrames = options.currentTaskTotalFrames;
+        }
+        if (options?.currentTaskInTranscodingFrameIndex !== undefined) {
+            this.#currentTaskInTranscodingFrameIndex = options.currentTaskInTranscodingFrameIndex;
+        }
+        if (options?.allTaskFrames !== undefined) {
+            this.#allTaskFrames = options.allTaskFrames;
+        }
+        this.emit('progress', this.progress);
+    }
+    forwardPlayerTime(seconds, playing = false) {
+        assertExist(this.player);
+        const { oldTotalTime, startTime } = this.config;
+        assertExist(oldTotalTime);
+        // 兼容player时间为最后时，会播放回第一帧的问题（详见https://baiyan.antfin.com/task/397835?bqlKey=c4583a1）
+        const maxTime = oldTotalTime * 1000 - ((oldTotalTime * 1000) % 15);
+        seconds = Math.min(seconds, maxTime / 1000);
+        if (playing) {
+            this.player.gotoAndPlay(seconds - startTime);
+        }
+        else {
+            this.player.gotoAndStop(seconds - startTime);
+        }
+        return seconds;
+    }
+    getWavAudio(name) {
+        this.#wavAudio = new WavAudio();
+        if (this.#ffmpegCore) {
+            void this.#ffmpegCore.writeFile(name, this.#wavAudio.getBuffer());
+        }
+        else {
+            logger('log', [...loggerPrefix, 'getWavAudio'], 'ffmpegCore is not ready');
+        }
+    }
+    async getImagesZip(folderName, imageBuffers) {
+        const zip = new JSZip();
+        const folder = zip.folder(folderName);
+        assertExist(folder);
+        this.#imageFileNames.forEach((imageName, index) => {
+            folder.file(imageName, imageBuffers[index]);
+        });
+        return zip.generateAsync({ type: 'arraybuffer' });
+    }
+    getWebP() {
+        assertExist(this.#img2WebPCore);
+        // 先固定 speed 为 1，后续有诉求再支持
+        const speed = 1;
+        const duration = Math.round(1000 / this.config.fps / speed);
+        const outputFileName = 'out.webp';
+        // @docs https://developers.google.com/speed/webp/docs/img2webp
+        const argsLine = `${this.#imageFileNames.join(` -d ${duration} `)} -d ${duration} -o ${outputFileName} -loop ${this.config.loop ? 0 : 1}`;
+        const args = argsLine.split(' ');
+        const main = this.#img2WebPCore.cwrap('main', 'string', ['number', 'number']);
+        const [argc, argv] = parseArgs(this.#img2WebPCore, args);
+        asserts(argc && argv, 'getWebP has error');
+        main(argc, argv);
+        const outBuffer = this.#img2WebPCore.FS.readFile(outputFileName);
+        this.#imageFileNames.forEach((fileName) => {
+            this.#img2WebPCore?.FS.unlink(fileName);
+        });
+        return outBuffer;
+    }
+    async getAPNG() {
+        // apng 需要透明度
+        assertExist(this.#ffmpegCore);
+        const startNumber = 1;
+        this.stage = STAGE_MAP.TRANSCODING;
+        const output = 'export.apng';
+        const { fps, scale = '-1:-1', quality = 'highest' } = this.apngConfig ?? {};
+        const vfArgs = [`scale=${scale}:force_original_aspect_ratio=decrease:flags=lanczos`];
+        if (fps) {
+            vfArgs.push(`fps=${fps}`);
+        }
+        const response = await this.#ffmpegCore.exec([
+            '-framerate',
+            `${this.config.fps}`,
+            '-start_number',
+            `${startNumber}`,
+            '-i',
+            `image-%4d.${this.transImageType}`,
+            '-vf',
+            vfArgs.join(','),
+            '-plays',
+            this.config.loop ? '0' : '1',
+            '-compression_level',
+            APNG_QUALITY_TO_FFMPEG_ARGS[quality],
+            '-y',
+            output,
+        ]);
+        if (response !== 0) {
+            throw new Error('the command executed by ffmpeg to generate a apng failed.');
+        }
+        return output;
+    }
+    async getGIF() {
+        // gif 需要透明度
+        assertExist(this.#ffmpegCore);
+        const startNumber = 1;
+        this.stage = STAGE_MAP.TRANSCODING;
+        const output = 'export.gif';
+        const { fps, scale = '-1:-1', quality = 'highest' } = this.gifConfig ?? {};
+        const vfArgs = [`scale=${scale}:${GIF_QUALITY_TO_FFMPEG_ARGS[quality]}`];
+        if (fps) {
+            vfArgs.unshift(`fps=${fps}`);
+        }
+        const response = await this.#ffmpegCore.exec([
+            '-framerate',
+            `${this.config.fps}`,
+            '-start_number',
+            `${startNumber}`,
+            '-i',
+            `image-%4d.${this.transImageType}`,
+            '-loop',
+            this.config.loop ? '0' : '-1',
+            '-vf',
+            vfArgs.join(','),
+            '-y',
+            output,
+        ]);
+        if (response !== 0) {
+            throw new Error('the command executed by ffmpeg to generate a gif failed.');
+        }
+        return output;
+    }
+    async getMP4(oldTotalTime, newTotalTime) {
+        assertExist(this.#ffmpegCore);
+        const startNumber = 1;
+        this.stage = STAGE_MAP.TRANSCODING;
+        const videoOutput = 'export.mp4';
+        let videoWithAudioOutput;
+        const setpts = newTotalTime ? `,setpts=PTS/${Math.round((oldTotalTime / newTotalTime) * 100) / 100}` : '';
+        const duration = newTotalTime ?? oldTotalTime;
+        const { isExportLastFrameJPEG } = this.mp4Config ?? {};
+        // 生成音频文件
+        if (this.config.audioEnable && !this.#wavAudio) {
+            this.#audioFileName = 'audio.wav';
+            this.getWavAudio(this.#audioFileName);
+        }
+        // NOTE: 这里分步执行，优化同一时间导出大文件的性能问题
+        const videoOfResponse = await this.#ffmpegCore.exec([
+            '-framerate',
+            String(this.config.fps),
+            '-start_number',
+            String(startNumber),
+            '-i',
+            `image-%4d.${this.transImageType}`,
+            '-c:v',
+            'libx264',
+            '-crf',
+            '23',
+            '-pix_fmt',
+            'yuv420p',
+            '-vf',
+            `pad=ceil(iw/2)*2:ceil(ih/2)*2${setpts}`,
+            '-y',
+            videoOutput,
+        ]);
+        if (videoOfResponse !== 0) {
+            throw new Error('the command executed by ffmpeg to generate a mp4 failed.');
+        }
+        if (this.#audioFileName && this.#wavAudio) {
+            this.stage = STAGE_MAP.AUDIO;
+            videoWithAudioOutput = 'export-with-audio.mp4';
+            const audioOfResponse = await this.#ffmpegCore.exec([
+                '-i',
+                videoOutput,
+                '-i',
+                this.#audioFileName,
+                '-c:v',
+                'copy',
+                '-c:a',
+                'aac',
+                '-t',
+                `${duration}`,
+                '-y',
+                videoWithAudioOutput,
+            ]);
+            if (audioOfResponse !== 0) {
+                throw new Error('the command executed by ffmpeg to generate a audio of video failed.');
+            }
+        }
+        const finalVideoFile = videoWithAudioOutput ?? videoOutput;
+        let lastFrameOutput = '';
+        if (isExportLastFrameJPEG) {
+            lastFrameOutput = `image-${padZero(this.#currentTaskTotalFrames, 4)}.${this.transImageType}`;
+        }
+        // 清理无用视频文件
+        if (videoWithAudioOutput) {
+            void this.#ffmpegCore.deleteFile(videoOutput).catch(() => {
+                logger('log', [...loggerPrefix, 'ffmpeg delete file error']);
+            });
+        }
+        return {
+            video: finalVideoFile,
+            lastFrame: lastFrameOutput
+        };
+    }
+    async getAlphaMaskVideo(oldTotalTime, newTotalTime) {
+        // 透明视频需要透明度
+        assertExist(this.#ffmpegCore);
+        const startNumber = 1;
+        this.stage = STAGE_MAP.TRANSCODING;
+        const output = 'export.mp4';
+        const setpts = newTotalTime ? `,setpts=PTS/${Math.round((oldTotalTime / newTotalTime) * 100) / 100}` : '';
+        await this.#ffmpegCore.exec([
+            '-framerate',
+            String(this.config.fps),
+            '-start_number',
+            String(startNumber),
+            '-i',
+            `image-%4d.${this.transImageType}`,
+            '-c:v',
+            'libx264',
+            '-crf',
+            '23',
+            '-pix_fmt',
+            'yuv420p',
+            '-vf',
+            `pad=ceil(iw/2)*2:ceil(ih/2)*2${setpts}`,
+            '-y',
+            output,
+        ]);
+        return output;
+    }
+    async getVideoByType(oldTotalTime, newTotalTime) {
+        assertExist(this.#ffmpegCore);
+        const isAPNG = this.#options.mediaType === MEDIA_TYPE.APNG;
+        const isGIF = this.#options.mediaType === MEDIA_TYPE.GIF;
+        const isAlphaMaskVideo = this.#options.mediaType === MEDIA_TYPE.AlphaMaskVideo;
+        const isMP4 = this.#options.mediaType === MEDIA_TYPE.MP4;
+        let outputStr = '';
+        let extraStr = '';
+        try {
+            if (isAPNG) {
+                outputStr = await this.getAPNG();
+            }
+            if (isGIF) {
+                outputStr = await this.getGIF();
+            }
+            if (isMP4) {
+                const { video, lastFrame } = await this.getMP4(oldTotalTime, newTotalTime);
+                outputStr = video;
+                extraStr = lastFrame;
+            }
+            if (isAlphaMaskVideo) {
+                outputStr = await this.getAlphaMaskVideo(oldTotalTime, newTotalTime);
+            }
+            this.stage = STAGE_MAP.IDLE;
+        }
+        catch (e) {
+            logger('log', [...loggerPrefix, 'getVideoByType', 'failed'], e);
+            throw e;
+        }
+        let data = null;
+        let extra = null;
+        try {
+            // 处理视频文件
+            assertExist(outputStr);
+            const fileData = await this.#ffmpegCore.readFile(outputStr);
+            data = typeof fileData === 'string' ? new TextEncoder().encode(fileData) : new Uint8Array(fileData);
+            // 处理额外文件
+            if (extraStr) {
+                const fileData = await this.#ffmpegCore.readFile(extraStr).catch(() => {
+                    logger('log', [...loggerPrefix, 'ffmpeg read extra file error']);
+                });
+                extra = typeof fileData === 'string' ? new TextEncoder().encode(fileData) : new Uint8Array(fileData);
+            }
+        }
+        finally {
+            void this.#ffmpegCore.deleteFile(outputStr).catch(() => {
+                logger('log', [...loggerPrefix, 'ffmpeg delete file error']);
+            });
+            for (const fileName of this.#imageFileNames) {
+                if (fileName) {
+                    void this.#ffmpegCore.deleteFile(fileName);
+                }
+            }
+        }
+        return { data, extra };
+    }
+    onRecordWebM(canvas) {
+        const mediaRecorder = new MediaRecorder(canvas.captureStream(this.config.fps), {
+            mimeType: 'video/webm;codecs=vp9',
+        });
+        this.#mediaRecorder = mediaRecorder;
+        this.#mediaRecorder.start(0);
+        const recordedChunks = [];
+        this.#mediaRecorder.ondataavailable = (event) => {
+            if (event.data.size > 0) {
+                recordedChunks.push(event.data);
+            }
+        };
+        this.#recordedChunks = recordedChunks;
+    }
+    async onExportImageFrame(options) {
+        try {
+            if (this.canceled) {
+                return;
+            }
+            const { canvas, imageBuffers, startTime, oldTotalTime, newTotalTime } = options;
+            assertExist(this.player);
+            assertExist(this.#playerCanvas);
+            const index = this.#currentTaskFrameIndex + 1;
+            this.stage = STAGE_MAP.CONVERT_IMAGE;
+            this.setProgress({
+                currentTaskInTranscodingFrameIndex: 0,
+                currentTaskFrameIndex: index,
+            });
+            if (this.#options.loggerInTranscoding) {
+                logger('log', [...loggerPrefix, 'converting log'], `converting ${index} frame image`);
+            }
+            if (index >= 1) {
+                this.forwardPlayerTime(index / this.config.fps + startTime);
+            }
+            drawToOutputCanvas(this.#playerCanvas, canvas, this.config.backgroundColor);
+            let bufferCanvas = canvas;
+            if (this.#options.mediaType === MEDIA_TYPE.AlphaMaskVideo) {
+                assertExist(this.#options.extraCanvas);
+                /**
+                 * AlphaMaskVideo 按以下文档格式要求重新生成帧图
+                 * @docs https://yuque.antfin.com/alipay-fe-bj/ymopt8/kry3oht7ztyue1pg#plsCq
+                 */
+                getAlphaMaskImage(canvas, this.#options.extraCanvas);
+                bufferCanvas = this.#options.extraCanvas;
+            }
+            const buffer = await canvasToArrayBuffer(bufferCanvas, `image/${this.transImageType}`, 1);
+            const fileName = `image-${padZero(index, 4)}.${this.transImageType}`;
+            if (this.#options.mediaType === MEDIA_TYPE.Images) {
+                imageBuffers.push(buffer);
+            }
+            else if (this.#options.mediaType === MEDIA_TYPE.WebP) {
+                assertExist(this.#img2WebPCore);
+                this.#img2WebPCore.FS.writeFile(fileName, new Uint8Array(buffer));
+            }
+            else {
+                assertExist(this.#ffmpegCore);
+                await this.#ffmpegCore.writeFile(fileName, new Uint8Array(buffer));
+            }
+            this.#imageFileNames.push(fileName);
+            const ended = index === this.#currentTaskTotalFrames;
+            if (ended) {
+                // 帧绘制结束，则暂停播放器，节约性能开销
+                this.player?.pause();
+                await sleepForOneFrame();
+                let outputFile = null;
+                let extraFile = null;
+                // 导出序列帧
+                if (this.#options.mediaType === 'Images') {
+                    outputFile = await this.getImagesZip(this.config.name, imageBuffers);
+                }
+                else if (this.#options.mediaType === 'WebP') {
+                    outputFile = this.getWebP();
+                }
+                else if (
+                // @ts-expect-error pick some types
+                [MEDIA_TYPE.MP4, MEDIA_TYPE.APNG, MEDIA_TYPE.GIF, MEDIA_TYPE.AlphaMaskVideo].includes(this.#options.mediaType)) {
+                    const { data, extra } = (await this.getVideoByType(oldTotalTime, newTotalTime)) ?? null;
+                    outputFile = data;
+                    extraFile = extra;
+                }
+                if (outputFile) {
+                    logger('log', [...loggerPrefix, 'done'], 'success');
+                    this.emit('done', this.#currentTask, true, outputFile, extraFile);
+                }
+            }
+            else {
+                this.#requestAnimationFrameId = window.requestAnimationFrame(() => {
+                    if (this.canceled) {
+                        return;
+                    }
+                    void this.onExportImageFrame({
+                        canvas,
+                        imageBuffers,
+                        startTime,
+                        oldTotalTime,
+                        newTotalTime,
+                    });
+                });
+            }
+        }
+        catch (e) {
+            logger('log', [...loggerPrefix, 'onExportImageFrame', 'failed'], e);
+            this.emit('done', this.#currentTask, false, undefined, undefined);
+        }
+    }
+    async onExportWebMFrame(canvas) {
+        try {
+            if (this.canceled) {
+                return;
+            }
+            assertExist(this.player);
+            assertExist(this.#playerCanvas);
+            const index = this.#currentTaskFrameIndex + 1;
+            this.stage = STAGE_MAP.CONVERT_IMAGE;
+            this.setProgress({
+                currentTaskInTranscodingFrameIndex: 0,
+                currentTaskFrameIndex: index,
+            });
+            if (this.#options.loggerInTranscoding) {
+                logger('log', [...loggerPrefix, 'converting log'], `converting ${index} frame image`);
+            }
+            drawToOutputCanvas(this.#playerCanvas, canvas, this.config.backgroundColor);
+            if (index === 1) {
+                this.player.play();
+                this.onRecordWebM(canvas);
+            }
+            if (index < this.#currentTaskTotalFrames) {
+                this.#requestAnimationFrameId = window.requestAnimationFrame(() => {
+                    if (this.canceled) {
+                        return;
+                    }
+                    void this.onExportWebMFrame(canvas);
+                });
+            }
+            else {
+                this.player?.pause();
+                this.#mediaRecorder?.stop();
+                const blob = new Blob(this.#recordedChunks, { type: 'video/webm' });
+                const buffer = await blob.arrayBuffer();
+                logger('log', [...loggerPrefix, 'done'], 'success');
+                this.emit('done', this.#currentTask, true, buffer, undefined);
+            }
+        }
+        catch (e) {
+            logger('log', [...loggerPrefix, 'done'], 'failed', e);
+            this.emit('done', this.#currentTask, false, undefined, undefined);
+        }
+    }
+    async runTask(options) {
+        try {
+            if (this.canceled) {
+                return;
+            }
+            assertExist(this.player);
+            assertExist(this.#playerCanvas);
+            const { size, startTime, containerCanvas } = options;
+            const { oldTotalTime, newTotalTime } = this.config;
+            const [width, height] = size;
+            this.#playerCanvas.width = width;
+            this.#playerCanvas.height = height;
+            containerCanvas.width = width;
+            containerCanvas.height = height;
+            this.player.resize();
+            this.#imageFileNames = [];
+            if ([
+                MEDIA_TYPE.MP4,
+                MEDIA_TYPE.APNG,
+                MEDIA_TYPE.Images,
+                MEDIA_TYPE.WebP,
+                MEDIA_TYPE.GIF,
+                MEDIA_TYPE.AlphaMaskVideo,
+                // @ts-expect-error pick some types
+            ].includes(this.#options.mediaType)) {
+                const exportImageFrameOptions = {
+                    canvas: containerCanvas,
+                    imageBuffers: [],
+                    startTime,
+                    oldTotalTime,
+                    newTotalTime,
+                };
+                await this.onExportImageFrame(exportImageFrameOptions);
+            }
+            else if (this.#options.mediaType === 'WebM') {
+                await this.onExportWebMFrame(containerCanvas);
+            }
+        }
+        catch (e) {
+            logger('log', [...loggerPrefix, 'run task error'], e);
+            this.emit('done', this.#currentTask, false, undefined, undefined);
+        }
+    }
+    clearTaskInfo() {
+        this.#currentTaskIndex = 0;
+        this.#currentTask = undefined;
+        this.#completedTaskPercentArray = [];
+        this.#currentTaskFrameIndex = 0;
+        this.#currentTaskTotalFrames = 0;
+        this.#allTaskFrames = 0;
+        this.#currentTaskInTranscodingFrameIndex = 0;
+        this.#allSuccessTaskInfos = [];
+        this.#allSuccessTaskBuffers = [];
+        this.#allSuccessTaskExtraBuffers = [];
+        this.#allTaskSuccess = true;
+    }
+    clearFFMpegCore() {
+        if (this.#ffmpegCore) {
+            for (const fileName of this.#imageFileNames) {
+                if (fileName) {
+                    void this.#ffmpegCore.deleteFile(fileName);
+                }
+            }
+            this.#imageFileNames = [];
+            this.#ffmpegCore.terminate();
+            this.#ffmpegCore = undefined;
+        }
+    }
+    clearImage2WebPCore() {
+        if (this.#img2WebPCore) {
+            this.#img2WebPCore.FS.quit();
+            this.#img2WebPCore = undefined;
+        }
+    }
+    clearMediaRecorder() {
+        if (this.#mediaRecorder) {
+            this.#mediaRecorder.stop();
+            this.#mediaRecorder = undefined;
+        }
+        this.#recordedChunks = [];
+    }
+    clearAllListeners() {
+        for (const listener of this.getListeners('ready')) {
+            this.off('ready', listener);
+        }
+        for (const listener of this.getListeners('progress')) {
+            this.off('progress', listener);
+        }
+        for (const listener of this.getListeners('done')) {
+            this.off('done', listener);
+        }
+        for (const listener of this.getListeners('finish')) {
+            this.off('finish', listener);
+        }
+        for (const listener of this.getListeners('error')) {
+            this.off('error', listener);
+        }
+    }
+    onCancel() {
+        if (this.canceled) {
+            return;
+        }
+        this.onFinish(false, this.#allSuccessTaskInfos, this.#allSuccessTaskBuffers, this.#allSuccessTaskExtraBuffers);
+        this.status = STATUS_MAP.DISPOSE;
+        this.onReset();
+        this.clearMediaRecorder();
+        this.clearFFMpegCore();
+        this.clearImage2WebPCore();
+        this.clearAllListeners();
+        logger('log', loggerPrefix, 'canceled');
+    }
+    async onExport(options) {
+        const totalTasks = options.length;
+        try {
+            if (this.status === STATUS_MAP.READY) {
+                logger('log', [...loggerPrefix], 'readying');
+                this.on('ready', () => {
+                    void this.onExport(options);
+                });
+                return;
+            }
+            if (this.status === STATUS_MAP.DISPOSE) {
+                const status = await this.onInit();
+                if (status === STATUS_MAP.DISPOSE) {
+                    throw new Error('init environment failed');
+                }
+            }
+            this.clearTaskInfo();
+            if (!this.#playerCanvas) {
+                const playerCanvas = document.createElement('canvas');
+                playerCanvas.dataset.key = 'player-canvas';
+                this.#playerCanvas = playerCanvas;
+            }
+            if (!this.player) {
+                this.player = new Player({
+                    canvas: this.#playerCanvas,
+                    pixelRatio: 2,
+                    transparentBackground: true,
+                    env: 'editor',
+                    renderOptions: {
+                        willCaptureImage: true,
+                    },
+                });
+                this.player.on('rendererror', (err) => {
+                    this.onError(err);
+                });
+                this.player.on('webglcontextlost', (err) => {
+                    this.onError(err);
+                });
+            }
+            let containerCanvas = null;
+            containerCanvas ??= document.querySelector('canvas[data-key="container-canvas"]');
+            containerCanvas ??= document.createElement('canvas');
+            containerCanvas.dataset.key = 'container-canvas';
+            containerCanvas.style.display = 'none';
+            this.setProgress({ allTaskFrames: this.getAllTaskFrames(options) });
+            const taskInfos = [];
+            const buffers = [];
+            const extraBuffers = [];
+            let allSuccess = true;
+            for (const [i, option] of options.entries()) {
+                if (this.canceled) {
+                    allSuccess = false;
+                    break;
+                }
+                this.#currentTaskIndex = i;
+                this.#currentTask = option;
+                const { size, scene } = option;
+                await new Promise(async (resolve) => {
+                    try {
+                        if (!this.player) {
+                            throw new Error('player not found');
+                        }
+                        logger('log', [...loggerPrefix, 'export'], 'start', option);
+                        clearPlayerAssets(this.player);
+                        const playScene = JSON.parse(JSON.stringify(scene));
+                        await this.player.loadScene(playScene, { env: 'editor', autoplay: false });
+                        const duration = this.config.oldTotalTime;
+                        const startTime = 0;
+                        this.player.pause();
+                        this.setProgress({
+                            currentTaskFrameIndex: 0,
+                            currentTaskTotalFrames: Math.round(duration * this.config.fps),
+                        });
+                        const onDone = (_, success, buffer, extraBuffer) => {
+                            this.off('done', onDone);
+                            taskInfos[i] = option;
+                            if (success && buffer) {
+                                buffers[i] = buffer;
+                                extraBuffers[i] = extraBuffer ?? null;
+                            }
+                            else {
+                                allSuccess = false;
+                            }
+                            resolve();
+                        };
+                        this.on('done', onDone);
+                        const taskOptions = { size, startTime, containerCanvas };
+                        await this.runTask(taskOptions);
+                    }
+                    catch (e) {
+                        logger('log', [...loggerPrefix, 'export error'], e);
+                        allSuccess = false;
+                        resolve();
+                    }
+                });
+            }
+            this.#allSuccessTaskInfos = taskInfos;
+            this.#allSuccessTaskBuffers = buffers;
+            this.#allSuccessTaskExtraBuffers = extraBuffers;
+            this.#allTaskSuccess = allSuccess;
+        }
+        catch (e) {
+            this.onError(e);
+            this.#allTaskSuccess = false;
+        }
+        if (totalTasks >= 1 && this.#allTaskSuccess) {
+            this.onFinish(true, this.#allSuccessTaskInfos, this.#allSuccessTaskBuffers, this.#allSuccessTaskExtraBuffers);
+        }
+        else {
+            this.onFinish(false, this.#allSuccessTaskInfos, this.#allSuccessTaskBuffers, this.#allSuccessTaskExtraBuffers);
+        }
+    }
+    dispose() {
+        this.status = STATUS_MAP.DISPOSE;
+        this.onReset();
+        this.clearMediaRecorder();
+        this.clearFFMpegCore();
+        this.clearImage2WebPCore();
+        this.clearAllListeners();
+        this.player?.dispose();
+        this.player = undefined;
+        this.#playerCanvas?.remove();
+        this.#playerCanvas = undefined;
+        this.#audioFileName = undefined;
+        this.#wavAudio = undefined;
+    }
+}