799415 - UI for handling WebRTC camera access requests should show previews

Status: VERIFIED FIXED

(Firefox :: Site Permissions, enhancement, P2)

Description

[Dão Gottwald [:dao]]

+++ This bug was initially created as a clone of Bug #729522 +++

Mockup: http://new.tinygrab.com/08092efbdd03a3bafe1718fcf0c0bbd6a75aa30e37.jpg

Comment 1

[Jan-Ivar Bruaroey [:jib] (needinfo? me)]

Chrome Canary now supports this as part of chrome://flags/#one-time-permission experiment.

Might be worth up-prioritizing this since we already support preview for screen capture?

Comment 2

[Emma Zühlcke [:emz]]

I'm prototyping this currently. So far it looks like we mostly need to copy what we have for screen share previews. They do a privileged gUM request. I don't see why we couldn't do that for camera.

I have a working camera preview, but I'm still trying to figure out why the framerate is so low. The video freezes for a couple seconds and only advances for a few frames periodically.

Comment 3

[Emma Zühlcke [:emz]]

There is a small UX change needed here. We most likely don't want to show the video preview right when the permission prompt opens. Otherwise sites can indirectly control when the camera is turned on and the user sees the preview. On camera switch this less of a problem, because the user triggered it. We could add a button that toggles the preview on and off. That would enable showing the preview for the pre-selected camera. Alternatively we could just not select camera by default and force the user to select one. But that would make the common scenario of using the first (or only) camera too slow.

Comment 4

[Emma Zühlcke [:emz]]

Attachment: camera-preview-reusing-screenshare-preview-element.png

Here is how it looks when I use the screen share preview element for camera preview.

Comment 5

[Emma Zühlcke [:emz]]

Attachment: Bug 799415 - Show preview video in camera permission dialog. r=jib!

Comment 6

[Emma Zühlcke [:emz]]

Attachment: idea-1.png

Here is a UX draft from Julian I'm looking to implement. It clearly shows users that they can enable the preview and when they do we already have a placeholder so the layout doesn't shift much.

Comment 7

[Emma Zühlcke [:emz]]

Attachment: Bug 799415 - Add a Storybook story for the new webrtc-preview element. r=#reusable-components-reviewers!

Comment 8

[Emma Zühlcke [:emz]]

Attachment: Bug 799415 - Update and add webrtc tests for camera preview. r=jib!

Comment 9

[Pulsebot]

Pushed by [e-mail]:
https://github.com/mozilla-firefox/firefox/commit/28e83ace1e0c
https://hg.mozilla.org/integration/autoland/rev/906089b2466d
Show preview video in camera permission dialog. r=jib,fluent-reviewers,desktop-theme-reviewers,bolsson,dao
https://github.com/mozilla-firefox/firefox/commit/ea1e25d2d450
https://hg.mozilla.org/integration/autoland/rev/253192cfc745
Add a Storybook story for the new webrtc-preview element. r=reusable-components-reviewers,akulyk
https://github.com/mozilla-firefox/firefox/commit/01d725c7031b
https://hg.mozilla.org/integration/autoland/rev/7d6305cf183a
Update and add webrtc tests for camera preview. r=jib

Comment 10

[Pulsebot]

Pushed by [e-mail]:
https://github.com/mozilla-firefox/firefox/commit/aafb8149db1e
https://hg.mozilla.org/integration/autoland/rev/ed747e769f88
Revert "Bug 799415 - Update and add webrtc tests for camera preview. r=jib" for causing multiple bc failures.

Comment 11

[Iulian Moraru]

Revert for causing multiple bc failures.

• Push with failures

• Failure log example 1

• Failure log example 2

• Backout link

Comment 12

[Emma Zühlcke [:emz]]

Attachment: Bug 799415 - Lazily create webrtc-preview element. r=Gijs!

Comment 13

[Pulsebot]

Pushed by [e-mail]:
https://github.com/mozilla-firefox/firefox/commit/4466e8b8105f
https://hg.mozilla.org/integration/autoland/rev/54a9e7679269
Show preview video in camera permission dialog. r=jib,fluent-reviewers,desktop-theme-reviewers,bolsson,dao
https://github.com/mozilla-firefox/firefox/commit/c6db6feb3abd
https://hg.mozilla.org/integration/autoland/rev/6c1c0e5f2124
Add a Storybook story for the new webrtc-preview element. r=reusable-components-reviewers,akulyk
https://github.com/mozilla-firefox/firefox/commit/d71f5c3a0a24
https://hg.mozilla.org/integration/autoland/rev/8b9f8d407486
Update and add webrtc tests for camera preview. r=jib
https://github.com/mozilla-firefox/firefox/commit/6228a3a34cd4
https://hg.mozilla.org/integration/autoland/rev/c8782c8419a5
Lazily create webrtc-preview element. r=Gijs

Comment 14

[Sandor Molnar[:smolnar]]

https://hg.mozilla.org/mozilla-central/rev/54a9e7679269
https://hg.mozilla.org/mozilla-central/rev/6c1c0e5f2124
https://hg.mozilla.org/mozilla-central/rev/8b9f8d407486
https://hg.mozilla.org/mozilla-central/rev/c8782c8419a5

Comment 15

[Emma Zühlcke [:emz]]

Release Note Request (optional, but appreciated)
[Why is this notable]:
Video preview feature for camera and camera+mic permission dialog.

[Affects Firefox for Android]: No, it's Desktop only

[Suggested wording]:
When a site asks for access to your camera you can now preview it right in the permission dialog. This is especially helpful when switching between multiple cameras.

Comment 16

[Ryan VanderMeulen [:RyanVM]]

Added to the Fx143 relnotes.

Comment 17

[Jim Mathies [:jimm]]

I wonder if the styling for the button needs to be changed such that it gains more focus attention? The gray colors (Mac, light theme) are hard to notice.

str:

1. click a Meet link in cal
2. After Meet opens in a tab, note the camera prompt.

Comment 18

[Jim Mathies [:jimm]]

Attachment: Screenshot 2025-08-13 at 7.00.56 PM.png

Comment 19

[Bianca Hidecuti, Desktop Test Engineering [:bhidecuti]]

Verified as fixed using Firefox 143.0b2 on macOS 13, Windows 11 and Ubuntu 22.04. WebRTC camera access request is now showing preview accordingly.
However, I've encountered bug 1984638 while testing on Ubuntu 22.04.