Mp4Maker

Based on mp4-muxer , this project provide a straight forward way to encode a MP4 file , frame by frame, directly in the browser on the client-side using WebCodecs.

You can install the dependancies with this command :

npm install mp4maker

The project contains only 2 classes : Mp4Maker and Mp4Config.

Mp4Config is an object that describe the properties of the output mp4.

    public width: number;
    public height: number;
    public fps: number = 30;
    public audio: boolean = false;
    public audioSamplerate: number = 44100;
    public nbAudioChannel: number = 1;
    public videoBitrate: number = 1e6;
    public audioBitrate: number = 128000;
    public fileName: string = "output.mp4";
    
    //--------used with fastEncode-----------
    public fastEncodingBufferLimit: number = 5; 
    //the maximum difference between the frame sent to VideoEncoder and the frame really encoded
    //you may use a lower value if you encode with a very high resolution like 4k 
    //---------------------------------------
    
    public get audioFrameBufferLength(): number {
        return this.audioSamplerate / this.fps;
    }  

Mp4Maker contains only 4 methods :

public init(config: Mp4Config) {
   //setup and initialize Muxer, VideoEncoder and AudioEncoder (if requird)
}

public encodeFrame(frame: { video: ImageBitmap , audio?: Float32Array[] }){
    
     //frame.video : the current video-frame shaped as ImageBitmap 
     //frame.audio : an array of Float32Array. Each Float32Array represents an audio channel.
     //              the length of each Float32Array must equal mp4config.audioFrameBufferLength

}

public finish(){
    //stop the encoder and save the video as an MP4 file
}

//----------

public fastEncode(nbFrame: number, createFrame: (frameId: number) => Promise<{ video: ImageBitmap, audio?: Float32Array[] }>) {
    //use this method if you want to update the encoding process faster than requestAnimationFrame
    
    //nbFrame : the duration , in frame, of the video. 
    //createFrame: a function that return an object {video:ImageBitmap,audio?:Float32Array[]} 
    //             that represent the current frame to encode
    
    //the process will call createFrame(frameId) then call encodeFrame until frameId != nbFrame
    //when frameId === nbFrame, call finish 
    
    //it also ensure that VideoEncoder cannot be saturated by data during the process and create 
    //some "breathing" to let VideoEncoder the time to work efficiently and never be overbusy
}

check Example1.ts to see a complete example that expose how to encode a canvas-movie frame by frame with an audiotrack containing a basic generated sin wave

I added a second example that show how to use Mp4Maker.fastEncode

Demo : https://mp4maker-fastencode.netlify.app/