Streaming camera in picture-elements

[bruxy70]

I have a rtsp ready camera set-up (HikVision), in More Info, it streams fine, but in Lovelace it only shows a static image, it will only show the stream when I click on it. The documentation says to set camera_view to live and point camera-image to the camera entity. What am I doing wrong? This is the configuration:

Configuration:

stream:
camera:
  - platform: generic
    name: Outside
    still_image_url: "http://1.2.3.4/ISAPI/Streaming/channels/101/picture"
    stream_source: "rtsp://user:[email protected]:554"
    username: "user"
    password: "password"
    authentication: digest

ui-lovelace:

- type: picture-elements
        image: /local/blank.png
        elements:
          - type: image
            camera_view: live
            camera_image: camera.outside
            style:
              top: 50%
              left: 50%
              width: 100%

[JesseWebDotCom]

Did you figure this out?

[bruxy70]

No, unfortunately not.

[bigmac]

@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-entity

[JesseWebDotCom]

Thanks 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.

[bruxy70]

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_image to a stream-ready camera entity and set camera_view to live in 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.

[wmaker (Tommy Long)]

I posted this earlier on another thread…Maybe this will help…

Using the new "camera_view: live" in my current configuration

FYI, I played with this a few minutes and got the following to work: - type: picture-elements title: Picture Elements w Stream image: /local/FloorPlanExample.jpg elements: - type: image entity: light.end_table_lamp camera_image: camera.my_camera_ffmpeg camera_view: live What I get is an floor plan as the main background which contains a small window with motion video sourced from my_camera_ffmpeg. When you tap on the motion video window you get pop …

[Jackso (Mat)]

@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

[wmaker (Tommy Long)]

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?

[Jackso (Mat)]

@Jackso

input_boolean.relay_120_9

Yeah, the streaming works through there. The picture entity card looks like this, the grey box being the stream that doesnt work

[wmaker (Tommy Long)]

Maybe its the camera format…is it streaming H.264?

[Jackso (Mat)]

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?

[wmaker (Tommy Long)]

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.

[Jackso (Mat)]

I’m hopeful it will work, I have been fiddling with it and found a couple things.

• The ‘width’ style parameter needs to be there, otherwise the grey box disappears
• The grey box is the same regardless of whether I include the camera_view: live bit or not
• Changing the entity to the same camera makes the actual livestream box pop up when the grey box is clicked

No idea if these tell anyone anything, just thought they were a little strange from what I’ve read about others having similar issues

[jparthum (Jason Parthum)]

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)

[William_Munny]

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?

[jparthum (Jason Parthum)]

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

[Nimpom (Johan Frithioff)]

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

[jparthum (Jason Parthum)]

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")?

[Nimpom (Johan Frithioff)]

I’m no web developer so I have no idea about that.