tangram-play icon indicating copy to clipboard operation
tangram-play copied to clipboard

Record animation from canvas

Open louh opened this issue 8 years ago • 1 comments

via @bcamper

var stream = scene.canvas.captureStream();
var recordedChunks = [];

var options = {mimeType: 'video/webm'};
mediaRecorder = new MediaRecorder(stream, options);
mediaRecorder.ondataavailable = handleDataAvailable;
mediaRecorder.start();
function handleDataAvailable(event) {
  if (event.data.size > 0) {
    recordedChunks.push(event.data);
  } else {
    // ...
  }
}

// do stuff in kinkade...

mediaRecorder.stop();

var blob = new Blob(recordedChunks, {
    type: 'video/webm'
  });
  var url = URL.createObjectURL(blob);

louh avatar Aug 31 '16 21:08 louh

Implemented in https://github.com/tangrams/tangram-play/pull/581. There will be other UI tweaks to this in the future:

  1. Update the w x h sizing on viewport changing
  2. Consider re-positioning controls to not overlay the map (or show translucently?)
  3. Consider re-positioning controls closer to the activation button
  4. Consider moving activation button to map panel

louh avatar Oct 15 '16 16:10 louh