📺 Lovelace: Camera Card

Works perfectly with Axis Cameras. Thnx

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?

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?

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

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 :slight_smile:

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 :wink:)… 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.

Try Thomas’ layout-card for sizing or stacks with panel set to true

I don’t get the FKB thing, especially when it runs fine on on the Silk browser. @cubix is looking into Babel for custom cards at the moment. Hopefully he makes some progress, but this one will likely be in core before long.

Thanks, I will check it out.

Actually, I’m quite happy with the way things are looking on all devices.
I’m using a Hi9Air tablet as my main wall mounted device, it has a nice hi-res screen and didn’t cost the earth.
Now family and friends can play around with the PTZ cameras around the house using a simple UI.

The top image is a live stream with this card and the smaller pictures underneath are picture cards that call the PTZ presets for that camera. I found it gets a bit laggy after a few mins and the page needs to be refreshed. Displaying two live stream cards is getting my server CPU up to around 50% (i7 8gb ram proxmox).

Someone on my camera PTZ button thread even wrote some node-red flows that will show the full screen (more info) popup when those pictures are clicked on.


Can you give me some tips on your setup? Love the layout.

How did you change the sizing of your images? and also if you click on the the smaller images does that then open that stream in the larger one?

1 Like

Thanks! As always, it’s a work in progress and progress is slow because i never learnt to code.

In my screenshot above i’m using two vertical stacks next to each other and each vertical stack has three horizontal stacks within them, this defines the image size automagically.
The first card is this custom camera card which shows a live view from each of the two PTZ cameras. The thumbnails underneath are jpg picture entities which call a script to move the PTZ cameras when pressed.

I use picture entity cards for all of my switches. Just simply taking photos of the items and making them black and white when they are off.
I like the look of it and it keeps it easy for the non-tech family members to use.

This is the code for one of the vertical stacks

  - entity: camera.frontcamera
    type: 'custom:camera-card'
  - cards:
      - image: /local/frontdrive.jpg
          action: call-service
          service: shell_command.front_camera_drive
        type: picture
      - image: /local/bird.jpg
          action: call-service
          service: shell_command.front_camera_birdfeeder
        type: picture
      - image: /local/goose.jpg
          action: call-service
          service: shell_command.front_camera_goosepond
        type: picture
    type: horizontal-stack
  - cards:
      - image: /local/balcony.jpg
          action: call-service
          service: shell_command.front_camera_balcony
        type: picture
      - image: /local/frontdoor.jpg
          action: call-service
          service: shell_command.front_camera_frontdoor
        type: picture
      - image: /local/logs.jpg
          action: call-service
          service: shell_command.front_camera_logs
        type: picture
    type: horizontal-stack
type: vertical-stack

I am getting a lot of FFMPEG errors at the moment. Not sure if it’s this custom card or some other thing causing that.

Thanks for sharing @tinimark.

The only thing I can see that is a problem is that any of my streams have a delay of around 1:20 minutes. This happens on all my cameras.

That seems like a lot of delay.
I don’t really get any latency, a second or two at worse.
I’m using FFMPEG for the RTSP stream.
Having said that, I’m getting a lot of FFMPEG errors doing this and the odd random UI crash which may or may not be related.

Ya. I can sit on the couch, open up the stream in HA on my laptop wave at my greatroom camera and more then a minute later see me wave in the stream.

When I find some time I’m going to test out just streaming without the Camera Card.

The camera-card is just the more-info stream packaged into a card. Nothing can be done in my card to change that delay.

Seems in 92 there will be official support for camera stream in a card

Correct. This card was just a temporary stop-gap. I’ll deprecate it after 0.93-0.94 most likely.

I want to integrate this card into a picture elements card. Since the camera entity I use has transparency, your module doesn’t handle it very well

This is the expected result: https://imgur.com/w5QQ5RT
and this is the result with your module: https://imgur.com/U5Nmmfm

Ahh. the reason I don’t want to use picture instead of your module is that because it won’t update real time

This card will be deprecated after 0.92 is released and streams will be in core picture cards. I’m not going to troubleshoot any issues and this would be related to core HA implementation regardless and nothing to do with my wrapper card.


@iantrich can you add a warning / disclaimer to the first post of this thread stating that it’s dead?