openvideo 0.0.1

package/dist/clips/video-clip.d.ts

@@ -0,0 +1,238 @@
+import { MP4Sample } from 'wrapbox';
+import { file } from 'opfs-tools';
+import { BaseClip } from './base-clip';
+import { IClip, IPlaybackCapable } from './iclip';
+import { VideoJSON } from '../json-serialization';
+type OPFSToolFile = ReturnType<typeof file>;
+type MPClipCloneArgs = Awaited<ReturnType<typeof mp4FileToSamples>> & {
+    localFile: OPFSToolFile;
+};
+interface MP4DecoderConf {
+    video: VideoDecoderConfig | null;
+    audio: AudioDecoderConfig | null;
+}
+export interface IMP4ClipOpts {
+    audio?: boolean | {
+        volume: number;
+    };
+    /**
+     * Unsafe, may be deprecated at any time
+     */
+    __unsafe_hardwareAcceleration__?: HardwarePreference;
+}
+type ExtMP4Sample = Omit<MP4Sample, 'data'> & {
+    is_idr: boolean;
+    deleted?: boolean;
+    data: null | Uint8Array;
+};
+type ThumbnailOpts = {
+    start: number;
+    end: number;
+    step: number;
+};
+/**
+ * Video clip, parses MP4 files, uses {@link Video.tick} to decode image frames at specified time on demand
+ *
+ * Can be used to implement video frame extraction, thumbnail generation, video editing and other functions
+ *
+ * @example
+ * // Load video clip asynchronously
+ * const videoClip = await Video.fromUrl('clip.mp4', {
+ *   x: 0,
+ *   y: 0,
+ *   width: 1920,
+ *   height: 1080,
+ * });
+ *
+ * // Set timeline position
+ * videoClip.set({
+ *   display: {
+ *     from: 150, // frames
+ *     to: 450, // frames (10 seconds at 30fps)
+ *   },
+ * });
+ *
+ */
+export declare class Video extends BaseClip implements IPlaybackCapable {
+    readonly type = "Video";
+    private insId;
+    private logger;
+    ready: IClip['ready'];
+    private _meta;
+    get meta(): {
+        duration: number;
+        width: number;
+        height: number;
+        audioSampleRate: number;
+        audioChanCount: number;
+    };
+    private localFile;
+    /** Store binary data of video header (box: ftyp, moov) */
+    private headerBoxPos;
+    /**
+     * Provide binary data of video header (box: ftyp, moov)
+     * Use any mp4 demuxer to parse and get detailed video information
+     * Unit tests include sample code using mp4box.js
+     */
+    getFileHeaderBinData(): Promise<ArrayBuffer>;
+    /** Store video transform and rotation info, currently only restores rotation */
+    private parsedMatrix;
+    private vfRotater;
+    private videoSamples;
+    private audioSamples;
+    private videoFrameFinder;
+    private audioFrameFinder;
+    private decoderConf;
+    private opts;
+    /**
+     * Whether to include audio track (hybrid JSON structure)
+     */
+    audio: boolean;
+    /**
+     * Unique identifier for this clip instance
+     */
+    id: string;
+    /**
+     * Array of effects to be applied to this clip
+     * Each effect specifies key, startTime, duration, and optional targets
+     */
+    effects: Array<{
+        id: string;
+        key: string;
+        startTime: number;
+        duration: number;
+    }>;
+    /**
+     * Load a video clip from a URL
+     * @param url Video URL
+     * @param opts Position and size options
+     * @returns Promise that resolves to a video clip
+     *
+     * @example
+     * const videoClip = await Video.fromUrl('clip.mp4', {
+     *   x: 0,
+     *   y: 0,
+     *   width: 1920,
+     *   height: 1080,
+     * });
+     */
+    static fromUrl(url: string, opts?: {
+        x?: number;
+        y?: number;
+        width?: number;
+        height?: number;
+    }): Promise<Video>;
+    constructor(source: OPFSToolFile | ReadableStream<Uint8Array> | MPClipCloneArgs, opts?: IMP4ClipOpts, src?: string);
+    /**
+     * Intercept data returned by {@link Video.tick} method for secondary processing of image and audio data
+     * @param time Time when tick was called
+     * @param tickRet Data returned by tick
+     *
+     *    */
+    tickInterceptor: <T extends Awaited<ReturnType<Video['tick']>>>(time: number, tickRet: T) => Promise<T>;
+    /**
+     * Get image frame and audio data at specified time
+     * @param time Time in microseconds
+     */
+    tick(time: number): Promise<{
+        video?: VideoFrame;
+        audio: Float32Array[];
+        state: 'success' | 'done';
+    }>;
+    private thumbAborter;
+    private thumbFinder;
+    /**
+     * Generate thumbnails, default generates one 100px width thumbnail per keyframe.
+     *
+     * @param imgWidth Thumbnail width, default 100
+     * @param opts Partial<ThumbnailOpts>
+     * @returns Promise<Array<{ ts: number; img: Blob }>>
+     */
+    thumbnails(imgWidth?: number, opts?: Partial<ThumbnailOpts>): Promise<Array<{
+        ts: number;
+        img: Blob;
+    }>>;
+    split(time: number): Promise<[this, this]>;
+    addEffect(effect: {
+        id: string;
+        key: string;
+        startTime: number;
+        duration: number;
+    }): void;
+    editEffect(effectId: string, newEffectData: Partial<{
+        key: string;
+        startTime: number;
+        duration: number;
+    }>): void;
+    removeEffect(effectId: string): void;
+    clone(): Promise<this>;
+    /**
+     * Split Video into VideoClips containing only video track and audio track
+     * @returns VideoClip[]
+     */
+    splitTrack(): Promise<Video[]>;
+    /**
+     * Clean up thumbnail generation resources
+     */
+    cleanupThumbnails: () => Promise<void>;
+    destroy(): void;
+    toJSON(main?: boolean): VideoJSON;
+    /**
+     * Create a Video instance from a JSON object (fabric.js pattern)
+     * @param json The JSON object representing the clip
+     * @returns Promise that resolves to a Video instance
+     */
+    static fromObject(json: VideoJSON): Promise<Video>;
+    /**
+     * Create HTMLVideoElement for playback
+     */
+    createPlaybackElement(): Promise<{
+        element: HTMLVideoElement;
+        objectUrl?: string;
+    }>;
+    play(element: HTMLVideoElement | HTMLAudioElement, timeSeconds: number): Promise<void>;
+    pause(element: HTMLVideoElement | HTMLAudioElement): void;
+    seek(element: HTMLVideoElement | HTMLAudioElement, timeSeconds: number): Promise<void>;
+    syncPlayback(element: HTMLVideoElement | HTMLAudioElement, isPlaying: boolean, timeSeconds: number): void;
+    cleanupPlayback(element: HTMLVideoElement | HTMLAudioElement, objectUrl?: string): void;
+    /**
+     * Scale clip to fit within the scene dimensions while maintaining aspect ratio
+     * Similar to fabric.js scaleToFit
+     * @param sceneWidth Scene width
+     * @param sceneHeight Scene height
+     */
+    scaleToFit(sceneWidth: number, sceneHeight: number): Promise<void>;
+    /**
+     * Scale clip to fill the scene dimensions while maintaining aspect ratio
+     * May crop parts of the clip. Similar to fabric.js scaleToFill
+     * @param sceneWidth Scene width
+     * @param sceneHeight Scene height
+     */
+    scaleToFill(sceneWidth: number, sceneHeight: number): Promise<void>;
+    /**
+     * Center the clip within the scene dimensions
+     * Similar to fabric.js center
+     * @param sceneWidth Scene width
+     * @param sceneHeight Scene height
+     */
+    centerInScene(sceneWidth: number, sceneHeight: number): void;
+}
+declare function mp4FileToSamples(otFile: OPFSToolFile, opts?: IMP4ClipOpts): Promise<{
+    videoSamples: ExtMP4Sample[];
+    audioSamples: ExtMP4Sample[];
+    decoderConf: MP4DecoderConf;
+    headerBoxPos: {
+        start: number;
+        size: number;
+    }[];
+    parsedMatrix: {
+        perspective: number;
+        rotationRad: number;
+        rotationDeg: number;
+        scaleX: number;
+        scaleY: number;
+        translateX: number;
+        translateY: number;
+    };
+}>;
+export {};

package/dist/colorToUniform-C2jGzNe1.js

@@ -0,0 +1,97 @@
+const l = {
+  name: "local-uniform-bit",
+  vertex: {
+    header: (
+      /* wgsl */
+      `
+
+            struct LocalUniforms {
+                uTransformMatrix:mat3x3<f32>,
+                uColor:vec4<f32>,
+                uRound:f32,
+            }
+
+            @group(1) @binding(0) var<uniform> localUniforms : LocalUniforms;
+        `
+    ),
+    main: (
+      /* wgsl */
+      `
+            vColor *= localUniforms.uColor;
+            modelMatrix *= localUniforms.uTransformMatrix;
+        `
+    ),
+    end: (
+      /* wgsl */
+      `
+            if(localUniforms.uRound == 1)
+            {
+                vPosition = vec4(roundPixels(vPosition.xy, globalUniforms.uResolution), vPosition.zw);
+            }
+        `
+    )
+  }
+}, e = {
+  ...l,
+  vertex: {
+    ...l.vertex,
+    // replace the group!
+    header: l.vertex.header.replace("group(1)", "group(2)")
+  }
+}, n = {
+  name: "local-uniform-bit",
+  vertex: {
+    header: (
+      /* glsl */
+      `
+
+            uniform mat3 uTransformMatrix;
+            uniform vec4 uColor;
+            uniform float uRound;
+        `
+    ),
+    main: (
+      /* glsl */
+      `
+            vColor *= uColor;
+            modelMatrix = uTransformMatrix;
+        `
+    ),
+    end: (
+      /* glsl */
+      `
+            if(uRound == 1.)
+            {
+                gl_Position.xy = roundPixels(gl_Position.xy, uResolution);
+            }
+        `
+    )
+  }
+};
+class a {
+  constructor() {
+    this.batcherName = "default", this.topology = "triangle-list", this.attributeSize = 4, this.indexSize = 6, this.packAsQuad = !0, this.roundPixels = 0, this._attributeStart = 0, this._batcher = null, this._batch = null;
+  }
+  get blendMode() {
+    return this.renderable.groupBlendMode;
+  }
+  get color() {
+    return this.renderable.groupColorAlpha;
+  }
+  reset() {
+    this.renderable = null, this.texture = null, this._batcher = null, this._batch = null, this.bounds = null;
+  }
+  destroy() {
+  }
+}
+function s(o, r, i) {
+  const t = (o >> 24 & 255) / 255;
+  r[i++] = (o & 255) / 255 * t, r[i++] = (o >> 8 & 255) / 255 * t, r[i++] = (o >> 16 & 255) / 255 * t, r[i++] = t;
+}
+export {
+  a as B,
+  l as a,
+  n as b,
+  s as c,
+  e as l
+};

package/dist/compositor.d.ts

@@ -0,0 +1,107 @@
+import { IClip } from './clips';
+import { default as EventEmitter } from './event-emitter';
+import { ProjectJSON } from './json-serialization';
+export interface ICompositorOpts {
+    width?: number;
+    height?: number;
+    bitrate?: number;
+    fps?: number;
+    bgColor?: string;
+    videoCodec?: string;
+    /**
+     * If false, exclude audio track from the output video
+     */
+    audio?: false;
+    /**
+     * Write metadata tags to the output video
+     */
+    metaDataTags?: Record<string, string>;
+    /**
+     * Unsafe, may be deprecated at any time
+     */
+    __unsafe_hardwareAcceleration__?: HardwarePreference;
+}
+/**
+ * Video compositor that can add multiple {@link OffscreenSprite} instances,
+ * @example
+ * const spr1 = new OffscreenSprite(
+ *   new Video((await fetch('<mp4 url>')).body),
+ * );
+ * const spr2 = new OffscreenSprite(
+ *   await Audio.fromUrl('<audio url>'),
+ * );
+ * const com = new Compositor({ width: 1280, height: 720, });
+
+ * await com.addSprite(spr1);
+ * await com.addSprite(spr2);
+
+ * com.output(); // => ReadableStream
+ *
+ */
+export declare class Compositor extends EventEmitter<{
+    OutputProgress: number;
+    error: Error;
+}> {
+    /**
+     * Check compatibility with the current environment
+     * @param args.videoCodec Specify video codec, default avc1.42E032
+     * @param args.width Specify video width, default 1920
+     * @param args.height Specify video height, default 1080
+     * @param args.bitrate Specify video bitrate, default 5e6
+     */
+    static isSupported(args?: {
+        videoCodec?: string;
+        width?: number;
+        height?: number;
+        bitrate?: number;
+    }): Promise<boolean>;
+    private logger;
+    private destroyed;
+    private sprites;
+    private canvas;
+    private pixiApp;
+    private stopOutput;
+    private opts;
+    private hasVideoTrack;
+    /**
+     * Create a compositor instance based on configuration
+     * @param opts ICompositorOpts
+     */
+    constructor(opts?: ICompositorOpts);
+    initPixiApp(): Promise<void>;
+    /**
+     * Add a clip for video composition. Video duration defaults to the maximum duration value from all clips
+     * @param clip Clip (extends BaseSprite)
+     * @param opts.main If main is true, the video duration uses this clip's duration value
+     */
+    addSprite(clip: IClip, opts?: {
+        main?: boolean;
+    }): Promise<void>;
+    private initMuxer;
+    /**
+     * Output video file binary stream
+     * @param opts.maxTime Maximum duration allowed for output video, content exceeding this will be ignored
+     */
+    output(opts?: {
+        maxTime?: number;
+    }): ReadableStream<Uint8Array>;
+    /**
+     * Destroy instance and release resources
+     */
+    destroy(): void;
+    private runEncoding;
+    /**
+     * Export current compositor state to JSON
+     */
+    exportToJSON(): ProjectJSON;
+    /**
+     * Load clips from JSON
+     * @param json The JSON project data
+     */
+    loadFromJSON(json: ProjectJSON): Promise<void>;
+}
+/**
+ * Buffer input data and convert to AudioData with fixed frame count
+ * @param framesPerChunk Number of audio frames per AudioData instance
+ */
+export declare function createAudioTrackBuf(framesPerChunk: number): (timestamp: number, trackAudios: Float32Array[][]) => AudioData[];

package/dist/effect/effect.d.ts

@@ -0,0 +1,6 @@
+import { Filter, RenderTexture } from 'pixi.js';
+import { EffectOptions, EffectRendererOptions } from './types';
+export declare function makeEffect({ name, renderer }: EffectOptions): {
+    filter: Filter;
+    render({ width, height, canvasTexture, progress }: EffectRendererOptions): RenderTexture;
+};