tangram-play
tangram-play copied to clipboard
Record animation from canvas
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);
Implemented in https://github.com/tangrams/tangram-play/pull/581. There will be other UI tweaks to this in the future:
- Update the w x h sizing on viewport changing
- Consider re-positioning controls to not overlay the map (or show translucently?)
- Consider re-positioning controls closer to the activation button
- Consider moving activation button to map panel