Screenshot

by msfrisbie

HTML

<button style="font-size:4rem">
  TAKE SCREENSHOT
</button>

JavaScript

document.querySelector('button').addEventListener('click', async function() {
  const getDisplayMediaConstraints = {
    video: {
      // frameRate: 5,
      // width: 1920,
      // height: 1080,
      // displaySurface: "window",
      // logicalSurface: true,
    },
    audio: false
  };

  // @ts-ignore
  const stream = await navigator.mediaDevices.getDisplayMedia(getDisplayMediaConstraints);
  const track = stream.getVideoTracks()[0];

  //await new Promise((resolve) => setTimeout(resolve, 1000));

  // @ts-ignore
  const imageCapture = new ImageCapture(track);

  const imageBitmap = await imageCapture.grabFrame()

  const canvas = document.createElement('canvas');
  canvas.width = imageBitmap.width;
  canvas.height = imageBitmap.height;
  // @ts-ignore
  canvas.getContext('2d').drawImage(
    imageBitmap,
    0,
    0,
    imageBitmap.width,
    imageBitmap.height,
    0,
    0,
    imageBitmap.width,
    imageBitmap.height,
  );

  track.stop();

  canvas.toBlob((blob) => {
    // https://stackoverflow.com/questions/19327749/javascript-blob-filename-without-link
    const a = document.createElement("a");
    document.body.appendChild(a);
    a.style.display = "none";
    let url = window.URL.createObjectURL(blob);
    a.href = url;
    a.download = "screenshot.png";
    a.click();
    window.URL.revokeObjectURL(url);
  })
})