webm.js

JavaScript WebM converter

Github stars Tracking Chart


What's this?

webm.js is a simple one-page application that allows you to convert videos to WebM format right into your browser, without any plugins or server-side involved. It is built upon FFmpeg, libvpx and libopus which were ported to JavaScript using Emscripten. Since WebM is part of HTML5 stack, why can't we create one without leaving the browser?

Try it

Latest build of webm.js is available here. NOTE: built-in video player uses software decoding in order to play any video it can encode and thus experimental and slow.

Tested browsers:

  • Firefox: fast enough to encode several minutes of SD/HD video within half of hour
  • Chrome: a bit slower than FF but still good
  • Edge: a bit slower than FF but still good (make sure to enable asm.js in about:flags)
  • IE11: several times slower than Edge and will fail on big files but otherwise works

Take also look at demo and screenshots.

Is it fast?

Well, partly. With the help of asm.js, generic code compiled by Emscripten is almost as fast as native, but JavaScript doesn't have access to advanced x86 instructions like SSE and codecs use them far and wide so we have some performance degradation here. Not that drastical though—I had numbers like 8x worse than native@corei7-avx for libvpx-vp8 and ~4 fps (single thread, SD, medium settings). Low-level multithreading is also not available in stable versions of browsers, but luckily we can hack it up by splitting video into chunks and encoding them in separate workers.

To get you some concrete numbers: it takes ~5m25s to encode sample clip (860x484, 1m9s) with default settings (2pass, -threads 4 -c:v libvpx -b:v 885k -speed 1 -auto-alt-ref 1 -lag-in-frames 25 -c:a libopus -b:a 64k) at i7 3820. Same encode with native FFmpeg/libvpx takes ~40s. Hopefully we will improve that performance with WebAssembly and SIMD.js, stay tuned!

What about quality?

Currently only VP8+Opus combination is supported. Opus is better than Vorbis (and almost any other lossy audio codec) for the full range of bitrates and encoder is blazingly fast. Unfortunately, due to lack of SIMD, libvpx-vp9 encoder is rather impractical in browser and VP8 is significantly worse than VP9. Though JavaScript SIMD API is part of ES7 proposal and already supported by Firefox Nightly so I'm actively looking into this.

Trying to compensate the use of outdated codec, two-pass encoding with speed=1 and lag-in-frames=25 is used. Splitting video in parts creates additional keyframes and therefore loses effeciency a bit, but the difference should be negligible for the g=128 currently used. It is also possible to specify speed=0 or quality=best and other FFmpeg/libvpx options if you're trying to achieve the maximal quality.

How to start hacking?

Build your own version of webm.js is as simple as clone the repo and run

npm i && npm run release

inside. Host the dist directory with your favourite HTTP server or use npm start to start the development server at 8080 port.

I want to use it locally and don't have node.js

No problem! Just download webm.js-gh-pages.zip, unpack it and open index.html with Firefox. Everything should work right away. Other browsers will require local HTTP server, run python -mSimpleHTTPServer in unpacked directory if in doubt.

It's also perfectly possible to build browser extension, user script or even embed WebM encoder into your site. I haven't done anything in that direction yet, but let me know if you're interested.

License

webm.js own code, documentation, favicon and logo licensed under CC0, but the resulting build also includes the following libraries and assets:


webm.js - JavaScript WebM encoder

Written in 2015 by Kagami Hiiragi kagami@genshiken.org

To the extent possible under law, the author(s) have dedicated all copyright and related and neighboring rights to this software to the public domain worldwide. This software is distributed without any warranty.

You should have received a copy of the CC0 Public Domain Dedication along with this software. If not, see http://creativecommons.org/publicdomain/zero/1.0/.

Main metrics

Overview
Name With OwnerKagami/webm.js
Primary LanguageJavaScript
Program languageHTML (Language Count: 2)
Platform
License:Creative Commons Zero v1.0 Universal
所有者活动
Created At2015-07-25 14:27:46
Pushed At2020-09-04 21:28:14
Last Commit At2019-07-21 19:43:56
Release Count0
用户参与
Stargazers Count457
Watchers Count14
Fork Count32
Commits Count197
Has Issues Enabled
Issues Count14
Issue Open Count9
Pull Requests Count0
Pull Requests Open Count2
Pull Requests Close Count0
项目设置
Has Wiki Enabled
Is Archived
Is Fork
Is Locked
Is Mirror
Is Private