Hello,
basically the title says it all.
It would be nice if the Lovelace camera view could be zoomable, especially on mobile.
Thanks in advance!
Depending on your camera I believe it is possible by adding a couple buttons and actions. For example using amcrest.ptz_control
Or go wild: Foscam camera with lots of controls
My camera unfortunately is pretty simple and I just want to have a “pinch-to-zoom” feature. This would massively increase UX when dealing with cameras that have a lot of detail.
have you ever seen a website where a videostream on the page had “pinch-to-zoom”?
i believe that is pretty hard to program.
especially when you want such a feature for every possible cam intergration.
Lovelace is entirely webbased and pinch-to-zoom comes enabled per default on every site, unless you disable it explicitly per code.
Since the camera view is just an <img> and I think every component in Polymer (Framework Lovelace is made in) is isolated (has it’s own head, body, etc), I think the img could be made into an component and there we could enable zoom again. Don’t know if that works. I have never made anything in Polymer.
Another approach would be simply putting an iframe with the img inside, then enable zooming for the iframe.
Mobile should handle that well.
if its already possible, then why request it 
i know that browsers have pinch to zoom. but i never encountered webpages where single elements (images, streams) also have it.
i guess the problem there is that the browser at that point doesnt know if the pinch to zoom is ment for the entire site or for that specific element.
Lovelace has it disabled for the whole “page”, that’s why I’m asking
Almost. It’s disabled globally for the entire webapp, that means that the img element also won’t work.
If you look at the initializing HTML code, you can see it disabled:
<meta name="viewport" content="width=device-width,user-scalable=no,viewport-fit=cover">
As in: user-scalable=no
This is fine per se, but would be nice to enable inside camera (img) elements.
i guess there is a reason its disabled.
and like i said, i dont know if there is an option to enable it for seperate items when you disable it for the whole site.
you can design your own lovelace cards.
so if it is just a case of enabeling it for that specific card, i think it wouldnt be hard.
and then it would have been done by some user at least.
so i suspect its way more difficult then you think.
but off course you can try it for that lovelace card and share it.
Thanks for the replies.
How?
Have you found a solution for this? I also want to be able to zoom in on our baby cam, by using the pinch method. No actual hardware zooming is required, but just zooming into the displayed stream would be awesome!
Currently working on setting up Agent DVR to record my cameras.
This works through a web interface an has fully zoomable cameras as you are requesting so it can be done.
Might look to see if it can be added to HA using an iframe. (only issue may be I don’t seem to be able to access the web interface using https:// only http:// but may be there is a setting I haven’t found yet)
Yea, nobody actually cared enough to implement that yet. It’s a bummer.
Still waiting patiently for the day they eventually will. 
It’s a bit odd that pinch-to-zoom is disabled… no sense in having it disabled.
I was using core just so i can go to the frontend files and change the user scalable meta data to “yes”. But it was annoying to do it every time HA was upgraded, and now with supervisor, i don’t know how to access the lib files to make the change locally.
For cameras, I’m forced to use Blue Iris app which is a bummer.
1 Like
this is a very good request, i echo the suggestion. Ability to zoom into pictures or streams.
1 Like
Hi all, this should actually work on many browsers, or you can check the option in iOS app for example. But I noticed it didn’t work on Fully Kiosk Browser, for example. To fix that you can do the following:
Put this in a file called zoom-enable.js in your config/www folder
document.querySelector("meta[name=viewport]").setAttribute("content", "width=device-width, viewport-fit=cover");
Add this to your configuration.yaml:
frontend:
extra_module_url:
- /local/zoom-enable.js
Restart and bob’s your uncle.
5 Likes
I would also like to be able to zoom the camera with a pinch of my fingers. Similar to enlarging an image, not a PTZ
My hint above still works for me for pinch to zoom like zooming a picture.
Thank you! It works for a web page. But it doesn’t work in the app
It’s really a shame that it doesn’t work in the mobile app, I think this would be a very nice feature.