Hey, so my goal is to capture a screenshot of the client, but it isn’t going very great. The problem is when, i run my code, it says in console:
Error: NotAllowedError: Permission Denied - Even tho i allowed permission within my fivem client.
Code:
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
}
takeScreenShot()
When you first run this, you will get a little box in the button right, where fivem ask for you permission. And when you “Allow” it still says its not allowed somehow…?
One of the feedback and information i got, was to just use the great script screenshot-basic - And yes it does the job of taking a screenshot of the client, but how can that script have access to that?
Thanks, regards
Kris.