h264-mp4-encoder: H264 and MP4 Encoding for Web and Node.js

h264-mp4-encoder: H264 and MP4 Encoding for Web and Node.js

Summary

The `h264-mp4-encoder` project provides a powerful solution for encoding H264 video and outputting it as an MP4 file directly within web browsers using WebAssembly or in Node.js environments. It leverages `minih264` and `libmp4v2` to offer efficient video creation, making it ideal for applications requiring dynamic video generation from sources like the HTML5 Canvas. This tool simplifies the process of integrating video encoding capabilities into web-based projects.

Repository Info

Updated on May 25, 2026
View on GitHub

Tags

C++WebAssemblyJavaScriptNode.jsVideo EncodingMP4H264Web Development

Click on any tag to explore related repositories

Introduction

The h264-mp4-encoder is an innovative GitHub repository that brings H264 video encoding and MP4 output capabilities directly to the web and Node.js environments. Built with WebAssembly, it allows developers to generate MP4 videos efficiently, even from sources like the HTML5 Canvas. This project is particularly useful for applications requiring on-the-fly video creation without server-side processing.

Installation

To get started with h264-mp4-encoder, you can install it via npm:

npm install h264-mp4-encoder

Examples

The library is designed for ease of use, whether you're working with JavaScript, TypeScript, or directly in the browser.

Basic Usage Example

Here's a fundamental example demonstrating how to initialize the encoder, add a frame, and finalize the video:

import * as HME from "h264-mp4-encoder";

HME.createH264MP4Encoder().then(encoder => {
    // Must be a multiple of 2.
    encoder.width = 100;
    encoder.height = 100;
    encoder.initialize();

    // Add a single gray frame, the alpha is ignored.
    encoder.addFrameRgba(new Uint8Array(encoder.width * encoder.height * 4).fill(128));

    // For canvas:
    // encoder.addFrameRgba(ctx.getImageData(0, 0, encoder.width * encoder.height).data);

    encoder.finalize();
    const uint8Array = encoder.FS.readFile(encoder.outputFilename);
    console.log(uint8Array);
    encoder.delete();
});

For web environments, you can include the script directly:

<script src="https://unpkg.com/h264-mp4-encoder/embuild/dist/h264-mp4-encoder.web.js"></script>

Why Use It

The h264-mp4-encoder stands out by enabling client-side video encoding, reducing the need for server resources and improving user experience. Its use of WebAssembly ensures high performance, making it suitable for real-time applications or scenarios where users generate content directly in their browsers. This capability is particularly powerful for web applications that need to create animations, screen recordings, or dynamic video content from HTML5 Canvas elements. An excellent example of its application is Gifygram, an animation site built using this encoder.

Links