Codecbox.js is a pure javascript library providing fine-grained APIs for video/audio processing (currently only decoding is supported). Codecbox.js is based on FFmpeg and related libraries, which are compiled by emscripten into wasm(asm.js is also possible). Codecbox.js should run reasonably well in browsers with web worker and wasm support.
View the demo page.
Currently codecbox.js is only provided as source code, you have to build it yourself.
You need a Linux or similar system to build codecbox.js.
-
Install emscripten, the C/C++ to wasm/asm.js comipler. Node.js should be installed as well.
-
Install grunt, the build runner for JS. For short, run
npm install -g grunt-cli
. -
Clone codecbox.js repostory (suppose cloned to
codecbox.js
dir). -
Go to
codecbox.js
dir in a terminal, execute commandnpm install
. Do the following steps in this dir as well. -
Execute command
grunt init
. This clones repos of ffmpeg and its external libraries (including x264, openh264, libvpx, libopus, lame, and zlib), so make sure you have good internet connection.git may fail to clone some repo due to temporal network issues, if so you may repeat
grunt init --force
multiple times until all repos above are cloned intobuild/<lib_name>
dir.This project try to build the latest master branch of these libraries. If you want to stick to specific versions, go to
build/<lib_name>
and checkout manually. You may also want to adjust and apply patches inpatch
dir -- currently (2019-12-31) no patch is required. -
Execute command
grunt build
. This should compile ffmpeg etc. and producescodecbox.js
andcodecbox.wasm
insrc
dir. -
Load
src/demo-player.html
and try to play a media file (most common audio/video formats should be fine). This demo uses ffmpeg to decode media files, and renders video frames via HTML Canvas, and plays sound via Web Audio API.
You can customize the build of ffmpeg. Open file Gruntfile.js
, and edit
ffDecoders
, ffDemuxers
, ffParsers
, ffEncoders
, ffMuxers
and ffFilters
to select components of ffmpeg.
You may also toggle comment of the following 2 lines to enable full ffmpeg build:
configure: ffmpegCustomConfig,
//configure: ffmpegFullConfig,
Currently the full ffmpeg build includes all its buildin components, as well as external libraries. Default custom build also include these external libraries.
Currently codecbox.js
exposes a class Module.CodecBoxDecoder
for video/audio decoding. See src/CodecBoxDecoder.h
for its API. Note that C++ methods get_XXX()/set_XXX()
are mapped to JS properties XXX
. See also src/codecbox-decoder-worker.js
for its usage. We plan to add video/audio encoding feature later on.
A lot of build settings are borrowed from the videoconverter.js project.