videoconverter.js - Convert Videos In Your Web Browser

videoconverter.js is a program that lets you process videos in your browser.

View a Demonstration View a Sample Application
or view code on github

About [#]

Videoconverter.js was originally conceived and implemented for a project in Node Knockout 2013 called Video Funhouse.

The idea for the application was to try and convert any video file into another video format, while allowing filters to be applied to the video – all inside of the browser, without uploading anything. And to build it in a single weekend.

This is a huge task, and we knew that existing libraries like FFmpeg would do a great job. But, FFmpeg is not written in JavaScript. Luckily, there is a project called Emscripten, which is an LLVM to JavaScript compiler, so we were able to compile FFmpeg into JavaScript.

Here is a video demonstrating the sample application we made with this library over the weekend:

FAQ [#]

Why?

Why would you compile FFmpeg into JavaScript? We were curious if it would work, and it seemed like a fun project.

Who?

Most of the grunt work has been done by @bgrins and @aaronm67.

How Big is the JavaScript File?

The ffmpeg.js file is around 24.1 MB or so. It ends up being around 6.1 MB gzipped.

The ffmpeg-all-codecs.js file is around 27.5 MB or so. It ends up being around 6.9 MB gzipped.

Should I Use This?

Feel free to use this program, but keep in mind the following things:

FFmpeg has license terms that you must abide by. The default build in this project is LGPL 2.1, but including different codecs or build parameters when building it yourself can change this.
It is quite a large JavaScript file, and it will take a long time to load and evaluate.
We haven't yet thoroughly tested the performance - use it at your own risk.

Pontential Uses [#]

Audio / Video Editing and Conversion

This is what we are doing in the browser with https://video-funhouse.herokuapp.com. Obviously, this could be expanded and optimized. It is quite likely to bump up against performance bottlenecks - I wrote about some of the issues we bumped into if you are interested in more information.

Also, it may be possible to make this run on node, and distribute this as an npm module, to make setting up video conversions on a server or desktop much easier.

Benchmarking

It would be interesting to build a benchmark to compare performance of such a large application across different browsers, node.js, and native performance.

Processing Additional Codecs

This isn't yet compiled with support for additional codecs like zlib, x264, libvpx, etc. It should be possible to do.

Contributing [#]

Want to help with this project? If you are interested, ping @bgrins or @aaronm67 on twitter or open an issue / pull request at https://github.com/bgrins/videoconverter.js.

Here are some ideas of things we'd like to do, and could use some help with:

Have some experience with benchmarks or performance testing? We would like to benchmark FFmpeg performance in browser / node / native.
Know a bunch about Emscripten / asm.js, or want to learn more? There should be ways to tweak the build script and squeeze out some extra performance or trim down the size.
Good at building programs and linking libraries together? It would be cool to build in support for libraries like zlib, x264, and libvpx.

Usage Documentation [#]

To see the code used in the terminal demo on this site, see terminal.js and worker.js in the repository.

The only function exposed from the library is ffmpeg_run. It can be described by the following interface:

var results = ffmpeg_run({
  arguments: [string],
  files: [
    {
      data: UInt8Array,
      name: string
    }
  ]
});

// results is an Array of { data: UInt8Array, name: string }
results.forEach(function(file) {
  console.log("File recieved", file.name, file.data);
});

Calling from a Worker

Note: while ffmpeg.js could be loaded directly from a <script> tag, it should be loaded from a Web Worker to prevent blocking the main thread.

To load ffmpeg.js inside of a web worker, we just need to call importScripts('ffmpeg.js'); from inside the worker. Following is a sample worker. Or, click to view a slightly bigger sample worker implementation used in the demo

importScripts('ffmpeg.js');

function print(text) {
  postMessage({
    'type' : 'stdout',
    'data' : text
  });
}

onmessage = function(event) {
  var module = {
    files: event.data.files || [],
    arguments: event.data.arguments || [],
    print: print,
    printErr: print
  };
  postMessage({
    'type' : 'start',
    'data' : module.arguments
  });
  var result = ffmpeg_run(module);
  postMessage({
    'type' : 'done',
    'data' : result
  });
};

postMessage({
  'type' : 'ready'
});

Then, from your page start up the worker:

var worker = new Worker("worker.js");
worker.onmessage = function (event) {
  var message = event.data;
  if (message.type == "ready") {
    outputElement.textContent = "Loaded";
    worker.postMessage({
      type: 'command',
      arguments: ['-help']
    })
  } else if (message.type == "stdout") {
    outputElement.textContent += message.data + "\n";
  } else if (message.type == "start") {
    outputElement.textContent = "Worker has received command\n";
  }
};

Converting to and from UInt8Array

OK, but how do you get a UInt8Array from a file? There are a few different ways to do this. If you want to read files from the user's computer, you could use a FileReader or FileReaderSync, and call readAsArrayBuffer. Here is a little wrapper for this functionality that allows drag/drop, file selection, and clipboard access: https://github.com/bgrins/filereader.js/. You could also fetch the data from the server, like so:

var sampleVideoData;
function retrieveSampleVideo() {
  var oReq = new XMLHttpRequest();
  oReq.open("GET", "bigbuckbunny.webm", true);
  oReq.responseType = "arraybuffer";

  oReq.onload = function (oEvent) {
    var arrayBuffer = oReq.response;
    if (arrayBuffer) {
      sampleVideoData = new Uint8Array(arrayBuffer);
    }
  };

  oReq.send(null);
}

And what can I do with the results? If you want to provide a download link or a preview of the output, you could convert it into a Blob using the Blob constructor, and create an objectURL. Something like this:

function getDownloadLink(fileData, fileName) {
  var a = document.createElement('a');
  a.download = fileName;
  var blob = new Blob([fileData]);
  var src = window.URL.createObjectURL(blob);
  a.href = src;
  a.textContent = 'Click here to download ' + fileName + "!";
  return a;
}

var result = ffmpeg_run(module);
result.forEach(function(file) {
  getDownloadLink(file.data, file.name);
});

Build Documentation [#]

Want to build the ffmpeg.js file for yourself? First, make sure you have Emscripten set up:

git clone [email protected]:kripken/emscripten.git

Depending on your system may need to also get the SDK to make sure Emscripten will work. The have documentation on their site about getting this to work.

Once this is all set up and emcc is on your path, you should be able to run:

git clone [email protected]:bgrins/videoconverter.js.git
cd videoconverter.js/build
./build_lgpl.sh