Mirrors/blakeblackshear.frigate
1
0
Fork 0
mirror of https://github.com/blakeblackshear/frigate.git synced 2025-07-26 13:47:03 +02:00
Code Issues Projects Releases Wiki Activity

Orient live camera feed for best screen fit when in fullscreen mode (#16947)

Browse Source 
* Change orientation in fullscreen to best fit video

* Refactor effect to simplify, add more comments
This commit is contained in:
jdryden572 2025-03-04 15:30:34 -05:00 committed by GitHub
parent c23653338f
commit 389c707ad2
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
1 changed files with 22 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

22
web/src/views/live/LiveCameraView.tsx
View File

@ -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) {