Class AVCanvas

一个可交互的画布，让用户添加各种素材，支持基础交互（拖拽、缩放、旋转、时间偏移）

用于在 Web 环境中实现视频剪辑、直播推流工作台功能

Description

  • 添加/删除素材（视频、音频、图片、文字）
  • 分割（裁剪）素材
  • 控制素材在视频中的空间属性（坐标、旋转、缩放）
  • 控制素材在视频中的时间属性（偏移、时长）
  • 实时预览播放
  • 纯浏览器环境生成视频

See

Example

const avCvs = new AVCanvas(document.querySelector('#app'), {
  bgColor: '#333',
  width: 1920,
  height: 1080,
});

Constructors

constructor

Properties

#audioCtx #captureAudioDest #clears #cvsCtx #cvsEl #destroyed #evtTool #opts #playState #playingAudioCache #renderTime #sprMapAudioNode #spriteManager #stopRender addSprite on removeSprite

Accessors

activeSprite

Methods

#pause #render #updateRenderTime captureImage captureStream createCombinator destroy pause play previewFrame

Constructors

constructor

  • new AVCanvas(attchEl, opts): AVCanvas

  • 创建 AVCanvas 类的实例。

    Parameters

    • attchEl: HTMLElement

      要添加画布的元素。

    • opts: {
          bgColor: string;
      } & IResolution

      画布的选项

    Returns AVCanvas

Properties

Private #audioCtx

#audioCtx: AudioContext = ...

Private #captureAudioDest

#captureAudioDest: MediaStreamAudioDestinationNode = ...

Private #clears

#clears: (() => void)[] = []

Type declaration

    • (): void

    • Returns void

Private #cvsCtx

#cvsCtx: CanvasRenderingContext2D

Private #cvsEl

#cvsEl: HTMLCanvasElement

Private #destroyed

#destroyed: boolean = false

Private #evtTool

#evtTool: EventTool<{
    activeSpriteChange: ((sprite) => void);
    paused: (() => void);
    playing: (() => void);
    timeupdate: ((time) => void);
}> = ...

Type declaration

  • activeSpriteChange: ((sprite) => void)
      • (sprite): void

      • Parameters

        • sprite: null | VisibleSprite

        Returns void

  • paused: (() => void)
      • (): void

      • Returns void

  • playing: (() => void)
      • (): void

      • Returns void

  • timeupdate: ((time) => void)
      • (time): void

      • Parameters

        • time: number

        Returns void

Private #opts

#opts: {
    bgColor: string;
} & IResolution

Type declaration

  • bgColor: string

Private #playState

#playState: {
    audioPlayAt: number;
    end: number;
    start: number;
    step: number;
} = ...

Type declaration

  • audioPlayAt: number
  • end: number
  • start: number
  • step: number

Private #playingAudioCache

#playingAudioCache: Set<AudioBufferSourceNode> = ...

Private #renderTime

#renderTime: number = 0e6

Private #sprMapAudioNode

#sprMapAudioNode: WeakMap<VisibleSprite, AudioNode> = ...

Private #spriteManager

#spriteManager: SpriteManager

Private #stopRender

#stopRender: (() => void)

Type declaration

    • (): void

    • Returns void

addSprite

addSprite: ((vs) => Promise<void>) = ...

添加 VisibleSprite

Type declaration

    • (vs): Promise<void>

    • Parameters

      • vs: VisibleSprite

      Returns Promise<void>

Example

const sprite = new VisibleSprite(
  new ImgClip({
    type: 'image/gif',
    stream: (await fetch('https://xx.gif')).body!,
  }),
);

on

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

Type declaration

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

    • 监听 EventType 中定义的事件

      Type Parameters

      • Type extends "activeSpriteChange" | "playing" | "timeupdate" | "paused"

      Parameters

      • type: Type
      • listener: {
            activeSpriteChange: ((sprite) => void);
            paused: (() => void);
            playing: (() => void);
            timeupdate: ((time) => void);
        }[Type]

      Returns (() => void)

        • (): void

        • Returns void

removeSprite

removeSprite: ((spr) => void) = ...

删除 VisibleSprite

Type declaration

    • (spr): void

    • Parameters

      • spr: VisibleSprite

      Returns void

Returns

Example

const sprite = new VisibleSprite();
avCvs.removeSprite(sprite);

Accessors

activeSprite

Methods

Private #pause

Private #render

Private #updateRenderTime

captureImage

captureStream

createCombinator

  • createCombinator(opts?): Promise<Combinator>

  • 创建一个视频合成器 Combinator 实例，用于将当前画布添加的 Sprite 导出为视频文件流

    Parameters

    • opts: ICombinatorOpts = {}

      创建 Combinator 的可选参数

    Returns Promise<Combinator>

    Throws

    如果没有添加素材，会抛出错误

    Example

    avCvs.createCombinator().output() // => ReadableStream

    See

    视频剪辑

destroy

pause

play

  • play(opts): void

  • 每 33ms 更新一次画布，绘制已添加的 Sprite

    Parameters

    • opts: {
          end?: number;
          playbackRate?: number;
          start: number;
      }

      播放选项

      • Optional end?: number

        结束播放的时间（单位：微秒）。如果未指定，则播放到最后一个 Sprite 的结束时间

      • Optional playbackRate?: number

        播放速率。1 表示正常速度，2 表示两倍速度，0.5 表示半速等。如果未指定，则默认为 1

      • start: number

        开始播放的时间（单位：微秒）

    Returns void

    Throws

    如果开始时间大于等于结束时间或小于 0，则抛出错误

previewFrame

Settings

Member Visibility

Theme

On This Page

constructor#audioCtx#captureAudioDest#clears#cvsCtx#cvsEl#destroyed#evtTool#opts#playState#playingAudioCache#renderTime#sprMapAudioNode#spriteManager#stopRenderaddSpriteonremoveSpriteactiveSprite#pause#render#updateRenderTimecaptureImagecaptureStreamcreateCombinatordestroypauseplaypreviewFrame