Orient live camera feed for best screen fit when in fullscreen mode #16947
Conversation
✅ Deploy Preview for frigate-docs ready!
To edit notification comments on pull requests, go to your Netlify site configuration. |
|
Thank you @NickM-27 for discussing this yesterday! Feel free to tag any maintainers you think should weigh in on whether this change is appropriate. |
|
When testing this I noticed that iOS seems to completely disable the ability to even launch fullscreen mode with Frigate as a PWA. This is after enabling almost every feature flag under the advanced Safari settings. That's really unfortunate. When testing via navigating to Frigate manually via Safari this seems to work great. From my research this seems like an iOS limitation and not the implementation here. But would be curious to know additional thoughts if others have looked into this. |
|
Yeah it's an iOS limitation and for some reason the feature flag doesn't apply to pwa |
Proposed change
This PR uses the ScreenOrientation.lock() and ScreenOrientation.unlock() APIs to attempt to automatically orient live feeds for individual cameras so that they fill as much screen as possible. This change only applies to fullscreen mode for a single camera, not to the home page or to dashboards which may have more than one camera. If the user changes to a different stream for the same camera while in fullscreen mode and the new stream uses a different aspect ratio, the orientation will update immediately.
Prior discusson on this behavior is in #16925, I'll continue my reasoning here. In my opinion, there are two main reasons to want to enter fullscreen mode when on a mobile device: to de-clutter the interface, and to make the content as large as possible to improve visibility. The existing fullscreen behavior when viewing the feed from a single camera already declutters the UI (hides most buttons, hides system nav bars) but if the video is oriented opposite to your mobile device's screen size, then the content becomes no more visible than it was initially.
There is lots of precedent for locking orientation in video players across mobile devices, including web-based players. Entering fullscreen on most video players will flip the screen orientation to landscape since most videos use a landscape aspect ratio. If the video being played has an aspect ratio that better fits portrait, the player may even flip out of landscape into portrait mode (see YouTube apps on mobile for example).
While the lock()/unlock() APIs are in my opinion the least-invasive way to implement this behavior, they have limited support and will currently only work in Chromium on Android. On other browsers, this change is inert, and the fullscreen view will use the system default orientation that the user was in prior to entering fullscreen mode. To get better cross-browser support and not need to manage the orientation manually, we would probably need to consider calling
requestFullscreen()on the actual<video>element rather than an ancestor<div>. But since there are so many types of video playback in the application and the Live page reuses the same fullscreen element between different views, it seemed prudent to not attempt such a change.Note that I have tested this change on my Android devices, and see it locking orientation on Chromium browsers but not on Firefox for Android (this is expected given API support). I have tested both landscape and portrait video feeds. I do not have an iOS device to test unfortunately, but I expect Safari to also not change behavior with this PR.
Type of change
Additional information
Checklist
ruff format frigate) (not applicable for JS)