Best way to make record a smooth video

1. A concise explanation of the problem you’re experiencing.

If I wanted to record a video of CesiumJS in action, what would be the best way of doing so?

Currently as far as I am aware, there is no non-realtime rendering capability, correct?

Is there a go-to for code example setting movement intervals bound to arrow keys? I’m thinking maybe I can just take a screenshot one by one and stitch it together in a video editing program.

I wish to do this for creating easy demo videos but in particular because the instanced woods I have go at 10fps, tops on the computers I have.

4. The Cesium version you’re using, your operating system and browser.




2019년 4월 16일 화요일 오전 9시 19분 24초 UTC+9, Gibran P 님의 말:

This is actually something I’ve been running into a lot since I’ve been working on taking screenshots and videos for a lot of recent blog posts. I added a shortcut to capture the canvas output and download it as an image when pressing P in the Cesium viewer on Glitch:!/cesium-viewer?path=views/index.html:1:0

The code for doing this is at the bottom of index.html:

// Capture screenshot directly from canvas

function captureScreenshot(){

var deferred = Cesium.when.defer();

var removeCallback = viewer.scene.postRender.addEventListener(function() {


try {

const cesiumCanvas = viewer.scene.canvas;


} catch (e) {



}, this);


return deferred.promise;


function dataURItoBlob(dataURI) {

// convert base64 to raw binary data held in a string

var byteString = atob(dataURI.split(’,’)[1]);

// separate out the mime component

var mimeString = dataURI.split(’,’)[0].split(’:’)[1].split(’;’)[0];

// write the bytes of the string to an ArrayBuffer

var arrayBuffer = new ArrayBuffer(byteString.length);

var _ia = new Uint8Array(arrayBuffer);

for (var i = 0; i < byteString.length; i++) {

_ia[i] = byteString.charCodeAt(i);


var dataView = new DataView(arrayBuffer);

var blob = new Blob([dataView], { type: mimeString });

return blob;


function downloadURI(uri, name) {

var blob = dataURItoBlob(uri);

var urlToDownload = window.URL.createObjectURL(blob);

var link = document.createElement(“a”); = name;

link.href = urlToDownload;




delete link;


document.addEventListener(“keydown”, function(event){

if (event.keyCode == 80) {


downloadURI(dataUri, “Cesium Screenshot”);






}, false);


You could conceivably automate this to spit out frames like that to get a really high quality rendering. It would be awesome to one day have a little app on top of Cesium that can capture all mouse and keyboard input, and replay it while capturing the frames this way.