duanyao / codecbox.js

video and audio codecs for javascript based on ffmpeg and asm.js

codecbox.js

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.

Build

You need a Linux or similar system to build codecbox.js.

1. Install emscripten, the C/C++ to wasm/asm.js comipler. Node.js should be installed as well.

2. Install grunt, the build runner for JS. For short, run npm install -g grunt-cli.

3. Clone codecbox.js repostory (suppose cloned to codecbox.js dir).

4. Go to codecbox.js dir in a terminal, execute command npm install. Do the following steps in this dir as well.

5. 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 into build/<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 in patch dir -- currently (2019-12-31) no patch is required.

6. Execute command grunt build. This should compile ffmpeg etc. and produces codecbox.js and codecbox.wasm in src dir.

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

Customization

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.

API

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.

Acknowledgement

A lot of build settings are borrowed from the videoconverter.js project.

codecbox.js's Issues

可否增加wasm

是否可以提供wasm的Demo

How to control video start time and end time

Hi @duanyao

Is there any possibility to control video properties like video start time or end time from worker js.

Unable to build codecBox.js

Hi @duanyao

I had followed your methods to build project as follows.

1. I have installed emscriptm package in linux

2. And then i had cloned the project and run npm install

3. Then i installed grunt npm module globally by using this command npm install grunt -g --save

4. Then i run command grunt init --force(because it was exited last time when running same command without -- force)

5. After running above command i got done message with some warning.

6. Next i executed grunt build command but shows warning in between process and finally it throws error like this

`

Running "exec:configure-x264" (exec) task

Failed with: Error: spawn /bin/sh ENOENT
at Process.ChildProcess._handle.onexit (internal/child_process.js:264:19)
at onErrorNT (internal/child_process.js:456:16)
at processTicksAndRejections (internal/process/task_queues.js:77:11) {
errno: 'ENOENT',
code: 'ENOENT',
syscall: 'spawn /bin/sh',
path: '/bin/sh',
spawnargs: [Array],
cmd: 'emconfigure ./configure --disable-thread --disable-asm --disable-opencl --host=i686-pc-linux-gnu --disable-cli --enable-shared --disable-gpl --prefix=/home/gokul/testingZone/codecbox.js/build/dist'
}
Warning: Task "exec:configure-x264" failed. Use --force to continue.

`
How to fix the above errors. Kindly provide steps to overcome this issue.

Next release

Hi @duanyao, thanks for this repo. when will you release the next update. I need to control the video start and end value while decode. That will be very useful for me to my project.

Options to controls video fps ?

Hi @duanyao ,

Is there any function to control video fps while decoding. If not there kindly share ideas to implement.

Npm module

It would be nice if an npm module could be provided for this repo.

WASM build

Providing a WebAssembly build or build steps would allow for a side-by-side comparison between asm and wasm. It would also provide better performance.

is possible to add chunks instead entire file?

how to pass chunks to fmpeg ?

Compile against latest Emscripten version

Video and audio not in sync

When playing files that have a long duration, the audio and video become out of sync.

Video controls

Is there support for playback controls, such as fastforward, rewind, etc?

Converting webm to mp4 (with audio)

Hi there,
I was using ffmpeg_all.js to convet webm to mp4 however the mp4 generated would be blank if there was audio.

I was wondering when converting to types like mp4 would be added to codecbox.js? Is there an eta?

thanks for this awesome project