Added tap_action support

[codemunkie15]

Added tap_action support using the below method:

https://developers.home-assistant.io/blog/2023/07/07/action-event-custom-cards/

I have not implemented hold_action or double_tap_action because they interfere with the video player and need more thorough investigation.

Note that on touchscreen devices (mobile/tablet) you have to set ui: true for tap_action to work otherwise the html5 video controls swallow the click events. If you don't want to see the custom UI like me, you can easily hide it with a style:

style: ".ui { display: none }"

[gogades]

I tested this PR on my install and it works great 👍

[AlexxIT]

Thanks. This really works for PC, but I don't like idea of different behaviour for PC and Mobile. Maybe this should work only for custom UI.

[codemunkie15]

Thanks. This really works for PC, but I don't like idea of different behaviour for PC and Mobile. Maybe this should work only for custom UI.

That would be fine for me. Let me know what you decide and I can update the PR. Should I also add the changes to the documentation, or do you prefer to do that?

[mbrevda]

will this allow for showing the video in fullscreen with a single tap?

[codemunkie15]

will this allow for showing the video in fullscreen with a single tap?

Yes. I use it with a fullscreen browser_mod popup with another webrtc-camera card.

[beesee78]

will this allow for showing the video in fullscreen with a single tap?

Yes. I use it with a fullscreen browser_mod popup with another webrtc-camera card.

I have a static image 99.9% of the time (updated whenever) but a button at the bottom left of my cards to go live at any point.

[jdekoven]

I'm looking for this exact thing. However, I'm not a coder so I'm not understanding. Is there some YAML here I should add to the card, or does the developer have to add as a feature?

[Marmeladenkopf]

hello, i would be very grateful for help, it is not possible for me to get tap_action to work in a custom:webrtc-camera card.

What am I doing wrong here? I am on the completely wrong track?

type: custom:webrtc-camera
title: ****
url: ****
ui: true
style: '.ui { display: none } .mode {display: none}'
tap_action:
  action: call-service
  service: browser_mod.popup
  data:
    ****

(please ignore formatting - did not know how to get this right in this post)

[uspino2]

@codemunkie15 I copied your modified webrtc-camera.js over the /homeassistant/custom_components/webrtc/www/webrtc-camera.js and added tap_action to my config (I want to open a different Lovelace tab when I tap), but nothing happens. Any advise to make it work? Thanks.

type: custom:webrtc-camera
entity: camera.doorbell_generic_hd
tap_action:
  action: navigate
  navigation_path: /lovelace/gate

[Marmeladenkopf]

@uspino2 somehow it works now for me, opening the stream in a pop up. - maybe it will help you.

not sure what has changed?!?

type: custom:webrtc-camera
url: rtsp://***/mpeg/media.amp
style: '.ui { display: none } .mode {display: none}'
ui: true
title: Vordereingang
poster: https://findlogovector.com/wp-content/uploads/2020/04/doorbird-logo-vector.png
tap_action:
  action: call-service
  service: browser_mod.popup
  data:
      dismissable: true
      autoclose: false
      size: wide
      content:
          type: custom:webrtc-camera
           style: '.ui { display: none } .mode {display: none}'
           url: rtsp://***/mpeg/media.amp
           ui: true
      style: '--mdc-theme-surface: transparent; '

[codemunkie15]

@AlexxIT Can you let me know how you want to proceed with this, to get it merged please?

[AlexxIT]

A'll check when I have time.

[fuhckos-98]

I've added this to my personal HA, but having trouble getting it to work no matter where I tap.. Not sure if I'm missing something?

tap_action: action: call-service service: camera.turn_on service_data: entity_id: camera.front1