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

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

• GitHub Repository
• Live Demo
• Gifygram (Example Application)