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, },