Search the Community

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!

Has anyone tried using Ccapture.js with Pixi? I tried but it seems to just stop the animation and nothing gets captured. I got it animating now but the .webm video is just showing black. var renderer = PIXI.autoDetectRenderer(800, 600,{ backgroundColor : 0x1099bb, view: document.getElementById("view") }); // create the root of the scene graph var stage = new PIXI.Container(); var style = { fontFamily : 'Arial', fontSize : '36px', fontStyle : 'italic', fontWeight : 'bold', fill : '#F7EDCA', stroke : '#4a1850', strokeThickness : 5, dropShadow : true, dropShadowColor : '#000000', dropShadowAngle : Math.PI / 6, dropShadowDistance : 6, wordWrap : false, wordWrapWidth : 440 }; // var richText = new PIXI.Text('Rich text with a lot of options and across multiple lines',style); // richText.x = 30; // richText.y = 180; //stage.addChild(richText); var yincr = 0; for (var i = 0; i < 200; i++) { yincr = yincr + 40; var richText = new PIXI.Text('Rich text with a lot of options and across multiple lines',style); richText.x = 30; richText.y = yincr; stage.addChild(richText); } // Create a capturer that exports a WebM video var capturer = new CCapture({ format: 'webm', framerate: 60, verbose: true } ); capturer.start(); // start animating animate(); function animate() { requestAnimationFrame(animate); capturer.capture(document.getElementById("view")); stage.position.y -= 1; // render the root container renderer.render(stage); if(stage.position.y == -10){ capturer.stop(); // default save, will download automatically a file called {name}.extension (webm/gif/tar) capturer.save(); return; } }