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!

Hello, found this solution for creating video. but this result video is faster than runtime animation. thought that _alpha variable usage is strange, so tried milliseconds controls but not easy for me. in my opinion every 1000/fps milliseconds, to render and to capture are correct. but it makes more speedy video any advice? ps. i solved using CCapture. but video quality is not good. function record() { scene.getEngine().stopRenderLoop(); render() } function render() { requestAnimationFrame(function() { scene.render(); capturer.capture(scene.getEngine().getRenderingCanvas()); render(); }); }