diff --git a/web/src/views/live/LiveCameraView.tsx b/web/src/views/live/LiveCameraView.tsx index 96a0ed2bde..cacdc7c1d8 100644 --- a/web/src/views/live/LiveCameraView.tsx +++ b/web/src/views/live/LiveCameraView.tsx @@ -362,6 +362,28 @@ export default function LiveCameraView({ } }, [fullscreen, isPortrait, cameraAspectRatio, containerAspectRatio]); + // On mobile devices that support it, try to orient screen + // to best fit the camera feed in fullscreen mode + useEffect(() => { + // eslint-disable-next-line @typescript-eslint/no-explicit-any + const screenOrientation = screen.orientation as any; + if (!screenOrientation.lock || !screenOrientation.unlock) { + // Browser does not support ScreenOrientation APIs that we need + return; + } + + if (fullscreen) { + const orientationForBestFit = + cameraAspectRatio > 1 ? "landscape" : "portrait"; + + // If the current device doesn't support locking orientation, + // this promise will reject with an error that we can ignore + screenOrientation.lock(orientationForBestFit).catch(() => {}); + } + + return () => screenOrientation.unlock(); + }, [fullscreen, cameraAspectRatio]); + const handleError = useCallback( (e: LivePlayerError) => { if (e) {