Correct Camera Stream to 16:9
sumur1au opened this issue · comments
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?
iPhone?
Please show screen. You may blur image.
This is the steam from the WebRTC addon
It seems to be displayed correctly. Or is the picture compressed horizontally?
I have the same with a RTSP stream from a Reolink camera.
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...
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.
Here is the same camera feed in a picture-entity card (top) and a WebRTC card (bottom).
I have the same problem.
in VLC, the stream is displayed correctly as 16: 9.
Just like brianewman
Any ideas how to get the correct 16: 9 format?
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 :/
@AlexxIT Will this help with the scaling problem?
https://www.home-assistant.io/blog/2021/09/01/release-20219/
I think this is some problem with camera codec. But on my cameras the problem does not happen, I can't debug.
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;
Can someone provide public access to their RTSP-stream? You can send link in private message in Telegram @AlexxIT or Hass community
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 :)
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.
I keep my fingers crossed for it to succeed :)
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
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
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. :)
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.
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
28vhparameter - renders the full screen function incorrect from ui option. Can go fullscreen from html5 player controls though.
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
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'
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
Yes it works fine here.
Clear cache, restart browser.
@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.
Supported from v3:
style: "video {aspect-ratio: 16/9; object-fit: fill;}"
Should be fixed in v3
@AlexxIT is it possible to zoom the video rather than just stretching it?
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/
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
Please try with digital_ptz: false.
That feature also uses transforms for zoom and pan so it is probably overwriting the style
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.
Does not work.
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!