# Problems with capturing webm using CCapture.js library

**URL:** <https://discourse.processing.org/t/problems-with-capturing-webm-using-ccapture-js-library/44965>\
**Category:** Libraries\
**Created:** [August 20, 2024, 10:24am UTC](https://discourse.processing.org/t/problems-with-capturing-webm-using-ccapture-js-library/44965 "2024-08-20T10:24:21Z")\
**Posts on this page:** 2\
**Page:** 1

<div class="post-metadata">

**Author:** ![J\_Silva](https://avatars.discourse-cdn.com/v4/letter/j/3d9bf3/32.png) [@J\_Silva](https://discourse.processing.org/u/J_Silva)\
**Post date:** [August 20, 2024, 10:24am UTC](https://discourse.processing.org/t/problems-with-capturing-webm-using-ccapture-js-library/44965/1 "2024-08-20T10:24:21Z")

</div>

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](https://github.com/spite/ccapture.js/tree/master/src) 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:

```auto
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');
    }
  }
}

```

---

<div class="post-metadata">

**Author:** ![svan](https://avatars.discourse-cdn.com/v4/letter/s/82dd89/32.png) [@svan](https://discourse.processing.org/u/svan)\
**Post date:** [August 20, 2024, 4:19pm UTC](https://discourse.processing.org/t/problems-with-capturing-webm-using-ccapture-js-library/44965/2 "2024-08-20T16:19:34Z")

</div>

Have you seen this reference: [https://peterbeshai.com/blog/2018-10-28-p5js-ccapture/](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:

```auto
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](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.