视频合成器;能添加多个 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

Properties

#ctx: OffscreenCanvasRenderingContext2D
#cvs: OffscreenCanvas
#destroyed: boolean = false
#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

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

Type declaration

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

        • Rest ...args: any[]

        Returns void

#opts: Required<ICombinatorOpts>
#sprites: (OffscreenSprite & {
    expired: boolean;
    main: boolean;
})[] = []
#stopOutput: null | (() => void) = null

Type declaration

    • (): void
    • Returns void

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

  • 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

  • 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 实例

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

    Parameters

    • os: OffscreenSprite

      Sprite

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

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

    Returns Promise<void>

  • 检测当前环境的兼容性

    Parameters

    • args: {
          videoCodec: string;
      } = ...
      • videoCodec: string

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

    Returns Promise<boolean>