Allow precise control of viewport in camera layout settings

[ckglobalroaming]

Is your feature request related to a problem? Please describe.
With Reolink Doorbell POE the camera view is 4:3. When displaying this in a matrix the viewport is symmetric and not aligned with other 16:9 camera viewports.

Describe the solution you'd like
As the top and bottom of the camera are not of interest to the task, it would be beneficial to be able to crop the viewport to 16:9 by trimming the camera outputs. The feature would be most powerful if it could consider the following of the camera/stream dimensions.

viewport_origin: [x,y] //Defines the origin zero point for the rendered viewport for the card.
viewport_width: width //Defines the viewport width
viewport_height: height //Defines the viewport height

Describe alternatives you've considered
Forcing the aspect ration to 16:9 causes a letterbox effect which is undesirable and would be fa better served by the flexibility of the card to be able to display a viewport for the camera visual space.

Additional context
This feature set would allow the frigate card to excerpt any viewport from any stream with flexibility.

Example Use Case 1
An example of this might be to extract a single camera from a stream of four cameras in a quad.

Example Use Case 2
Display a section of a stream/camera for a sectional point of interest. This is particularly useful with high resolution stream/cameras whereby a smaller section of the camera Field-of-View becomes a new camera showing the Point-of-Interest.

Example Use Case 3
As described above, changing a 4:3 stream/camera aspect ration to 16:9 without resulting letterboxing.

Thanks for the consideration.

[dermotduffy]

Have you taken a look at the live layout options: https://github.com/dermotduffy/frigate-hass-card?tab=readme-ov-file#media-layout . Related is the 'Convert a landscape camera to a portrait live view' example, which might help you combine the dimensions and layout options to get an effect similar to what you want.

It's not exactly what you're looking for, but might help at least, take a look?

[ckglobalroaming]

Thanks that’s very helpful. Gets the asymmetry under control. Custom viewport would make the card Uber flexible. One of the best cards for HA ever ….

Thanks

Craig

[dermotduffy]

Glad it helped!

The usual challenge I've had with extra flexibility in this department, has been to allow cropping/zooming of the video player viewport, but without impacting the video controls themselves (e.g. just applying a scale() to the video player will give the appearance of zooming in, but also makes the controls larger and is ~unacceptable). I had always wished there was an object-fit-zoom or something like this ...

I just noticed this css propertly: object-view-box. I think it's ~exactly what you're looking for, and between it and the existing controls should allow pretty much any permutation. The downside is that it's currently only supported on 73% of browsers (only Chromium based). I still think that's good enough to implement, with apologies to anyone using another browser for whom that new functionality would not work.

Will leave this issue open to track implementation.

[ckglobalroaming]

Glad it helped!

The usual challenge I've had with extra flexibility in this department, has been to allow cropping/zooming of the video player viewport, but without impacting the video controls themselves (e.g. just applying a scale() to the video player will give the appearance of zooming in, but also makes the controls larger and is ~unacceptable). I had always wished there was an object-fit-zoom or something like this ...

I just noticed this css propertly: object-view-box. I think it's ~exactly what you're looking for, and between it and the existing controls should allow pretty much any permutation. The downside is that it's currently only supported on 73% of browsers (only Chromium based). I still think that's good enough to implement, with apologies to anyone using another browser for whom that new functionality would not work.

Will leave this issue open to track implementation.

Excellent!!

[dermotduffy]

Done. Will be in the next release.