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

[uspino2]

@codemunkie15 I understand this pr hasn't been merged yet... Does it work if applied to the latest releas? Thanks.

[codemunkie15]

@codemunkie15 I understand this pr hasn't been merged yet... Does it work if applied to the latest releas? Thanks.

Yes, still working fine for me on the latest release.

[uspino2]

@codemunkie15 I understand this pr hasn't been merged yet... Does it work if applied to the latest releas? Thanks.

Yes, still working fine for me on the latest release.

I added these lines from your pr to custom_components/webrtc/www/webrtc-camera.js:

        const mode = this.querySelector('.mode');
        mode.addEventListener('click', () => this.nextStream(true));


        const player = this.querySelector('.player');

        // Tap action
        player.addEventListener('click', e => {
            if (this.config.tap_action && this.config.tap_action.action) {
                this.handleAction("tap", this.config);
                e.preventDefault();
            }
        });


        if (this.config.muted) this.video.muted = true;
        if (this.config.poster_remote) this.video.poster = this.config.poster;
    }


    handleAction(action, config) {
        const event = new Event("hass-action", {
            bubbles: true,
            composed: true,
          });

          event.detail = {
            config: config,
            action: action
          }

          this.dispatchEvent(event);
    }


    renderDigitalPTZ() {
        if (this.config.digital_ptz === false) return;

and then this to Lovelace:

type: custom:webrtc-camera
url: rtsp://10.10.10.44:8554/DoorbellWithMic?video=all&audio=all
ui: true
media: video
style: >-
  video {aspect-ratio: 4/3; object-fit: cover;} .pictureinpicture {display:
  none} .screenshot {display: none} .mode {display: none}
tap_action:
  action: navigate
  navigation_path: /lovelace/front

...and still no tap_action when pressed. Anything I might be doing wrong? Thank you!

[uspino2]

@codemunkie15 I correct myself: I had to clear the cache on every browser to make it work. Thanks!

[TitjyDev]

Love the idea of this PR but it doesn't work. Since i use browser-mod, this code works in developper tools but not from the webrtc card. So i don't know what i'm missing. restarted my browser, cleared the cache but no change.

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:
    content:
      type: custom:webrtc-camera
      ****

A single tap should open the card in a popup but nothing happens when clicking. @codemunkie15 can you try to reproduce?