Class MP4Clip

MP4 素材，解析 MP4 文件，使用 MP4Clip.tick 按需解码指定时间的图像帧

可用于实现视频抽帧、生成缩略图、视频编辑等功能

Example

new MP4Clip((await fetch('<mp4 url>')).body)
new MP4Clip(mp4File.stream())

See

Implements

Constructors

constructor

Properties

#audioFrameFinder #audioSamples #decoderConf #destroyed #headerBoxPos #insId #localFile #log #meta #opts #parsedMatrix #thumbAborter #vfRotater #videoFrameFinder #videoSamples #volume ready tickInterceptor

Accessors

meta

Methods

clone destroy getFileHeaderBinData split splitTrack thumbnails tick

Constructors

constructor

Properties

Private #audioFrameFinder

#audioFrameFinder: null | AudioFrameFinder = null

Private #audioSamples

#audioSamples: ExtMP4Sample[] = []

Private #decoderConf

#decoderConf: {
    audio: null | AudioDecoderConfig;
    video: null | VideoDecoderConfig;
} = ...

Type declaration

  • audio: null | AudioDecoderConfig
  • video: null | VideoDecoderConfig

Private #destroyed

#destroyed: boolean = false

Private #headerBoxPos

#headerBoxPos: {
    size: number;
    start: number;
}[] = []

存储视频头（box: ftyp, moov）的二进制数据

Type declaration

  • size: number
  • start: number

Private #insId

#insId: number = ...

Private #localFile

#localFile: OTFile

Private #log

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

Type declaration

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

      • Parameters

        • Rest ...args: any[]

        Returns void

Private #meta

#meta: {
    audioChanCount: number;
    audioSampleRate: number;
    duration: number;
    height: number;
    width: number;
} = ...

Type declaration

  • audioChanCount: number
  • audioSampleRate: number
  • duration: number
  • height: number
  • width: number

Private #opts

#opts: IMP4ClipOpts = ...

Private #parsedMatrix

#parsedMatrix: {
    perspective: number;
    rotationDeg: number;
    rotationRad: number;
    scaleX: number;
    scaleY: number;
    translateX: number;
    translateY: number;
} = ...

存储视频平移旋转信息，目前只还原旋转

Type declaration

  • perspective: number
  • rotationDeg: number
  • rotationRad: number
  • scaleX: number
  • scaleY: number
  • translateX: number
  • translateY: number

Private #thumbAborter

#thumbAborter: AbortController = ...

Private #vfRotater

#vfRotater: ((vf) => null | VideoFrame) = ...

Type declaration

    • (vf): null | VideoFrame

    • Parameters

      • vf: null | VideoFrame

      Returns null | VideoFrame

Private #videoFrameFinder

#videoFrameFinder: null | VideoFrameFinder = null

Private #videoSamples

#videoSamples: ExtMP4Sample[] = []

Private #volume

#volume: number = 1

ready

ready: Promise<IClipMeta>

当素材准备完成，ready 会切换到 resolved 状态

tickInterceptor

tickInterceptor: (<T>(time, tickRet) => Promise<T>) = ...

拦截 MP4Clip.tick 方法返回的数据，用于对图像、音频数据二次处理

Type declaration

    • <T>(time, tickRet): Promise<T>

    • Type Parameters

      • T extends {
            audio: Float32Array<ArrayBufferLike>[];
            state: "success" | "done";
            video?: VideoFrame;
        }

      Parameters

      • time: number

        调用 tick 的时间

      • tickRet: T

        tick 返回的数据

      Returns Promise<T>

See

移除视频绿幕背景

Accessors

meta

  • get meta(): {
        audioChanCount: number;
        audioSampleRate: number;
        duration: number;
        height: number;
        width: number;
    }

  • 数据元数据

    Returns {
        audioChanCount: number;
        audioSampleRate: number;
        duration: number;
        height: number;
        width: number;
    }

    • audioChanCount: number
    • audioSampleRate: number
    • duration: number
    • height: number
    • width: number

Methods

clone

destroy

getFileHeaderBinData

  • getFileHeaderBinData(): Promise<ArrayBuffer>

  • 提供视频头（box: ftyp, moov）的二进制数据 使用任意 mp4 demxer 解析即可获得详细的视频信息 单元测试包含使用 mp4box.js 解析示例代码

    Returns Promise<ArrayBuffer>

split

splitTrack

thumbnails

  • thumbnails(imgWidth?, opts?): Promise<{
        img: Blob;
        ts: number;
    }[]>

  • 生成缩略图，默认每个关键帧生成一个 100px 宽度的缩略图。

    Parameters

    • imgWidth: number = 100

      缩略图宽度，默认 100

    • Optional opts: Partial<ThumbnailOpts>

      Partial

    Returns Promise<{
        img: Blob;
        ts: number;
    }[]>

    Promise<Array<{ ts: number; img: Blob }>>

tick

  • tick(time): Promise<{
        audio: Float32Array<ArrayBufferLike>[];
        state: "success" | "done";
        video?: VideoFrame;
    }>

  • 获取素材指定时刻的图像帧、音频数据

    Parameters

    • time: number

      微秒

    Returns Promise<{
        audio: Float32Array<ArrayBufferLike>[];
        state: "success" | "done";
        video?: VideoFrame;
    }>

Settings

Member Visibility

Theme

On This Page

constructor#audioFrameFinder#audioSamples#decoderConf#destroyed#headerBoxPos#insId#localFile#log#meta#opts#parsedMatrix#thumbAborter#vfRotater#videoFrameFinder#videoSamples#volumereadytickInterceptormetaclonedestroygetFileHeaderBinDatasplitsplitTrackthumbnailstick