2 Way audio Intercom for Reolink doorbell made easy

You should first try it on your desktop and debug there.

  1. It’s strange to me that the first popup shows an error. It’s just a picture-elements card using the reolink doorbell fluent entity (should use that entity) with some overlay icons.
    What version of browser-mod are you using? It might be that you have an older version?
    The picture-elements card uses a bit of a hack. It sets the image like:

    image: https://upload.wikimedia.org/wikipedia/commons/c/ca/1x1.png
    

    so it might be conflicting. You can try to “Take control” of the automation and try to put a local image there.
    If that doesn’t work, you can try to remove some other properties of the card

  2. The popup not appearing might be because browser mod is interpreting the different domains (local IP vs NabuCasa URL) as different browsers. You should check that (in the browser-mod tab in HA) when switching the URL.

Just to be clear, the 2 way audio will only work with HTTPS.

Thank for the reply.
you were right about the reason why the pop up didn’t work, I had to register the browser again with the public URL. The 2 way audio is still not working though. With the public address I know see the green dot on the top right of the screen showing a little mic icon with the camera icon. With the local url I had only the camera icon.
About the first pop up error, I still get it. I tried to “take control”, but I’m quite new to this and I don’t see what could be wrong. I saw the line you pasted, but I can’t understand if I need to change the ID somewhere to fix it. I’d post the code but I’m having a hard time to get how to do it properly, to not paste it here as plain text. I’ll try further tomorrow. I’ll let you know

Here is the code of the automation

mode: single
triggers:
  - entity_id: binary_sensor.home_doorbell_visitor_2
    from: "off"
    to: "on"
    trigger: state
actions:
  - data:
      size: normal
      browser_id:
        - fff047f5a4d20be09fd608b9ad50aa61
      style: |-
        ha-dialog {
          --mdc-dialog-min-width: 600px !important;
        }
        .content {
          width: auto !important;
        }
      content:
        type: picture-elements
        elements:
          - 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:
              action: call-service
              service: browser_mod.popup
              service_data:
                size: wide
                dismissable: true
                style: |-
                  ha-dialog {
                    --mdc-dialog-min-width: 600px !important;
                  }
                  .content {
                    width: auto !important;
                  }
                browser_id:
                  - fff047f5a4d20be09fd608b9ad50aa61
                content:
                  type: picture-elements
                  card_mod: null
                  style: |
                    #root { max-height: 436.65px }
                  elements:
                    - type: icon
                      icon: mdi:phone-off
                      tap_action:
                        action: call-service
                        service: browser_mod.close_popup
                      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: null
                      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: camera.2way_audio_home_doorbell
                      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
          - 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
          - 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: null
          - type: custom:more-info-card
            entity: camera.home_doorbell_fluent
            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 }
    action: browser_mod.popup
  - wait_template: "{{ states('!input doorbell_sensor') == 'off' }}"
    timeout: "60"
    continue_on_timeout: true
  - data:
      browser_id:
        - fff047f5a4d20be09fd608b9ad50aa61
    action: browser_mod.close_popup
alias: 2-way audio Home Doorbell popups
description: ""

What are the versions you have installed of:

  • browser-mod
  • card-mod
  • Home Assistant

Browser mod 2.5.1
Card mod 3.4.5
Home Assistant 2025.8.3
Operating system 16.1

I just copy pasted your code, replaced my browser- mod browser, visitor and camera fluent entities and it works good. I can see the video feed in the first popup without any error.
I would say it’s a problem with browser mod. Can you paste a screenshot of the Perform an action: Browser mod popup action’s top content? Where you select the browser.

I’m not really sure I understand what you’re telling me to do, but these are the screenshots of that part of the automation with some features selected and the code



type: picture-elements
elements:
  - 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:
      action: call-service
      service: browser_mod.popup
      service_data:
        size: wide
        dismissable: true
        style: |-
          ha-dialog {
            --mdc-dialog-min-width: 600px !important;
          }
          .content {
            width: auto !important;
          }
        browser_id:
          - fff047f5a4d20be09fd608b9ad50aa61
        content:
          type: picture-elements
          card_mod: null
          style: |
            #root { max-height: 436.65px }
          elements:
            - type: icon
              icon: mdi:phone-off
              tap_action:
                action: call-service
                service: browser_mod.close_popup
              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: null
              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: camera.2way_audio_home_doorbell
              media: video,audio,microphone
              mode: webrtc
              style:
                position: absolute
                top: 50%
                left: 50%
                width: 100%
                height: 100%

Can you try to create a card in the dasboard with the following content and see if it works?

type: picture-elements
elements:
  - 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
  - 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
  - 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: null
  - type: custom:more-info-card
    entity: camera.home_doorbell_fluent
    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 }

I just tried this exact content, with your entities, and I see the card showing without the “Configuration error”:

I got the error here too

Oh the error is obvious, you skipped the 5th requirement of the guide. The more-info-card is not installed.

That’s it! Now it’s fixed! Thank you…
Now I need to understand why I can’t hear on the camera when I press the green button. I’ll try again later, after fixing the first pop up

Hey all. Looks like everyone going well here regarding Browser Mod. Just FYI that 2.5.1 now will go to a full interaction mode on browser first refresh if the Browser is picky with interaction requirements, usually with playing audio automatically. This has surprised some users who this is likely not important. However for the use case here, it takes the last piece of guesswork out of the Browser blocking based on user interaction requirements.

The next most reported issue I see is networking (secure v non-secure) and CORS. Both usually addressed by paying particular attention to cloud and local URLs, and setting as manual if needed. Devices that stay local are usually easy to work out. I am not sure how the camera streams work in the mix, but you may need to add them as a CORS allowed URL if the stream comes directly from the camera.

Oh gosh, you’re losing me with this message… :sweat_smile: Do you think the I need to add them as CORS to make it works? And most of all, what is CORS?? :cold_sweat:

Thanks for the heads up. I just upgraded to 2.5.1 and i2-way audio works fine via HTTPS through Home Assistant Cloud and using the Android app.

CORS is Cross-Origin Resource Sharing. Basically it is a mechanism where the current server tells the Browser what is OK to load, apart from itself. In its simplest form, if you are Browsing at www.somewhere.com but a resource on the page uses the server IP address instead, unless the page’s CORS is set to allow all, or the IP address specifically, then the resource will be blocked.

Whether you need to use will be down to your network setup. Usually it will be the last thing needed to correct an issue, and more due to the unique nature of a setup. e.g. I use in my development environment. The Home Assistant documentation is HERE.

Browser Mod v2.5.2 released which makes the Full user interaction opt in. Too many users were impacted by the user interaction which is not required if you are not using popups with media. Anyhow if the 2.5.1 feature helped you then in 2.5.2 you will now need to set the Frontend setting to get the feature.

Nothing, it’s still not working.
Two things came to mind, I have integrated the doorbell via the recorder, so the ip I’m using is the recorder ip address. I thought that was not a problem, because changing the “01_sub” in other numbers “02_sub” etc. make me see every camera without issue. Now I have a doubt, can it be the reason why it’s not working?
Moreover, I added a user specifically for HA in the reolink app, when it was possible, and as user and password I’m using those credentials, should I be using the Admin credentials instead?

Lastly, now when the pop up comes out the audio keeps playing even after it’s closed. So I guess it has something to do with what @dcapslock was saying, but I didn’t understand what needs to be done to fix it

If you are able to see the stream in the second popup and you hear the audio but the microphone is not working it can be because of 2 things:

  • you are not using HTTPS
  • your go2rtc config is incorrect

If you can’t even see the video in the second popup, it’s definetly something between the doorbell or the recorder and go2rtc. I can’t help with that because I connect to the doorbell directly.

You can try to debug it using the go2rtc addon.

  1. Open the web interface:

    Open your Home Assistant instance and open the ingress URL of an add-on.

  2. Click on the links anchor under the Commands column in your stream row

  3. At the bottom of the page, you will see a section called “WebRTC Magic”. Select the video+audio+microphone option and you can test both local and exteral players opening the webrtc.html (for local) and copy link and paste it in another tab (for external).

If anything is not working, then the problem is in your go2rtc configuration. Because maybe as you mentioned you are using the RTSP stream from your recorder instead of the camera itself.