Element-web: Can't grant media permissions from latest Firefox

[babolivier]

Using Firefox 67.0.2, Riot can't access my microphone and camera. When I go to the settings and try to ask for permissions here's what I get:

This started happening after I upgraded Firefox to 67.0.1 then 67.0.2 earlier this week.

This happens on both /develop and /app

[cyphar]

I have the exact same issue. I'm on Linux with Firefox 67.0.

[jryans]

I see a related failure in Firefox 69 on macOS:

1. Click Request media permissions
2. Allow permissions in browser UI
3. Nothing changes in settings (it still says "Missing media permissions", but no error or dialog appears)

[bwindels]

We're filtering devices without a label upon permission. On my FF 67 none of the devices have a label, probably do to fingerprinting protection.

[jryans]

Ah, sounds likely to be related... Looking through Firefox source, it seems like you only get device labels if a stream is active or if you grant _persistent_ permission. And indeed, if I check "Remember this decision" in the browser permission prompt, the devices come through.

[jryans]

Maybe we need to clarify that you should grant persistent permission...?

[bwindels]

Hmm... right. Without persistent permission, you'll get asked anyway again what devices you want to use by the browser once you set up a call, making these preferences sort of useless. I did the above PR, but wonder if we should instead hide this preference in the browser (as opposed to electron) ... ?

[t3chguy]

Not all browsers prompt you nicely

[bwindels]

I think we should merge the above PR, as I think it will at least allow people to make calls after setting the preferred devices in the settings, even though it's not the perfect solution for now.

[bwindels]

@babolivier & @cyphar: could you please try again on /develop with above PR merged? Thanks :pray:

[babolivier]

The issue is still here on latest develop.

[bwindels]

Hmm, could you please share what the permissions and blocking overlay says @babolivier as below?

Also, this is not in a private window, is it?

[babolivier]

Stupid Gnome can't take a screenshot without losing the focus on Firefox (which makes the overlay disappear), making it impossible to screenshot it, so here's an old-school style photo of my screen:

[babolivier]

Missed:

Also, this is not in a private window, is it?

Nope, it's not.

[cyphar]

I no longer have the "no media permissions" issue on /develop/, but now Riot doesn't seem to detect my microphone (and while it says "no audio output" I can definitely hear sound effects from Riot like the ringing tone).

[bwindels]

@cyphar, @babolivier: thank you both for the extra input. On latest develop, is this (still) preventing you from making webrtc calls?

[cyphar]

Yes, calls still fail on /develop/.

[turt2live]

One user appears to have encountered this and fixed it by adjusting their privacy settings in Windows 10. They had the microphone and camera blocked for all apps, therefore Firefox wasn't able to get at them.

Might not help everyone here, but might help someone.

[bwindels]

@babolivier & @cyphar: could you please try to see if your camera and microphone work on the page below? It's a demo page I've put together to diagnose this issue. The steps are bit involved, so thank you in advance if you're willing to help out!

• Click "List devices" first.
• Copy the device list somewhere.
• Then pick the devices you want to use, and then click "Open media". It should ask you for permission to use the camera and microphone. It would be good if you can do the whole process with non-persistent and persistent permission ("Remember this decision" in FF).
• After that, it should give you the video feed of your webcam, and and (possible feedback-y) echo of your microphone.
• Now hit "List devices" again, and also copy the output.

Please paste both device listings here, with any errors you encountered, and whether the video feed appeared.

The page is up at https://bwindels.github.io/mediadevices.html

Thanks again!

[babolivier]

1st list:

audioinput
"" (kind=audioinput, deviceId=n1E74MSHu5iomcjUqsIe89HoxTb8DocGP9IfHyh4lNY=)
"" (kind=audioinput, deviceId=bETIGWrP6SEJvzvrFE/K3rCizH7U+48b3TXP3aD+Nao=)
"" (kind=audioinput, deviceId=Z/SoZsLtNOhHvtRNBFF3u/BQFZThg6a6m1TCq3vyU3s=)
"" (kind=audioinput, deviceId=2l13znclMAu4FVE5c1BgxivZIMgGhC8qPf9mb2OSF5M=)
"" (kind=audioinput, deviceId=Pcn4QR2Hvw8zfXwqt8B4hJZI41SdfV+sy3rpDNb69Vk=)

Open media:

When clicking this button I get hit by this error message in a dialog for each of the listed devices:

The object can not be found here.

[bwindels]

@babolivier interesting, do you also see a line number for that error in the console?

[babolivier]

Sorry, didn't have the console open but I just retried, the error is from L78 according to the JS console:

[bwindels]

Thanks @babolivier. I made some changes, could you have another go and report all the info on the page please? Please try with both selecting and not selecting devices for each category.
E.g. refresh between tries, click list devices, in one case select some devices, click open media, grant permission if asked, and copy text of entire page. Thanks again!

[babolivier]

With one device selected

Error

Error: The object can not be found here. (NotFoundError)

requested constraints

{
  "audio": {
    "deviceId": {
      "ideal": "n1E74MSHu5iomcjUqsIe89HoxTb8DocGP9IfHyh4lNY="
    }
  },
  "video": {
    "width": 640,
    "height": 360
  }
}

obtained tracks with constraints

getSupportedConstraints()

{
  "autoGainControl": true,
  "browserWindow": true,
  "channelCount": true,
  "deviceId": true,
  "echoCancellation": true,
  "facingMode": true,
  "frameRate": true,
  "height": true,
  "mediaSource": true,
  "noiseSuppression": true,
  "scrollWithPage": true,
  "viewportHeight": true,
  "viewportOffsetX": true,
  "viewportOffsetY": true,
  "viewportWidth": true,
  "width": true
}

With no device selected

Error

Error: The object can not be found here. (NotFoundError)

requested constraints

{
  "audio": true,
  "video": {
    "width": 640,
    "height": 360
  }
}

obtained tracks with constraints

getSupportedConstraints()

{
  "autoGainControl": true,
  "browserWindow": true,
  "channelCount": true,
  "deviceId": true,
  "echoCancellation": true,
  "facingMode": true,
  "frameRate": true,
  "height": true,
  "mediaSource": true,
  "noiseSuppression": true,
  "scrollWithPage": true,
  "viewportHeight": true,
  "viewportOffsetX": true,
  "viewportOffsetY": true,
  "viewportWidth": true,
  "width": true
}

Note that:

• I only have devices listed under audioinput (despite my computer having a webcam, which was correctly detected prior to this Firefox update)
• I have seen no request for permission in the process

[bwindels]

@babolivier Interesting! Do audio calls work on Riot for you?

[babolivier]

I haven't tried them, given I can't recognise my microphone due to lack of labels. On Jitsi, which I assume remembers what device I was previously using, they do work (and access to my webcam fails), though.

[bwindels]

I haven't tried them, given I can't recognise my microphone due to lack of labels

And if you ignore the preferences and just start an voice call, and then pick the right microphone in the permissions dialog? Feel free to call me if you need a guinea pig.

Also, one last test, sorry for all the hassle, can you try the "Open Audio media" button on the page? just added it.

Thanks!

[babolivier]

Also, one last test, sorry for all the hassle, can you try the "Open Audio media" button on the page? just added it.

This one actually asks me for permission for my mic, and apparently manages to open it.

[bwindels]

@babolivier great, with and without choosing a device, no difference?

[babolivier]

The only difference between both is that, when selecting a device, the default value of the request overlay changes (presumably to the name of the device that has the ID I selected)

[bwindels]

Webcam missing seems like a recent firefox bug.

Wrt to missing labels, I'll make some changes to show the permission popup before showing the selector in the preferences, so we get accurate labels for the devices. Also need to give better feedback for users that don't have a webcam (recognized).

Confirmed with @babolivier that voice calls work in Riot when webcam isn't recognized.

[bwindels]

@babolivier should work now on https://riot.im/develop/

[babolivier]

It does, thanks :)