Make sure you follow the QuickStart section on their Github: GitHub - thomasloven/hass-browser_mod: 🔹 A Home Assistant integration to turn your browser into a controllable entity and media player
Hello,
Thank you very much for your work. I have been trying for weeks to get two-way audio working with my Reolink POE doorbell. This is the first tutorial that actually works, and it even includes the door-opening button. So, thanks again.
The only downside is that I’m experiencing the feedback loop issue.
The visitor’s voice plays back through the doorbell with a slight delay, causing the doorbell speaker to crackle. I have a very low-quality tablet with no echo cancellation at all.
Do you think it would be possible to configure a push-to-talk button, like on a walkie-talkie? This way, the tablet’s microphone wouldn’t record sound while the visitor is speaking.
With the current way of the cards provided by the WebRTC Camera integration, it wouldn’t be possible in a usable way. The approach would be switching streams between microphone and no microphone, but that switch can take a few seconds.
My advice is lowering the volume on both, the tablet and the doorbell to try to reduce the feedback as much as possible.
ok thanks, I will test that.
Hi,
Thank you for sharing your blueprint.
It works like a charm without any feedback on my ipad. However I have some issues on my android phone. The camera pops up every second time so I need to relaunch home assistant. When it works, the picture is too wide so that the buttons are off screen. Do you have an idea to solve those issues?
This is a very hacky way for getting everything working together. My only usage is on tablet, so I hardcoded the width values in CSS. You can fix that using @media queries in CSS, but you need to take control of the blueprint and modify it.
In my phone I use the Reolink app because it’s better for receiving calls when I’m not home.
The yaml for the picture element is not correctly working no more. It is giving me error when clicking on the green phone icon.
There is not a specific error that can help me out. But it looks like the way the more info card is used is not as expected! Any help would be amazing
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:
- 20847a9cf4c7f62dac6d6833be2f5bd5
- 03467c4c21edd30add148d263e9f4e81
- 3dd84182e3a0cd645b752af3b73245a4
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_doorbell
media: video,audio,microphone
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.front_door_vloeiend
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 tested it and it works. Seems like you have taken control of the blueprint manually and modified something.
Try maybe to reimport it and create a clean automation.
yeah i took control because the blueprint was not working. As soon as i click the green phone icon the pop up window contains configuration error.
Well you said:
the picture element is not correctly working no more
Which makes mw think it worked at some point for you and it stopped working.
If that’s the case then there is a problem either with your manipulation or with the go2rtc stream, since that’s what is loaded when pressing the green button. Check that the stream name matches in go2rtc and in the card/blueprint.
Can this work with the native go2rtc integration?
The integration is just a way for HA to read with the streams, but you still need something that produces them (the go2rtc addon in this case).
To achieve this, the core go2rtc integration is not used at all.
Can you share your YAML file? Have a good day
To achieve this, the core go2rtc integration is not used at all.
So the blueprint won’t work for anyone using docker version of HA. We have to use either the internal one, dockerized one or one provided by frigate.
I don’t have a docker install so I can’t confirm, but I’d say as long as you have an entity to specify in the blueprint’s 2-way audio go2rtc stream field, it should work.
Thanks for the answer.
The problem is that external go2rtc is not creating entities in HA. I’m trying to use the URL like this:
url: http://127.0.0.1:1984/stream.html?src=camera.2way_audio_doorbell&mode=webrtc
…but no luck.
EDIT: tried the same thing with internal go2rtc. You can access it’s web ui after adding:
go2rtc:
debug_ui: true
in the HA config. I’ve temporary added streams and set the url webrtc stream but with port 11984. Same problem. RTSP is working, webrtc is not. It’s not he blueprint issue, I just hoped you might know how to make it work 
Thanks
Can you share the configuration of the RTSP and ffmpeg streams in the go2rtc UI?
I’ve tested a bunch of different configs I found on the Internet, but the last one is the one you suggested:
streams:
camera.2way_audio_doorbell:
- rtsp://admin:[email protected]:554/h264Preview_01_sub
- ffmpeg:camera.2way_audio_doorbell#audio=opus#audio=copy
Just to confirm. Using the core integration (not the add-on) doesn’t create an entity with the name you specified for the stream in the go2rtc config?
If it does, is that entity’s stream (camera.2way-...) visible?
WebRTC might have issues to traverse NATs, so you should check that also.
Can the same be achieved using Advanced Camera Card, instead of browser-mod?