Skip to content

Commit f0403c8

Browse files
toger5toger5
committed
also add non deprecated audio url parameter
1 parent fa0b521 commit f0403c8

File tree

5 files changed

+13
-9
lines changed

5 files changed

+13
-9
lines changed

‎docs/controls.md

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -8,7 +8,7 @@ A few aspects of Element Call's interface can be controlled through a global API
88
- `controls.enablePip(): void` Puts the call interface into picture-in-picture mode. Throws if not in a call.
99
- `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.
1010

11-
## Audio output devices
11+
## Audio devices
1212

1313
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.
1414

‎docs/url-params.md

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -63,7 +63,7 @@ These parameters are relevant to both [widget](./embedded-standalone.md) and [st
6363
| `lang` | [BCP 47](https://www.rfc-editor.org/info/bcp47) code | No | No | The language the app should use. |
6464
| `password` | | No | No | E2EE password when using a shared secret. (For individual sender keys in embedded mode this is not required.) |
6565
| `perParticipantE2EE` | `true` or `false` | No, defaults to `false` | No, defaults to `false` | Enables per participant encryption with Keys exchanged over encrypted matrix room messages. |
66-
| `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. |
66+
| `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. |
6767
| `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()`. |
6868
| `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. |
6969
| `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.) |

‎src/UrlParams.ts

Lines changed: 6 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -132,7 +132,7 @@ export interface UrlParams {
132132
* allowing the list of output devices to be controlled by the app hosting
133133
* Element Call.
134134
*/
135-
controlledMediaDevices: boolean;
135+
controlledAudioDevices: boolean;
136136
/**
137137
* Setting this flag skips the lobby and brings you in the call directly.
138138
* In the widget this can be combined with preload to pass the device settings
@@ -288,7 +288,11 @@ export const getUrlParams = (
288288
fontScale: Number.isNaN(fontScale) ? null : fontScale,
289289
allowIceFallback: parser.getFlagParam("allowIceFallback"),
290290
perParticipantE2EE: parser.getFlagParam("perParticipantE2EE"),
291-
controlledMediaDevices: parser.getFlagParam("controlledMediaDevices"),
291+
controlledAudioDevices: parser.getFlagParam(
292+
"controlledAudioDevices",
293+
// the deprecated property name
294+
parser.getFlagParam("controlledMediaDevices"),
295+
),
292296
skipLobby: parser.getFlagParam(
293297
"skipLobby",
294298
isWidget && intent === UserIntent.StartNewCall,

‎src/livekit/MediaDevicesContext.tsx

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -276,7 +276,7 @@ export const MediaDevicesProvider: FC<Props> = ({ children }) => {
276276
usingNames,
277277
} = useInputDevices();
278278

279-
const { controlledMediaDevices } = useUrlParams();
279+
const { controlledAudioDevices } = useUrlParams();
280280

281281
const webViewAudioOutput = useMediaDeviceHandle(
282282
"audiooutput",
@@ -288,7 +288,7 @@ export const MediaDevicesProvider: FC<Props> = ({ children }) => {
288288
const context: MediaDevices = useMemo(
289289
() => ({
290290
audioInput,
291-
audioOutput: controlledMediaDevices
291+
audioOutput: controlledAudioDevices
292292
? controlledAudioOutput
293293
: webViewAudioOutput,
294294
videoInput,
@@ -297,7 +297,7 @@ export const MediaDevicesProvider: FC<Props> = ({ children }) => {
297297
}),
298298
[
299299
audioInput,
300-
controlledMediaDevices,
300+
controlledAudioDevices,
301301
controlledAudioOutput,
302302
webViewAudioOutput,
303303
videoInput,

‎src/settings/SettingsModal.tsx

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -110,7 +110,7 @@ export const SettingsModal: FC<Props> = ({
110110
// a single device. These are called "headset" or "speaker" (or similar) but contain both input and output.
111111
// On EC, we decided that it is less confusing for the user if they see those options in the output section
112112
// rather than the input section.
113-
const { controlledMediaDevices } = useUrlParams();
113+
const { controlledAudioDevices } = useUrlParams();
114114
// If we are on iOS we will show a button to open the native audio device picker.
115115
const iosDeviceMenu = useObservableEagerState(iosDeviceMenu$);
116116

@@ -120,7 +120,7 @@ export const SettingsModal: FC<Props> = ({
120120
content: (
121121
<>
122122
<Form>
123-
{!controlledMediaDevices && (
123+
{!controlledAudioDevices && (
124124
<DeviceSelection
125125
device={devices.audioInput}
126126
title={t("settings.devices.microphone")}

0 commit comments

Comments
 (0)