Introducing h264-mp4-encoder
Encode directly to H264 and ouput as an MP4 in node or on the web with WebAssembly! Works with the HTML5 Canvas :)
See The Simple Demo or checkout the animation site it was designed for: Gifygram!
npm install h264-mp4-encoder
Example
Web:
JavaScript:
const HME = ;
TypeScript:
;
Dynamic Import / Webpack:
;// To only import the type in TypeScript:;
Example:
HME
You can also use await
:
const encoder = await HME;
Use with Webpack
When using this library with Webpack to package onto a browser environment it will report an error because it cannot resolve "fs" which is used by Emscripten's node implementation. To fix this add this to your webpack.config.js
:
"node": ,
API
/** Construct the H264MP4Encoder. Waits for the WASM to complete loading before returning. */;
How does it work?
This library brings together the public domain minih264 H264 encoder, as well as the MPL 1.1 licenced libmp4v2 to write the H264 NAL unit data into an MP4 file. Both of these are compiled in Emscripten within a Docker image and Webpacked to create easily importable modules. This repo uses submodules that are forks of those two libraries with changes for Emscripten (and to comply with the MPL 1.1 license).
Where is the WebAssembly?
To make packaging considerably easier, I built with Emscripten's -s SINGLE_FILE=1
which base64 encodes the wasm inside the JavaScript file. You're welcome to remove this option to get a wasm file, but you'll need to handle Webpack importing as well as the locateFile
within the Emscripten Module object.
Building on Ubuntu
You must have docker installed, however all other depdendencies for building for node/web are within the Docker container).
./build.sh
To run the C++ code natively (not using Emscripten) you must have cmake and a compiler:
git submodule update --init --recursivemkdir buildcd buildcmake ..cmake --build --parallel .