Very cool!! Nice job on this. One thing I was just imagining was an optional “high quality” mode where it screenshots the page using getDisplayMedia, which will be more accurate (e.g. iframes, modern CSS, etc.), but has the downside that it requires a browser permission popup:
async function captureScreenshot() {
try {
// Request screen capture permission if not already granted
const stream = await navigator.mediaDevices.getDisplayMedia({ preferCurrentTab: true });
// Create a video element to capture the stream
const video = document.createElement('video');
video.srcObject = stream;
await video.play();
// Create a canvas to draw the video frame
const canvas = document.createElement('canvas');
canvas.width = video.videoWidth;
canvas.height = video.videoHeight;
// Draw the current video frame to the canvas
canvas.getContext('2d').drawImage(video, 0, 0, canvas.width, canvas.height);
// Stop all tracks in the stream
stream.getTracks().forEach(track => track.stop());
// Convert the canvas to a data URL (PNG format)
return canvas.toDataURL('image/png');
} catch (error) {
console.error('Error capturing screenshot:', error);
return null;
}
}
If the mode is set to high quality, and the user denies the permission (or their device doesn’t support it - e.g. mobile devices don’t currently support getDisplayMedia), then it could fall back to the normal approach.
yeah, I thought of that, but it might be a little off-putting for the user. Maybe I could add some parameters to enable this? By the way, thanks for the feedback!
P.S: Is the screenshots-plugin name available for non-name-squatting purposes?
edit: also, it would only be able to get a full page screenshot, not specific elements
edit 2: the browser already has the functionality to screenshot the page
Very cool!! Nice job on this. One thing I was just imagining was an optional “high quality” mode where it screenshots the page using
getDisplayMedia
, which will be more accurate (e.g. iframes, modern CSS, etc.), but has the downside that it requires a browser permission popup:https://perchance.org/getdisplaymedia-screenshot-example
If the mode is set to high quality, and the user denies the permission (or their device doesn’t support it - e.g. mobile devices don’t currently support getDisplayMedia), then it could fall back to the normal approach.
In any case, well done with this plugin!
yeah, I thought of that, but it might be a little off-putting for the user. Maybe I could add some parameters to enable this? By the way, thanks for the feedback!
P.S: Is the
screenshots-plugin
name available for non-name-squatting purposes?edit: also, it would only be able to get a full page screenshot, not specific elements edit 2: the browser already has the functionality to screenshot the page
deleted by creator