Correct Camera Stream to 16:9

[sumur1au]

The stream is displayed in 4:3 when the camera records in 16:9 is it possible to correct the aspect ratio in the configuration card?

[AlexxIT]

iPhone?

[sumur1au]

Chrome on Windows and Android

On Mon, Apr 19, 2021 at 2:11 PM Alex X @.***> wrote:

iPhone?

— You are receiving this because you authored the thread. Reply to this email directly, view it on GitHub https://github.com/AlexxIT/WebRTC/issues/21#issuecomment-822152464, or unsubscribe https://github.com/notifications/unsubscribe-auth/APXG5UU7GPAH6IRUTAKO7DLTJOUOXANCNFSM43E2U42Q .

[AlexxIT]

Please show screen. You may blur image.

[sumur1au]

This is the steam from the WebRTC addon

[AlexxIT]

It seems to be displayed correctly. Or is the picture compressed horizontally?

[sumur1au]

The picture is compressed, it should be spread vertically.

On Fri, Apr 23, 2021 at 11:52 PM Alex X @.***> wrote:

It seems to be displayed correctly. Or is the picture compressed horizontally?

— You are receiving this because you authored the thread. Reply to this email directly, view it on GitHub https://github.com/AlexxIT/WebRTC/issues/21#issuecomment-825673937, or unsubscribe https://github.com/notifications/unsubscribe-auth/APXG5UTLQASP2RLCT6UPNLLTKF3SNANCNFSM43E2U42Q .

[giggo]

I have the same with a RTSP stream from a Reolink camera.

[kp-bit]

Does the stream out of the camera have the right aspect ratio? I had to adjust my substream from 640x480 to 640x360 to get 16:9 aspect ratio...

[brianewman]

I'm using a hikvision camera and WebRTC stretches the image to 4:3. The same rtsp URL shows the correct aspect ratio in VLC. I'm using Chrome on Windows and the Home Assistant app on Android. Both show the same vertically stretched stream.

[brianewman]

Here is the same camera feed in a picture-entity card (top) and a WebRTC card (bottom).

[majdzik84]

I have the same problem. in VLC, the stream is displayed correctly as 16: 9. Just like brianewman

[majdzik84]

Any ideas how to get the correct 16: 9 format?

[JaCoLJcL]

Same Here :( Add option to change Resolutions of source image!

When i change from 1080N to 960H is all 16:9 now, but is in lower res :/

[majdzik84]

@AlexxIT Will this help with the scaling problem?

https://www.home-assistant.io/blog/2021/09/01/release-20219/

[AlexxIT]

I think this is some problem with camera codec. But on my cameras the problem does not happen, I can't debug.

[mckochan]

Have this problem with my Amcrest camera too. I've tried various card-mod CSS styles to no avail. Anyone else try Card mod? padding-top 56.25% !important; and aspect-ratio: 1.77 !important;

[AlexxIT]

Can someone provide public access to their RTSP-stream? You can send link in private message in Telegram @AlexxIT or Hass community

[majdzik84]

Can anyone share the stream? I've been struggling with it for 3 hours but unfortunately something is wrong with me. (My network is shared and I have some limitations). If someone sends a stream to Alex, please let me know so I don't get tired :)

[AlexxIT]

Thanks to @majdzik84 - I found the problem

Stream #0:0: Video: h264 (Main), yuvj420p(pc, bt709, progressive), 640x480 [SAR 4:3 DAR 16:9], 15 fps, 100 tbr, 90k tbn, 30 tbc

Component doesn't supported display aspect ratio. And shows picture in original size. I will try to find a solution.

[majdzik84]

I keep my fingers crossed for it to succeed :)

[AlexxIT]

Seems like WebRTC doesn't support pixel aspect ratio. Need a JavaScript developer who can stretch the video manually in the browser.

https://chromium.googlesource.com/external/webrtc/+/HEAD/common_video/h264/sps_parser.cc#222

[mckochan]

Should be a way to just force an aspect ratio for the card and the video will follow, or are you saying then the video will just crop? Default picture_entity card has aspect_ratio setting as does https://github.com/custom-cards/button-card#aspect-ratio

[saxopwn]

Should be a way to just force an aspect ratio for the card and the video will follow, or are you saying then the video will just crop? Default picture_entity card has aspect_ratio setting as does https://github.com/custom-cards/button-card#aspect-ratio

Would love to see something like this. I have a few WebRTC cards within a swipe card to flip through my security cameras. One of the cameras is a 4:3 doorbell while the rest are 16:9. I'm being nitpicky but being able to force 16:9 would fix the spacing on my dashboard. :)

[kspearrin]

I recently opened #227, but it seems like it might be related to this. Is there anyone that experiences this problem who also sees the video frame being cropped on the HomeAssistant iOS app? It shows fine on the desktop (albeit with the wrong aspect ratio), but on iOS part of the video is actually cropped off the sides which makes the card unusable.

[nagyrobi]

Found here, needs lovelace-card-mod, and this little modification.

Can be used to set ratio to 16:9:

style: |
  ha-card {
    --height-cctv: calc(28vh - 40px);
    --width-cctv: calc(var(--height-cctv) / 9 * 16);
    height: var(--height-cctv);
    width: var(--width-cctv);
  }

Has two issues:

• sets the card size static (acceptable), can be adjusted by changing 28vh parameter
• renders the full screen function incorrect from ui option. Can go fullscreen from html5 player controls though.

[davros123]

@AlexxIT what was the solution? Are we still awaiting a JavaScript developer?

[nagyrobi]

With the PR above, and config like below, it will show nice (tested on Hikvision secondary streams):

  - type: custom:webrtc-camera
    url: >-
      rtsp://user:pass@192.168.2.20:554/Streaming/Channels/202
    poster: http://192.168.2.10:8123/local/pub/HA_cam_poster3.png
    style: |
      ha-card {
        --height-cctv: calc(32vh - 40px);
        --width-cctv: calc(var(--height-cctv) / 9 * 16);
        height: var(--height-cctv);
        width: var(--width-cctv);
      }
    shortcuts:
      - name: Camera Light Switch
        icon: mdi:track-light
        service: switch.toggle
        service_data:
          entity_id: switch.camera_lights

[felipecrs]

I would make it even simpler for the final user to customize. Something like the Frigate Hass Card do:

dimensions:
  aspect_ratio_mode: static
  aspect_ratio: '16:9'

[jodyalbritton]

With the PR above, and config like below, it will show nice (tested on Hikvision secondary streams):

  - type: custom:webrtc-camera
    url: >-
      rtsp://user:pass@192.168.2.20:554/Streaming/Channels/202
    poster: http://192.168.2.10:8123/local/pub/HA_cam_poster3.png
    style: |
      ha-card {
        --height-cctv: calc(32vh - 40px);
        --width-cctv: calc(var(--height-cctv) / 9 * 16);
        height: var(--height-cctv);
        width: var(--width-cctv);
      }
    shortcuts:
      - name: Camera Light Switch
        icon: mdi:track-light
        service: switch.toggle
        service_data:
          entity_id: switch.camera_lights

does this still work for you? I made the changes and it is still a 4:3 stream using the rtc card

[nagyrobi]

Yes it works fine here. Clear cache, restart browser.

[jodyalbritton]

@nagyrobi I did all of that and it is still showing 4:3 I am using the Frigate Hass Card which references the WebRTC card.

[AlexxIT]

Supported from v3:

style: "video {aspect-ratio: 16/9; object-fit: fill;}"

[AlexxIT]

Should be fixed in v3

[felipecrs]

@AlexxIT is it possible to zoom the video rather than just stretching it?

[felipecrs]

Actually found my answer:

style: "video {aspect-ratio: 16/9; object-fit: cover; object-position: left top;}"

https://developer.mozilla.org/en-US/docs/Web/CSS/object-fit https://css-tricks.com/almanac/properties/o/object-position/

[Smosia]

Update 3.2.1 broke rotation of video. style: 'video {transform: rotate(90deg); aspect-ratio: 1}' Don't work anymore HA 2023.5.2 Android App: 2023.6.0

[AlexxIT]

@dbuezas can you check rotation feature with CSS?

[dbuezas]

Please try with digital_ptz: false. That feature also uses transforms for zoom and pan so it is probably overwriting the style

[AlexxIT]

I have solution for rotate MSE and MP4 (not WebRTC) with file metadata. But it work only in Chrome and Firefox. Maybe will be in next versions. Styles solution works in all browsers and all modes.

[AlexxIT]

https://github.com/AlexxIT/WebRTC/releases/tag/v3.3.0

[TokarevSergey]

Does not work.

[IronicRebound77]

Actually found my answer:

style: "video {aspect-ratio: 16/9; object-fit: cover; object-position: left top;}"

https://developer.mozilla.org/en-US/docs/Web/CSS/object-fit https://css-tricks.com/almanac/properties/o/object-position/

thanks, this really helped me adjust the frame size, was messing with it for hours!