also add non deprecated audio url parameter

src/UrlParams.ts

@@ -132,7 +132,7 @@ export interface UrlParams {
    * allowing the list of output devices to be controlled by the app hosting
    * Element Call.
    */
-  controlledMediaDevices: boolean;
+  controlledAudioDevices: 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
@@ -288,7 +288,11 @@ export const getUrlParams = (
     fontScale: Number.isNaN(fontScale) ? null : fontScale,
     allowIceFallback: parser.getFlagParam("allowIceFallback"),
     perParticipantE2EE: parser.getFlagParam("perParticipantE2EE"),
-    controlledMediaDevices: parser.getFlagParam("controlledMediaDevices"),
+    controlledAudioDevices: parser.getFlagParam(
+      "controlledAudioDevices",
+      // the deprecated property name
+      parser.getFlagParam("controlledMediaDevices"),
+    ),
     skipLobby: parser.getFlagParam(
       "skipLobby",
       isWidget && intent === UserIntent.StartNewCall,

src/livekit/MediaDevicesContext.tsx

@@ -276,7 +276,7 @@ export const MediaDevicesProvider: FC<Props> = ({ children }) => {
     usingNames,
   } = useInputDevices();
 
-  const { controlledMediaDevices } = useUrlParams();
+  const { controlledAudioDevices } = useUrlParams();
 
   const webViewAudioOutput = useMediaDeviceHandle(
     "audiooutput",
@@ -288,7 +288,7 @@ export const MediaDevicesProvider: FC<Props> = ({ children }) => {
   const context: MediaDevices = useMemo(
     () => ({
       audioInput,
-      audioOutput: controlledMediaDevices
+      audioOutput: controlledAudioDevices
         ? controlledAudioOutput
         : webViewAudioOutput,
       videoInput,
@@ -297,7 +297,7 @@ export const MediaDevicesProvider: FC<Props> = ({ children }) => {
     }),
     [
       audioInput,
-      controlledMediaDevices,
+      controlledAudioDevices,
       controlledAudioOutput,
       webViewAudioOutput,
       videoInput,

src/settings/SettingsModal.tsx

@@ -110,7 +110,7 @@ export const SettingsModal: FC<Props> = ({
   // a single device. These are called "headset" or "speaker" (or similar) but contain both input and output.
   // On EC, we decided that it is less confusing for the user if they see those options in the output section
   // rather than the input section.
-  const { controlledMediaDevices } = useUrlParams();
+  const { controlledAudioDevices } = useUrlParams();
   // If we are on iOS we will show a button to open the native audio device picker.
   const iosDeviceMenu = useObservableEagerState(iosDeviceMenu$);
 
@@ -120,7 +120,7 @@ export const SettingsModal: FC<Props> = ({
     content: (
       <>
         <Form>
-          {!controlledMediaDevices && (
+          {!controlledAudioDevices && (
             <DeviceSelection
               device={devices.audioInput}
               title={t("settings.devices.microphone")}