Encode and decode mp4 frames in the browser, streaming
npm install modern-mp4``shell
npm i modern-mp4
Usage
$3
`ts
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))
`$3
`ts
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))
`$3
`ts
import { decode } from 'modern-mp4'const infoWithFrames = await decode({
// string | Blob | BufferSource | Array | readableStream
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)
``