Correct Camera Stream to 16:9 #21

sumur1au · 2021-04-19T01:21:03Z

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 · 2021-04-19T04:11:11Z

iPhone?

sumur1au · 2021-04-19T04:29:51Z

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 <#21 (comment)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/APXG5UU7GPAH6IRUTAKO7DLTJOUOXANCNFSM43E2U42Q> .

AlexxIT · 2021-04-19T04:34:24Z

Please show screen. You may blur image.

sumur1au · 2021-04-23T09:50:13Z

This is the steam from the WebRTC addon

AlexxIT · 2021-04-23T13:52:18Z

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

sumur1au · 2021-04-26T00:48:14Z

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 <#21 (comment)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/APXG5UTLQASP2RLCT6UPNLLTKF3SNANCNFSM43E2U42Q> .

giggo · 2021-05-13T22:51:07Z

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

kp-bit · 2021-05-20T06:49:58Z

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 · 2021-05-20T22:57:17Z

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 · 2021-05-20T23:03:23Z

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

majdzik84 · 2021-07-06T19:32:11Z

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

majdzik84 · 2021-08-05T15:34:57Z

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

JaCoLJcL · 2021-08-10T21:11:43Z

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 · 2021-09-01T20:16:01Z

@AlexxIT Will this help with the scaling problem?

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

AlexxIT · 2021-09-02T14:25:51Z

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

mckochan · 2021-09-05T21:20:40Z

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 · 2021-09-06T07:47:34Z

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

majdzik84 · 2021-09-06T11:52:57Z

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 · 2021-09-13T13:48:02Z

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 · 2021-09-13T14:17:35Z

I keep my fingers crossed for it to succeed :)

AlexxIT · 2021-09-14T13:35:54Z

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 · 2021-09-14T14:34:33Z

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 · 2021-10-24T02:49:48Z

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 · 2021-12-23T15:48:19Z

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 · 2022-01-08T19:44:12Z

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 · 2022-04-13T08:49:24Z

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

nagyrobi · 2022-04-13T15:24:15Z

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

  - type: custom:webrtc-camera
    url: >-
      rtsp://user:[email protected]: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 · 2022-04-13T20:48:56Z

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 · 2022-09-13T17:56:00Z

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

  - type: custom:webrtc-camera
    url: >-
      rtsp://user:[email protected]: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 · 2022-09-13T17:59:55Z

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

jodyalbritton · 2022-09-13T18:13:03Z

@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 · 2023-01-02T10:49:51Z

Supported from v3:

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

AlexxIT · 2023-01-20T18:15:20Z

Should be fixed in v3

felipecrs · 2023-02-13T15:59:01Z

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

felipecrs · 2023-02-13T16:01:57Z

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 · 2023-07-11T19:47:32Z

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 · 2023-07-13T05:18:51Z

@dbuezas can you check rotation feature with CSS?

dbuezas · 2023-07-13T05:43:47Z

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

AlexxIT · 2023-07-13T09:39:05Z

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 · 2023-08-24T17:55:46Z

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

TokarevSergey · 2024-03-07T12:51:27Z

Does not work.

IronicRebound77 · 2024-06-18T18:02:02Z

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!

AlexxIT added the question Further information is requested label Apr 19, 2021

AlexxIT added enhancement New feature or request and removed question Further information is requested labels Sep 13, 2021

AlexxIT mentioned this issue Dec 23, 2021

iOS App Clips Video Frame #227

Closed

AlexxIT mentioned this issue Jan 8, 2022

Aspect ratio set #232

Closed

nagyrobi mentioned this issue Apr 13, 2022

Add parameter to ease fix to 16:9 #291

Merged

nagyrobi mentioned this issue Jul 19, 2022

Ability to change ratio of the card #328

Closed

AlexxIT added this to the v3.0 milestone Jan 2, 2023

AlexxIT closed this as completed Jan 20, 2023

dbuezas mentioned this issue Jul 13, 2023

Fix video rotation via style param #526

Merged

rik1984 mentioned this issue Aug 23, 2023

Video stream not resized on Android #553

Open

Correct Camera Stream to 16:9 #21

Correct Camera Stream to 16:9 #21

Comments

sumur1au commented Apr 19, 2021

AlexxIT commented Apr 19, 2021

sumur1au commented Apr 19, 2021 via email

AlexxIT commented Apr 19, 2021

sumur1au commented Apr 23, 2021 • edited Loading

AlexxIT commented Apr 23, 2021

sumur1au commented Apr 26, 2021 via email

giggo commented May 13, 2021

kp-bit commented May 20, 2021

brianewman commented May 20, 2021 • edited Loading

brianewman commented May 20, 2021

majdzik84 commented Jul 6, 2021 • edited Loading

majdzik84 commented Aug 5, 2021

JaCoLJcL commented Aug 10, 2021 • edited Loading

majdzik84 commented Sep 1, 2021

AlexxIT commented Sep 2, 2021

mckochan commented Sep 5, 2021

AlexxIT commented Sep 6, 2021

majdzik84 commented Sep 6, 2021

AlexxIT commented Sep 13, 2021

majdzik84 commented Sep 13, 2021

AlexxIT commented Sep 14, 2021

mckochan commented Sep 14, 2021

saxopwn commented Oct 24, 2021

kspearrin commented Dec 23, 2021 • edited Loading

nagyrobi commented Jan 8, 2022 • edited Loading

davros123 commented Apr 13, 2022

nagyrobi commented Apr 13, 2022 • edited Loading

felipecrs commented Apr 13, 2022 • edited Loading

jodyalbritton commented Sep 13, 2022

nagyrobi commented Sep 13, 2022

jodyalbritton commented Sep 13, 2022

AlexxIT commented Jan 2, 2023

AlexxIT commented Jan 20, 2023

felipecrs commented Feb 13, 2023 • edited Loading

felipecrs commented Feb 13, 2023 • edited Loading

Smosia commented Jul 11, 2023 • edited Loading

AlexxIT commented Jul 13, 2023

dbuezas commented Jul 13, 2023

AlexxIT commented Jul 13, 2023 • edited Loading

AlexxIT commented Aug 24, 2023

TokarevSergey commented Mar 7, 2024

IronicRebound77 commented Jun 18, 2024

sumur1au commented Apr 23, 2021 •

edited

Loading

brianewman commented May 20, 2021 •

edited

Loading

majdzik84 commented Jul 6, 2021 •

edited

Loading

JaCoLJcL commented Aug 10, 2021 •

edited

Loading

kspearrin commented Dec 23, 2021 •

edited

Loading

nagyrobi commented Jan 8, 2022 •

edited

Loading

nagyrobi commented Apr 13, 2022 •

edited

Loading

felipecrs commented Apr 13, 2022 •

edited

Loading

felipecrs commented Feb 13, 2023 •

edited

Loading

felipecrs commented Feb 13, 2023 •

edited

Loading

Smosia commented Jul 11, 2023 •

edited

Loading

AlexxIT commented Jul 13, 2023 •

edited

Loading