canvas-capture

super basic https://github.com/spite/ccapture.js alternative.

• overrides window.requestAnimationFrame()
• sends canvas contents as data url to server
• server saves stills to disk

still kind of WIP (will extend this as needed over time)

example 1: basic

1const capture = new CanvasCapture(
2	canvasElem,
3	{
4		fps: 30,
5		serverUrl: 'http://localhost:3000',
6
7		// optional:
8		format: 'jpeg', // or 'png'
9		quality: 0.9,
10		callback: () => Promise.resolve(), // on every frame
11		name: 'outputSubdirName',
12	}
13);
14capture.start();
15// ...
16capture.stop();

example 2: keep capture and video playback in sync

1const numFramesToCapture = 200;
2const capture = new CanvasCapture(
3	canvasElem,
4	{
5		fps: 30,
6		serverUrl: 'http://localhost:3000',
7		callback: () => {
8			location.hash = `#---RECORDING-(${capture.frameCounter})---`;
9
10			// wait for seeking to finish
11			const p1 = new Promise((resolve) => {
12				video1.onseeked = resolve;
13			});
14			const p2 = new Promise((resolve) => {
15				video2.onseeked = resolve;
16			});
17			// `currentTime` is in seconds
18			const step = capture.timeStep / 1000;
19			video1.currentTime += step;
20			video2.currentTime += step;
21
22			return Promise.all([p1, p2]).then(() => {
23				if (capture.frameCounter === numFramesToCapture) {
24					capture.stop();
25					location.hash = '';
26
27					// resume regular playback
28					video1.play();
29					video2.play();
30				}
31			});
32		}
33	}
34);
35
36video1.pause();
37video2.pause();
38capture.start();

server

1node server.js

video from stills

for example (but up to you really):

1ffmpeg -y -r 30 -pattern_type glob -i 'output/*.png' -c:v libx264 -vf fps=30 -pix_fmt yuv420p out.mp4