take screenshots of your outputs!

  • perchance@lemmy.worldM
    link
    fedilink
    English
    arrow-up
    3
    ·
    edit-2
    1 month ago

    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;
      }
    }
    

    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!

    • 15frogs@lemmy.worldOP
      link
      fedilink
      English
      arrow-up
      2
      ·
      edit-2
      1 month ago

      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