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

This repository profile is provided by osrepos.com, an open source repository discovery platform.

Source: osrepos.com
Repository profile: https://osrepos.com/repo/trevorsundberg-h264-mp4-encoder
Generated for open source discovery and AI-assisted research.

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.

GitHub: https://github.com/TrevorSundberg/h264-mp4-encoder
OSRepos URL: https://osrepos.com/repo/trevorsundberg-h264-mp4-encoder

## 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.

## Topics

- C++
- WebAssembly
- JavaScript
- Node.js
- Video Encoding
- MP4
- H264
- Web Development

## Repository Information

Last analyzed by OSRepos: Mon May 25 2026 08:21:48 GMT+0100 (Western European Summer Time)
Detail views: 6
GitHub clicks: 13

## Safety Notice

OSRepos shares public repositories for knowledge and discovery only. Review source code, dependencies, licenses, and security implications before running or installing anything.

## Content

## 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:

bash
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:

js
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:

html
<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](https://gifygram.com), an animation site built using this encoder.

## Links

*   [GitHub Repository](https://github.com/TrevorSundberg/h264-mp4-encoder)
*   [Live Demo](https://trevorsundberg.github.io/h264-mp4-encoder/)
*   [Gifygram (Example Application)](https://gifygram.com)