@midscene/visualizer 1.5.2 → 1.5.3-beta-20260305031416.0

package/dist/es/component/player/remotion/StepScene.mjs

@@ -0,0 +1,190 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useMemo } from "react";
+import { mouseLoading } from "../../../utils/index.mjs";
+import { deriveFrameState } from "./derive-frame-state.mjs";
+const POINTER_PHASE = 0.375;
+const CROSSFADE_FRAMES = 10;
+const StepsTimeline = ({ frameMap, autoZoom, frame, width: compWidth, height: compHeight, fps })=>{
+    const { scriptFrames, imageWidth: baseImgW, imageHeight: baseImgH } = frameMap;
+    const state = useMemo(()=>deriveFrameState(scriptFrames, frame, baseImgW, baseImgH, fps), [
+        scriptFrames,
+        frame,
+        baseImgW,
+        baseImgH,
+        fps
+    ]);
+    if (!state.img) return null;
+    const { img, imageWidth: imgW, imageHeight: imgH, prevImg, camera, prevCamera, insights, spinning: spinningPointer, spinningElapsedMs, currentPointerImg, title, subTitle, frameInScript, imageChanged, pointerMoved, rawProgress } = state;
+    const pT = pointerMoved ? Math.min(rawProgress / POINTER_PHASE, 1) : rawProgress;
+    const cT = pointerMoved ? rawProgress <= POINTER_PHASE ? 0 : Math.min((rawProgress - POINTER_PHASE) / (1 - POINTER_PHASE), 1) : rawProgress;
+    const pointerLeft = prevCamera.pointerLeft + (camera.pointerLeft - prevCamera.pointerLeft) * pT;
+    const pointerTop = prevCamera.pointerTop + (camera.pointerTop - prevCamera.pointerTop) * pT;
+    const cameraLeft = autoZoom ? prevCamera.left + (camera.left - prevCamera.left) * cT : 0;
+    const cameraTop = autoZoom ? prevCamera.top + (camera.top - prevCamera.top) * cT : 0;
+    const cameraWidth = autoZoom ? prevCamera.width + (camera.width - prevCamera.width) * cT : imgW;
+    const isPortraitImage = imgH > imgW;
+    const browserW = isPortraitImage ? Math.round(imgW / imgH * compHeight) : compWidth;
+    const portraitLeft = Math.round((compWidth - browserW) / 2);
+    const zoom = imgW / cameraWidth;
+    const tx = browserW / imgW * -cameraLeft;
+    const ty = compHeight / imgH * -cameraTop;
+    const transformStyle = `scale(${zoom}) translate(${tx}px, ${ty}px)`;
+    const camH = imgH / imgW * cameraWidth;
+    const ptrX = (pointerLeft - cameraLeft) / cameraWidth * browserW;
+    const ptrY = (pointerTop - cameraTop) / camH * compHeight;
+    const showCursor = camera.pointerLeft !== Math.round(imgW / 2) || camera.pointerTop !== Math.round(imgH / 2) || prevCamera.pointerLeft !== Math.round(imgW / 2) || prevCamera.pointerTop !== Math.round(imgH / 2);
+    const crossfadeAlpha = imageChanged ? Math.min(frameInScript / CROSSFADE_FRAMES, 1) : 1;
+    const spinRotation = spinningPointer ? (Math.sin(spinningElapsedMs / 500 - Math.PI / 2) + 1) / 2 * Math.PI * 2 : 0;
+    const renderInsightOverlays = ()=>{
+        if (0 === insights.length) return null;
+        return insights.map((insight, idx)=>{
+            const overlays = [];
+            if (insight.highlightElement) {
+                const rect = insight.highlightElement.rect;
+                overlays.push(/*#__PURE__*/ jsx("div", {
+                    style: {
+                        position: 'absolute',
+                        left: rect.left,
+                        top: rect.top,
+                        width: rect.width,
+                        height: rect.height,
+                        background: 'rgba(253, 89, 7, 0.4)',
+                        border: '1px solid #fd5907',
+                        boxShadow: '4px 4px 2px rgba(51, 51, 51, 0.4)',
+                        opacity: insight.alpha,
+                        pointerEvents: 'none'
+                    }
+                }, `highlight-${idx}`));
+            }
+            if (insight.searchArea) {
+                const rect = insight.searchArea;
+                overlays.push(/*#__PURE__*/ jsx("div", {
+                    style: {
+                        position: 'absolute',
+                        left: rect.left,
+                        top: rect.top,
+                        width: rect.width,
+                        height: rect.height,
+                        background: 'rgba(2, 131, 145, 0.4)',
+                        border: '1px solid #028391',
+                        boxShadow: '4px 4px 2px rgba(51, 51, 51, 0.4)',
+                        opacity: insight.alpha,
+                        pointerEvents: 'none'
+                    }
+                }, `search-${idx}`));
+            }
+            return overlays;
+        });
+    };
+    const renderContentArea = (w, h)=>/*#__PURE__*/ jsxs("div", {
+            style: {
+                width: w,
+                height: h,
+                position: 'relative',
+                overflow: 'hidden'
+            },
+            children: [
+                imageChanged && prevImg && crossfadeAlpha < 1 && /*#__PURE__*/ jsx("div", {
+                    style: {
+                        position: 'absolute',
+                        width: w,
+                        height: h,
+                        overflow: 'hidden',
+                        opacity: 1 - crossfadeAlpha
+                    },
+                    children: /*#__PURE__*/ jsx("img", {
+                        alt: "",
+                        src: prevImg,
+                        style: {
+                            width: w,
+                            height: h,
+                            transformOrigin: '0 0',
+                            transform: transformStyle
+                        }
+                    })
+                }),
+                /*#__PURE__*/ jsxs("div", {
+                    style: {
+                        position: 'absolute',
+                        width: w,
+                        height: h,
+                        overflow: 'hidden',
+                        opacity: imageChanged ? crossfadeAlpha : 1
+                    },
+                    children: [
+                        /*#__PURE__*/ jsx("img", {
+                            alt: "",
+                            src: img,
+                            style: {
+                                width: w,
+                                height: h,
+                                transformOrigin: '0 0',
+                                transform: transformStyle
+                            }
+                        }),
+                        /*#__PURE__*/ jsx("div", {
+                            style: {
+                                position: 'absolute',
+                                top: 0,
+                                left: 0,
+                                width: w,
+                                height: h,
+                                transformOrigin: '0 0',
+                                transform: transformStyle,
+                                pointerEvents: 'none'
+                            },
+                            children: renderInsightOverlays()
+                        })
+                    ]
+                }),
+                spinningPointer && /*#__PURE__*/ jsx("img", {
+                    alt: "",
+                    src: mouseLoading,
+                    style: {
+                        position: 'absolute',
+                        left: ptrX - 11,
+                        top: ptrY - 14,
+                        width: 22,
+                        height: 28,
+                        transform: `rotate(${spinRotation}rad)`,
+                        transformOrigin: 'center center',
+                        filter: 'drop-shadow(0 1px 2px rgba(0,0,0,0.3))'
+                    }
+                }),
+                showCursor && !spinningPointer && /*#__PURE__*/ jsx("img", {
+                    alt: "",
+                    src: currentPointerImg,
+                    style: {
+                        position: 'absolute',
+                        left: ptrX - 3,
+                        top: ptrY - 2,
+                        width: 22,
+                        height: 28,
+                        filter: 'drop-shadow(0 1px 2px rgba(0,0,0,0.3))'
+                    }
+                })
+            ]
+        });
+    return /*#__PURE__*/ jsx("div", {
+        style: {
+            position: 'absolute',
+            top: 0,
+            left: 0,
+            right: 0,
+            bottom: 0,
+            backgroundColor: '#000'
+        },
+        children: isPortraitImage ? /*#__PURE__*/ jsx("div", {
+            style: {
+                position: 'absolute',
+                left: portraitLeft,
+                top: 0,
+                width: browserW,
+                height: compHeight,
+                overflow: 'hidden'
+            },
+            children: renderContentArea(browserW, compHeight)
+        }) : renderContentArea(compWidth, compHeight)
+    });
+};
+export { StepsTimeline };

package/dist/es/component/player/remotion/derive-frame-state.mjs

@@ -0,0 +1,207 @@
+import { mousePointer } from "../../../utils/index.mjs";
+function _define_property(obj, key, value) {
+    if (key in obj) Object.defineProperty(obj, key, {
+        value: value,
+        enumerable: true,
+        configurable: true,
+        writable: true
+    });
+    else obj[key] = value;
+    return obj;
+}
+function _object_spread(target) {
+    for(var i = 1; i < arguments.length; i++){
+        var source = null != arguments[i] ? arguments[i] : {};
+        var ownKeys = Object.keys(source);
+        if ("function" == typeof Object.getOwnPropertySymbols) ownKeys = ownKeys.concat(Object.getOwnPropertySymbols(source).filter(function(sym) {
+            return Object.getOwnPropertyDescriptor(source, sym).enumerable;
+        }));
+        ownKeys.forEach(function(key) {
+            _define_property(target, key, source[key]);
+        });
+    }
+    return target;
+}
+function derive_frame_state_ownKeys(object, enumerableOnly) {
+    var keys = Object.keys(object);
+    if (Object.getOwnPropertySymbols) {
+        var symbols = Object.getOwnPropertySymbols(object);
+        if (enumerableOnly) symbols = symbols.filter(function(sym) {
+            return Object.getOwnPropertyDescriptor(object, sym).enumerable;
+        });
+        keys.push.apply(keys, symbols);
+    }
+    return keys;
+}
+function _object_spread_props(target, source) {
+    source = null != source ? source : {};
+    if (Object.getOwnPropertyDescriptors) Object.defineProperties(target, Object.getOwnPropertyDescriptors(source));
+    else derive_frame_state_ownKeys(Object(source)).forEach(function(key) {
+        Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key));
+    });
+    return target;
+}
+function updateImage(acc, sf, baseW, baseH) {
+    if (!sf.img) return;
+    if (acc.img && sf.img !== acc.img) {
+        acc.prevImg = acc.img;
+        acc.imageChanged = true;
+    }
+    acc.img = sf.img;
+    acc.imgW = sf.imageWidth || baseW;
+    acc.imgH = sf.imageHeight || baseH;
+}
+function checkPointerMoved(prev, cur) {
+    return Math.abs(prev.pointerLeft - cur.pointerLeft) > 1 || Math.abs(prev.pointerTop - cur.pointerTop) > 1;
+}
+function handleImg(acc, sf, frame, baseW, baseH) {
+    updateImage(acc, sf, baseW, baseH);
+    const sfEnd = sf.startFrame + sf.durationInFrames;
+    if (sf.cameraTarget) {
+        acc.prevCamera = _object_spread({}, acc.camera);
+        acc.camera = _object_spread({}, sf.cameraTarget);
+        acc.pointerMoved = checkPointerMoved(acc.prevCamera, acc.camera);
+    } else if (frame >= sfEnd) {
+        acc.pointerMoved = false;
+        acc.imageChanged = false;
+    }
+    acc.spinning = false;
+}
+function handleInsight(acc, sf, frame, baseW, baseH) {
+    updateImage(acc, sf, baseW, baseH);
+    const alreadyAdded = acc.insights.some((ai)=>ai.highlightElement === sf.highlightElement && ai.searchArea === sf.searchArea);
+    if (!alreadyAdded) acc.insights.push({
+        highlightElement: sf.highlightElement,
+        searchArea: sf.searchArea,
+        alpha: 1
+    });
+    if (sf.cameraTarget && void 0 !== sf.insightPhaseFrames) {
+        const cameraStartFrame = sf.startFrame + sf.insightPhaseFrames;
+        if (frame >= cameraStartFrame) {
+            acc.prevCamera = _object_spread({}, acc.camera);
+            acc.camera = _object_spread({}, sf.cameraTarget);
+            const cameraFrameIn = frame - cameraStartFrame;
+            const cameraDur = sf.cameraPhaseFrames || 1;
+            acc.rawProgress = Math.min(cameraFrameIn / cameraDur, 1);
+            acc.pointerMoved = checkPointerMoved(acc.prevCamera, acc.camera);
+        }
+    }
+    acc.spinning = false;
+}
+function handleClearInsight(acc, sf, frame) {
+    const sfEnd = sf.startFrame + sf.durationInFrames;
+    const alpha = 1 - acc.rawProgress;
+    acc.insights = acc.insights.map((ai)=>_object_spread_props(_object_spread({}, ai), {
+            alpha
+        }));
+    if (frame >= sfEnd) acc.insights = [];
+    acc.spinning = false;
+}
+function handleSpinningPointer(acc, fps) {
+    acc.spinning = true;
+    acc.spinningElapsedMs = acc.frameInScript / fps * 1000;
+}
+function deriveFrameState(scriptFrames, frame, baseW, baseH, fps) {
+    const defaultCamera = {
+        left: 0,
+        top: 0,
+        width: baseW,
+        pointerLeft: Math.round(baseW / 2),
+        pointerTop: Math.round(baseH / 2)
+    };
+    const acc = {
+        img: '',
+        imgW: baseW,
+        imgH: baseH,
+        camera: _object_spread({}, defaultCamera),
+        prevCamera: _object_spread({}, defaultCamera),
+        prevImg: null,
+        insights: [],
+        spinning: false,
+        spinningElapsedMs: 0,
+        pointerImg: mousePointer,
+        title: '',
+        subTitle: '',
+        taskId: void 0,
+        frameInScript: 0,
+        scriptIndex: 0,
+        imageChanged: false,
+        pointerMoved: false,
+        rawProgress: 0
+    };
+    for(let i = 0; i < scriptFrames.length; i++){
+        const sf = scriptFrames[i];
+        const sfEnd = sf.startFrame + sf.durationInFrames;
+        if (0 === sf.durationInFrames) {
+            if (sf.startFrame <= frame) {
+                if ('pointer' === sf.type && sf.pointerImg) acc.pointerImg = sf.pointerImg;
+                acc.title = sf.title || acc.title;
+                acc.subTitle = sf.subTitle || acc.subTitle;
+                var _sf_taskId;
+                acc.taskId = null != (_sf_taskId = sf.taskId) ? _sf_taskId : acc.taskId;
+                acc.scriptIndex = i;
+            }
+            continue;
+        }
+        if (frame < sf.startFrame) break;
+        acc.title = sf.title || acc.title;
+        acc.subTitle = sf.subTitle || acc.subTitle;
+        var _sf_taskId1;
+        acc.taskId = null != (_sf_taskId1 = sf.taskId) ? _sf_taskId1 : acc.taskId;
+        acc.scriptIndex = i;
+        acc.frameInScript = frame - sf.startFrame;
+        acc.rawProgress = Math.min(acc.frameInScript / sf.durationInFrames, 1);
+        switch(sf.type){
+            case 'img':
+                handleImg(acc, sf, frame, baseW, baseH);
+                break;
+            case 'insight':
+                handleInsight(acc, sf, frame, baseW, baseH);
+                break;
+            case 'clear-insight':
+                handleClearInsight(acc, sf, frame);
+                break;
+            case 'spinning-pointer':
+                handleSpinningPointer(acc, fps);
+                break;
+            case 'sleep':
+                acc.spinning = false;
+                break;
+        }
+        if (frame >= sfEnd) {
+            if ('clear-insight' !== sf.type) acc.imageChanged = false;
+            acc.pointerMoved = false;
+            acc.rawProgress = 1;
+            if (sf.cameraTarget) acc.prevCamera = _object_spread({}, acc.camera);
+        }
+    }
+    if (!acc.img) {
+        const firstImgScript = scriptFrames.find((sf)=>'img' === sf.type && sf.img);
+        if (firstImgScript) {
+            acc.img = firstImgScript.img;
+            acc.imgW = firstImgScript.imageWidth || baseW;
+            acc.imgH = firstImgScript.imageHeight || baseH;
+        }
+    }
+    return {
+        img: acc.img,
+        imageWidth: acc.imgW,
+        imageHeight: acc.imgH,
+        prevImg: acc.imageChanged ? acc.prevImg : null,
+        camera: acc.camera,
+        prevCamera: acc.prevCamera,
+        insights: acc.insights,
+        spinning: acc.spinning,
+        spinningElapsedMs: acc.spinningElapsedMs,
+        currentPointerImg: acc.pointerImg,
+        title: acc.title,
+        subTitle: acc.subTitle,
+        taskId: acc.taskId,
+        frameInScript: acc.frameInScript,
+        scriptIndex: acc.scriptIndex,
+        imageChanged: acc.imageChanged,
+        pointerMoved: acc.pointerMoved,
+        rawProgress: acc.rawProgress
+    };
+}
+export { deriveFrameState };

package/dist/es/component/player/remotion/export-branded-video.mjs

@@ -0,0 +1,210 @@
+import { mouseLoading, mousePointer } from "../../../utils/index.mjs";
+import { deriveFrameState } from "./derive-frame-state.mjs";
+function asyncGeneratorStep(gen, resolve, reject, _next, _throw, key, arg) {
+    try {
+        var info = gen[key](arg);
+        var value = info.value;
+    } catch (error) {
+        reject(error);
+        return;
+    }
+    if (info.done) resolve(value);
+    else Promise.resolve(value).then(_next, _throw);
+}
+function _async_to_generator(fn) {
+    return function() {
+        var self = this, args = arguments;
+        return new Promise(function(resolve, reject) {
+            var gen = fn.apply(self, args);
+            function _next(value) {
+                asyncGeneratorStep(gen, resolve, reject, _next, _throw, "next", value);
+            }
+            function _throw(err) {
+                asyncGeneratorStep(gen, resolve, reject, _next, _throw, "throw", err);
+            }
+            _next(void 0);
+        });
+    };
+}
+const W = 960;
+const H = 540;
+const POINTER_PHASE = 0.375;
+const CROSSFADE_FRAMES = 10;
+function clamp(v, lo, hi) {
+    return Math.min(Math.max(v, lo), hi);
+}
+function lerp(a, b, t) {
+    return a + (b - a) * t;
+}
+function loadImage(src) {
+    return new Promise((resolve, reject)=>{
+        const img = new Image();
+        img.crossOrigin = 'anonymous';
+        img.onload = ()=>resolve(img);
+        img.onerror = reject;
+        img.src = src;
+    });
+}
+function drawInsightOverlays(ctx, insights, cameraTransform, bx, contentY) {
+    for (const insight of insights)if (!(insight.alpha <= 0)) {
+        ctx.save();
+        ctx.globalAlpha *= insight.alpha;
+        if (insight.highlightElement) {
+            const r = insight.highlightElement.rect;
+            const rx = bx + (r.left * cameraTransform.zoom + cameraTransform.tx * cameraTransform.zoom);
+            const ry = contentY + (r.top * cameraTransform.zoom + cameraTransform.ty * cameraTransform.zoom);
+            const rw = r.width * cameraTransform.zoom;
+            const rh = r.height * cameraTransform.zoom;
+            ctx.fillStyle = 'rgba(253, 89, 7, 0.4)';
+            ctx.fillRect(rx, ry, rw, rh);
+            ctx.strokeStyle = '#fd5907';
+            ctx.lineWidth = 1;
+            ctx.strokeRect(rx, ry, rw, rh);
+            ctx.shadowColor = 'rgba(51, 51, 51, 0.4)';
+            ctx.shadowBlur = 2;
+            ctx.shadowOffsetX = 4;
+            ctx.shadowOffsetY = 4;
+            ctx.strokeRect(rx, ry, rw, rh);
+            ctx.shadowBlur = 0;
+            ctx.shadowOffsetX = 0;
+            ctx.shadowOffsetY = 0;
+        }
+        if (insight.searchArea) {
+            const r = insight.searchArea;
+            const rx = bx + (r.left * cameraTransform.zoom + cameraTransform.tx * cameraTransform.zoom);
+            const ry = contentY + (r.top * cameraTransform.zoom + cameraTransform.ty * cameraTransform.zoom);
+            const rw = r.width * cameraTransform.zoom;
+            const rh = r.height * cameraTransform.zoom;
+            ctx.fillStyle = 'rgba(2, 131, 145, 0.4)';
+            ctx.fillRect(rx, ry, rw, rh);
+            ctx.strokeStyle = '#028391';
+            ctx.lineWidth = 1;
+            ctx.strokeRect(rx, ry, rw, rh);
+        }
+        ctx.restore();
+    }
+}
+function drawSpinningPointer(ctx, img, x, y, elapsedMs) {
+    const progress = (Math.sin(elapsedMs / 500 - Math.PI / 2) + 1) / 2;
+    const rotation = progress * Math.PI * 2;
+    ctx.save();
+    ctx.translate(x, y);
+    ctx.rotate(rotation);
+    ctx.drawImage(img, -11, -14, 22, 28);
+    ctx.restore();
+}
+function drawSteps(ctx, stepsFrame, frameMap, imgCache, cursorImg, spinnerImg) {
+    const { scriptFrames, imageWidth: baseW, imageHeight: baseH, fps } = frameMap;
+    const st = deriveFrameState(scriptFrames, stepsFrame, baseW, baseH, fps);
+    if (!st.img) return;
+    const { img, prevImg, imageWidth: imgW, imageHeight: imgH, camera, prevCamera, pointerMoved, imageChanged, rawProgress, frameInScript: fInScript, spinning, spinningElapsedMs, insights } = st;
+    const pT = pointerMoved ? Math.min(rawProgress / POINTER_PHASE, 1) : rawProgress;
+    const cT = pointerMoved ? rawProgress <= POINTER_PHASE ? 0 : Math.min((rawProgress - POINTER_PHASE) / (1 - POINTER_PHASE), 1) : rawProgress;
+    const camL = lerp(prevCamera.left, camera.left, cT);
+    const camT2 = lerp(prevCamera.top, camera.top, cT);
+    const camW = lerp(prevCamera.width, camera.width, cT);
+    const ptrX = lerp(prevCamera.pointerLeft, camera.pointerLeft, pT);
+    const ptrY = lerp(prevCamera.pointerTop, camera.pointerTop, pT);
+    const zoom = imgW / camW;
+    const tx = W / imgW * -camL;
+    const ty = H / imgH * -camT2;
+    const crossAlpha = imageChanged ? clamp(fInScript / CROSSFADE_FRAMES, 0, 1) : 1;
+    ctx.fillStyle = '#000';
+    ctx.fillRect(0, 0, W, H);
+    const drawImg = (src, alpha)=>{
+        const imgEl = imgCache.get(src);
+        if (!imgEl || alpha <= 0) return;
+        ctx.save();
+        ctx.globalAlpha = alpha;
+        ctx.beginPath();
+        ctx.rect(0, 0, W, H);
+        ctx.clip();
+        ctx.translate(tx * zoom, ty * zoom);
+        ctx.scale(zoom, zoom);
+        ctx.drawImage(imgEl, 0, 0, W, H);
+        ctx.restore();
+    };
+    if (imageChanged && prevImg && crossAlpha < 1) drawImg(prevImg, 1 - crossAlpha);
+    drawImg(img, imageChanged ? crossAlpha : 1);
+    if (insights.length > 0) drawInsightOverlays(ctx, insights, {
+        zoom,
+        tx,
+        ty
+    }, 0, 0);
+    const camH = imgH / imgW * camW;
+    const sX = (ptrX - camL) / camW * W;
+    const sY = (ptrY - camT2) / camH * H;
+    const hasPtrData = Math.abs(camera.pointerLeft - Math.round(baseW / 2)) > 1 || Math.abs(camera.pointerTop - Math.round(baseH / 2)) > 1 || Math.abs(prevCamera.pointerLeft - Math.round(baseW / 2)) > 1 || Math.abs(prevCamera.pointerTop - Math.round(baseH / 2)) > 1;
+    if (spinning && spinnerImg) drawSpinningPointer(ctx, spinnerImg, sX, sY, spinningElapsedMs);
+    if (!spinning && hasPtrData && cursorImg) ctx.drawImage(cursorImg, sX - 3, sY - 2, 22, 28);
+}
+function exportBrandedVideo(frameMap, onProgress) {
+    return _async_to_generator(function*() {
+        const { totalDurationInFrames: total, fps } = frameMap;
+        const imgSrcs = new Set();
+        for (const sf of frameMap.scriptFrames)if (sf.img) imgSrcs.add(sf.img);
+        const imgCache = new Map();
+        yield Promise.all([
+            ...imgSrcs
+        ].map((src)=>_async_to_generator(function*() {
+                try {
+                    imgCache.set(src, (yield loadImage(src)));
+                } catch (e) {}
+            })()));
+        let cursorImg = null;
+        let spinnerImg = null;
+        try {
+            cursorImg = yield loadImage(mousePointer);
+        } catch (e) {}
+        try {
+            spinnerImg = yield loadImage(mouseLoading);
+        } catch (e) {}
+        const canvas = document.createElement('canvas');
+        canvas.width = W;
+        canvas.height = H;
+        const ctx = canvas.getContext('2d');
+        const stream = canvas.captureStream(fps);
+        const recorder = new MediaRecorder(stream, {
+            mimeType: 'video/webm'
+        });
+        const chunks = [];
+        recorder.ondataavailable = (e)=>{
+            if (e.data.size > 0) chunks.push(e.data);
+        };
+        return new Promise((resolve, reject)=>{
+            recorder.onerror = ()=>reject(new Error('MediaRecorder error'));
+            recorder.onstop = ()=>{
+                if (0 === chunks.length) return void reject(new Error('No video data'));
+                const blob = new Blob(chunks, {
+                    type: 'video/webm'
+                });
+                const url = URL.createObjectURL(blob);
+                const a = document.createElement('a');
+                a.href = url;
+                a.download = 'midscene_replay.webm';
+                a.click();
+                stream.getTracks().forEach((track)=>track.stop());
+                setTimeout(()=>URL.revokeObjectURL(url), 1000);
+                resolve();
+            };
+            recorder.start();
+            const frameDuration = 1000 / fps;
+            const startTime = performance.now();
+            let lastFrame = -1;
+            const tick = ()=>{
+                const elapsed = performance.now() - startTime;
+                const targetFrame = Math.min(Math.floor(elapsed / frameDuration), total - 1);
+                if (targetFrame > lastFrame) {
+                    lastFrame = targetFrame;
+                    ctx.clearRect(0, 0, W, H);
+                    drawSteps(ctx, targetFrame, frameMap, imgCache, cursorImg, spinnerImg);
+                    null == onProgress || onProgress((targetFrame + 1) / total);
+                }
+                if (targetFrame < total - 1) requestAnimationFrame(tick);
+                else setTimeout(()=>recorder.stop(), 2 * frameDuration);
+            };
+            requestAnimationFrame(tick);
+        });
+    })();
+}
+export { exportBrandedVideo };