@bruxy70 @JesseWebDotCom I use synology for my cameras (which are hikvision) and ran this on my test system (same setup as yours directly from the hikvision camera).
Picture entity shows live view and clicking on it zooms the live stream.
try in raw config ui or picture entity card:
- camera_view: live
entity: camera.outside
show_name: false
show_state: false
type: picture-entityThanks but I think what we can’t figure out is how to have a live camera stream as the full sized background of a picture elements (so you can then overlay things on top like sensors and messages). I don’t think it’s possible.
Ok, you are right, picture-entity works. I did not try that before. Interesting.
The documentation states that
As of Homeassistant version 0.92 you can now live-stream a camera feed directly in lovelace. To do this add either picture-entity, picture-glance or picture-elements, set
camera_imageto a stream-ready camera entity and setcamera_viewtolivein one of your lovelace views.
So either I got the picture-elements configuration wrong, or there is a bug, or the documentation is wrong? Anyone have streaming working with picture-elements? Can you please share config! Thanks.
I posted this earlier on another thread…Maybe this will help…
@wmaker I’ve been struggling all week to replicate that, with no success. Here is what my lovelace card looks like
image: /local/FLOORPLAN_1.jpg
type: picture-elements
elements:
- type: image
entity: input_boolean.relay_120_9
camera_image: camera.cnc_10
camera_view: live
style:
left: 50%
top: 50%
width: 100%
height: 100%
Is there anything in your config file or set up anywhere else that may be the difference? Also, for me I couldn’t get it to show up without style parameters. Unsure if this is because it is displaying the card off screen or it doesn’t show it at all
The configuration looks OK (I did not have to use styling).
As a check, when you go to Developer Tools->State and click on camera.cnc_10 “more info” i.e. the (i); a popup window occurs, but does it show anything?
Yeah, the streaming works through there. The picture entity card looks like this, the grey box being the stream that doesnt work
Maybe its the camera format…is it streaming H.264?
We thought about that, but we have picture-glance cards streaming just fine. We’re using ubiquiti cameras and they’re using rtsp. How would I check what format the stream is in?
Hmmm…if its working for picture-glance with the setting:
camera_view: live
then I would think it would work for picture-entity.
As to the format, I don’t know about those cameras, but in my case I have to bring up a webpage directly with the camera to see what its format is.
I’m hopeful it will work, I have been fiddling with it and found a couple things.
No idea if these tell anyone anything, just thought they were a little strange from what I’ve read about others having similar issues
I’ve been struggling with this for a while too and I’m pretty convinced it’s a bug in the picture-elements card. I’ve considered submitting a bug report (which I’ve never done before) but wanted more verification first. I configured this Lovelace View for testing and to submit as an easy way to reproduce the issue. Here it is If anyone else wants to test with their camera…
views:
###################################################################################################
#### Camera Test View #############################################################################
###################################################################################################
- title: Camera Testing
path: camera_test
icon: mdi:test-tube
cards:
- type: picture-entity
entity: camera.courtyard
camera_image: camera.CAMERA_NAME
camera_view: live
- type: picture-glance
entities: []
camera_image: camera.CAMERA_NAME
camera_view: live
- type: picture-elements
image: https://i.imgur.com/FHZLxXp.png
elements:
- type: image
camera_image: camera.CAMERA_NAME
camera_view: live
style:
left: 50%
top: 50%
width: 100%
height: 100%
(Paste at the end of ui-lovelace.yaml and replace camera.CAMERA_NAME with the entity id of a working camera component)
Same problem.
Stream works fine using picture-entity or picture-glance.
But I want to use picture-elements to have PTZ control inside the card.
Any updates?
I went ahead and submitted a bug report but haven’t gotten a response yet:
https://github.com/home-assistant/home-assistant-polymer/issues/4629
While waiting for the bug report to get resolved I found a workaround using custom:card-modder
- type: picture-elements
image: /local/camera_bg.png
elements:
- type: custom:card-modder
style:
width: 100%
height: 100%
top: 50%
left: 25%
card:
type: picture-entity
entity: camera.test_camera
camera_view: live
show_name: false
show_state: false
That’s clever, @Nimpom!
I just tested and this works beautifully.
Do you think the reason this works may be because the .css for <div id="root"> is overwritten – supporting my initial suspicion (under " Additional information")?
I’m no web developer so I have no idea about that.
@bruxy70, I do not know if this helps, but in version 0.108.0, picture-elements can stream.
I learnt that it depends on how you set up your camera: tried ffmpeg, onvif and generic platforms. Generic platform gave the best streaming result (depends on the HW you are running HASS).
My working ui-lovelace,yaml section looks like:
- type: conditional
conditions:
- entity: device_tracker.fluoreon_cam
state: 'home'
card:
type: picture-elements
image: camera.living
camera_image: camera.living
camera_view: live
elements:
- type: icon
icon: 'mdi:arrow-up'
entity: camera.living
style:
background: 'rgba(255, 255, 255, 0.5)'
right: 25px
bottom: 25px
tap_action:
action: call-service
service: rest_command.floureon_cmd
service_data:
ptz_cmd: up
- type: icon
icon: 'mdi:arrow-down'
entity: camera.living
style:
background: 'rgba(255, 255, 255, 0.5)'
right: 25px
bottom: 0px
tap_action:
action: call-service
service: rest_command.floureon_cmd
service_data:
ptz_cmd: down
- type: icon
icon: 'mdi:arrow-left'
entity: camera.living
style:
background: 'rgba(255, 255, 255, 0.5)'
right: 50px
bottom: 12px
tap_action:
action: call-service
service: rest_command.floureon_cmd
service_data:
ptz_cmd: left
- type: icon
icon: 'mdi:arrow-right'
entity: camera.living
style:
background: 'rgba(255, 255, 255, 0.5)'
right: 0px
bottom: 12px
tap_action:
action: call-service
service: rest_command.floureon_cmd
service_data:
ptz_cmd: right
- type: state-icon
entity: media_player.tanix_kodi
style:
right: 220px
bottom: -10px
tap_action:
action: navigate
navigation_path: /lovelace/2
thanks for the update, this is now working for me too!
how do you get the full size video to play if you tap on the picture element?
Thanks for sharing this, is there a way to make it so you click on the streaming image and get the full screen stream rather than having to click on an icon?