modern-mp4 v0.2.0

Install

npm i modern-mp4

# peerDependencies
npm i mp4box

Usage

Encode

import { encode } from 'modern-mp4'

const blob = await encode({
  width: 1280,
  height: 720,
  audio: false,
  frames: [
    // data: string | CanvasImageSource | VideoFrame | AudioData
    { data: '/example1.png', duration: 3000 },
    { data: '/example2.png', duration: 3000 },
  ],
})

window.open(URL.createObjectURL(blob))

Encoder

import { MP4Encoder } from 'modern-mp4'

const encoder = new MP4Encoder({
  width: 1280,
  height: 720,
  audio: false,
  framerate: 30,
})

await encoder.encode({
  data: '/example1.png',
  timestamp: 0,
  duration: 33,
})

await encoder.encode({
  data: '/example1.png',
  timestamp: 33,
  duration: 66,
})

const blob = await encoder.flush()

window.open(URL.createObjectURL(blob))

Decode

import { decode } from 'modern-mp4'

const infoWithFrames = await decode({
  // string | Blob | BufferSource | Array<BufferSource> | readableStream<BufferSource>
  data: './example.mp4',
  audio: false,
  // framerate: 10,
  // onInfo: info => console.log(info),
  // onFrame: frame => { console.log(frame) },
  // onProgress: (current, total) => console.log(`decode frame ${current}/${total}`),
})

console.log(infoWithFrames)