@designcombo/video 0.0.0

package/dist/clips/index.d.ts

@@ -0,0 +1,8 @@
+export * from './audio-clip';
+export * from './caption-clip';
+export * from './iclip';
+export * from './image-clip';
+export * from './video-clip';
+export { VideoClip } from './video-clip';
+export type { IMP4ClipOpts } from './video-clip';
+export * from './text-clip';

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

@@ -0,0 +1,192 @@
+import { Application, Texture } from 'pixi.js';
+import { BaseClip } from './base-clip';
+import { IClip } from './iclip';
+import { TextClipJSON } from '../json-serialization';
+export interface ITextClipOpts {
+    /**
+     * Font size in pixels
+     * @default 40
+     */
+    fontSize?: number;
+    /**
+     * Font family
+     * @default 'Arial'
+     */
+    fontFamily?: string;
+    /**
+     * Font weight (e.g., 'normal', 'bold', '400', '700')
+     * @default 'normal'
+     */
+    fontWeight?: string;
+    /**
+     * Font style (e.g., 'normal', 'italic')
+     * @default 'normal'
+     */
+    fontStyle?: string;
+    /**
+     * Text color (hex string, color name, or gradient object)
+     * @default '#ffffff'
+     */
+    fill?: string | number | {
+        type: 'gradient';
+        x0: number;
+        y0: number;
+        x1: number;
+        y1: number;
+        colors: Array<{
+            ratio: number;
+            color: string | number;
+        }>;
+    };
+    /**
+     * Stroke color (hex string or color name) or stroke object with advanced options
+     */
+    stroke?: string | number | {
+        color: string | number;
+        width: number;
+        join?: 'miter' | 'round' | 'bevel';
+    };
+    /**
+     * Stroke width in pixels (used when stroke is a simple color)
+     * @default 0
+     */
+    strokeWidth?: number;
+    /**
+     * Text alignment ('left', 'center', 'right')
+     * @default 'left'
+     */
+    align?: 'left' | 'center' | 'right';
+    /**
+     * Drop shadow configuration
+     */
+    dropShadow?: {
+        color?: string | number;
+        alpha?: number;
+        blur?: number;
+        angle?: number;
+        distance?: number;
+    };
+    /**
+     * Word wrap width (0 = no wrap)
+     * @default 0
+     */
+    wordWrapWidth?: number;
+    /**
+     * Word wrap mode ('break-word' or 'normal')
+     * @default 'break-word'
+     */
+    wordWrap?: boolean;
+    /**
+     * Line height (multiplier)
+     * @default 1
+     */
+    lineHeight?: number;
+    /**
+     * Letter spacing in pixels
+     * @default 0
+     */
+    letterSpacing?: number;
+}
+/**
+ * Text clip using PixiJS Text for rendering
+ *
+ * @example
+ * const textClip = new TextClip('Hello World', {
+ *   fontSize: 48,
+ *   fill: '#ffffff',
+ *   stroke: '#000000',
+ *   strokeWidth: 2,
+ *   dropShadow: {
+ *     color: '#000000',
+ *     alpha: 0.5,
+ *     blur: 4,
+ *     distance: 2,
+ *   },
+ * });
+ * textClip.duration = 5e6; // 5 seconds
+ */
+export declare class TextClip extends BaseClip {
+    ready: IClip['ready'];
+    private _meta;
+    get meta(): {
+        duration: number;
+        width: number;
+        height: number;
+    };
+    /**
+     * Text content (hybrid JSON structure)
+     */
+    text: string;
+    /**
+     * Text styling (hybrid JSON structure)
+     * Provides direct access to styling properties
+     */
+    get style(): {
+        fontSize: number | undefined;
+        fontFamily: string | undefined;
+        fontWeight: string | undefined;
+        fontStyle: string | undefined;
+        color: string | number | {
+            type: "gradient";
+            x0: number;
+            y0: number;
+            x1: number;
+            y1: number;
+            colors: Array<{
+                ratio: number;
+                color: string | number;
+            }>;
+        } | undefined;
+        align: "center" | "left" | "right" | undefined;
+        stroke: {
+            color: string | number;
+            width: number;
+        } | undefined;
+        shadow: {
+            color: string | number;
+            alpha: number;
+            blur: number;
+            offsetX: number;
+            offsetY: number;
+        } | undefined;
+    };
+    private pixiText;
+    private textStyle;
+    private renderTexture;
+    private externalRenderer;
+    private pixiApp;
+    private originalOpts;
+    constructor(text: string, opts?: ITextClipOpts, renderer?: Application['renderer']);
+    /**
+     * Set an external renderer (e.g., from Studio) to avoid creating our own Pixi App
+     * This is an optimization for Studio preview
+     * Can be called before ready() completes
+     */
+    setRenderer(renderer: Application['renderer']): void;
+    /**
+     * Get the renderer for rendering text to RenderTexture
+     * Creates a minimal renderer as fallback if no external renderer is provided
+     */
+    private getRenderer;
+    /**
+     * Get the PixiJS Texture (RenderTexture) for optimized rendering in Studio
+     * This avoids ImageBitmap → Canvas → Texture conversion
+     *
+     * @returns The RenderTexture containing the rendered text, or null if not ready
+     */
+    getTexture(): Promise<Texture | null>;
+    tick(_time: number): Promise<{
+        video: ImageBitmap;
+        state: 'success';
+    }>;
+    split(_time: number): Promise<[this, this]>;
+    clone(): Promise<this>;
+    destroy(): void;
+    toJSON(main?: boolean): TextClipJSON;
+    /**
+     * Create a TextClip instance from a JSON object (fabric.js pattern)
+     * @param json The JSON object representing the clip
+     * @returns Promise that resolves to a TextClip instance
+     */
+    static fromObject(json: TextClipJSON): Promise<TextClip>;
+}

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

@@ -0,0 +1,200 @@
+import { MP4Sample } from '@webav/mp4box.js';
+import { file } from 'opfs-tools';
+import { BaseClip } from './base-clip';
+import { IClip, IPlaybackCapable } from './iclip';
+import { VideoClipJSON } 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_hardwareAcceleration__?: HardwarePreference;
+}
+type ExtMP4Sample = Omit<MP4Sample, 'data'> & {
+    is_idr: boolean;
+    deleted?: boolean;
+    data: null | Uint8Array;
+};
+/**
+ * Video clip, parses MP4 files, uses {@link VideoClip.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 VideoClip.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)
+ *   },
+ * });
+ *
+ * @example
+ * // Direct constructor (for advanced use)
+ * new VideoClip((await fetch('<mp4 url>')).body)
+ * new VideoClip(mp4File.stream())
+ *
+ * @see {@link Compositor}
+ * @see [AVCanvas](../../av-canvas/classes/AVCanvas.html)
+ *
+ * @see [Decode and play video](https://webav-tech.github.io/WebAV/demo/1_1-decode-video)
+ */
+export declare class VideoClip extends BaseClip implements IPlaybackCapable {
+    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 volume;
+    private videoSamples;
+    private audioSamples;
+    private videoFrameFinder;
+    private audioFrameFinder;
+    private decoderConf;
+    private opts;
+    /**
+     * Whether to include audio track (hybrid JSON structure)
+     */
+    audio: boolean;
+    /**
+     * 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 VideoClip.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<VideoClip>;
+    constructor(source: OPFSToolFile | ReadableStream<Uint8Array> | MPClipCloneArgs, opts?: IMP4ClipOpts, src?: string);
+    /**
+     * Intercept data returned by {@link VideoClip.tick} method for secondary processing of image and audio data
+     * @param time Time when tick was called
+     * @param tickRet Data returned by tick
+     *
+     * @see [Remove video green screen background](https://webav-tech.github.io/WebAV/demo/3_2-chromakey-video)
+     */
+    tickInterceptor: <T extends Awaited<ReturnType<VideoClip['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';
+    }>;
+    split(time: number): Promise<[this, this]>;
+    clone(): Promise<this>;
+    /**
+     * Split VideoClip into VideoClips containing only video track and audio track
+     * @returns VideoClip[]
+     */
+    splitTrack(): Promise<VideoClip[]>;
+    destroy(): void;
+    toJSON(main?: boolean): VideoClipJSON;
+    /**
+     * Create a VideoClip instance from a JSON object (fabric.js pattern)
+     * @param json The JSON object representing the clip
+     * @returns Promise that resolves to a VideoClip instance
+     */
+    static fromObject(json: VideoClipJSON): Promise<VideoClip>;
+    /**
+     * 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-Du0ROyNd.js

@@ -0,0 +1,274 @@
+import { S as M, G as x, a as F } from "./index-CjzowIhV.js";
+const T = {
+  normal: 0,
+  add: 1,
+  multiply: 2,
+  screen: 3,
+  overlay: 4,
+  erase: 5,
+  "normal-npm": 6,
+  "add-npm": 7,
+  "screen-npm": 8,
+  min: 9,
+  max: 10
+}, o = 0, a = 1, n = 2, l = 3, d = 4, u = 5, c = class b {
+  constructor() {
+    this.data = 0, this.blendMode = "normal", this.polygonOffset = 0, this.blend = !0, this.depthMask = !0;
+  }
+  /**
+   * Activates blending of the computed fragment color values.
+   * @default true
+   */
+  get blend() {
+    return !!(this.data & 1 << o);
+  }
+  set blend(t) {
+    !!(this.data & 1 << o) !== t && (this.data ^= 1 << o);
+  }
+  /**
+   * Activates adding an offset to depth values of polygon's fragments
+   * @default false
+   */
+  get offsets() {
+    return !!(this.data & 1 << a);
+  }
+  set offsets(t) {
+    !!(this.data & 1 << a) !== t && (this.data ^= 1 << a);
+  }
+  /** The culling settings for this state none - No culling back - Back face culling front - Front face culling */
+  set cullMode(t) {
+    if (t === "none") {
+      this.culling = !1;
+      return;
+    }
+    this.culling = !0, this.clockwiseFrontFace = t === "front";
+  }
+  get cullMode() {
+    return this.culling ? this.clockwiseFrontFace ? "front" : "back" : "none";
+  }
+  /**
+   * Activates culling of polygons.
+   * @default false
+   */
+  get culling() {
+    return !!(this.data & 1 << n);
+  }
+  set culling(t) {
+    !!(this.data & 1 << n) !== t && (this.data ^= 1 << n);
+  }
+  /**
+   * Activates depth comparisons and updates to the depth buffer.
+   * @default false
+   */
+  get depthTest() {
+    return !!(this.data & 1 << l);
+  }
+  set depthTest(t) {
+    !!(this.data & 1 << l) !== t && (this.data ^= 1 << l);
+  }
+  /**
+   * Enables or disables writing to the depth buffer.
+   * @default true
+   */
+  get depthMask() {
+    return !!(this.data & 1 << u);
+  }
+  set depthMask(t) {
+    !!(this.data & 1 << u) !== t && (this.data ^= 1 << u);
+  }
+  /**
+   * Specifies whether or not front or back-facing polygons can be culled.
+   * @default false
+   */
+  get clockwiseFrontFace() {
+    return !!(this.data & 1 << d);
+  }
+  set clockwiseFrontFace(t) {
+    !!(this.data & 1 << d) !== t && (this.data ^= 1 << d);
+  }
+  /**
+   * The blend mode to be applied when this state is set. Apply a value of `normal` to reset the blend mode.
+   * Setting this mode to anything other than NO_BLEND will automatically switch blending on.
+   * @default 'normal'
+   */
+  get blendMode() {
+    return this._blendMode;
+  }
+  set blendMode(t) {
+    this.blend = t !== "none", this._blendMode = t, this._blendModeId = T[t] || 0;
+  }
+  /**
+   * The polygon offset. Setting this property to anything other than 0 will automatically enable polygon offset fill.
+   * @default 0
+   */
+  get polygonOffset() {
+    return this._polygonOffset;
+  }
+  set polygonOffset(t) {
+    this.offsets = !!t, this._polygonOffset = t;
+  }
+  toString() {
+    return `[pixi.js/core:State blendMode=${this.blendMode} clockwiseFrontFace=${this.clockwiseFrontFace} culling=${this.culling} depthMask=${this.depthMask} polygonOffset=${this.polygonOffset}]`;
+  }
+  /**
+   * A quickly getting an instance of a State that is configured for 2d rendering.
+   * @returns a new State with values set for 2d rendering
+   */
+  static for2d() {
+    const t = new b();
+    return t.depthTest = !1, t.blend = !0, t;
+  }
+};
+c.default2d = c.for2d();
+let _ = c;
+const p = class f extends M {
+  /**
+   * @param options - The optional parameters of this filter.
+   */
+  constructor(t) {
+    t = { ...f.defaultOptions, ...t }, super(t), this.enabled = !0, this._state = _.for2d(), this.blendMode = t.blendMode, this.padding = t.padding, typeof t.antialias == "boolean" ? this.antialias = t.antialias ? "on" : "off" : this.antialias = t.antialias, this.resolution = t.resolution, this.blendRequired = t.blendRequired, this.clipToViewport = t.clipToViewport, this.addResource("uTexture", 0, 1), t.blendRequired && this.addResource("uBackTexture", 0, 3);
+  }
+  /**
+   * Applies the filter
+   * @param filterManager - The renderer to retrieve the filter from
+   * @param input - The input render target.
+   * @param output - The target to output to.
+   * @param clearMode - Should the output be cleared before rendering to it
+   */
+  apply(t, e, i, r) {
+    t.applyFilter(this, e, i, r);
+  }
+  /**
+   * Get the blend mode of the filter.
+   * @default "normal"
+   */
+  get blendMode() {
+    return this._state.blendMode;
+  }
+  /** Sets the blend mode of the filter. */
+  set blendMode(t) {
+    this._state.blendMode = t;
+  }
+  /**
+   * A short hand function to create a filter based of a vertex and fragment shader src.
+   * @param options
+   * @returns A shiny new PixiJS filter!
+   */
+  static from(t) {
+    const { gpu: e, gl: i, ...r } = t;
+    let m, g;
+    return e && (m = x.from(e)), i && (g = F.from(i)), new f({
+      gpuProgram: m,
+      glProgram: g,
+      ...r
+    });
+  }
+};
+p.defaultOptions = {
+  blendMode: "normal",
+  resolution: 1,
+  padding: 0,
+  antialias: "off",
+  blendRequired: !1,
+  clipToViewport: !0
+};
+let S = p;
+const h = {
+  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);
+            }
+        `
+    )
+  }
+}, k = {
+  ...h,
+  vertex: {
+    ...h.vertex,
+    // replace the group!
+    header: h.vertex.header.replace("group(1)", "group(2)")
+  }
+}, P = {
+  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 w {
+  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 R(s, t, e) {
+  const i = (s >> 24 & 255) / 255;
+  t[e++] = (s & 255) / 255 * i, t[e++] = (s >> 8 & 255) / 255 * i, t[e++] = (s >> 16 & 255) / 255 * i, t[e++] = i;
+}
+export {
+  w as B,
+  S as F,
+  _ as S,
+  h as a,
+  P as b,
+  R as c,
+  k as l
+};