From f0403c80bc9ce91917895419cb41bef2d995d7ad Mon Sep 17 00:00:00 2001 From: Timo Date: Thu, 22 May 2025 19:10:09 +0200 Subject: [PATCH] also add non deprecated audio url parameter --- docs/controls.md | 2 +- docs/url-params.md | 2 +- src/UrlParams.ts | 8 ++++++-- src/livekit/MediaDevicesContext.tsx | 6 +++--- src/settings/SettingsModal.tsx | 4 ++-- 5 files changed, 13 insertions(+), 9 deletions(-) diff --git a/docs/controls.md b/docs/controls.md index 3417cd6e..bb457237 100644 --- a/docs/controls.md +++ b/docs/controls.md @@ -8,7 +8,7 @@ A few aspects of Element Call's interface can be controlled through a global API - `controls.enablePip(): void` Puts the call interface into picture-in-picture mode. Throws if not in a call. - `controls.disablePip(): void` Takes the call interface out of picture-in-picture mode, restoring it to its natural display mode. Throws if not in a call. -## Audio output devices +## Audio devices On mobile platforms (iOS, Android), web views do not reliably support selecting audio output devices such as the main speaker, earpiece, or headset. To address this limitation, the following functions allow the hosting application (e.g., Element Web, Element X) to manage audio devices via exposed JavaScript interfaces. These functions must be enabled using the URL parameter `controlledAudioDevices` to take effect. diff --git a/docs/url-params.md b/docs/url-params.md index c57034d0..09525ee2 100644 --- a/docs/url-params.md +++ b/docs/url-params.md @@ -63,7 +63,7 @@ These parameters are relevant to both [widget](./embedded-standalone.md) and [st | `lang` | [BCP 47](https://www.rfc-editor.org/info/bcp47) code | No | No | The language the app should use. | | `password` | | No | No | E2EE password when using a shared secret. (For individual sender keys in embedded mode this is not required.) | | `perParticipantE2EE` | `true` or `false` | No, defaults to `false` | No, defaults to `false` | Enables per participant encryption with Keys exchanged over encrypted matrix room messages. | -| `controlledMediaDevices` | `true` or `false` | No, defaults to `false` | No, defaults to `false` | Whether the [global JS controls for audio output devices](./controls.md#audio-devices) should be enabled, allowing the list of output devices to be controlled by the app hosting Element Call. | +| `controlledAudioDevices` | `true` or `false` | No, defaults to `false` | No, defaults to `false` | Whether the [global JS controls for audio output devices](./controls.md#audio-devices) should be enabled, allowing the list of audio devices to be controlled by the app hosting Element Call. | | `roomId` | [Matrix Room ID](https://spec.matrix.org/v1.12/appendices/#room-ids) | Yes | No | Anything about what room we're pointed to should be from useRoomIdentifier which parses the path and resolves alias with respect to the default server name, however roomId is an exception as we need the room ID in embedded widget mode, and not the room alias (or even the via params because we are not trying to join it). This is also not validated, where it is in `useRoomIdentifier()`. | | `showControls` | `true` or `false` | No, defaults to `true` | No, defaults to `true` | Displays controls like mute, screen-share, invite, and hangup buttons during a call. | | `skipLobby` (deprecated: use `intent` instead) | `true` or `false` | No. If `intent` is explicitly `start_call` then defaults to `true`. Otherwise defaults to `false` | No, defaults to `false` | Skips the lobby to join a call directly, can be combined with preload in widget. When `true` the audio and video inputs will be muted by default. (This means there currently is no way to start without muted video if one wants to skip the lobby. Also not in widget mode.) | diff --git a/src/UrlParams.ts b/src/UrlParams.ts index 224cbedd..17e169d9 100644 --- a/src/UrlParams.ts +++ b/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, diff --git a/src/livekit/MediaDevicesContext.tsx b/src/livekit/MediaDevicesContext.tsx index 32fda847..636f5a6d 100644 --- a/src/livekit/MediaDevicesContext.tsx +++ b/src/livekit/MediaDevicesContext.tsx @@ -276,7 +276,7 @@ export const MediaDevicesProvider: FC = ({ children }) => { usingNames, } = useInputDevices(); - const { controlledMediaDevices } = useUrlParams(); + const { controlledAudioDevices } = useUrlParams(); const webViewAudioOutput = useMediaDeviceHandle( "audiooutput", @@ -288,7 +288,7 @@ export const MediaDevicesProvider: FC = ({ children }) => { const context: MediaDevices = useMemo( () => ({ audioInput, - audioOutput: controlledMediaDevices + audioOutput: controlledAudioDevices ? controlledAudioOutput : webViewAudioOutput, videoInput, @@ -297,7 +297,7 @@ export const MediaDevicesProvider: FC = ({ children }) => { }), [ audioInput, - controlledMediaDevices, + controlledAudioDevices, controlledAudioOutput, webViewAudioOutput, videoInput, diff --git a/src/settings/SettingsModal.tsx b/src/settings/SettingsModal.tsx index 74307d02..57463fc7 100644 --- a/src/settings/SettingsModal.tsx +++ b/src/settings/SettingsModal.tsx @@ -110,7 +110,7 @@ export const SettingsModal: FC = ({ // 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 = ({ content: ( <>
- {!controlledMediaDevices && ( + {!controlledAudioDevices && (