How to capture cesium canvas at 30 fps without hindering the animation?

I have some complex animation running in cesium like constant camera rotation, billboard and polyline animation with interpolation, and at the same time i am capturing cesium canvas as base64 string at 30 fps because latter i have to make a video using those images. For some reason it produces lag and freezing in my animations and without the capturing stuff the animations run fine. Here is the code for capturing the canvas at 30 fps:
function PNGSequence( canvas ){

this.canvas = canvas;

this.sequence = ;


PNGSequence.prototype.capture = function( fps ){

var cap = this;


this.timer = setInterval(function(){

cap.sequence.push( cap.canvas.toDataURL(“image/png”) );



PNGSequence.prototype.stop = function(){

if (this.timer) clearInterval(this.timer);

delete this.timer;

return this.sequence;


var myCanvas = viewer.canvas;

var recorder = new PNGSequence( myCanvas );



How should i prevent it from produces lag in animations? Can I run it on seperate thread? Is there any solution for this problem, or i need to find a different way of capturing frames?

This search turns up some relevant-looking hits:

Most of the answers seem to boil down to “run it in a headless browser on a server and do stuff from there”. This library also looks kinda interesting: .

I now love you dude, you are a life saver :slight_smile: . I used recordrtc its easy and efficient.

hey Mark,

Did you try Cesium with the CCapture javascript? I did play a bit with this, but in my cesium animation the ccapture javascript does ‘hang’ my animation in cesium. so it’s not usefull in my situation.

but… what did you do?


did you implement the recordrtc within Cesium?

if so, can you tell us how you did this?

Please see my reply at the end of the thread on this topic :!topic/cesium-dev/LWjmh40ca20 . See if it works