wwwtyro / canvas-video-generator

Capture HTML5 canvas frames and render high quality video with FFMPEG.

canvas-video-generator

Capture HTML5 canvas frames and render high quality video with FFMPEG.

This module has two components:

• A server for collecting frames and rendering them to video
• A client library for sending frames to the server

The workflow is to start the server, then use the client library to send frames to the server and signal when the video is to be finalized.

Install

$ npm install -g canvas-video-generator

Step 1: Start the server.

Run cvg:

$ cvg

This will start a server listening on port 3172 that will store rendered videos in the current working directory and clean up any generated temp files.

Here's all the options:

$ cvg --help
usage: cvg [options]

options:
  -h --help:     This help
  -p --port:     Port to use [3172]
  -o --odir:     Directory to store final video in [current working directory]
  -n --noclean:  Do not clean up temporary files [false]

Step 2: Edit your HTML & Javascript to use the client.

First, include the client library:

<script src='http://localhost:3172/cvg.js'></script>

The cvg module has been added to the browser's global context.

Next, in your render loop, set up some logic to send frames to the server:

var count = 0;

function render() {

  // Draw on your canvas.

  // Send the current canvas contents to the server.
  cvg.addFrame(canvas);

  count++;

  if (count < 100) {
    requestAnimationFrame(render);
  } else {
    // Tell the server that we're done with this video. Render it with the filename 'example' (.mp4 will be appended).
    cvg.render('example');
  }
}

Note that you'll want to fix your canvas size to the resolution you want your video rendered at.

That's it. Watch your terminal to see the video rendering progress. cvg will tell you where to find it when it's done.

canvas-video-generator's Issues

Video Background Black

Hello,

I am converting canvas to video, everything worked great including the params. But when i try convert i am getting black background. Please help. Thank you!!

Multiple canvases [suggestion]

If I have multiple canvases on the page do I have to run server for each canvas?
It would be better to run one server which processes all canvases

Problems on Windows 10

I have tried to run the random boxes example on Windows 10, but get the following messages:
Canvas video generator server listening on port 3172.
Begining rendering of your video. This might take a long time...
events.js:167
throw er; // Unhandled 'error' event
^
Error: spawn ffmpeg ENOENT
at Process.ChildProcess._handle.onexit (internal/child_process.js:232:19)
at onErrorNT (internal/child_process.js:407:16)
at process._tickCallback (internal/process/next_tick.js:63:19)
Emitted 'error' event at:
at Process.ChildProcess._handle.onexit (internal/child_process.js:238:12)
at onErrorNT (internal/child_process.js:407:16)
at process._tickCallback (internal/process/next_tick.js:63:19)

Any help would be must appreciated - looks like a great app