diff --git a/packages/client/src/devices/BrowserPermission.ts b/packages/client/src/devices/BrowserPermission.ts index 3d28c3575..ce4a29997 100644 --- a/packages/client/src/devices/BrowserPermission.ts +++ b/packages/client/src/devices/BrowserPermission.ts @@ -22,7 +22,7 @@ export class BrowserPermission { this.ready = (async () => { const assumeGranted = (error?: unknown) => { - this.setState('granted'); + this.setState('prompt'); }; if (!canQueryPermissions()) { diff --git a/packages/client/src/devices/devices.ts b/packages/client/src/devices/devices.ts index d994e7d77..2bbf19a93 100644 --- a/packages/client/src/devices/devices.ts +++ b/packages/client/src/devices/devices.ts @@ -11,6 +11,7 @@ import { import { getLogger } from '../logger'; import { BrowserPermission } from './BrowserPermission'; import { lazy } from '../helpers/lazy'; +import { isFirefox } from '../helpers/browsers'; /** * Returns an Observable that emits the list of available devices @@ -160,12 +161,12 @@ export const getAudioOutputDevices = lazy(() => { const getStream = async (constraints: MediaStreamConstraints) => { const stream = await navigator.mediaDevices.getUserMedia(constraints); - // On Firefox, there's no reliable way to listen to device permission changes, - // so it's difficult to update the device list once camera or microphone access - // is allowed by the user. However, if we were able to get user media, we can be - // sure permission was granted, so we fake the devicechange event to force device - // lists to update. - navigator.mediaDevices.dispatchEvent(new Event('devicechange')); + if (isFirefox()) { + // When enumerating devices, Firefox will hide device labels unless there's been + // an active user media stream on the page. So we force device list updates after + // every successful getUserMedia call. + navigator.mediaDevices.dispatchEvent(new Event('devicechange')); + } return stream; };