Custom Webrtc-camera card and other sensor

Configuration Frontend
1

Hello everyone,
I love the “Picture Glance” card in lovelace because I can stream the CCTV camera and could add few more sensor into the same frame of the camera. I have, for example, a card showing the living room camera, lights in the rooms and motion senor all in one card.

However, due to the nature of the “Picture Glance” card, all CCVT camera is about 6 - 8 seconds behind the actual time, this is also known as “lagging” and for what I know, there isn’t anything that could fix this yet. So I install the WebRTC-Camera integration. It works perfect, it also supports audio which some of my cameras offer. So far I am happy with the smooth stream and very little lagging (1-2 seconds) of this webrtc-cam.

But I miss the other sensors. With the custom card for WebRTC-cam, I can’t (or don’t know) add other sensors to be in the same frame. I tried to add the following codes into the yaml part of the custom card

type: custom:webrtc-camera
entity: camera.living_room
entities:
  - entity: light.main_light
  - entity: light.spot_light

But it only shows the camera in the frame, didn’t show the main light or spot light anywhere… I ran the config check and it says OK…

Does anyone know how to add other sensors (in my case, lights) into the custom card together with webrtc-camera, so to achieve the same effect like the “Picture Glance” card?

Thank you again in advance

2

PTZ control and buttons…

type: custom:webrtc-camera
entity: camera.tapo_camera_sala_sd
ui: true
ptz:
  service: tapo_control.ptz
  data_left:
    entity_id: camera.tapo_camera_sala_sd
    pan: LEFT
  data_right:
    entity_id: camera.tapo_camera_sala_sd
    pan: RIGHT
  data_up:
    entity_id: camera.tapo_camera_sala_sd
    tilt: UP
  data_down:
    entity_id: camera.tapo_camera_sala_sd
    tilt: DOWN
shortcuts:
  top: 100
  left: 0
  orientation: vertical
  services:
    - name: Luzes
      icon: mdi:lightbulb-outline
      service: switch.toggle
      service_data:
        entity_id: switch.luzes_sala

image
image1069×641 77.3 KB

3 Likes
3

But the state of these icons (shortcuts) will not change (unlike in the Picture Glance card), right?

4

forget for now the shortcuts… 1st you have the PTZ working…and then you add the lines to have the shortcuts…1st things 1st

5

I am just noticing a fact (so I do not need to forget nothing ;): in the picture glance the entity icons state are dynamic, while in the WebRTC camera card the homologous shortcuts are static since the icon does not change its appearance. That is a lamp, is always the same despite being on or off!

I would just love to join both possibilities: low lag of the WebRTC camera card with the dynamic behaviour of the icons in the picture glance.

Here AlexxIT seems to show a workaround but I do not know how to use a WebRTC stream in a picture glance card.

6

indeed if you use this custom card, the light bulb icon does not turn to “yellow”, when th light is on…even if you replace the service “switch.toggle” by “light.toggle” …it is just a shortcut to turn on and off the lights… not to have a full control if they r on or not…it helps me a lot…sometime im looking for the cat checking the camera, and i turn on the lights still looking at the camera, i dont need to access the other tab in my HA to do so…

9

Please forgive me for hijacking your post.

I installed WebRTC through HACS but I cannot see the custom card.

I asked a question on GitHub.

Any thoughts?

10

Is there a way to add a mic on/off button?

Update: I ended up adding one but how can I make it an icon rather than text?

type: custom:webrtc-camera
ui: true
streams:
  - url: reolink_doorbell
    name: Mic OFF
  - url: reolink_doorbell
    mode: webrtc
    media: video,audio,microphone
    name: Mic ON
style: >-
  video {object-fit: fill;} .pictureinpicture {display: none} .header {display:
  none} .stream { font-size: 15px; width: 150px;  font-weight: bold;
  padding-left: 2px;}

image

11

OK so I used emoji…
image

13

Can you share how you did this?
I’m doing what you did in your initial post above (using text).

14

Hi, I’m trying to create an icon that sends to another page but it doesn’t work. How can I do it?

shortcuts:
  - name: Meteo
    icon: mdi:eye-outline
    tap_action:
      action: navigate
      navigation_path: /lovelace/meteo