Screenshot

gistfile1.txt

const videoElem = document.createElement('video')
const displayMediaOptions = {
  video: {
    displaySurface: 'window'
  },
  audio: {
    echoCancellation: true,
    noiseSuppression: true,
    sampleRate: 44100,
    suppressLocalAudioPlayback: true
  },
  surfaceSwitching: 'include',
  selfBrowserSurface: 'exclude',
  systemAudio: 'exclude'
}

videoElem.srcObject = await navigator.mediaDevices.getDisplayMedia(displayMediaOptions)

// Wait for the video element to load metadata before drawing it onto the canvas.
await new Promise((resolve) => {
  videoElem.addEventListener('loadedmetadata', () => {
    videoElem.play()
    resolve(null)
  })
})

const canvas = document.createElement('canvas')

canvas.width = 1920
canvas.height = 1080

const ctx = canvas.getContext('2d')
if (!ctx) {
  throw new Error('Failed to get canvas context')
}

ctx.drawImage(videoElem, 0, 0, canvas.width, canvas.height)

let image = canvas.toDataURL('image/jpeg')

// download the image
const a = document.createElement('a')
a.href = image
a.download = 'screenshot.jpg'
a.click()
a.remove()