Class Combinator

视频合成器；能添加多个 OffscreenSprite，根据它们位置、层级、时间偏移等信息，合成输出为视频文件

See

Example

const spr1 = new OffscreenSprite(
  new MP4Clip((await fetch('<mp4 url>')).body),
);
const spr2 = new OffscreenSprite(
  new AudioClip((await fetch('<audio url>')).body),
);
const com = new Combinator({ width: 1280, height: 720, });

await com.addSprite(spr1);
await com.addSprite(spr2);

com.output(); // => ReadableStream

Constructors

constructor

Properties

#ctx #cvs #destroyed #evtTool #hasVideoTrack #log #opts #sprites #stopOutput on

Methods

#run #startRecodeMux addSprite destroy output isSupported

Constructors

constructor

Properties

Private #ctx

#ctx: OffscreenCanvasRenderingContext2D

Private #cvs

#cvs: OffscreenCanvas

Private #destroyed

#destroyed: boolean = false

Private #evtTool

#evtTool: EventTool<{
    OutputProgress: ((progress) => void);
    error: ((err) => void);
}> = ...

Type declaration

  • OutputProgress: ((progress) => void)
      • (progress): void

      • Parameters

        • progress: number

        Returns void

  • error: ((err) => void)
      • (err): void

      • Parameters

        • err: Error

        Returns void

Private #hasVideoTrack

#hasVideoTrack: boolean

Private #log

#log: {
    [k: string]: ((...args) => void);
} = ...

Type declaration

  • [k: string]: ((...args) => void)
      • (...args): void

      • Parameters

        • Rest ...args: any[]

        Returns void

Private #opts

#opts: Required<ICombinatorOpts>

Private #sprites

#sprites: (OffscreenSprite & {
    expired: boolean;
    main: boolean;
})[] = []

Private #stopOutput

#stopOutput: null | (() => void) = null

Type declaration

    • (): void

    • Returns void

on

on: (<Type>(type, listener) => (() => void)) = ...

Type declaration

    • <Type>(type, listener): (() => void)

    • 监听 EventType 中定义的事件

      Type Parameters

      • Type extends "error" | "OutputProgress"

      Parameters

      • type: Type
      • listener: {
            OutputProgress: ((progress) => void);
            error: ((err) => void);
        }[Type]

      Returns (() => void)

        • (): void

        • Returns void

Methods

Private #run

  • #run(remux, maxTime, __namedParameters): (() => void)

  • Parameters

    • remux: {
          close: TCleanFn;
          encodeAudio: ((data) => void);
          encodeVideo: ((frame, options, gopId?) => void);
          flush: (() => Promise<void>);
          getEncodeQueueSize: (() => number);
          mp4file: MP4File;
      }
      • close: TCleanFn

        close 编码器，停止任务

      • encodeAudio: ((data) => void)

        编码音频数据

          • (data): void

          • Parameters

            • data: AudioData

            Returns void

      • encodeVideo: ((frame, options, gopId?) => void)

        编码视频帧

          • (frame, options, gopId?): void

          • Parameters

            • frame: VideoFrame
            • options: VideoEncoderEncodeOptions
            • Optional gopId: number

            Returns void

      • flush: (() => Promise<void>)

        清空编码器队列

          • (): Promise<void>

          • Returns Promise<void>

      • getEncodeQueueSize: (() => number)

        返回队列长度（背压），用于控制生产视频的进度，队列过大会会占用大量显存

          • (): number

          • Returns number

      • mp4file: MP4File

        mp4box 实例

    • maxTime: number
    • __namedParameters: {
          onEnded: (() => Promise<void>);
          onError: ((err) => void);
          onProgress: ((prog) => void);
      }
      • onEnded: (() => Promise<void>)
          • (): Promise<void>

          • Returns Promise<void>

      • onError: ((err) => void)
          • (err): void

          • Parameters

            • err: Error

            Returns void

      • onProgress: ((prog) => void)
          • (prog): void

          • Parameters

            • prog: number

            Returns void

    Returns (() => void)

      • (): void

      • Returns void

Private #startRecodeMux

  • #startRecodeMux(duration): {
        close: TCleanFn;
        encodeAudio: ((data) => void);
        encodeVideo: ((frame, options, gopId?) => void);
        flush: (() => Promise<void>);
        getEncodeQueueSize: (() => number);
        mp4file: MP4File;
    }

  • Parameters

    • duration: number

    Returns {
        close: TCleanFn;
        encodeAudio: ((data) => void);
        encodeVideo: ((frame, options, gopId?) => void);
        flush: (() => Promise<void>);
        getEncodeQueueSize: (() => number);
        mp4file: MP4File;
    }

    • close: TCleanFn

      close 编码器，停止任务

    • encodeAudio: ((data) => void)

      编码音频数据

        • (data): void

        • Parameters

          • data: AudioData

          Returns void

    • encodeVideo: ((frame, options, gopId?) => void)

      编码视频帧

        • (frame, options, gopId?): void

        • Parameters

          • frame: VideoFrame
          • options: VideoEncoderEncodeOptions
          • Optional gopId: number

          Returns void

    • flush: (() => Promise<void>)

      清空编码器队列

        • (): Promise<void>

        • Returns Promise<void>

    • getEncodeQueueSize: (() => number)

      返回队列长度（背压），用于控制生产视频的进度，队列过大会会占用大量显存

        • (): number

        • Returns number

    • mp4file: MP4File

      mp4box 实例

addSprite

  • addSprite(os, opts?): Promise<void>

  • 添加用于合成视频的 Sprite，视频时长默认取所有素材 duration 字段的最大值

    Parameters

    • os: OffscreenSprite

      Sprite

    • opts: {
          main?: boolean;
      } = {}
      • Optional main?: boolean

        如果 main 为 true，视频时长为该素材的 duration 值

    Returns Promise<void>

destroy

output

Static isSupported

  • isSupported(args?): Promise<boolean>

  • 检测当前环境的兼容性

    Parameters

    • args: {
          bitrate?: number;
          height?: number;
          videoCodec?: string;
          width?: number;
      } = {}
      • Optional bitrate?: number

        指定视频比特率，默认 5e6

      • Optional height?: number

        指定视频高度，默认 1080

      • Optional videoCodec?: string

        指定视频编码格式，默认 avc1.42E032

      • Optional width?: number

        指定视频宽度，默认 1920

    Returns Promise<boolean>

Settings

Member Visibility

Theme

On This Page

constructor#ctx#cvs#destroyed#evtTool#hasVideoTrack#log#opts#sprites#stopOutputon#run#startRecodeMuxaddSpritedestroyoutputisSupported