DO NOT MERGE WIP on audio route experiment

src/UrlParams.ts

@@ -196,6 +196,7 @@ export interface UrlConfiguration {
    * Element Call.
    */
   controlledAudioDevices: boolean;
+  audioInputOutputSelection: boolean;
   /**
    * Setting this flag skips the lobby and brings you in the call directly.
    * In the widget this can be combined with preload to pass the device settings
@@ -372,6 +373,7 @@ export const computeUrlParams = (search = "", hash = ""): UrlParams => {
     allowIceFallback: true,
     perParticipantE2EE: true,
     controlledAudioDevices: platform === "desktop" ? false : true,
+    audioInputOutputSelection: platform !== "ios",
     skipLobby: true,
     returnToLobby: false,
     sendNotificationType: "notification",
@@ -427,6 +429,7 @@ export const computeUrlParams = (search = "", hash = ""): UrlParams => {
         allowIceFallback: false,
         perParticipantE2EE: false,
         controlledAudioDevices: false,
+        audioInputOutputSelection: true,
         skipLobby: false,
         returnToLobby: false,
         sendNotificationType: undefined,

src/button/AudioRouteButton.tsx

@@ -0,0 +1,60 @@
+/*
+Copyright 2026 Element Creations Ltd.
+
+SPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-Element-Commercial
+Please see LICENSE in the repository root for full details.
+*/
+
+import { useTranslation } from "react-i18next";
+import { Button, Tooltip } from "@vector-im/compound-web";
+import {
+  EarpieceIcon,
+  HeadphonesSolidIcon,
+  VolumeOnSolidIcon,
+} from "@vector-im/compound-design-tokens/assets/web/icons";
+
+import type { ComponentPropsWithoutRef, FC } from "react";
+import { RouteType } from "../controls.ts";
+
+interface AudioRouteButtonProps extends ComponentPropsWithoutRef<"button"> {
+  size?: "md" | "lg";
+  routeType: RouteType;
+}
+
+export const AudioRouteButton: FC<AudioRouteButtonProps> = ({
+  routeType,
+  ...props
+}) => {
+  const { t } = useTranslation();
+  let label: string
+  let icon;
+  switch(routeType) {
+    case RouteType.speaker:
+      label = t("settings.devices.loudspeaker")
+      icon = VolumeOnSolidIcon;
+      break;
+    case RouteType.phone:
+      label = t("settings.devices.handset");
+      icon = EarpieceIcon
+      break;
+    case RouteType.bluetooth:
+      label = "bluetooth headset";
+      icon = HeadphonesSolidIcon;
+      break;
+    case RouteType.wired:
+      label = "headset";
+      icon = HeadphonesSolidIcon;
+      break;
+  }
+
+  return (
+    <Tooltip label={label}>
+      <Button
+        iconOnly
+        Icon={icon}
+        {...props}
+        kind={"primary"}
+      />
+    </Tooltip>
+  );
+};

src/components/CallFooter.tsx

@@ -34,6 +34,7 @@ import {
   MediaMuteAndSwitchButton,
   type MenuOptions,
 } from "./MediaMuteAndSwitchButton";
+import { type AudioRoute, RouteType } from "../controls.ts";
 
 export interface AudioOutputSwitcher {
   targetOutput: string;
@@ -90,6 +91,8 @@ export interface FooterProps {
   selectedVideo?: string;
   selectAudioDevice?: (deviceId: string) => void;
   selectVideoDevice?: (deviceId: string) => void;
+
+  nativeAudioRoute?: { targetOutput: AudioRoute , switch: () => void };
 }
 
 export const CallFooter: FC<FooterProps> = ({
@@ -112,6 +115,7 @@ export const CallFooter: FC<FooterProps> = ({
   reactionIdentifier,
   reactionData,
   audioOutputSwitcher,
+  nativeAudioRoute,
   hangup,
   debugTileLayout,
   tileStoreGeneration,
@@ -228,15 +232,30 @@ export const CallFooter: FC<FooterProps> = ({
 
   // In this PR we just move the button to the bottom bar. We do not yet update its appearance
   const audioOutputButton = useMemo(() => {
-    if (audioOutputSwitcher === undefined) return null;
-    return (
-      <LoudspeakerButton
-        size={buttonSize}
-        onClick={() => audioOutputSwitcher.switch()}
-        loudspeakerModeEnabled={audioOutputSwitcher.targetOutput === "earpiece"}
-      />
-    );
-  }, [audioOutputSwitcher, buttonSize]);
+
+    if (nativeAudioRoute) {
+      return (
+        // TODO make a 4 state button to also include the headset option when supported by the OS
+        <LoudspeakerButton
+          size={buttonSize}
+          onClick={() => nativeAudioRoute.switch()}
+          loudspeakerModeEnabled={nativeAudioRoute.targetOutput.type === RouteType.speaker}
+        />
+      );
+    } else {
+      if (audioOutputSwitcher === undefined) return null;
+      return (
+        <LoudspeakerButton
+          size={buttonSize}
+          onClick={() => audioOutputSwitcher.switch()}
+          loudspeakerModeEnabled={
+            audioOutputSwitcher.targetOutput === "earpiece"
+          }
+        />
+      );
+    }
+  }, [audioOutputSwitcher, buttonSize, nativeAudioRoute]);
+
 
   if (audioOutputButton) buttons.push(audioOutputButton);
 

src/controls.ts

@@ -8,6 +8,18 @@ Please see LICENSE in the repository root for full details.
 import { Subject } from "rxjs";
 import { logger } from "matrix-js-sdk/lib/logger";
 
+export enum RouteType {
+  speaker = "speaker",
+  phone = "phone",
+  bluetooth = "bluetooth",
+  wired = "wired",
+}
+
+export interface AudioRoute {
+  type: RouteType;
+  label: string;
+}
+
 export interface Controls {
   canEnterPip(): boolean;
   enablePip(): void;
@@ -31,6 +43,9 @@ export interface Controls {
   setOutputEnabled(enabled: boolean): void;
   /** @deprecated use  showNativeAudioDevicePicker instead*/
   showNativeOutputDevicePicker?: () => void;
+
+  /** iOS native controlled device selection */
+  onNativeRouteChanged(route: AudioRoute): void;
 }
 
 /**
@@ -93,6 +108,8 @@ export const outputDevice$ = new Subject<string>();
  */
 export const setAudioEnabled$ = new Subject<boolean>();
 
+export const currentRoute$ = new Subject<AudioRoute | null>();
+
 let playbackStartedEmitted = false;
 export const setPlaybackStarted = (): void => {
   if (!playbackStartedEmitted) {
@@ -101,6 +118,10 @@ export const setPlaybackStarted = (): void => {
   }
 };
 
+export const showNativeAudioDevicePicker = (): void => {
+  window.controls.showNativeAudioDevicePicker?.();
+};
+
 window.controls = {
   canEnterPip(): boolean {
     return setPipEnabled$.observed;
@@ -156,6 +177,14 @@ window.controls = {
     setAudioEnabled$.next(enabled);
   },
 
+  onNativeRouteChanged(route: AudioRoute): void {
+    logger.info(
+      "[MediaDevices controls] onNativeRouteChanged called from native",
+      route,
+    );
+    currentRoute$.next(route);
+  },
+
   // wrappers for the deprecated controls fields
   setOutputEnabled(enabled: boolean): void {
     this.setAudioEnabled(enabled);

src/main.tsx

@@ -31,7 +31,7 @@ window.setLKLogLevel = setLKLogLevel;
 initRageshake().catch((e) => {
   logger.error("Failed to initialize rageshake", e);
 });
-setLKLogLevel("info");
+setLKLogLevel("trace");
 setLKLogExtension((level, msg, context) => {
   // we pass a synthetic logger name of "livekit" to the rageshake to make it easier to read
   global.mx_rage_logger.log(level, "livekit", msg, context);

src/room/GroupCallView.tsx

@@ -140,6 +140,72 @@
     };
   }, []);
 
+  // Add this useEffect in GroupCallView.tsx to monitor native navigator.mediaDevices
+  useEffect(() => {
+    logger.info(
+      "[Navigator.mediaDevices Debug] Setting up native device monitoring",
+    );
+
+    // Log initial devices
+    navigator.mediaDevices
+      .enumerateDevices()
+      .then((devices) => {
+        logger.info(
+          "[Navigator.mediaDevices Debug] Initial devices:",
+          devices.map((d) => ({
+            kind: d.kind,
+            deviceId: d.deviceId,
+            label: d.label,
+            groupId: d.groupId,
+          })),
+        );
+      })
+      .catch((e) =>
+        logger.error(
+          "[Navigator.mediaDevices Debug] Failed to enumerate initial devices:",
+          e,
+        ),
+      );
+
+    // Monitor devicechange events
+    const handleDeviceChange = (): void => {
+      logger.info("[Navigator.mediaDevices Debug] 'devicechange' event fired!");
+
+      navigator.mediaDevices
+        .enumerateDevices()
+        .then((devices) => {
+          logger.info(
+            "[Navigator.mediaDevices Debug] Devices after change:",
+            devices.map((d) => ({
+              kind: d.kind,
+              deviceId: d.deviceId,
+              label: d.label,
+              groupId: d.groupId,
+            })),
+          );
+        })
+        .catch((e) =>
+          logger.error(
+            "[Navigator.mediaDevices Debug] Failed to enumerate devices:",
+            e,
+          ),
+        );
+    };
+
+    navigator.mediaDevices.addEventListener("devicechange", handleDeviceChange);
+
+    logger.info("[Navigator.mediaDevices Debug] Device monitoring active");
+
+    // Cleanup
+    return (): void => {
+      logger.info("[Navigator.mediaDevices Debug] Removing device monitoring");
+      navigator.mediaDevices.removeEventListener(
+        "devicechange",
+        handleDeviceChange,
+      );
+    };
+  }, []);
+
   // This CSS is the only way we could find to not make element call scroll for
   // viewport sizes smaller than 122px width. (It is actually this exact number: 122px
   // tested on different devices...)
@@ -528,4 +594,4 @@
       {body}
     </GroupCallErrorBoundary>
   );
-};
+};;

src/room/InCallView.tsx

@@ -248,6 +248,7 @@ export const InCallView: FC<InCallViewProps> = ({
   const showFooter = useBehavior(vm.showFooter$);
   const earpieceMode = useBehavior(vm.earpieceMode$);
   const audioOutputSwitcher = useBehavior(vm.audioOutputSwitcher$);
+  const nativeAudioRoute = useBehavior(vm.nativeAudioRouteSwitcher$);
   const sharingScreen = useBehavior(vm.sharingScreen$);
 
   const fatalCallError = useBehavior(vm.fatalError$);
@@ -590,6 +591,7 @@ export const InCallView: FC<InCallViewProps> = ({
       reactionIdentifier={`${client.getUserId()}:${client.getDeviceId()}`}
       reactionData={supportsReactions ? vm : undefined}
       audioOutputSwitcher={audioOutputSwitcher ?? undefined}
+      nativeAudioRoute = { nativeAudioRoute ?? undefined}
       // Only pass the openSettings function if the settings button is not in the app bar.
       // If there is no fn the button will be hidden in the footer.
       openSettings={settingsButtonInAppBar ? undefined : openSettings}

src/room/LobbyView.tsx

@@ -26,6 +26,7 @@ import {
 } from "livekit-client";
 import { useObservableEagerState } from "observable-hooks";
 import { useNavigate } from "react-router-dom";
+import { map, startWith } from "rxjs";
 
 import inCallStyles from "./InCallView.module.css";
 import styles from "./LobbyView.module.css";
@@ -48,6 +49,14 @@ import { getValue } from "../utils/observable";
 import { useBehavior } from "../useBehavior";
 import { CallFooter } from "../components/CallFooter";
 import { useCallViewKeyboardShortcuts } from "../useCallViewKeyboardShortcuts";
+import {
+  type AudioRoute,
+  currentRoute$,
+  RouteType,
+  showNativeAudioDevicePicker,
+} from "../controls.ts";
+import { ObservableScope } from "../state/ObservableScope.ts";
+import { startsWith } from "lodash-es";
 
 interface Props {
   client: MatrixClient;
@@ -184,6 +193,39 @@ export const LobbyView: FC<Props> = ({
 
   useTrackProcessorSync(videoTrack);
 
+  const [nativeAudioRoute, setNativeAudioRoute] = useState<{
+    targetOutput: AudioRoute
+    switch: () => void
+  } | null>();
+  useEffect(() => {
+    const scope = new ObservableScope();
+    const nativeAudioRouteSwitcher$ = scope.behavior<{
+      targetOutput: AudioRoute;
+      switch: () => void;
+    } | null>(
+      currentRoute$.pipe(
+        map((route) => {
+          return {
+            targetOutput: route || { type: RouteType.speaker, label: "" },
+            switch: (): void => {
+              showNativeAudioDevicePicker?.();
+            },
+          };
+        }),
+        startWith(null),
+      ),
+    );
+
+    nativeAudioRouteSwitcher$.subscribe((route) => {
+      setNativeAudioRoute(route);
+    });
+    return (): void => {
+      scope.end();
+    };
+  }, [setNativeAudioRoute]);
+
+
+
   // TODO: Unify this component with InCallView, so we can get slick joining
   // animations and don't have to feel bad about reusing its CSS
   return (
@@ -234,6 +276,7 @@ export const LobbyView: FC<Props> = ({
           toggleVideo={toggleVideo ?? undefined}
           openSettings={openSettings}
           hangup={!confineToRoom ? onLeaveClick : undefined}
+          nativeAudioRoute={nativeAudioRoute ?? undefined}
           // Logo and header are connected. We will only show the logo in SPA with header.
           hideLogo={hideHeader}
         >