'Take Screenshot Using JS

On this image I want to when you click button take screenshot not show the dialog box red line box anyone help me

<button id="cake">Take Screen</button>

<canvas id="fake"></canvas>


const canIRun = navigator.mediaDevices.getDisplayMedia

const takeScreenShot = async () => {
  const stream = await navigator.mediaDevices.getDisplayMedia({
    video: {
      mediaSource: 'screen'
    },
  })
  // get correct video track
  const track = stream.getVideoTracks()[0]
  // init Image Capture and not Video stream
  const imageCapture = new ImageCapture(track)
  // take first frame only
  const bitmap = await imageCapture.grabFrame()
  // destory video track to prevent more recording / mem leak
  track.stop()

  const canvas = document.getElementById('fake')
  // this could be a document.createElement('canvas') if you want
  // draw weird image type to canvas so we can get a useful image
  canvas.width = bitmap.width
  canvas.height = bitmap.height
  const context = canvas.getContext('2d')
  context.drawImage(bitmap, 0, 0, bitmap.width, bitmap.height)
  const image = canvas.toDataURL()

  // this turns the base 64 string to a [File] object
  const res = await fetch(image)
  const buff = await res.arrayBuffer()
  // clone so we can rename, and put into array for easy proccessing
  const file = [
    new File([buff], `photo_${new Date()}.jpg`, {
      type: 'image/jpeg',
    }),
  ]
  return file
}

const button = document.getElementById('cake').onclick = () => canIRun ? takeScreenShot() : {}


Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source