diff --git a/src/controls.ts b/src/controls.ts
index 363b96ad..41cf5852 100644
--- a/src/controls.ts
+++ b/src/controls.ts
@@ -50,7 +50,7 @@ export const setPipEnabled$ = new Subject<boolean>();
 
 export const availableOutputDevices$ = new Subject<OutputDevice[]>();
 
-export const outputDevice$ = new Subject<string | undefined>();
+export const outputDevice$ = new Subject<string>();
 
 /**
  * This allows the os to mute the call if the user
diff --git a/src/state/MediaDevices.ts b/src/state/MediaDevices.ts
index ede6f5b8..f441918b 100644
--- a/src/state/MediaDevices.ts
+++ b/src/state/MediaDevices.ts
@@ -269,18 +269,21 @@ class ControlledAudioOutput
     this.deviceSelection$.next(id);
   }
 
-  public readonly selected$ = merge(
-    this.deviceSelection$,
-    controlledOutputSelection$,
-  ).pipe(
-    startWith<string | undefined>(undefined),
-    map((id) =>
-      id === undefined
+  public readonly selected$ = combineLatest(
+    [
+      this.available$,
+      merge(
+        controlledOutputSelection$.pipe(startWith(undefined)),
+        this.deviceSelection$,
+      ),
+    ],
+    (available, preferredId) => {
+      const id = preferredId ?? available.keys().next().value;
+      return id === undefined
         ? undefined
-        : { id, virtualEarpiece: id === EARPIECE_CONFIG_ID },
-    ),
-    this.scope.state(),
-  );
+        : { id, virtualEarpiece: id === EARPIECE_CONFIG_ID };
+    },
+  ).pipe(this.scope.state());
 
   public constructor(private readonly scope: ObservableScope) {
     this.selected$.subscribe((device) => {