Wrong behaviour from NUI-permissions

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.


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

      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 


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

When enabling:

  const stream = await navigator.mediaDevices.getDisplayMedia({
    audio: true

You will get a box prompted to allow access to audio.
But if you use:

  const stream = await navigator.mediaDevices.getDisplayMedia({
    video: true

No message/box will come up.
So maybe FiveM have disabled this functionality?

If you’re trying to ‘capture a screenshot from the client’, why are you trying to record the users’ whole screen? This only leads to egregious privacy violations and as such is obviously not allowed.

Look at the source code for screenshot-basic and you’ll find out.

+ HTMLCanvasElement.captureStream() - Web APIs | MDN may help.

Okay, well that sums it all up…

Okay yeah I am stuck. Is there any way to record client game/desktop audio? Currently when calling getDisplayMedia with only audio it fails due to not being able to return only audio apparently, and any call to getDisplayMedia with a video source fails from CFX’s system.