{"name":"h264-mp4-encoder: H264 and MP4 Encoding for Web and Node.js","description":"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","url":"https://osrepos.com/repo/trevorsundberg-h264-mp4-encoder","source":"osrepos.com","sourceDescription":"This repository profile is provided by osrepos.com, an open source repository discovery platform.","repositoryProfile":"https://osrepos.com/repo/trevorsundberg-h264-mp4-encoder","generatedFor":"open source discovery and AI-assisted research","markdown":"https://osrepos.com/repo/trevorsundberg-h264-mp4-encoder.md","json":"https://osrepos.com/repo/trevorsundberg-h264-mp4-encoder.json","topics":["C++","WebAssembly","JavaScript","Node.js","Video Encoding","MP4","H264","Web Development"],"keywords":["C++","WebAssembly","JavaScript","Node.js","Video Encoding","MP4","H264","Web Development"],"stars":null,"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.","content":"## Introduction\n\nThe `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.\n\n## Installation\n\nTo get started with `h264-mp4-encoder`, you can install it via npm:\n\nbash\nnpm install h264-mp4-encoder\n\n\n## Examples\n\nThe library is designed for ease of use, whether you're working with JavaScript, TypeScript, or directly in the browser.\n\n### Basic Usage Example\n\nHere's a fundamental example demonstrating how to initialize the encoder, add a frame, and finalize the video:\n\njs\nimport * as HME from \"h264-mp4-encoder\";\n\nHME.createH264MP4Encoder().then(encoder => {\n    // Must be a multiple of 2.\n    encoder.width = 100;\n    encoder.height = 100;\n    encoder.initialize();\n\n    // Add a single gray frame, the alpha is ignored.\n    encoder.addFrameRgba(new Uint8Array(encoder.width * encoder.height * 4).fill(128));\n\n    // For canvas:\n    // encoder.addFrameRgba(ctx.getImageData(0, 0, encoder.width * encoder.height).data);\n\n    encoder.finalize();\n    const uint8Array = encoder.FS.readFile(encoder.outputFilename);\n    console.log(uint8Array);\n    encoder.delete();\n});\n\n\nFor web environments, you can include the script directly:\n\nhtml\n<script src=\"https://unpkg.com/h264-mp4-encoder/embuild/dist/h264-mp4-encoder.web.js\"></script>\n\n\n## Why Use It\n\nThe `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.\n\n## Links\n\n*   [GitHub Repository](https://github.com/TrevorSundberg/h264-mp4-encoder)\n*   [Live Demo](https://trevorsundberg.github.io/h264-mp4-encoder/)\n*   [Gifygram (Example Application)](https://gifygram.com)","metrics":{"detailViews":6,"githubClicks":13},"dates":{"published":null,"modified":"2026-05-25T07:21:48.000Z"}}