Hey everyone, I’ve been trying to get a full-screen landscape view on my mobile app for a camera stream, and I thought I’d share my experience in case anyone else is tackling the same issue.
I started by using the picture-element card with the custom:webrtc-camera integration. This allowed me to rotate the camera stream, which worked perfectly in preview mode. However, when I tried to implement it on my actual setup, I ran into some limitations. The rotation didn’t quite behave as expected, and I had to adjust the positioning and sizing manually.
After some trial and error, I realized that the key was to tweak the style properties in the configuration. I ended up using a combination of rotate: 90deg along with adjustments to left, top, and width to get the desired landscape view. Here’s a snippet of what worked for me:
yaml
picture-elements:
- type: custom:webrtc-camera
entity: camera.intercom_camera
muted: false
style:
rotate: 90deg
left: ‘-10%’
top: 30%
width: 80%
image: local/card_background/bck_black.png
This setup not only rotated the stream but also positioned it correctly within the app. I also added a black background image to match the app’s aesthetic, which gave it a cleaner look.
If anyone else has tips or alternative solutions for achieving a perfect landscape view, I’d love to hear them! It’s always great to learn from the community. 