Doorbell two-way audio

doorbell-two-way-audio.yml

blueprint:
  name: 2-way audio doorbell popupsv5
  description: Trigger a popup and perform actions when a visitor rings the doorbell with 2-way audio
  author: victorigualada
  domain: automation
  input:
    doorbell_sensor:
      name: Doorbell Sensor
      description: The binary sensor triggered when the doorbell is pressed.
      selector:
        entity:
          domain: binary_sensor
    browser_ids:
      name: Browser IDs
      description: List of Browser Mod IDs for displaying the popup.
      selector:
        device:
          multiple: true
          filter:
            - integration: browser_mod
    camera_entity:
      name: Camera Entity
      description: The camera to display in the popup. This should be the normal stream produced by the camera.
      selector:
        entity:
          domain: camera
    go2rtc_url:
      name: 2-way audio go2rtc stream
      description: The stream exposed by go2rtc that includes 2-way audio. This MUST match the stream name configured in go2rtc
      default: camera.2way_audio_doorbell
    open_gate_script:
      name: Open Gate Script
      description: The script to open the gate.
      default: null
      selector:
        entity:
          domain: script

trigger:
  - platform: state
    entity_id: !input doorbell_sensor
    from: "off"
    to: "on"

action:
  - service: browser_mod.popup
    data:
      tag: doorbell-popup
      size: normal
      browser_id: !input browser_ids
      style: |-
        ha-dialog {
          --mdc-dialog-min-width: 600px !important;
        }
        .content {
          width: auto !important;
        }
      content:
        type: picture-elements
        elements:
          # Pick-up button
          - type: icon
            style:
              left: 15%
              bottom: 0
              background-color: "#4CAF50"
              color: white
              padding: 14px
              font-size: 18px
              border: none
              border-radius: 50px
              display: inline-flex
              align-items: center
              cursor: pointer
              z-index: 1
            icon: mdi:phone
            tap_action:
              tag: anwser-popup
              action: call-service
              service: browser_mod.popup
              service_data:
                tag: doorbell-call
                size: wide
                dismissable: true
                style: |-
                  ha-dialog {
                    --mdc-dialog-min-width: 600px !important;
                  }
                  .content {
                    width: auto !important;
                  }
                browser_id: !input browser_ids
                sequence:
                  - service: browser_mod.close_popup
                  - service: browser_mod.delay
                    data:
                      delay: 1
                  - service: browser_mod.popup
                    data:
                      content:
                        type: picture-elements
                content:
                  type: picture-elements
                  card_mod:
                  style: |
                    #root { max-height: 436.65px }
                  elements:
                    - type: icon
                      icon: mdi:phone-off
                      tap_action:
                        action: call-service
                        service: browser_mod.close_popup
                        service_data:
                          tag: doorbell-call
                      style:
                        left: 85%
                        bottom: 0
                        width: 20px
                        background-color: "#f44336"
                        color: white
                        padding: 14px
                        font-size: 18px
                        border: none
                        border-radius: 50px
                        display: inline-flex
                        align-items: center
                        cursor: pointer
                        z-index: 1
                    - type: icon
                      icon: mdi:lock-open
                      tap_action:
                        action: call-service
                        service: script.turn_on
                        service_data:
                          entity_id: !input open_gate_script
                      style:
                        left: 15%
                        bottom: 0
                        background-color: "#2196F3"
                        color: white
                        padding: 14px
                        font-size: 18px
                        border: none
                        border-radius: 50px
                        display: inline-flex
                        align-items: center
                        cursor: pointer
                        z-index: 1
                    - type: custom:webrtc-camera
                      ui: true
                      url: !input go2rtc_url
                      media: video,audio,microphone
                      mode: webrtc
                      style:
                        position: absolute
                        top: 50%
                        left: 50%
                        width: 100%
                        height: 100%
                      card_mod:
                        style: |
                          .fullscreen {display: none}
                          .screenshot {display: none}
                          .pictureinpicture {display: none}
                          video {aspect-ratio: 16/9}
                  image: https://upload.wikimedia.org/wikipedia/commons/c/ca/1x1.png
          # Hang-up button
          - type: icon
            style:
              left: 85%
              bottom: 0
              width: 20px
              background-color: "#f44336"
              color: white
              padding: 14px
              font-size: 18px
              border: none
              border-radius: 50px
              display: inline-flex
              align-items: center
              cursor: pointer
              z-index: 1
            icon: mdi:phone-off
            tap_action:
              action: call-service
              service: browser_mod.close_popup
          # Open door button
          - type: icon
            style:
              left: 50%
              bottom: 0
              background-color: "#2196F3"
              color: white
              padding: 14px
              font-size: 18px
              border: none
              border-radius: 50px
              display: inline-flex
              align-items: center
              cursor: pointer
              z-index: 1
            icon: mdi:lock-open
            tap_action:
              action: call-service
              service: script.turn_on
              service_data:
                entity_id: !input open_gate_script
          # Camera stream
          - type: custom:more-info-card
            entity: !input camera_entity
            style:
              position: absolute
              top: 50%
              left: 50%
              width: 100%
              height: 100%
              z-index: 0
            card_mod:
              style: |
                :host { padding: 0}
                .card-header { display: none;}
                .card-content { padding: 0; margin-top: 0 }
        image: https://upload.wikimedia.org/wikipedia/commons/c/ca/1x1.png
        card_mod:
          style: |
            #root { height: 420px }

  - wait_template: >-
      {{ states('!input doorbell_sensor') == 'off' }}
    timeout: "60"
    continue_on_timeout: true

  - service: browser_mod.close_popup
    data:
        sequence:
          # ENSURE MORE-INFO IS CLOSED (modern >2.5.0 way)
          - service: browser_mod.more_info
            data:
              close: true
          # CLOSE MAIN POPUP
          - service: browser_mod.close_popup
            data:
              tag: doorbell-popup
              browser_id: !input browser_ids

mode: single