Problems with capturing webm using CCapture.js library

p5.js Libraries
1

Hi. I have a small code that rotates a textured sphere. My goal is to record this sketch. I tried the saveGif() function but it did not give a smooth result; so, I am trying the CCapture.js library because it’s said to be recording much faster. When I run this sketch, the sphere rotates correctly, but when I hit the spacebar to start recording, the sphere stops rotating and I get in the console:

Step is set to 33.333333333333336ms
Capturer start
Full Frame! 1
Capturing frame…
Frame: 1 0

I suspect I am not referencing the canvas id correctly.
Any suggestion?

Code:

let angleX = 0;
let angleY = 0;
let counter = 0;
let img;
let capturer;
let capturing = false;

function preload() {
  img = loadImage('park in paris.png');
}

function setup() {
	canvas = createCanvas(1280, 720, WEBGL);
  canvas.GL.getExtension("OES_standard_derivatives");
  //createCanvas(1280, 720, WEBGL);
  capturer = new CCapture({
    format: 'webm',
    framerate: 30,
    verbose: true
  });
	noStroke();
}

function draw() {
  background(0);
  camera(0, 0, 0, 0, 0, 1);
  rotateX(angleX);
  rotateY(angleY);
  texture(img);
  sphere(5000);
  angleY += 0.001; 
  if (capturing) {
    //capturer.capture(canvas);
		capturer.capture(document.getElementById('defaultCanvas0'));
		counter += 0.001;
    console.log('Capturing frame...');
  }
  if (counter >= HALF_PI) {
    capturer.stop();
		console.log('stopped');
    capturer.save();
    capturing = false;
    console.log('recording saved'); 
    //noLoop(); 
  }
}

function keyPressed() {
  if (key === ' ') { 
    if (!capturing) {
      capturer.start(); 
      capturing = true; 
      //console.log('Recording started');
    }
  }
}
2

Have you seen this reference: https://peterbeshai.com/blog/2018-10-28-p5js-ccapture/

I have no experience with this, but it appears that a sequence of still images are captured and then ‘stitched together’ with ffmpeg. Are you able to save still images? I tried your code and I am unable to save anything and don’t get the same console output that you posted (first line only).

Does this test work on your system:

let fps = 60;
let capturer = new CCapture({ 
    format: 'png',
    framerate: fps
  })
let canvasElement

function setup() {
  frameRate(fps)
  canvasElement = createCanvas(800, 800, WEBGL)
  capturer.start();
  
  background(51)
}

function draw() {
  fill(255)
  noStroke()
  ellipse(random(width), random(height), random(10,40))
  
  capturer.capture(canvasElement.elt)
}

function mousePressed() {
    capturer.save()
}

You should get a tar file placed in your Downloads folder (macos) with a series of .png images. I haven’t tried ‘stitching’ them together with ffmpeg yet.

Addendum:
1.Install ‘ffmpeg’ with ‘brew’
2.Follow the instructions for making an .mp4 and .gif found here:
https://editor.p5js.org/jnsjknn/sketches/B1O8DOqZV
Use these commands from Terminal to create .mp4 and .gif:
ffmpeg -r 60 -f image2 -s 200x200 -i "%07d.png" -vcodec libx264 -crf 17 -pix_fmt yuv420p output.mp4
ffmpeg -i output.mp4 -pix_fmt rgb24 -s 200x200 output4.gif
3.Use an online .gif player to see your creation.

There is also a .gif animation app in Processings Examples, but I had better luck with the online one.

2 Likes