diff --git a/src/main.tsx b/src/main.tsx
index d04a3a94..efc6e8d7 100644
--- a/src/main.tsx
+++ b/src/main.tsx
@@ -57,7 +57,7 @@ Initializer.initBeforeReact();
const history = createBrowserHistory();
root.render(
-
-
-
+ //
+
+ //
);
diff --git a/src/room/VideoPreview.tsx b/src/room/VideoPreview.tsx
index 1b5c07ce..044a3221 100644
--- a/src/room/VideoPreview.tsx
+++ b/src/room/VideoPreview.tsx
@@ -68,6 +68,9 @@ export const VideoPreview: FC = ({ matrixInfo, muteStates }) => {
const devices = useMediaDevices();
+ // Capture the audio options as they were when we first mounted, because
+ // we're not doing anything with the audio anyway so we don't need to
+ // re-open the devices when they change (see below).
const initialAudioOptions = useRef();
initialAudioOptions.current ??= muteStates.audio.enabled && {
deviceId: devices.audioInput.selectedId,
@@ -79,7 +82,9 @@ export const VideoPreview: FC = ({ matrixInfo, muteStates }) => {
// request over with at the same time. But changing the audio settings
// shouldn't cause this hook to recreate the track, which is why we
// reference the initial values here.
- audio: initialAudioOptions.current,
+ // We also pass in a clone because livekit mutates the object passed in,
+ // which would cause the devices to be re-opened on the next render.
+ audio: Object.assign({}, initialAudioOptions.current),
video: muteStates.video.enabled && {
deviceId: devices.videoInput.selectedId,
},