From ab4eadf58f654c99cebfb9d468c1b0997d779eff Mon Sep 17 00:00:00 2001
From: Timo <toger5@hotmail.de>
Date: Fri, 20 Jun 2025 18:32:51 +0200
Subject: [PATCH 1/5] Only rerequest permissions if we do not yet get labels
 when enumerating

---
 src/state/MediaDevices.ts    | 77 +++++++++++++++++++++++++-----------
 src/state/ObservableScope.ts | 12 ++++++
 2 files changed, 66 insertions(+), 23 deletions(-)

diff --git a/src/state/MediaDevices.ts b/src/state/MediaDevices.ts
index f441918b..adc21b3f 100644
--- a/src/state/MediaDevices.ts
+++ b/src/state/MediaDevices.ts
@@ -8,6 +8,7 @@ Please see LICENSE in the repository root for full details.
 import {
   combineLatest,
   filter,
+  identity,
   map,
   merge,
   of,
@@ -18,7 +19,7 @@ import {
   type Observable,
 } from "rxjs";
 import { createMediaDeviceObserver } from "@livekit/components-core";
-import { logger } from "matrix-js-sdk/lib/logger";
+import { logger as rootLogger } from "matrix-js-sdk/lib/logger";
 
 import {
   audioInput as audioInputSetting,
@@ -37,6 +38,7 @@ import { platform } from "../Platform";
 // This hardcoded id is used in EX ios! It can only be changed in coordination with
 // the ios swift team.
 const EARPIECE_CONFIG_ID = "earpiece-id";
+const logger = rootLogger.getChild("[MediaDevices]");
 
 export type DeviceLabel =
   | { type: "name"; name: string }
@@ -93,15 +95,15 @@ export const iosDeviceMenu$ =
 
 function availableRawDevices$(
   kind: MediaDeviceKind,
-  usingNames$: Observable<boolean>,
+  recomputeDevicesWithPermissions$: Observable<boolean>,
   scope: ObservableScope,
 ): Observable<MediaDeviceInfo[]> {
-  return usingNames$.pipe(
-    switchMap((usingNames) =>
+  return recomputeDevicesWithPermissions$.pipe(
+    switchMap((recomputeDevicesWithPermissions) =>
       createMediaDeviceObserver(
         kind,
         (e) => logger.error("Error creating MediaDeviceObserver", e),
-        usingNames,
+        recomputeDevicesWithPermissions,
       ),
     ),
     startWith([]),
@@ -145,7 +147,11 @@ function selectDevice$<Label>(
 
 class AudioInput implements MediaDevice<DeviceLabel, SelectedAudioInputDevice> {
   private readonly availableRaw$: Observable<MediaDeviceInfo[]> =
-    availableRawDevices$("audioinput", this.usingNames$, this.scope);
+    availableRawDevices$(
+      "audioinput",
+      this.recomputeDevicesWithPermissions$,
+      this.scope,
+    );
 
   public readonly available$ = this.availableRaw$.pipe(
     map(buildDeviceMap),
@@ -179,9 +185,13 @@ class AudioInput implements MediaDevice<DeviceLabel, SelectedAudioInputDevice> {
   }
 
   public constructor(
-    private readonly usingNames$: Observable<boolean>,
+    private readonly recomputeDevicesWithPermissions$: Observable<boolean>,
     private readonly scope: ObservableScope,
-  ) {}
+  ) {
+    this.available$.subscribe((available) => {
+      logger.info("[audio-input] available devices:", available);
+    });
+  }
 }
 
 class AudioOutput
@@ -189,7 +199,7 @@ class AudioOutput
 {
   public readonly available$ = availableRawDevices$(
     "audiooutput",
-    this.usingNames$,
+    this.recomputeDevicesWithPermissions$,
     this.scope,
   ).pipe(
     map((availableRaw) => {
@@ -230,9 +240,13 @@ class AudioOutput
   }
 
   public constructor(
-    private readonly usingNames$: Observable<boolean>,
+    private readonly recomputeDevicesWithPermissions$: Observable<boolean>,
     private readonly scope: ObservableScope,
-  ) {}
+  ) {
+    this.available$.subscribe((available) => {
+      logger.info("[audio-output] available devices:", available);
+    });
+  }
 }
 
 class ControlledAudioOutput
@@ -298,13 +312,16 @@ class ControlledAudioOutput
         window.controls.onOutputDeviceSelect?.(device.id);
       }
     });
+    this.available$.subscribe((available) => {
+      logger.info("[controlled-output] available devices:", available);
+    });
   }
 }
 
 class VideoInput implements MediaDevice<DeviceLabel, SelectedDevice> {
   public readonly available$ = availableRawDevices$(
     "videoinput",
-    this.usingNames$,
+    this.recomputeDevicesWithPermissions$,
     this.scope,
   ).pipe(map(buildDeviceMap));
 
@@ -321,13 +338,18 @@ class VideoInput implements MediaDevice<DeviceLabel, SelectedDevice> {
   }
 
   public constructor(
-    private readonly usingNames$: Observable<boolean>,
+    private readonly recomputeDevicesWithPermissions$: Observable<boolean>,
     private readonly scope: ObservableScope,
-  ) {}
+  ) {
+    // This also has the purpose of subscribing to the available devices
+    this.available$.subscribe((available) => {
+      logger.info("[video-input] available devices:", available);
+    });
+  }
 }
 
 export class MediaDevices {
-  private readonly deviceNamesRequest$ = new Subject<void>();
+  private readonly requests$ = new Subject<boolean>();
   /**
    * Requests that the media devices be populated with the names of each
    * available device, rather than numbered identifiers. This may invoke a
@@ -335,7 +357,9 @@ export class MediaDevices {
    * intent to view the device list.
    */
   public requestDeviceNames(): void {
-    this.deviceNamesRequest$.next();
+    void navigator.mediaDevices.enumerateDevices().then((result) => {
+      this.requests$.next(!result.some((device) => device.label));
+    });
   }
 
   // Start using device names as soon as requested. This will cause LiveKit to
@@ -344,26 +368,33 @@ export class MediaDevices {
   // you to do to receive device names in lieu of a more explicit permissions
   // API. This flag never resets to false, because once permissions are granted
   // the first time, the user won't be prompted again until reload of the page.
-  private readonly usingNames$ = this.deviceNamesRequest$.pipe(
-    map(() => true),
+  private readonly recomputeDevicesWithPermissions$ = this.requests$.pipe(
     startWith(false),
-    this.scope.state(),
+    identity,
+    this.scope.stateNonDistinct(),
   );
 
   public readonly audioInput: MediaDevice<
     DeviceLabel,
     SelectedAudioInputDevice
-  > = new AudioInput(this.usingNames$, this.scope);
+  > = new AudioInput(this.recomputeDevicesWithPermissions$, this.scope);
 
   public readonly audioOutput: MediaDevice<
     AudioOutputDeviceLabel,
     SelectedAudioOutputDevice
   > = getUrlParams().controlledAudioDevices
     ? new ControlledAudioOutput(this.scope)
-    : new AudioOutput(this.usingNames$, this.scope);
+    : new AudioOutput(this.recomputeDevicesWithPermissions$, this.scope);
 
   public readonly videoInput: MediaDevice<DeviceLabel, SelectedDevice> =
-    new VideoInput(this.usingNames$, this.scope);
+    new VideoInput(this.recomputeDevicesWithPermissions$, this.scope);
 
-  public constructor(private readonly scope: ObservableScope) {}
+  public constructor(private readonly scope: ObservableScope) {
+    this.recomputeDevicesWithPermissions$.subscribe((recompute) => {
+      logger.info(
+        "[MediaDevices] recomputeDevicesWithPermissions$ changed:",
+        recompute,
+      );
+    });
+  }
 }
diff --git a/src/state/ObservableScope.ts b/src/state/ObservableScope.ts
index 727082cf..e69c46f0 100644
--- a/src/state/ObservableScope.ts
+++ b/src/state/ObservableScope.ts
@@ -38,6 +38,9 @@ export class ObservableScope {
       shareReplay({ bufferSize: 1, refCount: false }),
     );
 
+  private readonly stateNonDistinctImpl: MonoTypeOperator = (o$) =>
+    o$.pipe(this.bind(), shareReplay({ bufferSize: 1, refCount: false }));
+
   /**
    * Transforms an Observable into a hot state Observable which replays its
    * latest value upon subscription, skips updates with identical values, and
@@ -47,6 +50,15 @@ export class ObservableScope {
     return this.stateImpl;
   }
 
+  /**
+   * Transforms an Observable into a hot state Observable which replays its
+   * latest value upon subscription, skips updates with identical values, and
+   * is bound to this scope.
+   */
+  public stateNonDistinct(): MonoTypeOperator {
+    return this.stateNonDistinctImpl;
+  }
+
   /**
    * Ends the scope, causing any bound Observables to complete.
    */

From 73ccb38c11245c01b4c78bd7973334c0dc727d5c Mon Sep 17 00:00:00 2001
From: Timo <toger5@hotmail.de>
Date: Mon, 23 Jun 2025 11:22:59 +0200
Subject: [PATCH 2/5] comment

---
 src/state/MediaDevices.ts | 3 +++
 1 file changed, 3 insertions(+)

diff --git a/src/state/MediaDevices.ts b/src/state/MediaDevices.ts
index adc21b3f..92ac4e01 100644
--- a/src/state/MediaDevices.ts
+++ b/src/state/MediaDevices.ts
@@ -358,6 +358,9 @@ export class MediaDevices {
    */
   public requestDeviceNames(): void {
     void navigator.mediaDevices.enumerateDevices().then((result) => {
+      // we only actually update the requests$ subject if there are no
+      // devices with a label, because otherwise we already have the permission
+      // to access the devices.
       this.requests$.next(!result.some((device) => device.label));
     });
   }

From e47a743f1ec168c1f0ca9e0842c023cd1e269f17 Mon Sep 17 00:00:00 2001
From: Timo <toger5@hotmail.de>
Date: Mon, 23 Jun 2025 12:27:35 +0200
Subject: [PATCH 3/5] Also fix camera reloading in widget mode

---
 src/room/LobbyView.tsx    | 10 ++++++++++
 src/state/MediaDevices.ts |  3 +++
 2 files changed, 13 insertions(+)

diff --git a/src/room/LobbyView.tsx b/src/room/LobbyView.tsx
index eab29262..8172a3ee 100644
--- a/src/room/LobbyView.tsx
+++ b/src/room/LobbyView.tsx
@@ -184,6 +184,16 @@ export const LobbyView: FC<Props> = ({
         null) as LocalVideoTrack | null,
     [tracks],
   );
+
+  useEffect(() => {
+    if (videoTrack && videoInputId === undefined) {
+      // If we have a video track but no videoInputId,
+      // we have to update the available devices. So that we select the first
+      // available video input device as the default instead of the `""` id.
+      devices.requestDeviceNames();
+    }
+  }, [devices, videoInputId, videoTrack]);
+
   useTrackProcessorSync(videoTrack);
   const showSwitchCamera = useShowSwitchCamera(
     useObservable(
diff --git a/src/state/MediaDevices.ts b/src/state/MediaDevices.ts
index 92ac4e01..47b24939 100644
--- a/src/state/MediaDevices.ts
+++ b/src/state/MediaDevices.ts
@@ -355,6 +355,9 @@ export class MediaDevices {
    * available device, rather than numbered identifiers. This may invoke a
    * permissions pop-up, so it should only be called when there is a clear user
    * intent to view the device list.
+   *
+   * This always updates the `available$` devices for each media type with the current value
+   * of `enumerateDevices`.
    */
   public requestDeviceNames(): void {
     void navigator.mediaDevices.enumerateDevices().then((result) => {

From c03e2c4bde96db0b127c412d2ba627540d809b5b Mon Sep 17 00:00:00 2001
From: Timo <toger5@hotmail.de>
Date: Mon, 23 Jun 2025 13:57:52 +0200
Subject: [PATCH 4/5] simple subject instead of derived observable

---
 src/state/MediaDevices.ts    | 50 +++++++++++++++---------------------
 src/state/ObservableScope.ts | 12 ---------
 2 files changed, 20 insertions(+), 42 deletions(-)

diff --git a/src/state/MediaDevices.ts b/src/state/MediaDevices.ts
index 47b24939..a5b2b94f 100644
--- a/src/state/MediaDevices.ts
+++ b/src/state/MediaDevices.ts
@@ -8,7 +8,6 @@ Please see LICENSE in the repository root for full details.
 import {
   combineLatest,
   filter,
-  identity,
   map,
   merge,
   of,
@@ -95,15 +94,16 @@ export const iosDeviceMenu$ =
 
 function availableRawDevices$(
   kind: MediaDeviceKind,
-  recomputeDevicesWithPermissions$: Observable<boolean>,
+  updateAvailableDeviceRequests$: Observable<boolean>,
   scope: ObservableScope,
 ): Observable<MediaDeviceInfo[]> {
-  return recomputeDevicesWithPermissions$.pipe(
-    switchMap((recomputeDevicesWithPermissions) =>
+  return updateAvailableDeviceRequests$.pipe(
+    startWith(false),
+    switchMap((withPermissions) =>
       createMediaDeviceObserver(
         kind,
         (e) => logger.error("Error creating MediaDeviceObserver", e),
-        recomputeDevicesWithPermissions,
+        withPermissions,
       ),
     ),
     startWith([]),
@@ -149,7 +149,7 @@ class AudioInput implements MediaDevice<DeviceLabel, SelectedAudioInputDevice> {
   private readonly availableRaw$: Observable<MediaDeviceInfo[]> =
     availableRawDevices$(
       "audioinput",
-      this.recomputeDevicesWithPermissions$,
+      this.updateAvailableDeviceRequests$,
       this.scope,
     );
 
@@ -185,7 +185,7 @@ class AudioInput implements MediaDevice<DeviceLabel, SelectedAudioInputDevice> {
   }
 
   public constructor(
-    private readonly recomputeDevicesWithPermissions$: Observable<boolean>,
+    private readonly updateAvailableDeviceRequests$: Observable<boolean>,
     private readonly scope: ObservableScope,
   ) {
     this.available$.subscribe((available) => {
@@ -199,7 +199,7 @@ class AudioOutput
 {
   public readonly available$ = availableRawDevices$(
     "audiooutput",
-    this.recomputeDevicesWithPermissions$,
+    this.updateAvailableDeviceRequests$,
     this.scope,
   ).pipe(
     map((availableRaw) => {
@@ -240,7 +240,7 @@ class AudioOutput
   }
 
   public constructor(
-    private readonly recomputeDevicesWithPermissions$: Observable<boolean>,
+    private readonly updateAvailableDeviceRequests$: Observable<boolean>,
     private readonly scope: ObservableScope,
   ) {
     this.available$.subscribe((available) => {
@@ -321,7 +321,7 @@ class ControlledAudioOutput
 class VideoInput implements MediaDevice<DeviceLabel, SelectedDevice> {
   public readonly available$ = availableRawDevices$(
     "videoinput",
-    this.recomputeDevicesWithPermissions$,
+    this.updateAvailableDeviceRequests$,
     this.scope,
   ).pipe(map(buildDeviceMap));
 
@@ -338,7 +338,7 @@ class VideoInput implements MediaDevice<DeviceLabel, SelectedDevice> {
   }
 
   public constructor(
-    private readonly recomputeDevicesWithPermissions$: Observable<boolean>,
+    private readonly updateAvailableDeviceRequests$: Observable<boolean>,
     private readonly scope: ObservableScope,
   ) {
     // This also has the purpose of subscribing to the available devices
@@ -349,7 +349,7 @@ class VideoInput implements MediaDevice<DeviceLabel, SelectedDevice> {
 }
 
 export class MediaDevices {
-  private readonly requests$ = new Subject<boolean>();
+  private readonly updateAvailableDeviceRequests$ = new Subject<boolean>();
   /**
    * Requests that the media devices be populated with the names of each
    * available device, rather than numbered identifiers. This may invoke a
@@ -364,41 +364,31 @@ export class MediaDevices {
       // we only actually update the requests$ subject if there are no
       // devices with a label, because otherwise we already have the permission
       // to access the devices.
-      this.requests$.next(!result.some((device) => device.label));
+      this.updateAvailableDeviceRequests$.next(
+        !result.some((device) => device.label),
+      );
     });
   }
 
-  // Start using device names as soon as requested. This will cause LiveKit to
-  // briefly request device permissions and acquire media streams for each
-  // device type while calling `enumerateDevices`, which is what browsers want
-  // you to do to receive device names in lieu of a more explicit permissions
-  // API. This flag never resets to false, because once permissions are granted
-  // the first time, the user won't be prompted again until reload of the page.
-  private readonly recomputeDevicesWithPermissions$ = this.requests$.pipe(
-    startWith(false),
-    identity,
-    this.scope.stateNonDistinct(),
-  );
-
   public readonly audioInput: MediaDevice<
     DeviceLabel,
     SelectedAudioInputDevice
-  > = new AudioInput(this.recomputeDevicesWithPermissions$, this.scope);
+  > = new AudioInput(this.updateAvailableDeviceRequests$, this.scope);
 
   public readonly audioOutput: MediaDevice<
     AudioOutputDeviceLabel,
     SelectedAudioOutputDevice
   > = getUrlParams().controlledAudioDevices
     ? new ControlledAudioOutput(this.scope)
-    : new AudioOutput(this.recomputeDevicesWithPermissions$, this.scope);
+    : new AudioOutput(this.updateAvailableDeviceRequests$, this.scope);
 
   public readonly videoInput: MediaDevice<DeviceLabel, SelectedDevice> =
-    new VideoInput(this.recomputeDevicesWithPermissions$, this.scope);
+    new VideoInput(this.updateAvailableDeviceRequests$, this.scope);
 
   public constructor(private readonly scope: ObservableScope) {
-    this.recomputeDevicesWithPermissions$.subscribe((recompute) => {
+    this.updateAvailableDeviceRequests$.subscribe((recompute) => {
       logger.info(
-        "[MediaDevices] recomputeDevicesWithPermissions$ changed:",
+        "[MediaDevices] updateAvailableDeviceRequests$ changed:",
         recompute,
       );
     });
diff --git a/src/state/ObservableScope.ts b/src/state/ObservableScope.ts
index e69c46f0..727082cf 100644
--- a/src/state/ObservableScope.ts
+++ b/src/state/ObservableScope.ts
@@ -38,9 +38,6 @@ export class ObservableScope {
       shareReplay({ bufferSize: 1, refCount: false }),
     );
 
-  private readonly stateNonDistinctImpl: MonoTypeOperator = (o$) =>
-    o$.pipe(this.bind(), shareReplay({ bufferSize: 1, refCount: false }));
-
   /**
    * Transforms an Observable into a hot state Observable which replays its
    * latest value upon subscription, skips updates with identical values, and
@@ -50,15 +47,6 @@ export class ObservableScope {
     return this.stateImpl;
   }
 
-  /**
-   * Transforms an Observable into a hot state Observable which replays its
-   * latest value upon subscription, skips updates with identical values, and
-   * is bound to this scope.
-   */
-  public stateNonDistinct(): MonoTypeOperator {
-    return this.stateNonDistinctImpl;
-  }
-
   /**
    * Ends the scope, causing any bound Observables to complete.
    */

From d08a180c54cf738bfb2306555c61e04054de254b Mon Sep 17 00:00:00 2001
From: Timo <toger5@hotmail.de>
Date: Wed, 25 Jun 2025 20:12:54 +0200
Subject: [PATCH 5/5] Simplify and improve locality of the device name request
 logic

---
 src/state/MediaDevices.ts | 87 ++++++++++++++++++++-------------------
 src/utils/observable.ts   | 35 +++++++++++++++-
 2 files changed, 79 insertions(+), 43 deletions(-)

diff --git a/src/state/MediaDevices.ts b/src/state/MediaDevices.ts
index a5b2b94f..884e1ef7 100644
--- a/src/state/MediaDevices.ts
+++ b/src/state/MediaDevices.ts
@@ -33,6 +33,7 @@ import {
 } from "../controls";
 import { getUrlParams } from "../UrlParams";
 import { platform } from "../Platform";
+import { switchWhen } from "../utils/observable";
 
 // This hardcoded id is used in EX ios! It can only be changed in coordination with
 // the ios swift team.
@@ -94,17 +95,28 @@ export const iosDeviceMenu$ =
 
 function availableRawDevices$(
   kind: MediaDeviceKind,
-  updateAvailableDeviceRequests$: Observable<boolean>,
+  usingNames$: Observable<boolean>,
   scope: ObservableScope,
 ): Observable<MediaDeviceInfo[]> {
-  return updateAvailableDeviceRequests$.pipe(
-    startWith(false),
-    switchMap((withPermissions) =>
-      createMediaDeviceObserver(
-        kind,
-        (e) => logger.error("Error creating MediaDeviceObserver", e),
-        withPermissions,
-      ),
+  const logError = (e: Error): void =>
+    logger.error("Error creating MediaDeviceObserver", e);
+  const devices$ = createMediaDeviceObserver(kind, logError, false);
+  const devicesWithNames$ = createMediaDeviceObserver(kind, logError, true);
+
+  return usingNames$.pipe(
+    switchMap((withNames) =>
+      withNames
+        ? // It might be that there is already a media stream running somewhere,
+          // and so we can do without requesting a second one. Only switch to the
+          // device observer that explicitly requests the names if we see that
+          // names are in fact missing from the initial device enumeration.
+          devices$.pipe(
+            switchWhen(
+              (devices, i) => i === 0 && devices.every((d) => !d.label),
+              devicesWithNames$,
+            ),
+          )
+        : devices$,
     ),
     startWith([]),
     scope.state(),
@@ -147,11 +159,7 @@ function selectDevice$<Label>(
 
 class AudioInput implements MediaDevice<DeviceLabel, SelectedAudioInputDevice> {
   private readonly availableRaw$: Observable<MediaDeviceInfo[]> =
-    availableRawDevices$(
-      "audioinput",
-      this.updateAvailableDeviceRequests$,
-      this.scope,
-    );
+    availableRawDevices$("audioinput", this.usingNames$, this.scope);
 
   public readonly available$ = this.availableRaw$.pipe(
     map(buildDeviceMap),
@@ -185,7 +193,7 @@ class AudioInput implements MediaDevice<DeviceLabel, SelectedAudioInputDevice> {
   }
 
   public constructor(
-    private readonly updateAvailableDeviceRequests$: Observable<boolean>,
+    private readonly usingNames$: Observable<boolean>,
     private readonly scope: ObservableScope,
   ) {
     this.available$.subscribe((available) => {
@@ -199,7 +207,7 @@ class AudioOutput
 {
   public readonly available$ = availableRawDevices$(
     "audiooutput",
-    this.updateAvailableDeviceRequests$,
+    this.usingNames$,
     this.scope,
   ).pipe(
     map((availableRaw) => {
@@ -240,7 +248,7 @@ class AudioOutput
   }
 
   public constructor(
-    private readonly updateAvailableDeviceRequests$: Observable<boolean>,
+    private readonly usingNames$: Observable<boolean>,
     private readonly scope: ObservableScope,
   ) {
     this.available$.subscribe((available) => {
@@ -321,7 +329,7 @@ class ControlledAudioOutput
 class VideoInput implements MediaDevice<DeviceLabel, SelectedDevice> {
   public readonly available$ = availableRawDevices$(
     "videoinput",
-    this.updateAvailableDeviceRequests$,
+    this.usingNames$,
     this.scope,
   ).pipe(map(buildDeviceMap));
 
@@ -338,7 +346,7 @@ class VideoInput implements MediaDevice<DeviceLabel, SelectedDevice> {
   }
 
   public constructor(
-    private readonly updateAvailableDeviceRequests$: Observable<boolean>,
+    private readonly usingNames$: Observable<boolean>,
     private readonly scope: ObservableScope,
   ) {
     // This also has the purpose of subscribing to the available devices
@@ -349,48 +357,43 @@ class VideoInput implements MediaDevice<DeviceLabel, SelectedDevice> {
 }
 
 export class MediaDevices {
-  private readonly updateAvailableDeviceRequests$ = new Subject<boolean>();
+  private readonly deviceNamesRequest$ = new Subject<void>();
   /**
    * Requests that the media devices be populated with the names of each
    * available device, rather than numbered identifiers. This may invoke a
    * permissions pop-up, so it should only be called when there is a clear user
    * intent to view the device list.
-   *
-   * This always updates the `available$` devices for each media type with the current value
-   * of `enumerateDevices`.
    */
   public requestDeviceNames(): void {
-    void navigator.mediaDevices.enumerateDevices().then((result) => {
-      // we only actually update the requests$ subject if there are no
-      // devices with a label, because otherwise we already have the permission
-      // to access the devices.
-      this.updateAvailableDeviceRequests$.next(
-        !result.some((device) => device.label),
-      );
-    });
+    this.deviceNamesRequest$.next();
   }
 
+  // Start using device names as soon as requested. This will cause LiveKit to
+  // briefly request device permissions and acquire media streams for each
+  // device type while calling `enumerateDevices`, which is what browsers want
+  // you to do to receive device names in lieu of a more explicit permissions
+  // API. This flag never resets to false, because once permissions are granted
+  // the first time, the user won't be prompted again until reload of the page.
+  private readonly usingNames$ = this.deviceNamesRequest$.pipe(
+    map(() => true),
+    startWith(false),
+    this.scope.state(),
+  );
+
   public readonly audioInput: MediaDevice<
     DeviceLabel,
     SelectedAudioInputDevice
-  > = new AudioInput(this.updateAvailableDeviceRequests$, this.scope);
+  > = new AudioInput(this.usingNames$, this.scope);
 
   public readonly audioOutput: MediaDevice<
     AudioOutputDeviceLabel,
     SelectedAudioOutputDevice
   > = getUrlParams().controlledAudioDevices
     ? new ControlledAudioOutput(this.scope)
-    : new AudioOutput(this.updateAvailableDeviceRequests$, this.scope);
+    : new AudioOutput(this.usingNames$, this.scope);
 
   public readonly videoInput: MediaDevice<DeviceLabel, SelectedDevice> =
-    new VideoInput(this.updateAvailableDeviceRequests$, this.scope);
+    new VideoInput(this.usingNames$, this.scope);
 
-  public constructor(private readonly scope: ObservableScope) {
-    this.updateAvailableDeviceRequests$.subscribe((recompute) => {
-      logger.info(
-        "[MediaDevices] updateAvailableDeviceRequests$ changed:",
-        recompute,
-      );
-    });
-  }
+  public constructor(private readonly scope: ObservableScope) {}
 }
diff --git a/src/utils/observable.ts b/src/utils/observable.ts
index efda2182..22f7c455 100644
--- a/src/utils/observable.ts
+++ b/src/utils/observable.ts
@@ -5,7 +5,17 @@ SPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-Element-Commercial
 Please see LICENSE in the repository root for full details.
 */
 
-import { type Observable, defer, finalize, scan, startWith, tap } from "rxjs";
+import {
+  type Observable,
+  concat,
+  defer,
+  finalize,
+  map,
+  scan,
+  startWith,
+  takeWhile,
+  tap,
+} from "rxjs";
 
 const nothing = Symbol("nothing");
 
@@ -39,6 +49,29 @@ export function accumulate<State, Event>(
     events$.pipe(scan(update, initial), startWith(initial));
 }
 
+const switchSymbol = Symbol("switch");
+
+/**
+ * RxJS operator which behaves like the input Observable (A) until it emits a
+ * value satisfying the given predicate, then behaves like Observable B.
+ *
+ * The switch is immediate; the value that triggers the switch will not be
+ * present in the output.
+ */
+export function switchWhen<A, B>(
+  predicate: (a: A, index: number) => boolean,
+  b$: Observable<B>,
+) {
+  return (a$: Observable<A>): Observable<A | B> =>
+    concat(
+      a$.pipe(
+        map((a, index) => (predicate(a, index) ? switchSymbol : a)),
+        takeWhile((a) => a !== switchSymbol),
+      ) as Observable<A>,
+      b$,
+    );
+}
+
 /**
  * Reads the current value of a state Observable without reacting to future
  * changes.