Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Correct Camera Stream to 16:9 #21

Closed
sumur1au opened this issue Apr 19, 2021 · 42 comments
Closed

Correct Camera Stream to 16:9 #21

sumur1au opened this issue Apr 19, 2021 · 42 comments
Labels
enhancement New feature or request
Milestone

Comments

@sumur1au
Copy link

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
Copy link
Owner

AlexxIT commented Apr 19, 2021

iPhone?

@AlexxIT AlexxIT added the question Further information is requested label Apr 19, 2021
@sumur1au
Copy link
Author

sumur1au commented Apr 19, 2021 via email

@AlexxIT
Copy link
Owner

AlexxIT commented Apr 19, 2021

Please show screen. You may blur image.

@sumur1au
Copy link
Author

sumur1au commented Apr 23, 2021

Camera Stream

This is the steam from the WebRTC addon

@AlexxIT
Copy link
Owner

AlexxIT commented Apr 23, 2021

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

@sumur1au
Copy link
Author

sumur1au commented Apr 26, 2021 via email

@giggo
Copy link

giggo commented May 13, 2021

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

@kp-bit
Copy link

kp-bit commented May 20, 2021

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
Copy link

brianewman commented May 20, 2021

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
Copy link

Here is the same camera feed in a picture-entity card (top) and a WebRTC card (bottom).
Screenshot 2021-05-20 180027

@majdzik84
Copy link

majdzik84 commented Jul 6, 2021

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

@majdzik84
Copy link

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

@JaCoLJcL
Copy link

JaCoLJcL commented Aug 10, 2021

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
Copy link

@AlexxIT Will this help with the scaling problem?

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

@AlexxIT
Copy link
Owner

AlexxIT commented Sep 2, 2021

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

@mckochan
Copy link

mckochan commented Sep 5, 2021

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
Copy link
Owner

AlexxIT commented Sep 6, 2021

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

@majdzik84
Copy link

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 AlexxIT added enhancement New feature or request and removed question Further information is requested labels Sep 13, 2021
@AlexxIT
Copy link
Owner

AlexxIT commented Sep 13, 2021

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
Copy link

I keep my fingers crossed for it to succeed :)

@AlexxIT
Copy link
Owner

AlexxIT commented Sep 14, 2021

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
Copy link

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
Copy link

saxopwn commented Oct 24, 2021

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
Copy link

kspearrin commented Dec 23, 2021

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
Copy link
Contributor

nagyrobi commented Jan 8, 2022

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
Copy link

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

@nagyrobi
Copy link
Contributor

nagyrobi commented Apr 13, 2022

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
Copy link
Contributor

felipecrs commented Apr 13, 2022

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
Copy link

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
Copy link
Contributor

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

@jodyalbritton
Copy link

@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 AlexxIT added this to the v3.0 milestone Jan 2, 2023
@AlexxIT
Copy link
Owner

AlexxIT commented Jan 2, 2023

Supported from v3:

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

@AlexxIT
Copy link
Owner

AlexxIT commented Jan 20, 2023

Should be fixed in v3

@AlexxIT AlexxIT closed this as completed Jan 20, 2023
@felipecrs
Copy link
Contributor

felipecrs commented Feb 13, 2023

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

@felipecrs
Copy link
Contributor

felipecrs commented Feb 13, 2023

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
Copy link

Smosia commented Jul 11, 2023

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
Copy link
Owner

AlexxIT commented Jul 13, 2023

@dbuezas can you check rotation feature with CSS?

@dbuezas
Copy link
Contributor

dbuezas commented Jul 13, 2023

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

@AlexxIT
Copy link
Owner

AlexxIT commented Jul 13, 2023

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
Copy link
Owner

AlexxIT commented Aug 24, 2023

@TokarevSergey
Copy link

Does not work.

@IronicRebound77
Copy link

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!

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
enhancement New feature or request
Projects
None yet
Development

No branches or pull requests