Engineer at Mapbox, creator of Leaflet, algorithms geek, open source enthusiast, musician, father of twin girls, Ukrainian. 🇺🇦
record(example)
example = {
const ctx = DOM.context2d(160, 90);
let frame = 0;
ctx.font = '48px sans-serif'; ctx.textAlign = 'center';
while (true) {
ctx.fillStyle = `limegreen`; ctx.fillRect(0, 0, 160, 90);
ctx.fillStyle = 'white'; ctx.fillText(frame++, 80, 60);
yield ctx.canvas;
}
}
record = {
let lastId = 0;
let recordingId = 0;
let chunks = [];
let recorder;
const button = DOM.download(() => new Blob(chunks, {type: 'video/webm'}), 'canvas.webm', 'Download recording');
const MediaRecorder = window.MediaRecorder;
if (!MediaRecorder || !MediaRecorder.isTypeSupported('video/webm')) {
return () => html`<span style="color:red">Your browser doesn't support MediaRecorder/WebM.</span>`;
}
return (canvas) => {
const id = canvas.__recorder_id = canvas.__recorder_id || ++lastId;
if (recordingId === id) return button; // a frame of an in-progress recording
if (recordingId > 0 && recordingId < id) { // old recording, clean up
chunks = [];
recorder.stop();
}
// start recording
recordingId = id;
recorder = new MediaRecorder(canvas.captureStream(), {mimeType: 'video/webm'});
recorder.ondataavailable = (e) => chunks.push(e.data);
recorder.start(100);
return button;
};
}
Purpose-built for displays of data
Observable is your go-to platform for exploring data and creating expressive data visualizations. Use reactive JavaScript notebooks for prototyping and a collaborative canvas for visual data exploration and dashboard creation.
