diff --git a/ui/src/components/WebRTCVideo.tsx b/ui/src/components/WebRTCVideo.tsx index 0583e526..e444179b 100644 --- a/ui/src/components/WebRTCVideo.tsx +++ b/ui/src/components/WebRTCVideo.tsx @@ -28,6 +28,7 @@ export default function WebRTCVideo({ hasConnectionIssues }: { hasConnectionIssu // Video and stream related refs and states const videoElm = useRef(null); const audioElementsRef = useRef([]); + const fullscreenContainerRef = useRef(null); const { mediaStream, peerConnectionState } = useRTCStore(); const [isPlaying, setIsPlaying] = useState(false); const [audioAutoplayBlocked, setAudioAutoplayBlocked] = useState(false); @@ -153,7 +154,7 @@ export default function WebRTCVideo({ hasConnectionIssues }: { hasConnectionIssu }, [checkNavigatorPermissions, setIsKeyboardLockActive]); const releaseKeyboardLock = useCallback(async () => { - if (videoElm.current === null || document.fullscreenElement !== videoElm.current) return; + if (fullscreenContainerRef.current === null || document.fullscreenElement !== fullscreenContainerRef.current) return; if (navigator && "keyboard" in navigator) { try { @@ -190,7 +191,7 @@ export default function WebRTCVideo({ hasConnectionIssues }: { hasConnectionIssu }, [isPointerLockPossible]); const requestFullscreen = useCallback(async () => { - if (!isFullscreenEnabled || !videoElm.current) return; + if (!isFullscreenEnabled || !fullscreenContainerRef.current) return; // per https://wicg.github.io/keyboard-lock/#system-key-press-handler // If keyboard lock is activated after fullscreen is already in effect, then the user my @@ -199,7 +200,7 @@ export default function WebRTCVideo({ hasConnectionIssues }: { hasConnectionIssu await requestKeyboardLock(); await requestPointerLock(); - await videoElm.current.requestFullscreen({ + await fullscreenContainerRef.current.requestFullscreen({ navigationUI: "show", }); }, [isFullscreenEnabled, requestKeyboardLock, requestPointerLock]); @@ -537,7 +538,10 @@ export default function WebRTCVideo({ hasConnectionIssues }: { hasConnectionIssu {/* In relative mouse mode and under https, we enable the pointer lock, and to do so we need a bar to show the user to click on the video to enable mouse control */}
-
+