robincsamuel

looks great @swampthang and thanks for sharing the code I tried electron first and worked well. But I want to run it headless since it's a web app and the video generation happens in the backend.

Hey @swampthang I really wanted to thank you for posting all the information on the forum. I've been going through your post on the forum for a while. For creating the video, I'm using FFmpeg itself and yes, on a node.js environment. As of now, I'm running from command line, But I want to do this on an HTTP request, as a child process. phantomjs runner.js | ffmpeg -y -c:v png -f image2pipe -r 24 -i - -c:v libx264 -pix_fmt yuv420p -movflags +faststart output.mp4 This is how I render now in runner.js page.render('/dev/stdout', { format: "png" }); Do you know how I can input the images from `page.render` of phantom to FFmpeg? EDIT: I was able to solve the issue by piping the phantom process output to FFmpeg stdin.

Hey @OSUblake, Big thanks! That was it. It worked perfectly with @swampthang's code. Actually, I tried many ways like setInterval and all referring some tutorials related to phantomjs. But all those were messing up things in my case, and the onUpdate went well on chrome. Since a newbie, I wasn't aware of the animation progress method. I want headless browser because I'm doing the video conversion on the server side. Thanks everyone for helping out

HI @PointC I was following @swampthang on the GSAP forums for a while, and tried the options he said. I was able to export the video successfully using Electron Recorder. But it won't run headless, and what I need is a headless solution to export the video. So I ended up in phantomjs, which seems to work but with some issues as I mentioned above. When I don't set a frame rate (60 is the default I think), on phantomjs I get around 27fps, and since I was expecting 60fps, the animation on video was running faster. What's weird is, If I set fps to 24 using, TweenMax.ticker.fps(24); Then I got 11 fps on phantomjs and FFmpeg is expecting 24 in this case. So I don't think it's lack of performance on phantomjs, but something tricky with the ticks. Because whatever framerate I set, I get almost half the fps on phantomjs. Seems like phantomjs is working like `useFrames:true` mode. I was able to match it by time scaling to 0.2, but not sure how reliable it is. EDIT: I just tried with a 16fps setting, and got 5fps on phantom. And I forgot to mention, I'm capturing screens on 'onUpdate' event, so frame count is the number of times onupdate is triggered.

Hey Carl, Thanks for the quick response. Actually, I'm doing the same. It works well on chrome & firefox. But when it comes to phantomjs, the only thing that works is timescale.

I'm trying to export a timelineMax animation as mp4 video using phantomjs. Everything works fine, but the animation speed is different on phantomjs. It's running too fast, 10-second animation completes in 2 seconds. If I timescale to 0.2, it works. Framerate is set to 24. Does anyone have an idea on what's happening? Thanks.