How to capture animation frames in cesium?

I am using this code to animate a polyline ( I took it from this topic ) :

var viewer = new Cesium.Viewer(‘cesiumContainer’, {timeline : false, animation : false});

var pinBuilder = new Cesium.PinBuilder();

var bluePin = viewer.entities.add({

name : ‘Blank blue pin’,

position : Cesium.Cartesian3.fromDegrees(-75.170726, 39.9208667),

billboard : {

image : pinBuilder.fromColor(Cesium.Color.ROYALBLUE, 48).toDataURL(),

verticalOrigin : Cesium.VerticalOrigin.BOTTOM



var questionPin = viewer.entities.add({

name : ‘Question mark’,

position : Cesium.Cartesian3.fromDegrees(-75.1698529, 39.9220071),

billboard : {

image : pinBuilder.fromText(’?’, Cesium.Color.BLACK, 48).toDataURL(),

verticalOrigin : Cesium.VerticalOrigin.BOTTOM




function createLineAnimation(startEntity, endEntity, duration){

var startTime =;

return new Cesium.CallbackProperty(function(time, result){


result = ;


var now =;

var start = startEntity.position.getValue(time, result[0]);

var end = endEntity.position.getValue(time, result[1]);

var t = Math.min(1.0, (now - startTime) / duration);

Cesium.Cartesian3.lerp(start, end, t, end);

result[0] = start;

result[1] = end;

result.length = 2;

return result;

}, false);


Sandcastle.addToolbarButton(‘Go’, function(){


polyline: {

positions : createLineAnimation(bluePin, questionPin, 2000)





Now if I want to capture animation frames as a image and make a video out of it, how will I do that?

I think the easy way is to use some kind of desktop recording software.

But that doesn’t work well if you want to wait for tiles to fully load for each frame.

I have a kind of odd solution where I make calls to a local web service to trigger code running on the same PC as the browser to take a screen shot of the browser window, or a clipped region of it. Sounds silly but has worked well.

I will stick some code on github…

Cheers -Terry

I’ve added some notes here, with the code:

example’s in coffeescript, but read it like pseudocode, I think it illustrates the idea.

Just off the top of my head: could you temporarily hook into the “scene rendered” event, have the canvas turn itself into a data URL, and do something with the image data?

Hello Terry, thanks for the help :slight_smile: . I just came across the toDataURL() method which i can call on cesium canvas to capture the image of canvas. I wanted to ask which approach is better, the one you described or the one with toDataURL(). I find toDataURL() method quite easy to use but are there any hidden problems which i might face in future.

Yea i tried that approach, its easy and it works. I posted a reply in response to terry’s answer, can you give it a read? Thanks

I ended up using recordrtc