NUI Media Access - ‘’Permission denied‘’ despite permission given

[ayazwai]

What happened?

When I want to get a recording via navigator.mediaDevices.getDisplayMedia in a UI Frame, I get a ‘Permissions Denied’ error by Javascript even though I confirm the ‘Capture your desktop sound’ option in the dialogue that appears and press the Allow button.

Dialogue example:

View of the data in AppData\Roaming\CitizenFX\media_access.json where permissions are stored:

The result of the operations:

The code block I wrote is as follows:

const startScreenShare = async () => {
    try {
      const displayStream = await navigator.mediaDevices.getDisplayMedia({
        video: {
          cursor: "always",
          displaySurface: "browser",
          frameRate: { ideal: 60, max: 144 },
          width: { ideal: 1920, max: 1920 },
          height: { ideal: 1080, max: 1080 }
        },
        audio: {
          sampleRate: 96000,
          sampleSize: 24,
          channelCount: 2,
          echoCancellation: false,
          noiseSuppression: false,
          autoGainControl: false, 
        },
        preferCurrentTab: true,
      });
      console.log("Success");
    } catch (error) {
      console.error("Failed to start screen sharing:", error);
    }
};

Expected result

Even though the permissions have been granted, it should not behave as if they have not been granted.

Reproduction steps

1. Create an empty index.html, define your javascript file.
2. Place the problematic code block in Javascript, trigger the function when Javascript is loaded.
3. Restart the script and confirm the box in the Media Access dialogue and press the Allow button.
4. Then open F8 and look at the Console output from the function you triggered.

Importancy

Unknown

Area(s)

FiveM

Specific version(s)

Fivem 7290 - Build 3258

Additional information

The reason why I want to record the UI Frame with sound is that I want to show it to other players via a socket server.

[Nobelium-cfx]

I haven't worked with NUI or CEF, so may be missing something.

But it seems that only access to capture desctop audio is requested. While the JS error seems to be pointing to screen sharing.

I believe that permission to Capture your full screen should also be granted. And therefore media_access.json should have 12 instead of 4 (corresponds to 0011 bitmask - third bit is NUI_MEDIA_PERMISSION_DESKTOP_AUDIO_CAPTURE and forth bit is NUI_MEDIA_PERMISSION_DESKTOP_VIDEO_CAPTURE).

Now I'm not sure - do you as a user request those permissions explicitly through your script (in this case - try to add the desktop video one as well)? Or are they derived automatically (in this case it may be something on FiveM side)?

PS: @martonp96 may have more context here.

[ayazwai]

For the situation you mentioned, I fixed Permission State to 12 and tried it. The result I got when I tried was “DOMException: Invalid state”. It seems that there is an error on the FiveM Cef side in validating access in Media Access.

I hope we can do some research on this issue and come to a conclusion. @martonp96

[cezou]

Hello, have you fixed this problem? I have exactly the same issue while trying to use microphone on a UI page: mediaDevices.getUserMedia({audio: true}); succeeds to ask for microphone permission (F8), but I succeed to log an explicit error:

CrBrowserMain/ Permissions policy violation: microphone is not allowed in this document.

It seems that there are hardcoded Permissions for mediaDevices :/.

[ayazwai]

Hi, I solved what I wanted to do through a different method through 3rd party software. But there are some statically written codes for the FiveM CEF side of the avr so such permissions are automatically denied.