Fix build on Windows

Co-authored-by: renovate[bot] <29139614+renovate[bot]@users.noreply.github.com>

README.md

@@ -34,16 +34,16 @@ You can find the latest development version continuously deployed to
 ## ✨ Key Features
 
 ✅ **Decentralized & Federated** – No central authority; works across Matrix
-homeservers.  
-✅ **End-to-End Encrypted** – Secure and private calls.  
+homeservers.
+✅ **End-to-End Encrypted** – Secure and private calls.
 ✅ **Standalone, Widget & Component Mode** – Use as an independent app, embed
 in Matrix clients as a widget, or (experimentally) mount it as a React component
-inside your own application.  
-✅ **WebRTC-based** – No additional software required.  
+inside your own application.
+✅ **WebRTC-based** – No additional software required.
 ✅ **Scalable with LiveKit** – Supports large meetings via SFU
-([MSC4195: MatrixRTC using LiveKit backend](https://github.com/hughns/matrix-spec-proposals/blob/hughns/matrixrtc-livekit/proposals/4195-matrixrtc-livekit.md)).  
+([MSC4195: MatrixRTC using LiveKit backend](https://github.com/hughns/matrix-spec-proposals/blob/hughns/matrixrtc-livekit/proposals/4195-matrixrtc-livekit.md)).
 ✅ **Raise Hand** – Participants can signal when they want to speak, helping to
-organize the flow of the meeting.  
+organize the flow of the meeting.
 ✅ **Emoji Reactions** – Users can react with emojis 👍️ 🎉 👏 🤘, adding
 engagement and interactivity to the conversation.
 
@@ -309,6 +309,23 @@ root. The host imports the component from
 `react-dom`, `matrix-js-sdk` and `livekit-client` itself, since the bundle leaves
 them external.
 
+The component is large, and a host will usually load it lazily, only once a
+call is shown. Everything a host needs in order to talk about a call before
+then is also exported
+from `@element-hq/element-call-component/api` (a small entry point that does not
+load the component).
+
+- props and the types they are made of
+- the handle
+- the host bridge
+- `UserIntent`
+- `HeaderStyle`
+- `BackgroundStyle` enums
+- `configurationForIntent`, the defaults each intent implies
+  Import from it wherever a value such as
+  `BackgroundStyle.Solid` is needed on a path that must stay light; the main
+  entry point re-exports all of it too.
+
 ### Backend
 
 A docker compose file `docker-compose-dev.yml` is provided to start the

component/api.ts

@@ -0,0 +1,124 @@
+/*
+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.
+*/
+
+/**
+ * EXPERIMENTAL
+ *
+ * What a host needs in order to talk about Element Call, without Element Call:
+ * the component's props and the types they are made of, the handle and the
+ * host bridge, the intents a call can be started with and the configuration
+ * each implies.
+ *
+ * This is an entry point of its own, `@element-hq/element-call-component/api`,
+ * so that a host can import it on a path that must stay light — a call model
+ * that needs `BackgroundStyle.Solid` as a value, say — and load the component
+ * itself, and everything it brings, only when a call is shown. The main entry
+ * point re-exports all of it, so a host that does not care may import
+ * everything from there.
+ *
+ * Nothing in here may reach anything that is not a type or a constant: the
+ * point of this module is what it does not import.
+ */
+
+import type { Ref } from "react";
+import type { MatrixClient } from "matrix-js-sdk";
+
+import type { UrlProperties } from "../src/UrlParams";
+import type { ElementCallHandle, ElementCallHostBridge } from "./host";
+import {
+  BackgroundStyle,
+  configurationForIntent,
+  HeaderStyle,
+  type UrlConfiguration,
+  UserIntent,
+} from "../src/UrlConfiguration";
+
+// How the host and Element Call talk to each other, and what they say
+export type { ElementCallHandle, ElementCallHostBridge } from "./host";
+export type { DeviceMuteRequest, DeviceMuteState } from "../src/HostBridge";
+export type { JoinCallData } from "../src/widget";
+// The deployment-wide configuration, as distinct from ElementCallConfiguration
+// below, which is per call
+export type { ConfigOptions } from "../src/config/ConfigOptions";
+// The values that appear in ElementCallConfiguration and in the intent, and
+// what each intent means by default
+export {
+  BackgroundStyle,
+  configurationForIntent,
+  HeaderStyle,
+  type UrlConfiguration,
+  UserIntent,
+};
+
+/**
+ * How Element Call should behave. Everything is optional; anything left out
+ * takes the default that {@link ElementCallProps.intent} implies.
+ *
+ * This is the behaviour a widget can be configured with through its URL, plus
+ * the one fact about the call a host has a say in here, the background. The
+ * rest of what a widget's URL carries — who the user is, how to reach the
+ * homeserver, where to report analytics, the shared secret of a room that is
+ * encrypted with one — a component host supplies by other routes, or not at
+ * all; and what can change while the call is running, the theme and the
+ * language, is a prop of its own.
+ */
+export type ElementCallConfiguration = Partial<UrlConfiguration> &
+  Partial<Pick<UrlProperties, "background">>;
+
+export interface ElementCallProps {
+  /**
+   * The client to place the call with. Element Call does not authenticate
+   * anyone or manage a session of its own; this one is the host's.
+   */
+  client: MatrixClient;
+  /** The room to call in. The host's client must already know about it. */
+  roomId: string;
+  /**
+   * What the user asked for — whether they started the call or joined one that
+   * was already running, and whether it is a call in a group or a DM. Element
+   * Call decides what each of those means: whether to show the lobby first,
+   * whether to ring, and so on.
+   *
+   * Defaults to joining an existing group call, which is the most conservative
+   * reading, but a host that knows which button the user pressed should say so.
+   */
+  intent?: UserIntent;
+  /**
+   * How Element Call should behave, overriding whatever {@link intent} implies.
+   * A host that finds itself setting a lot of these probably wants a different
+   * intent instead.
+   *
+   * Compared by value, so it is fine to write this inline; only a change to
+   * what it says restarts anything.
+   */
+  config?: ElementCallConfiguration;
+  /**
+   * What Element Call tells the host while the call is running: that the user
+   * has joined or hung up, that it would like to be kept on screen, and so on.
+   * Without one, Element Call assumes nobody is listening.
+   */
+  hostBridge?: ElementCallHostBridge;
+  /**
+   * What the host tells Element Call: to hang up, to mute, to join. Available
+   * once the component has rendered.
+   */
+  ref?: Ref<ElementCallHandle>;
+  /**
+   * The theme to show Element Call in, `light` or `dark`. Left out, Element
+   * Call picks. Changes take effect at once, and cost nothing else.
+   */
+  theme?: string;
+  /**
+   * The language to show Element Call in, as a BCP 47 tag: one of the
+   * `supportedLanguages` the main entry point exports, or something that falls
+   * back to one (`de-AT` to `de`). Left out, the browser's language is used.
+   *
+   * Translations are one thing shared by every Element Call on the page, so
+   * the most recently set language wins for all of them.
+   */
+  language?: string;
+}

component/index.tsx

@@ -36,14 +36,12 @@ import {
   type FC,
   type JSX,
   type ReactNode,
-  type Ref,
   useEffect,
   useLayoutEffect,
   useMemo,
   useRef,
   useState,
 } from "react";
-import { type MatrixClient } from "matrix-js-sdk";
 import { logger } from "matrix-js-sdk/lib/logger";
 import { I18nextProvider } from "react-i18next";
 import { TooltipProvider } from "@vector-im/compound-web";
@@ -62,10 +60,8 @@ import { RootElementProvider, useRootElement } from "../src/RootElementContext";
 import {
   configurationForIntent,
   componentProperties,
-  type UrlConfiguration,
   type UrlParams,
   UrlParamsProvider,
-  type UrlProperties,
   UserIntent,
   useUrlParams,
 } from "../src/UrlParams";
@@ -79,102 +75,16 @@ import { i18n } from "../src/utils/i18n";
 import { useTheme } from "../src/useTheme";
 import { useStableValue } from "../src/useStableValue";
 import styles from "./ElementCall.module.css";
-import {
-  type ElementCallHandle,
-  type ElementCallHostBridge,
-  useComponentHostBridge,
-} from "./host";
+import { useComponentHostBridge } from "./host";
+import { type ElementCallProps } from "./api";
 import { supportedLanguages, translationsBackend } from "./localization";
 
 // The languages Element Call can be shown in
 export { supportedLanguages } from "./localization";
-
-// How the host and Element Call talk to each other, and what they say
-export { type ElementCallHandle, type ElementCallHostBridge } from "./host";
-export {
-  type DeviceMuteRequest,
-  type DeviceMuteState,
-} from "../src/HostBridge";
-export { type JoinCallData } from "../src/widget";
-// The deployment-wide configuration, as distinct from ElementCallConfiguration
-// above, which is per call
-export { type ConfigOptions } from "../src/config/ConfigOptions";
-// The values that appear in ElementCallConfiguration and in the intent
-export {
-  BackgroundStyle,
-  HeaderStyle,
-  UserIntent,
-  type UrlConfiguration,
-} from "../src/UrlParams";
-
-/**
- * How Element Call should behave. Everything is optional; anything left out
- * takes the default that {@link ElementCallProps.intent} implies.
- *
- * This is the behaviour a widget can be configured with through its URL, plus
- * the one fact about the call a host has a say in here, the background. The
- * rest of what a widget's URL carries — who the user is, how to reach the
- * homeserver, where to report analytics, the shared secret of a room that is
- * encrypted with one — a component host supplies by other routes, or not at
- * all; and what can change while the call is running, the theme and the
- * language, is a prop of its own.
- */
-export type ElementCallConfiguration = Partial<UrlConfiguration> &
-  Partial<Pick<UrlProperties, "background">>;
-
-export interface ElementCallProps {
-  /**
-   * The client to place the call with. Element Call does not authenticate
-   * anyone or manage a session of its own; this one is the host's.
-   */
-  client: MatrixClient;
-  /** The room to call in. The host's client must already know about it. */
-  roomId: string;
-  /**
-   * What the user asked for — whether they started the call or joined one that
-   * was already running, and whether it is a call in a group or a DM. Element
-   * Call decides what each of those means: whether to show the lobby first,
-   * whether to ring, and so on.
-   *
-   * Defaults to joining an existing group call, which is the most conservative
-   * reading, but a host that knows which button the user pressed should say so.
-   */
-  intent?: UserIntent;
-  /**
-   * How Element Call should behave, overriding whatever {@link intent} implies.
-   * A host that finds itself setting a lot of these probably wants a different
-   * intent instead.
-   *
-   * Compared by value, so it is fine to write this inline; only a change to
-   * what it says restarts anything.
-   */
-  config?: ElementCallConfiguration;
-  /**
-   * What Element Call tells the host while the call is running: that the user
-   * has joined or hung up, that it would like to be kept on screen, and so on.
-   * Without one, Element Call assumes nobody is listening.
-   */
-  hostBridge?: ElementCallHostBridge;
-  /**
-   * What the host tells Element Call: to hang up, to mute, to join. Available
-   * once the component has rendered.
-   */
-  ref?: Ref<ElementCallHandle>;
-  /**
-   * The theme to show Element Call in, `light` or `dark`. Left out, Element
-   * Call picks. Changes take effect at once, and cost nothing else.
-   */
-  theme?: string;
-  /**
-   * The language to show Element Call in, as a BCP 47 tag: one of
-   * {@link supportedLanguages}, or something that falls back to one (`de-AT`
-   * to `de`). Left out, the browser's language is used.
-   *
-   * Translations are one thing shared by every Element Call on the page, so
-   * the most recently set language wins for all of them.
-   */
-  language?: string;
-}
+// Everything a host needs to talk about Element Call — the props, the handle,
+// the host bridge, the intents and what each means — also available without
+// the component itself from `@element-hq/element-call-component/api`
+export * from "./api";
 
 /**
  * Prepares the things Element Call needs before it can be shown: translations,

component/package.json

@@ -25,6 +25,10 @@
       "types": "./dist/types/component/index.d.ts",
       "default": "./dist/element-call.js"
     },
+    "./api": {
+      "types": "./dist/types/component/api.d.ts",
+      "default": "./dist/api.js"
+    },
     "./style.css": "./dist/element-call.css"
   },
   "sideEffects": [

component/tsconfig.build.json

@@ -13,8 +13,8 @@
     "rootDir": "..",
     "outDir": "./dist/types"
   },
-  // The entry point, plus the ambient declarations (CSS modules, `?react` SVGs,
-  // `import.meta.env`, …) that the sources it reaches rely on.
-  "include": ["./index.tsx", "../src/@types/*.d.ts"],
+  // The entry points, plus the ambient declarations (CSS modules, `?react` SVGs,
+  // `import.meta.env`, …) that the sources they reach rely on.
+  "include": ["./index.tsx", "./api.ts", "../src/@types/*.d.ts"],
   "exclude": []
 }

docker-compose-playwright.yml

@@ -19,7 +19,7 @@ services:
       - ./backend/playwright_homeserver-othersite.yaml:/data/cfg/homeserver.yaml:Z
   element-web:
     # Pin to a SHA so that upstream cannot break our tests. Renovate handles regular updates.
-    image: ghcr.io/element-hq/element-web:develop@sha256:c76d29903090eeb08ff625272277ede02ea8ee93cbaa067b77adfa89c89a494d
+    image: ghcr.io/element-hq/element-web:develop@sha256:3993d53bc2c784c0376b86e00230aef0ee2c9a705b2166e9229555117e8db167
   element-web-1:
     # Pin to a SHA so that upstream cannot break our tests. Renovate handles regular updates.
-    image: ghcr.io/element-hq/element-web:develop@sha256:c76d29903090eeb08ff625272277ede02ea8ee93cbaa067b77adfa89c89a494d
+    image: ghcr.io/element-hq/element-web:develop@sha256:3993d53bc2c784c0376b86e00230aef0ee2c9a705b2166e9229555117e8db167

docs/agents/architecture.md

@@ -76,4 +76,7 @@ Code that builds in only one is a bug.
 - `build:component` — `@element-hq/element-call-component`, sources in `component/`
   (its own pnpm project; run pnpm from the repo root). Host API is in the README;
   `pnpm lint:externals` rejects an import of a `react` / `react-dom` /
-  `matrix-js-sdk` / `livekit-client` subpath the externals list omits.
+  `matrix-js-sdk` / `livekit-client` subpath the externals list omits. Two entry
+  points: `index.tsx` (the component) and `api.ts` (types, enums and
+  `configurationForIntent`, for a host that must not load the component). `api.ts`
+  may only reach types and constants — `src/UrlConfiguration.ts`, not `UrlParams`.

package.json

@@ -8,7 +8,7 @@
     "dev:embedded": "vite --config vite-embedded.config.js",
     "dev:component": "vite --config vite-component-dev.config.ts",
     "build": "pnpm build:full",
-    "build:full": "NODE_OPTIONS=--max-old-space-size=16384 vite build",
+    "build:full": "node --max-old-space-size=16384 node_modules/vite/bin/vite.js build",
     "build:full:production": "pnpm build:full",
     "build:full:development": "pnpm build:full --mode development",
     "build:embedded": "pnpm build:full --config vite-embedded.config.js",

src/UrlConfiguration.ts

@@ -0,0 +1,242 @@
+/*
+Copyright 2022-2024 New Vector Ltd.
+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.
+*/
+
+/**
+ * How Element Call can be told to behave, and what each intent means.
+ *
+ * Kept apart from {@link UrlParams} on purpose: everything here is constants,
+ * types and one function of them, so that a host of the component can import
+ * these — the enums it needs as values, the defaults an intent implies — without
+ * loading Element Call itself. UrlParams, which reads them from a URL, needs
+ * the router, the config and the rest of the app; this module must not.
+ * `component/api.ts` is built from it as an entry point of its own.
+ */
+
+import {
+  type RTCCallIntent,
+  type RTCNotificationType,
+} from "matrix-js-sdk/lib/matrixrtc";
+
+import { platform } from "./Platform";
+
+export enum UserIntent {
+  StartNewCall = "start_call",
+  JoinExistingCall = "join_existing",
+  StartNewCallVoice = "start_call_voice",
+  JoinExistingCallVoice = "join_existing_voice",
+  StartNewCallDM = "start_call_dm",
+  StartNewCallDMVoice = "start_call_dm_voice",
+  JoinExistingCallDM = "join_existing_dm",
+  JoinExistingCallDMVoice = "join_existing_dm_voice",
+  Unknown = "unknown",
+}
+
+export enum HeaderStyle {
+  None = "none",
+  Standard = "standard",
+  AppBar = "app_bar",
+}
+
+export enum BackgroundStyle {
+  Solid = "solid",
+  Gradient = "gradient",
+}
+
+/**
+ * The configuration for the app, which can be set via URL parameters.
+ * Those property are different to the UrlProperties, since they are all optional
+ * and configure the behavior of the app. Their value is the same if EC is used in
+ * the same context but with different accounts/users.
+ *
+ * Their defaults can be controlled by the `intent` property.
+ */
+export interface UrlConfiguration {
+  /**
+   * Whether the app should keep the user confined to the current call/room.
+   */
+  confineToRoom: boolean;
+  /**
+   * Whether the app should pause before joining the call until it sees an
+   * io.element.join widget action, allowing it to be preloaded.
+   */
+  preload: boolean;
+  /**
+   * The style of headers to show. "standard" is the default arrangement, "none"
+   * hides the header entirely, and "app_bar" produces a header with a back
+   * button like you might see in mobile apps. The callback for the back button
+   * is window.controls.onBackButtonPressed.
+   */
+  header: HeaderStyle;
+  /**
+   * Whether the controls should be shown. For screen recording no controls can be desired.
+   */
+  showControls: boolean;
+  /**
+   * Whether to hide the screen-sharing button.
+   */
+  hideScreensharing: boolean;
+
+  /**
+   * Whether the app is allowed to use fallback STUN servers for ICE in case the
+   * user's homeserver doesn't provide any.
+   */
+  allowIceFallback: boolean;
+
+  /**
+   * Whether the app should use per participant keys for E2EE.
+   */
+  perParticipantE2EE: boolean;
+  /**
+   * Whether the global JS controls for audio output devices should be enabled,
+   * allowing the list of output devices to be controlled by the app hosting
+   * Element Call.
+   */
+  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
+   * with the join widget action.
+   */
+  skipLobby: boolean;
+  /**
+   * Setting this flag makes element call show the lobby after leaving a call.
+   * This is useful for video rooms.
+   */
+  returnToLobby: boolean;
+  /**
+   * Whether and what type of notification EC should send, when the user joins the call.
+   */
+  sendNotificationType?: RTCNotificationType;
+  /**
+   * Whether the app should automatically leave the call when there
+   * is no one left in the call.
+   * This is one part to make the call matrixRTC session behave like a telephone call.
+   */
+  autoLeaveWhenOthersLeft: boolean;
+
+  /**
+   * If the client should behave like it is awaiting an answer if a notification was sent (wait for call pick up).
+   * This is a no-op if not combined with sendNotificationType.
+   *
+   * This entails:
+   *  - show ui that it is awaiting an answer
+   *  - play a sound that indicates that it is awaiting an answer
+   *  - auto-dismiss the call widget once the notification lifetime expires on the receivers side.
+   */
+  waitForCallPickup: boolean;
+
+  /**
+   * Whether to enable echo cancellation for audio capture.
+   * Defaults to true.
+   */
+  echoCancellation?: boolean;
+  /**
+   * Whether to enable noise suppression for audio capture.
+   * Defaults to true.
+   */
+  noiseSuppression?: boolean;
+
+  callIntent?: RTCCallIntent;
+}
+
+// If you need to add a new flag to this interface, prefer a name that describes
+// a specific behavior (such as 'confineToRoom'), rather than one that describes
+// the situations that call for this behavior ('isEmbedded'). This makes it
+// clearer what each flag means, and helps us avoid coupling Element Call's
+// behavior to the needs of specific consumers.
+
+/**
+ * The configuration implied by what the user meant to do — if they pressed a
+ * Start Call button this would be `start_call`, and if they pressed Join Call,
+ * `join_existing`.
+ *
+ * These are platform-specific defaults, so that a host can start a call by
+ * saying what the user asked for rather than by setting every parameter itself,
+ * and so that what each intent means is Element Call's decision, made in one
+ * place. A host that wants something else states it alongside the intent.
+ *
+ * {@link UserIntent.Unknown} means no intent was stated, and gives the
+ * standalone app's defaults: Element Call owns the whole page, so it offers the
+ * way out of the room that a hosted call must not.
+ */
+export function configurationForIntent(intent: UserIntent): UrlConfiguration {
+  // Only constants and `platform` here, so that this depends on nothing but
+  // the intent.
+  let preset: UrlConfiguration = {
+    confineToRoom: true,
+    preload: false,
+    header: platform === "desktop" ? HeaderStyle.None : HeaderStyle.AppBar,
+    showControls: true,
+    hideScreensharing: false,
+    allowIceFallback: true,
+    perParticipantE2EE: true,
+    controlledAudioDevices: platform === "desktop" ? false : true,
+    skipLobby: true,
+    returnToLobby: false,
+    sendNotificationType: "notification",
+    autoLeaveWhenOthersLeft: false,
+    waitForCallPickup: false,
+  };
+  switch (intent) {
+    case UserIntent.StartNewCall:
+      preset.skipLobby = false;
+      preset.callIntent = "video";
+      break;
+    case UserIntent.JoinExistingCall:
+      // On desktop this will be overridden based on which button was used to join the call
+      preset.skipLobby = false;
+      preset.callIntent = "video";
+      break;
+    case UserIntent.StartNewCallVoice:
+      preset.skipLobby = false;
+      preset.callIntent = "audio";
+      break;
+    case UserIntent.JoinExistingCallVoice:
+      // On desktop this will be overridden based on which button was used to join the call
+      preset.skipLobby = false;
+      preset.callIntent = "audio";
+      break;
+    case UserIntent.StartNewCallDMVoice:
+      preset.callIntent = "audio";
+    // Fall through
+    case UserIntent.StartNewCallDM:
+      preset.skipLobby = true;
+      preset.sendNotificationType = "ring";
+      preset.autoLeaveWhenOthersLeft = true;
+      preset.waitForCallPickup = true;
+      preset.callIntent = preset.callIntent ?? "video";
+      break;
+    case UserIntent.JoinExistingCallDMVoice:
+      preset.callIntent = "audio";
+    // Fall through
+    case UserIntent.JoinExistingCallDM:
+      // On desktop this will be overridden based on which button was used to join the call
+      preset.skipLobby = true;
+      preset.autoLeaveWhenOthersLeft = true;
+      preset.callIntent = preset.callIntent ?? "video";
+      break;
+    // Non widget usecase defaults
+    default:
+      preset = {
+        confineToRoom: false,
+        preload: false,
+        header: HeaderStyle.Standard,
+        showControls: true,
+        hideScreensharing: false,
+        allowIceFallback: false,
+        perParticipantE2EE: false,
+        controlledAudioDevices: false,
+        skipLobby: false,
+        returnToLobby: false,
+        sendNotificationType: undefined,
+        autoLeaveWhenOthersLeft: false,
+        waitForCallPickup: false,
+      };
+  }
+  return preset;
+}

src/UrlParams.ts

@@ -9,47 +9,36 @@ Please see LICENSE in the repository root for full details.
 import { createContext, use, useMemo } from "react";
 import { useLocation } from "react-router-dom";
 import { logger } from "matrix-js-sdk/lib/logger";
-import {
-  type RTCCallIntent,
-  type RTCNotificationType,
-} from "matrix-js-sdk/lib/matrixrtc";
 import { pickBy } from "lodash-es";
 
 import { Config } from "./config/Config";
 import { type EncryptionSystem } from "./e2ee/sharedKeyManagement";
 import { E2eeType } from "./e2ee/e2eeType";
-import { platform } from "./Platform";
+import {
+  BackgroundStyle,
+  configurationForIntent,
+  HeaderStyle,
+  type UrlConfiguration,
+  UserIntent,
+} from "./UrlConfiguration";
 import { redact } from "./utils/redact";
 
+// Moved to their own module, so that a host can import them without the rest
+// of this one; re-exported here as they always were
+export {
+  BackgroundStyle,
+  configurationForIntent,
+  HeaderStyle,
+  type UrlConfiguration,
+  UserIntent,
+} from "./UrlConfiguration";
+
 interface RoomIdentifier {
   roomAlias: string | null;
   roomId: string | null;
   viaServers: string[];
 }
 
-export enum UserIntent {
-  StartNewCall = "start_call",
-  JoinExistingCall = "join_existing",
-  StartNewCallVoice = "start_call_voice",
-  JoinExistingCallVoice = "join_existing_voice",
-  StartNewCallDM = "start_call_dm",
-  StartNewCallDMVoice = "start_call_dm_voice",
-  JoinExistingCallDM = "join_existing_dm",
-  JoinExistingCallDMVoice = "join_existing_dm_voice",
-  Unknown = "unknown",
-}
-
-export enum HeaderStyle {
-  None = "none",
-  Standard = "standard",
-  AppBar = "app_bar",
-}
-
-export enum BackgroundStyle {
-  Solid = "solid",
-  Gradient = "gradient",
-}
-
 /**
  * The UrlProperties are used to pass required data to the widget.
  * Those are different in different rooms, users, devices. They do not configure the behavior of the
@@ -166,109 +155,6 @@ export interface UrlProperties {
    */
   background: BackgroundStyle;
 }
-
-/**
- * The configuration for the app, which can be set via URL parameters.
- * Those property are different to the UrlProperties, since they are all optional
- * and configure the behavior of the app. Their value is the same if EC is used in
- * the same context but with different accounts/users.
- *
- * Their defaults can be controlled by the `intent` property.
- */
-export interface UrlConfiguration {
-  /**
-   * Whether the app should keep the user confined to the current call/room.
-   */
-  confineToRoom: boolean;
-  /**
-   * Whether the app should pause before joining the call until it sees an
-   * io.element.join widget action, allowing it to be preloaded.
-   */
-  preload: boolean;
-  /**
-   * The style of headers to show. "standard" is the default arrangement, "none"
-   * hides the header entirely, and "app_bar" produces a header with a back
-   * button like you might see in mobile apps. The callback for the back button
-   * is window.controls.onBackButtonPressed.
-   */
-  header: HeaderStyle;
-  /**
-   * Whether the controls should be shown. For screen recording no controls can be desired.
-   */
-  showControls: boolean;
-  /**
-   * Whether to hide the screen-sharing button.
-   */
-  hideScreensharing: boolean;
-
-  /**
-   * Whether the app is allowed to use fallback STUN servers for ICE in case the
-   * user's homeserver doesn't provide any.
-   */
-  allowIceFallback: boolean;
-
-  /**
-   * Whether the app should use per participant keys for E2EE.
-   */
-  perParticipantE2EE: boolean;
-  /**
-   * Whether the global JS controls for audio output devices should be enabled,
-   * allowing the list of output devices to be controlled by the app hosting
-   * Element Call.
-   */
-  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
-   * with the join widget action.
-   */
-  skipLobby: boolean;
-  /**
-   * Setting this flag makes element call show the lobby after leaving a call.
-   * This is useful for video rooms.
-   */
-  returnToLobby: boolean;
-  /**
-   * Whether and what type of notification EC should send, when the user joins the call.
-   */
-  sendNotificationType?: RTCNotificationType;
-  /**
-   * Whether the app should automatically leave the call when there
-   * is no one left in the call.
-   * This is one part to make the call matrixRTC session behave like a telephone call.
-   */
-  autoLeaveWhenOthersLeft: boolean;
-
-  /**
-   * If the client should behave like it is awaiting an answer if a notification was sent (wait for call pick up).
-   * This is a no-op if not combined with sendNotificationType.
-   *
-   * This entails:
-   *  - show ui that it is awaiting an answer
-   *  - play a sound that indicates that it is awaiting an answer
-   *  - auto-dismiss the call widget once the notification lifetime expires on the receivers side.
-   */
-  waitForCallPickup: boolean;
-
-  /**
-   * Whether to enable echo cancellation for audio capture.
-   * Defaults to true.
-   */
-  echoCancellation?: boolean;
-  /**
-   * Whether to enable noise suppression for audio capture.
-   * Defaults to true.
-   */
-  noiseSuppression?: boolean;
-
-  callIntent?: RTCCallIntent;
-}
-
-// If you need to add a new flag to this interface, prefer a name that describes
-// a specific behavior (such as 'confineToRoom'), rather than one that describes
-// the situations that call for this behavior ('isEmbedded'). This makes it
-// clearer what each flag means, and helps us avoid coupling Element Call's
-// behavior to the needs of specific consumers.
 export interface UrlParams extends UrlProperties, UrlConfiguration {}
 
 class ParamParser {
@@ -354,97 +240,6 @@ export const getUrlParams = (
   return params;
 };
 
-/**
- * The configuration implied by what the user meant to do — if they pressed a
- * Start Call button this would be `start_call`, and if they pressed Join Call,
- * `join_existing`.
- *
- * These are platform-specific defaults, so that a host can start a call by
- * saying what the user asked for rather than by setting every parameter itself,
- * and so that what each intent means is Element Call's decision, made in one
- * place. A host that wants something else states it alongside the intent.
- *
- * {@link UserIntent.Unknown} means no intent was stated, and gives the
- * standalone app's defaults: Element Call owns the whole page, so it offers the
- * way out of the room that a hosted call must not.
- */
-export function configurationForIntent(intent: UserIntent): UrlConfiguration {
-  // Only constants and `platform` here, so that this depends on nothing but
-  // the intent.
-  let preset: UrlConfiguration = {
-    confineToRoom: true,
-    preload: false,
-    header: platform === "desktop" ? HeaderStyle.None : HeaderStyle.AppBar,
-    showControls: true,
-    hideScreensharing: false,
-    allowIceFallback: true,
-    perParticipantE2EE: true,
-    controlledAudioDevices: platform === "desktop" ? false : true,
-    skipLobby: true,
-    returnToLobby: false,
-    sendNotificationType: "notification",
-    autoLeaveWhenOthersLeft: false,
-    waitForCallPickup: false,
-  };
-  switch (intent) {
-    case UserIntent.StartNewCall:
-      preset.skipLobby = false;
-      preset.callIntent = "video";
-      break;
-    case UserIntent.JoinExistingCall:
-      // On desktop this will be overridden based on which button was used to join the call
-      preset.skipLobby = false;
-      preset.callIntent = "video";
-      break;
-    case UserIntent.StartNewCallVoice:
-      preset.skipLobby = false;
-      preset.callIntent = "audio";
-      break;
-    case UserIntent.JoinExistingCallVoice:
-      // On desktop this will be overridden based on which button was used to join the call
-      preset.skipLobby = false;
-      preset.callIntent = "audio";
-      break;
-    case UserIntent.StartNewCallDMVoice:
-      preset.callIntent = "audio";
-    // Fall through
-    case UserIntent.StartNewCallDM:
-      preset.skipLobby = true;
-      preset.sendNotificationType = "ring";
-      preset.autoLeaveWhenOthersLeft = true;
-      preset.waitForCallPickup = true;
-      preset.callIntent = preset.callIntent ?? "video";
-      break;
-    case UserIntent.JoinExistingCallDMVoice:
-      preset.callIntent = "audio";
-    // Fall through
-    case UserIntent.JoinExistingCallDM:
-      // On desktop this will be overridden based on which button was used to join the call
-      preset.skipLobby = true;
-      preset.autoLeaveWhenOthersLeft = true;
-      preset.callIntent = preset.callIntent ?? "video";
-      break;
-    // Non widget usecase defaults
-    default:
-      preset = {
-        confineToRoom: false,
-        preload: false,
-        header: HeaderStyle.Standard,
-        showControls: true,
-        hideScreensharing: false,
-        allowIceFallback: false,
-        perParticipantE2EE: false,
-        controlledAudioDevices: false,
-        skipLobby: false,
-        returnToLobby: false,
-        sendNotificationType: undefined,
-        autoLeaveWhenOthersLeft: false,
-        waitForCallPickup: false,
-      };
-  }
-  return preset;
-}
-
 /**
  * The {@link UrlProperties} for Element Call running as a component inside a
  * host application.

src/components/MediaMuteAndSwitchButton.tsx

@@ -25,11 +25,11 @@ import { useTranslation } from "react-i18next";
 
 import styles from "./MediaMuteAndSwitchButton.module.css";
 import { MicButton, VideoButton } from "../button";
-import { type AudioInputDeviceLabel } from "../state/MediaDevices";
+import { type DeviceLabel } from "../state/MediaDevices";
 import { useMediaDevices } from "../MediaDevicesContext";
 
 export interface MenuOptions {
-  label: AudioInputDeviceLabel;
+  label: DeviceLabel;
   id: string;
 }
 
@@ -180,9 +180,6 @@ export const MediaMuteAndSwitchButton: FC<MediaMuteAndSwitchButtonProps> = ({
             case "number":
               labelText = numberedLabel(label.number);
               break;
-            case "default":
-              labelText = t("settings.devices.default");
-              break;
           }
           return (
             <MenuItem

src/room/LobbyView.tsx

@@ -135,8 +135,7 @@ export const LobbyView: FC<Props> = ({
   const initialAudioOptions = useInitial(
     () =>
       audioEnabled && {
-        // "" is the virtual browser default: no deviceId constraint
-        deviceId: getValue(devices.audioInput.selected$)?.id || undefined,
+        deviceId: getValue(devices.audioInput.selected$)?.id,
       },
   );
 

src/state/AudioInput.test.ts

@@ -1,116 +0,0 @@
-/*
-Copyright 2026 Element Corp.
-
-SPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-Element-Commercial
-Please see LICENSE in the repository root for full details.
-*/
-
-import { afterEach, beforeEach, describe, vi, it, expect } from "vitest";
-import * as ComponentsCore from "@livekit/components-core";
-
-import { ObservableScope } from "./ObservableScope";
-import { MediaDevices } from "./MediaDevices";
-import { audioInput as audioInputSetting } from "../settings/settings";
-import { withTestScheduler } from "../utils/test";
-
-const BUILT_IN_MIC = {
-  deviceId: "b3d4cb5e0c8e1d7a2f9b6c4e5d8a7f1c3e2b9d6a5c4f8e7d1b2a3c4d5e6f7a8b",
-  kind: "audioinput",
-  label: "iPhone Microphone",
-  groupId: "1",
-} as unknown as MediaDeviceInfo;
-
-const HEADSET_MIC = {
-  deviceId: "c4e5d6f7a8b9c0d1e2f3a4b5c6d7e8f9a0b1c2d3e4f5a6b7c8d9e0f1a2b3c4d5",
-  kind: "audioinput",
-  label: "Headset Microphone",
-  groupId: "2",
-} as unknown as MediaDeviceInfo;
-
-// Chrome exposes a synthetic "default" device that follows the OS default.
-const CHROME_DEFAULT = {
-  ...HEADSET_MIC,
-  deviceId: "default",
-  label: `Default - ${HEADSET_MIC.label}`,
-} as unknown as MediaDeviceInfo;
-
-vi.mock("@livekit/components-core", () => ({
-  createMediaDeviceObserver: vi.fn(),
-}));
-
-describe("AudioInput", () => {
-  let testScope: ObservableScope;
-
-  beforeEach(() => {
-    testScope = new ObservableScope();
-    // Device preferences persist in localStorage across tests
-    audioInputSetting.setValue(undefined);
-  });
-
-  afterEach(() => {
-    testScope.end();
-  });
-
-  it("uses the browser default input when there is no default pseudo-device", () => {
-    withTestScheduler(({ behavior, cold, expectObservable }) => {
-      vi.mocked(ComponentsCore.createMediaDeviceObserver).mockReturnValue(
-        // iOS / Firefox: physical devices only, built-in first
-        cold("a", { a: [BUILT_IN_MIC, HEADSET_MIC] }),
-      );
-
-      const { audioInput } = new MediaDevices(testScope, {
-        controlledAudioDevices: false,
-      });
-
-      expectObservable(audioInput.available$).toBe("a", {
-        a: new Map([
-          ["", { type: "default", name: null }],
-          [BUILT_IN_MIC.deviceId, { type: "name", name: BUILT_IN_MIC.label }],
-          [HEADSET_MIC.deviceId, { type: "name", name: HEADSET_MIC.label }],
-        ]),
-      });
-      expectObservable(audioInput.selected$.pipe()).toBe("a", {
-        a: expect.objectContaining({ id: "" }),
-      });
-    });
-  });
-
-  it("keeps using Chrome's default device", () => {
-    withTestScheduler(({ behavior, cold, expectObservable }) => {
-      vi.mocked(ComponentsCore.createMediaDeviceObserver).mockReturnValue(
-        cold("a", { a: [CHROME_DEFAULT, BUILT_IN_MIC, HEADSET_MIC] }),
-      );
-
-      const { audioInput } = new MediaDevices(testScope, {
-        controlledAudioDevices: false,
-      });
-
-      expectObservable(audioInput.selected$).toBe("a", {
-        a: expect.objectContaining({ id: "default" }),
-      });
-    });
-  });
-
-  it("honours an explicit choice and falls back to the browser default when it disappears", () => {
-    withTestScheduler(({ behavior, cold, schedule, expectObservable }) => {
-      vi.mocked(ComponentsCore.createMediaDeviceObserver).mockReturnValue(
-        cold("a---b", {
-          a: [BUILT_IN_MIC, HEADSET_MIC],
-          b: [BUILT_IN_MIC],
-        }),
-      );
-
-      const { audioInput } = new MediaDevices(testScope, {
-        controlledAudioDevices: false,
-      });
-
-      schedule("--a", { a: () => audioInput.select(HEADSET_MIC.deviceId) });
-
-      expectObservable(audioInput.selected$).toBe("a-b-c", {
-        a: expect.objectContaining({ id: "" }),
-        b: expect.objectContaining({ id: HEADSET_MIC.deviceId }),
-        c: expect.objectContaining({ id: "" }),
-      });
-    });
-  });
-});

src/state/AudioOutput.test.ts

@@ -10,6 +10,7 @@ import * as ComponentsCore from "@livekit/components-core";
 
 import { ObservableScope } from "./ObservableScope";
 import { AudioOutput } from "./MediaDevices";
+import { audioOutput as audioOutputSetting } from "../settings/settings";
 import { withTestScheduler } from "../utils/test";
 
 const BT_SPEAKER = {
@@ -93,6 +94,8 @@ describe("AudioOutput Tests", () => {
 
   beforeEach(() => {
     testScope = new ObservableScope();
+    // Device preferences persist in localStorage across tests
+    audioOutputSetting.setValue(undefined);
   });
 
   afterEach(() => {
@@ -150,7 +153,9 @@ describe("AudioOutput Tests", () => {
 
       expectObservable(audioOutput.selected$).toBe("abcde", {
         a: undefined,
-        b: { id: LAPTOP_SPEAKER.deviceId, virtualEarpiece: false },
+        // No "default" pseudo-device (Firefox): the virtual browser default is
+        // selected until the user picks something.
+        b: { id: "", virtualEarpiece: false },
         c: { id: MONITOR_SPEAKER.deviceId, virtualEarpiece: false },
         d: { id: LAPTOP_SPEAKER.deviceId, virtualEarpiece: false },
         e: { id: MONITOR_SPEAKER.deviceId, virtualEarpiece: false },
@@ -158,6 +163,61 @@ describe("AudioOutput Tests", () => {
     });
   });
 
+  it("falls back to the browser default when the selected device disappears", () => {
+    withTestScheduler(({ behavior, cold, schedule, expectObservable }) => {
+      vi.mocked(ComponentsCore.createMediaDeviceObserver).mockReturnValue(
+        cold("a---b", {
+          a: DEVICE_LIST_B,
+          // The monitor is unplugged (or a Bluetooth sink changes profile)
+          b: [LAPTOP_SPEAKER],
+        }),
+      );
+
+      const audioOutput = new AudioOutput(
+        behavior("a", { a: true }),
+        testScope,
+      );
+
+      schedule("--a", {
+        a: () => audioOutput.select(MONITOR_SPEAKER.deviceId),
+      });
+
+      expectObservable(audioOutput.selected$).toBe("a-b-c", {
+        a: { id: "", virtualEarpiece: false },
+        b: { id: MONITOR_SPEAKER.deviceId, virtualEarpiece: false },
+        // Rather than pinning some other physical device, let the browser route
+        c: { id: "", virtualEarpiece: false },
+      });
+    });
+  });
+
+  it("lists the virtual browser default first when there is no default pseudo-device", () => {
+    withTestScheduler(({ behavior, cold, expectObservable }) => {
+      vi.mocked(ComponentsCore.createMediaDeviceObserver).mockReturnValue(
+        cold("a", { a: DEVICE_LIST_B }),
+      );
+
+      const audioOutput = new AudioOutput(
+        behavior("a", { a: true }),
+        testScope,
+      );
+
+      expectObservable(audioOutput.available$).toBe("a", {
+        a: new Map([
+          ["", { type: "default", name: null }],
+          [
+            LAPTOP_SPEAKER.deviceId,
+            { type: "name", name: LAPTOP_SPEAKER.label },
+          ],
+          [
+            MONITOR_SPEAKER.deviceId,
+            { type: "name", name: MONITOR_SPEAKER.label },
+          ],
+        ]),
+      });
+    });
+  });
+
   it("Test mappings", () => {
     // In a real life setup there would be first a blanked list
     // then the real one.

src/state/CallViewModel/localMember/Publisher.test.ts

@@ -5,26 +5,16 @@ SPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-Element-Commercial
 Please see LICENSE in the repository root for full details.
 */
 
-import {
-  afterEach,
-  beforeEach,
-  describe,
-  expect,
-  it,
-  type Mock,
-  test,
-  vi,
-} from "vitest";
+import { afterEach, beforeEach, describe, expect, it, test, vi } from "vitest";
 import {
   ConnectionState as LivekitConnectionState,
   LocalParticipant,
   type LocalTrack,
   type LocalTrackPublication,
   ParticipantEvent,
-  type Room as LivekitRoom,
   Track,
 } from "livekit-client";
-import { BehaviorSubject, NEVER } from "rxjs";
+import { BehaviorSubject } from "rxjs";
 import { logger } from "matrix-js-sdk/lib/logger";
 
 import { ObservableScope } from "../../ObservableScope";
@@ -33,12 +23,10 @@ import {
   flushPromises,
   mockLivekitRoom,
   mockMediaDevices,
-  deviceStub,
 } from "../../../utils/test";
 import { Publisher } from "./Publisher";
 import { type Connection } from "../remoteMembers/Connection";
 import { type MuteStates } from "../../MuteStates";
-import { type MediaDevices } from "../../MediaDevices";
 
 let scope: ObservableScope;
 
@@ -194,159 +182,6 @@ beforeEach(() => {
   } as unknown as Connection;
 });
 
-describe("Publisher device sync", () => {
-  type SelectedInput =
-    | { id: string; hardwareDeviceChange$: typeof NEVER }
-    | undefined;
-
-  function selectedInput(id: string): SelectedInput {
-    return { id, hardwareDeviceChange$: NEVER };
-  }
-
-  /**
-   * Creates a Publisher whose LiveKit room starts out capturing from
-   * capturedDeviceId (undefined meaning no deviceId constraint, i.e. the
-   * browser default) and reports activeDeviceId as its active audio input.
-   */
-  function createDeviceSyncPublisher({
-    selected$,
-    capturedDeviceId,
-    activeDeviceId,
-    switchActiveDevice = vi.fn().mockResolvedValue(true),
-  }: {
-    selected$: BehaviorSubject<SelectedInput>;
-    capturedDeviceId?: string;
-    activeDeviceId: string;
-    switchActiveDevice?: Mock;
-  }): { publisher: Publisher; switchActiveDevice: Mock } {
-    const livekitRoom = mockLivekitRoom({
-      localParticipant,
-      state: LivekitConnectionState.Connected,
-      // ConnectionFactory leaves the deviceId out for the browser default
-      options: { audioCaptureDefaults: { deviceId: capturedDeviceId } },
-      switchActiveDevice,
-      getActiveDevice: () => activeDeviceId,
-    } as unknown as Partial<LivekitRoom>);
-
-    const publisher = new Publisher(
-      { ...connection, livekitRoom },
-      mockMediaDevices({
-        audioInput: { ...deviceStub, selected$ },
-      } as unknown as Partial<MediaDevices>),
-      muteStates,
-      constant({ supported: false, processor: undefined }),
-      logger,
-      false,
-    );
-
-    return { publisher, switchActiveDevice };
-  }
-
-  it("does not pin a device for the virtual browser default input", async () => {
-    const selected$ = new BehaviorSubject<SelectedInput>(selectedInput(""));
-    const { publisher, switchActiveDevice } = createDeviceSyncPublisher({
-      selected$,
-      activeDeviceId: "hardware-id-of-whatever-the-browser-chose",
-    });
-
-    // Already capturing from the browser default: nothing to switch, even
-    // though LiveKit reports the physical device it ended up with.
-    expect(switchActiveDevice).not.toHaveBeenCalled();
-
-    selected$.next(selectedInput("headset"));
-    expect(switchActiveDevice).toHaveBeenLastCalledWith(
-      "audioinput",
-      "headset",
-    );
-
-    selected$.next(selectedInput(""));
-    expect(switchActiveDevice).toHaveBeenLastCalledWith(
-      "audioinput",
-      "default",
-      false,
-    );
-    expect(switchActiveDevice).toHaveBeenCalledTimes(2);
-
-    await publisher.destroy();
-  });
-
-  it("pins the device the browser default resolved to when picked explicitly", async () => {
-    const selected$ = new BehaviorSubject<SelectedInput>(selectedInput(""));
-    const { publisher, switchActiveDevice } = createDeviceSyncPublisher({
-      selected$,
-      // The browser default happens to capture from the built-in microphone
-      activeDeviceId: "built-in-mic",
-    });
-
-    expect(switchActiveDevice).not.toHaveBeenCalled();
-
-    // Picking that same microphone has to replace the loose constraint with a
-    // pin, or the capture would keep following the OS default
-    selected$.next(selectedInput("built-in-mic"));
-    expect(switchActiveDevice).toHaveBeenCalledTimes(1);
-    expect(switchActiveDevice).toHaveBeenLastCalledWith(
-      "audioinput",
-      "built-in-mic",
-    );
-
-    // Once pinned, re-emitting the same selection is a no-op again
-    selected$.next(selectedInput("built-in-mic"));
-    expect(switchActiveDevice).toHaveBeenCalledTimes(1);
-
-    await publisher.destroy();
-  });
-
-  it("retries the same selection after a failed switch", async () => {
-    const selected$ = new BehaviorSubject<SelectedInput>(selectedInput(""));
-    const switchActiveDevice = vi
-      .fn()
-      .mockRejectedValueOnce(new Error("could not open the device"))
-      .mockResolvedValue(true);
-    const { publisher } = createDeviceSyncPublisher({
-      selected$,
-      // Pinned to the headset, so moving to the browser default is a switch
-      capturedDeviceId: "headset",
-      activeDeviceId: "headset",
-      switchActiveDevice,
-    });
-
-    expect(switchActiveDevice).toHaveBeenCalledTimes(1);
-    await flushPromises();
-
-    // The failed switch left us on the headset, so selecting the browser
-    // default again has to try once more rather than count as already done
-    selected$.next(selectedInput(""));
-    expect(switchActiveDevice).toHaveBeenCalledTimes(2);
-    expect(switchActiveDevice).toHaveBeenLastCalledWith(
-      "audioinput",
-      "default",
-      false,
-    );
-    await flushPromises();
-
-    // This time it worked, so there is nothing left to do
-    selected$.next(selectedInput(""));
-    expect(switchActiveDevice).toHaveBeenCalledTimes(2);
-
-    await publisher.destroy();
-  });
-
-  it("does not switch when the room already captures from the selected device", async () => {
-    const selected$ = new BehaviorSubject<SelectedInput>(
-      selectedInput("headset"),
-    );
-    const { publisher, switchActiveDevice } = createDeviceSyncPublisher({
-      selected$,
-      capturedDeviceId: "headset",
-      activeDeviceId: "headset",
-    });
-
-    expect(switchActiveDevice).not.toHaveBeenCalled();
-
-    await publisher.destroy();
-  });
-});
-
 describe("Publisher", () => {
   let publisher: Publisher;
 

src/state/CallViewModel/localMember/Publisher.ts

@@ -355,19 +355,8 @@ export class Publisher {
     const syncDevice = (
       kind: MediaDeviceKind,
       selected$: Observable<SelectedDevice | undefined>,
-    ): Subscription => {
-      // The ID we last asked LiveKit for. Needed for the virtual browser
-      // default input ("") because LiveKit reports the physical device it
-      // ended up capturing from, which never equals "".
-      // ConnectionFactory already applied the selection when the room was
-      // created; a browser-default input is represented there by an absent
-      // deviceId.
-      let requestedId: string | undefined =
-        kind === "audioinput" &&
-        lkRoom.options.audioCaptureDefaults?.deviceId === undefined
-          ? ""
-          : undefined;
-      return selected$.pipe(scope.bind()).subscribe((device) => {
+    ): Subscription =>
+      selected$.pipe(scope.bind()).subscribe((device) => {
         if (lkRoom.state != LivekitConnectionState.Connected) return;
         // if (this.connectionState$.value !== ConnectionState.Connected) return;
         this.logger.info(
@@ -376,41 +365,20 @@ export class Publisher {
           " !== ",
           device?.id,
         );
-        if (device === undefined) return;
-        const browserDefaultInput = device.id === "" && kind !== "audiooutput";
-        // While we capture from the browser default, LiveKit reports the
-        // physical device it resolved to, which can be any of the devices the
-        // user could also pick explicitly. getActiveDevice therefore can't
-        // tell an explicit pin apart from the default resolving to the same
-        // device, and only requestedId can: without this, picking the device
-        // the default happens to use would leave the loose constraint in
-        // place, and the capture would keep following the OS default.
-        const capturingBrowserDefault = requestedId === "";
-        if (browserDefaultInput) {
-          if (capturingBrowserDefault) return;
-        } else if (
-          !capturingBrowserDefault &&
-          lkRoom.getActiveDevice(kind) === device.id
+        if (
+          device !== undefined &&
+          lkRoom.getActiveDevice(kind) !== device.id
         ) {
-          return;
+          lkRoom
+            .switchActiveDevice(kind, device.id)
+            .catch((e: Error) =>
+              this.logger.error(
+                `Failed to sync ${kind} device with LiveKit`,
+                e,
+              ),
+            );
         }
-        const previousRequestedId = requestedId;
-        requestedId = device.id;
-        // For the browser default input, ask for "default" as a non-exact
-        // constraint: browsers that have no such device ignore it and capture
-        // from the OS default input.
-        (browserDefaultInput
-          ? lkRoom.switchActiveDevice(kind, "default", false)
-          : lkRoom.switchActiveDevice(kind, device.id)
-        ).catch((e: Error) => {
-          // LiveKit keeps capturing from the previous device, so record that
-          // again to leave the next selection of this device something to do.
-          // A selection made while the switch was in flight wins, though.
-          if (requestedId === device.id) requestedId = previousRequestedId;
-          this.logger.error(`Failed to sync ${kind} device with LiveKit`, e);
-        });
       });
-    };
 
     syncDevice("audioinput", devices.audioInput.selected$);
     if (!controlledAudioDevices)

src/state/CallViewModel/remoteMembers/ConnectionFactory.ts

@@ -174,9 +174,7 @@ function generateRoomOption({
     publishDefaults,
     audioCaptureDefaults: {
       ...liveKitOptions.audioCaptureDefaults,
-      // "" is the virtual browser default: leave the constraint out so the
-      // browser captures from the OS default input.
-      deviceId: devices.audioInput.selected$.value?.id || undefined,
+      deviceId: devices.audioInput.selected$.value?.id,
       echoCancellation: echoCancellationSetting.getValue(),
       noiseSuppression: noiseSuppressionSetting.getValue(),
       autoGainControl: autoGainControlSetting.getValue(),

src/state/MediaDevices.ts

@@ -36,14 +36,11 @@ export type DeviceLabel =
   | { type: "name"; name: string }
   | { type: "number"; number: number };
 
-export type AudioInputDeviceLabel =
-  | DeviceLabel
-  | { type: "default"; name: string | null };
-
 export type AudioOutputDeviceLabel =
-  | AudioInputDeviceLabel
+  | DeviceLabel
   | { type: "speaker" }
-  | { type: "earpiece" };
+  | { type: "earpiece" }
+  | { type: "default"; name: string | null };
 
 /**
  * Base selected-device value shared by all media kinds.
@@ -194,10 +191,7 @@ function selectDevice$<Label>(
   });
 }
 
-class AudioInput implements MediaDevice<
-  AudioInputDeviceLabel,
-  SelectedAudioInputDevice
-> {
+class AudioInput implements MediaDevice<DeviceLabel, SelectedAudioInputDevice> {
   private logger = rootLogger.getChild("[MediaDevices AudioInput]");
 
   private readonly availableRaw$: Behavior<MediaDeviceInfo[]> =
@@ -209,29 +203,7 @@ class AudioInput implements MediaDevice<
     );
 
   public readonly available$ = this.scope.behavior(
-    this.availableRaw$.pipe(
-      map((availableRaw) => {
-        const available: Map<string, AudioInputDeviceLabel> =
-          buildDeviceMap(availableRaw);
-        // Browsers without a "default" pseudo-device (Firefox, Safari, and
-        // in particular iOS) get a virtual default entry, listed first so
-        // that it is what we use when the user has not chosen a microphone.
-        // Its ID is the empty string, which consumers translate into "no
-        // deviceId constraint": the browser then captures from whatever the
-        // OS routes as the default input (a wired or Bluetooth headset when
-        // one is connected) instead of EC pinning whichever device happens
-        // to be enumerated first, which on iOS is the built-in microphone.
-        // Unlike Chrome's "default" device, a stream opened this way does
-        // not follow later changes of the OS default on desktop browsers;
-        // iOS re-routes the audio session itself.
-        if (available.size && !available.has("") && !available.has("default"))
-          return new Map<string, AudioInputDeviceLabel>([
-            ["", { type: "default", name: null }],
-            ...available,
-          ]);
-        return available;
-      }),
-    ),
+    this.availableRaw$.pipe(map(buildDeviceMap)),
   );
 
   public readonly selected$ = this.scope.behavior(
@@ -285,20 +257,30 @@ export class AudioOutput implements MediaDevice<
       map((availableRaw) => {
         let available: Map<string, AudioOutputDeviceLabel> =
           buildDeviceMap(availableRaw);
-        // Create a virtual default audio output for browsers that don't have one.
-        // Its device ID must be the empty string because that's what setSinkId
-        // recognizes.
+        // Create a virtual default audio output for browsers that don't have one
+        // (Firefox, Safari). Its device ID must be the empty string because
+        // that's what setSinkId recognizes. It goes first so that it is the
+        // fallback when no output has been explicitly chosen (or the chosen
+        // one disappears), rather than pinning the first physical device
+        // with setSinkId: pinned sinks are not re-routed by the browser, and
+        // Firefox leaves the audio elements silent when a pinned sink goes
+        // away (e.g. a Bluetooth headset switching profile when its
+        // microphone is opened). We can't know which physical device the
+        // browser default resolves to, so the entry carries no name.
         if (available.size && !available.has("") && !available.has("default"))
-          available.set("", {
-            type: "default",
-            name: availableRaw[0]?.label || null,
-          });
+          available = new Map<string, AudioOutputDeviceLabel>([
+            ["", { type: "default", name: null }],
+            ...available,
+          ]);
         // eslint-disable-next-line @typescript-eslint/no-explicit-any
         const isSafari = !!(window as any).GestureEvent; // non standard api only found on Safari. https://developer.mozilla.org/en-US/docs/Web/API/GestureEvent#browser_compatibility
         if (isSafari) {
           // set to empty map if we are on Safari, because it does not support setSinkId
           available = new Map();
         }
+        // Note: creating virtual default input devices would be another problem
+        // entirely, because requesting a media stream from deviceId "" won't
+        // automatically track the default device.
         return available;
       }),
     ),
@@ -402,7 +384,7 @@ export class MediaDevices {
     false,
   );
   public readonly audioInput: MediaDevice<
-    AudioInputDeviceLabel,
+    DeviceLabel,
     SelectedAudioInputDevice
   > = new AudioInput(this.usingNames$, this.scope);
 

vite-component.config.ts

@@ -49,8 +49,19 @@ export default defineConfig(({ mode }) => {
       cssCodeSplit: false,
       lib: {
         formats: ["es" as const],
-        entry: "./component/index.tsx",
-        fileName: "element-call",
+        entry: {
+          // The component
+          "element-call": "./component/index.tsx",
+          // What a host needs to talk about it, without it (see component/api.ts).
+          // Built as an entry point of its own so that importing it does not
+          // load the component: the bundler gives it a chunk that reaches only
+          // what it imports.
+          api: "./component/api.ts",
+        },
+        fileName: (_format, entryName) => `${entryName}.js`,
+        // The one stylesheet (see cssCodeSplit) keeps the name it had when the
+        // component was the only entry
+        cssFileName: "element-call",
       },
       rollupOptions: {
         // The host already has these, and a second copy of any of them does not