Search code examples
javascripthtmlhtml5-canvasvideo-capturewebm

CCapture.js webm video blacked out

I've been trying to record a video of an HTML Canvas animation using the CCapture.js project. Specifically, it has a webm capture option which uses whammy.js under the hood. I've tinkered with many of the parameters, but so far I've only had it output a video of the correct length, but without any of the canvas elements - it just looks black.

Here is a jsfiddle illustrating the issue. It creates an animation and records 2 seconds, then saves/downloads the webm output.

Here is the CCapture setup I've got in the jsfiddle:

capturer = new CCapture({
  display: true,
  framerate: 30,
  format: 'webm',
  verbose: true,
});

// start capture
capturer.start();

// end capture and save
setTimeout(function() {
  capturer.stop();
  capturer.save();
}, 2000);
Solution

  • Turns out it was a bug in Whammy.js, an issue with parsing webp. After applying the fix, it is recording correctly again!