Record video from PIXI canvas with CCapture.js

[martiniti]

Hey guys!

I'm stuck with one task, maybe someone has experience to help with it.

For recording video I using CCapture.js, but when I start it everything stops with no errors.

My basic code is:

const
	videoContainer = document.getElementById('videoContainer');	
	vw = 1280,
  	vh = 720,
  	videoUrl = 'assets/video/landscape.mp4';

PIXI.settings.RESOLUTION = 2;

app = new PIXI.Application({
  width: vw,
  height: vh,
  backgroundColor: bgColor,
});

const videoBg = PIXI.Texture.from(videoUrl);
const videoSprite = new PIXI.Sprite(videoBg);
const videoControler = videoSprite._texture.baseTexture.resource.source;

videoContainer.appendChild(app.view);

let capturer = new CCapture( { format: 'webm' } );

let n = 0;

app.ticker.add(() => {

	if(n == 0){
		capturer.start();
	}

	capturer.capture(app.view);

	if(videoControler.currentTime >= videoControler.duration){

		capturer.stop();

		capturer.save();

		app.ticker.destroy();

	}

	n += 1;

});

 

Also I created some example and you can see it stops at the beginning too: 

https://codepen.io/fjtwmjzf-the-lessful/pen/zYZJwvQ

 

I would be grateful for any help!

[ivan.popelyshev]

Does CCapture use media stream?

[martiniti]

To be honest, I don’t know. Just hope it does.

I used the example below and it working good, so I see no problem to capture canvas in my case

https://codepen.io/adkanojia/pen/EZJvJL

[martiniti]

The reason why I am trying to use CCapture.js is because I want to keep video in a good quality with 60 FPS.

I also try to record with MediaRecorder but result was with low quality and freezes. 

[martiniti]

Hey guys!

Here is a solution for this question:

function recordVideoWithCCapture(){

   const videoContainer = document.getElementById('recordContainer');

   // Modern
   let capturer = null;

   const isFirefox = navigator.userAgent.toLowerCase().indexOf('firefox') > -1;

   const options = {
      FirefoxFramerate: 120,
      FirefoxQuality: 100,
      ChromeFramerate: 30,
      ChromeQuality: 99.9,
   }

   function initRecording(){
      capturer = new CCapture( {
         //verbose: true, // print info to console
         display: true, // display record info
         //motionBlurFrames: 10, // blur, problem with time
         framerate: isFirefox ? options.FirefoxFramerate : options.ChromeFramerate,
         quality: isFirefox ? options.FirefoxQuality : options.ChromeQuality, // (99.9 - webm)
         format: isFirefox ? 'webm-mediarecorder' : 'webm', //'webm'
         // timeLimit: 0, //
         // startFrom: 0, //in second
      } );
   }

   function startRecording(){
      initRecording();
      capturer.start();
   }

   function stopRecording(){
      capturer.stop();
      capturer.save();
   }

   videoContainer.innerHTML = "";

   let vw = videoContainer.parentElement.offsetWidth;
   let vh = videoContainer.parentElement.offsetHeight;
   let videoUrl = 'path/to/your_video.mp4';


   app = new PIXI.Application({
      width: vw, height: vh, backgroundColor: 0x1099bb, resolution: window.devicePixelRatio || 1,
   });

   videoContainer.appendChild(app.view);

   const renderer = PIXI.autoDetectRenderer({ width: vw, height: vh, resolution: 2 });

   renderer.view.style.width = `${vw}px`;
   renderer.view.style.height = `${vh}px`;

   // create the root of the scene graph
   const stage = new PIXI.Container();

   app.stage.addChild(stage);

   // create a video texture from a path
   const texture = PIXI.Texture.from(videoUrl);

   // create a new Sprite using the video texture (yes it's that easy)
   const videoSprite = new PIXI.Sprite(texture);

   videoSprite.width = vw;
   videoSprite.height = vh;

   stage.addChild(videoSprite);

   const videoControler = videoSprite._texture.baseTexture.resource.source;

   videoSprite._texture.baseTexture.resource.source.loop = true;

   animate();

   startRecording();

   function animate(i){

      let currentTime = 0;

      if(isFirefox){
         currentTime = videoControler.currentTime *  options.FirefoxFramerate/30;
      } else {
         currentTime = videoControler.currentTime *  options.ChromeFramerate/15;
      }

      if (currentTime >= videoControler.duration) {

         stopRecording();

         // Clean up WebGL memory
         if(app){
            app.destroy();
         }

         videoContainer.innerHTML = '';

      } else {

         // render the stage
         renderer.render(stage);

         requestAnimationFrame(animate);

         /* Record Video */
         if( capturer ) capturer.capture( renderer.view );

      }

   }

}

 

[hulkyuan]

thx man.this is really helpful

[hulkyuan]

On 6/10/2021 at 6:20 PM, martiniti said:

The reason why I am trying to use CCapture.js is because I want to keep video in a good quality with 60 FPS.

I also try to record with MediaRecorder but result was with low quality and freezes. 

i try your code ,and the webM video play very fast.like video play 10 times fast in the record video .any suggestion?

[hulkyuan]

after 1 week trial found this solution for people who want sync video to framerate.hope that would be helpful

https://github.com/spite/ccapture.js/pull/60