'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 |
|---|
