Data visualization/Interactive media and full-stack data science web app developer.
Published
Edited
Mar 12, 2021
2 stars
viewof screenshot = {
let canvas = DOM.canvas(width * window.devicePixelRatio, 50);
canvas.style.cursor = "pointer";
var ctx = canvas.getContext("2d");
ctx.font = "30px Arial";
ctx.fillStyle = "#4196B4";
ctx.textAlign = "center";
ctx.fillText(
"Click here to capture a screenshot!",
canvas.width / 2,
canvas.height / 2
);
// Request media
const capture = () => {
navigator.mediaDevices
.getDisplayMedia()
.then(stream => {
// Grab frame from stream
let track = stream.getVideoTracks()[0];
let capture = new ImageCapture(track);
capture.grabFrame().then(bitmap => {
// Stop sharing
track.stop();
// Draw the bitmap to canvas
canvas.width = bitmap.width;
canvas.height = bitmap.height;
canvas.getContext('2d').drawImage(bitmap, 0, 0);
// Grab blob from canvas
canvas.toBlob(blob => {
// Do things with blob here
canvas.value = blob;
canvas.dispatchEvent(new CustomEvent("input"));
});
});
})
.catch(e => console.log(e));
};
canvas.addEventListener('click', capture);
canvas.style.width = width + "px";
return canvas;
}
screenshot //will resolve to blob of the screenshot once user clicks and approves...
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.
