📺 Lovelace: Camera Card

GaryK · April 3, 2019, 5:31pm

Same results with Chrome on iOS.

When I move from the main tab to my security tab one of the streams will automatically open. I can then swipe to the next stream. The security tab remains obscured by these streams.

iantrich · April 3, 2019, 5:38pm

That’s iOS behavior as I understand it. If there is a single video element on a page, it will full screen it. Try putting two cards on a page

GaryK · April 3, 2019, 5:47pm

I’ve got two camera-cards and one generic on my security page. In Firefox, on the W10 machine, all three cameras appear. Active streams showing in the two camera-cards and a still image on the generic. Clicking on the generic still brings up the more-info card with the active stream playing. Clicking on the camera-card does nothing. Double-clicking on the generic gives me a full-screen playback. Double-clicking on the camera-card opens the full screen view, but doesn’t play.

On iOS with Safari only the generic appears on the page when you first open the tab. After a brief while (1 -2 sec) the camera-card stream appears full screen and I’m able to swipe to the second stream. Chrome behaves similarly.

jimz011 · April 3, 2019, 5:57pm

Chrome uses the same webkit as safari, so theoretically every browser on ios should perform similar. This also means that special chrome only features won’t work on ios as it is basically just safari with a skin (not exactly but simply put).

Peke · April 3, 2019, 7:36pm

Nice i was looking for something like this! would be great if we could put sensors in it like a glance card.

iantrich · April 3, 2019, 8:01pm

That won’t happen in this card. This was just a quick hack and is not the long-term solution. I’ll likely be adding a stream option to all picture cards in lovelace in the future

lblokland · April 3, 2019, 8:33pm

Hi Ian,

works really good ,thanks. This one was missing from the cards
Would be really nice to add entities linke in the picture-glance card, for example to pan / select presets from a button in the card.
Would it be possible to to add that?

Cheers!

iantrich · April 3, 2019, 11:44pm

I think something like that would be best done with a picture-elements card to start

iantrich · April 4, 2019, 1:36pm

Released version 1.2:

show more-info on click

lblokland · April 4, 2019, 8:27pm

Hi Ian,

I mean a few ‘buttons’ in the lower part of the camera-card, to select a few PTZ presets

iantrich · April 4, 2019, 9:12pm

This is a temporary card. Won’t be around long and won’t be adding a lot of features. Instead will be adding streams to picture cards

stratplayer · April 5, 2019, 4:41pm

Works fab with my Foscam cameras. Still trying to get my SV3C PoE RTSP IP cameras working in HA, but when they do… this will be great.

Will having say 7 windows updating be a massive drain? I am running on a Mac Mini with VM

iantrich · April 5, 2019, 5:01pm

HFsi · April 6, 2019, 3:17am

Could you share me the config of the Foscam cams?
I have some but couldn’t find the URLs to make them work.
Thanks

putteg · April 6, 2019, 6:50am

Works perfectly with Axis Cameras. Thnx

tinimark · April 10, 2019, 5:36pm

Hi, this could be a solution for something i’m looking to achieve but i’m having problems with the card (sorry, i’m noob).
I copied the camera-card.js file to the www folder and linked it in resources but i get
Custom element doesn’t exist: camera-card
and in the log…
http://192.168.x.xxx:8123/local/camera-card.js?v=1:7:1 Uncaught SyntaxError: Unexpected token

Have I missed something?

iantrich · April 10, 2019, 5:53pm

You likely copied the html version of the file and not the raw contents. Did you following the Troubleshooting steps listed at the bottom of the Readme?

tinimark · April 10, 2019, 6:40pm

Apologies, it started working after i refreshed. Thanks for you help…this looks good!

tinimark · April 11, 2019, 6:30am

Just wanted to say this card is getting me very close to where I want to be in terms of making a very user friendly camera control frontend in lovelace. My ambition being to be able to press on an image or button and have the camera move to a preset PTZ position and then show the stream from that camera in full screen.

Is it possible to configure the size of the card to make them bigger?
And would you know of a way to determine which camera the card will stream from given certain conditions?

Awesome work BTW

jtca · April 11, 2019, 11:32pm

This card is awesome! Thank you for the time put into developing it and sharing it with us. It is exactly what I was looking for… but (did you see that coming )… like some other custom cards it does not work on the Amazon Fire tablets with Fully Kiosk Browser - the best answer I could track down as a reason is the use of “LitElement” and FireOS doesn’t have the latest web elements which FKB uses. (admittedly I don’t really understand the technical aspects of this).

It works with Chrome on Fire tablets.

Fire tablets are a great, inexpensive option for wall mounted panels which I believe a lot of the HASS community uses… and FKB works great in a lot of other areas for that purpose as well. It would be nice to figure out how to utilize this combination with all these fantastic custom cards being developed.

Has anybody else run into this with custom cards on Fire tablets with FKB or been able to get this camera_card to work with that combination?

Bonus question - I’m not sure if my LitElement description of the problem is correct… if someone knows and could provide a clearer (worded) explanation that would be great.

Thanks in advance.