@yassine-bouassida/scenecap 1.0.1 → 1.1.0

package/dist/index.d.mts

@@ -54,6 +54,13 @@ interface RecordingOptions {
     backgroundColor: string;
     /** Device pixel ratio (for retina) */
     devicePixelRatio: number;
+    /**
+     * How to capture the DOM:
+     * - 'auto'    Try display capture first, fall back to canvas (default)
+     * - 'display' getDisplayMedia — captures iframes, handles tab switching, best fidelity
+     * - 'canvas'  Canvas + SVG foreignObject — no permissions needed, limited fidelity
+     */
+    captureMethod?: 'auto' | 'display' | 'canvas';
 }
 interface RecordingSession {
     /** Unique session ID */
@@ -165,32 +172,61 @@ declare class ScenarioRunner {
     private cleanup;
 }
 
-/**
- * Records a DOM element to a video file using the Canvas capture API.
- * This captures the visual output of a container element frame-by-frame.
- */
 declare class VideoRecorder {
     private options;
     private mediaRecorder;
     private chunks;
-    private canvas;
     private stream;
     private captureInterval;
+    private displayStream;
+    private displayVideo;
+    private videoEncoder;
+    private mp4Output;
+    private mp4Target;
+    private pendingEncodes;
+    private frameCount;
+    private frameIntervalUs;
+    private usingVideoEncoder;
     constructor(options?: Partial<RecordingOptions>);
     /**
-     * Start recording from a canvas element.
+     * Start recording a DOM element.
+     *
+     * Strategy selection (captureMethod):
+     *  'auto'    → try display capture, fall back to canvas
+     *  'display' → getDisplayMedia (best fidelity, iframes, tab-switch-safe)
+     *  'canvas'  → SVG foreignObject canvas rendering (no permissions)
      */
-    startFromCanvas(canvas: HTMLCanvasElement): Promise<void>;
+    startFromElement(element: HTMLElement): Promise<void>;
     /**
-     * Start recording a DOM element by continuously painting it to a canvas.
+     * Start recording directly from an existing canvas element.
      */
-    startFromElement(element: HTMLElement): Promise<void>;
+    startFromCanvas(canvas: HTMLCanvasElement): Promise<void>;
     /**
      * Stop recording and return the video blob.
      */
     stop(): Promise<Blob>;
-    private cleanup;
     get isRecording(): boolean;
+    /**
+     * Capture via getDisplayMedia — crops the live tab stream to the element.
+     * Works across iframe boundaries and survives tab switches.
+     */
+    private startWithDisplayCapture;
+    /**
+     * Capture via SVG foreignObject → canvas — no permissions needed.
+     * Limited: cross-origin resources, iframes, and some CSS effects won't render.
+     */
+    private startWithCanvasCapture;
+    /**
+     * Wire up either VideoEncoder + Mediabunny (Chrome MP4)
+     * or MediaRecorder (WebM / native Safari MP4).
+     */
+    private initRecorder;
+    /**
+     * Encode the current canvas frame into VideoEncoder (MP4 path only).
+     * No-op when using MediaRecorder.
+     */
+    private encodeFrameIfNeeded;
+    private cleanup;
 }
 
 /**

package/dist/index.d.ts

@@ -54,6 +54,13 @@ interface RecordingOptions {
     backgroundColor: string;
     /** Device pixel ratio (for retina) */
     devicePixelRatio: number;
+    /**
+     * How to capture the DOM:
+     * - 'auto'    Try display capture first, fall back to canvas (default)
+     * - 'display' getDisplayMedia — captures iframes, handles tab switching, best fidelity
+     * - 'canvas'  Canvas + SVG foreignObject — no permissions needed, limited fidelity
+     */
+    captureMethod?: 'auto' | 'display' | 'canvas';
 }
 interface RecordingSession {
     /** Unique session ID */
@@ -165,32 +172,61 @@ declare class ScenarioRunner {
     private cleanup;
 }
 
-/**
- * Records a DOM element to a video file using the Canvas capture API.
- * This captures the visual output of a container element frame-by-frame.
- */
 declare class VideoRecorder {
     private options;
     private mediaRecorder;
     private chunks;
-    private canvas;
     private stream;
     private captureInterval;
+    private displayStream;
+    private displayVideo;
+    private videoEncoder;
+    private mp4Output;
+    private mp4Target;
+    private pendingEncodes;
+    private frameCount;
+    private frameIntervalUs;
+    private usingVideoEncoder;
     constructor(options?: Partial<RecordingOptions>);
     /**
-     * Start recording from a canvas element.
+     * Start recording a DOM element.
+     *
+     * Strategy selection (captureMethod):
+     *  'auto'    → try display capture, fall back to canvas
+     *  'display' → getDisplayMedia (best fidelity, iframes, tab-switch-safe)
+     *  'canvas'  → SVG foreignObject canvas rendering (no permissions)
      */
-    startFromCanvas(canvas: HTMLCanvasElement): Promise<void>;
+    startFromElement(element: HTMLElement): Promise<void>;
     /**
-     * Start recording a DOM element by continuously painting it to a canvas.
+     * Start recording directly from an existing canvas element.
      */
-    startFromElement(element: HTMLElement): Promise<void>;
+    startFromCanvas(canvas: HTMLCanvasElement): Promise<void>;
     /**
      * Stop recording and return the video blob.
      */
     stop(): Promise<Blob>;
-    private cleanup;
     get isRecording(): boolean;
+    /**
+     * Capture via getDisplayMedia — crops the live tab stream to the element.
+     * Works across iframe boundaries and survives tab switches.
+     */
+    private startWithDisplayCapture;
+    /**
+     * Capture via SVG foreignObject → canvas — no permissions needed.
+     * Limited: cross-origin resources, iframes, and some CSS effects won't render.
+     */
+    private startWithCanvasCapture;
+    /**
+     * Wire up either VideoEncoder + Mediabunny (Chrome MP4)
+     * or MediaRecorder (WebM / native Safari MP4).
+     */
+    private initRecorder;
+    /**
+     * Encode the current canvas frame into VideoEncoder (MP4 path only).
+     * No-op when using MediaRecorder.
+     */
+    private encodeFrameIfNeeded;
+    private cleanup;
 }
 
 /**