diff --git a/src/room/VideoPreview.tsx b/src/room/VideoPreview.tsx index 602ca5e5..43198ab9 100644 --- a/src/room/VideoPreview.tsx +++ b/src/room/VideoPreview.tsx @@ -14,7 +14,7 @@ See the License for the specific language governing permissions and limitations under the License. */ -import { useEffect, useMemo, useRef, FC, ReactNode } from "react"; +import { useEffect, useMemo, useRef, FC, ReactNode, useCallback } from "react"; import useMeasure from "react-use-measure"; import { ResizeObserver } from "@juggle/resize-observer"; import { usePreviewTracks } from "@livekit/components-react"; @@ -68,8 +68,8 @@ export const VideoPreview: FC = ({ deviceId: devices.audioInput.selectedId, }; - const tracks = usePreviewTracks( - { + const localTrackOptions = useMemo(() => { + return { // The only reason we request audio here is to get the audio permission // 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 @@ -80,13 +80,20 @@ export const VideoPreview: FC = ({ video: muteStates.video.enabled && { deviceId: devices.videoInput.selectedId, }, - }, - (error) => { + }; + }, [devices.videoInput.selectedId, muteStates.video.enabled]); + + const onError = useCallback( + (error: Error) => { logger.error("Error while creating preview Tracks:", error); muteStates.audio.setEnabled?.(false); muteStates.video.setEnabled?.(false); }, + [muteStates.audio, muteStates.video], ); + + const tracks = usePreviewTracks(localTrackOptions, onError); + const videoTrack = useMemo( () => tracks?.find((t) => t.kind === Track.Kind.Video) as