I use a VPN to connect to my network from the outside and this addon works with it.
I don’t know what kind of Home assistant install you have, but it works with this:
Did you forward UDP ports range as it described in docs?
Thanks for the hint, I did not checked that part in the docs. I will give it a try.
I set up the forwarding of the port range 50000-50009 to HA server. The addon works perfectly. Thanks for the hint.
Hi. Any update on lovelace card? I am desperate, since this is the only integration solution that really works for me. If someone with the right skill can finish making it, i would really appreciate it. Thanks.
I’ve managed to create a lovelace card which works with Alex’s add-on. The lovelace card cannot work with ingress authentication in homeassistant. I’ve also had to allow CORS on the “recive” endpoint. This likely has security implications if your homeassistant server is publicly accessible.
You will need to install the add-on from my repo to pickup the changes mentioned above. You should uninstall Alex’s add-on if you have it installed and remove his repo as well to avoid a conflict before installing from my repo below:
The lovelace card can be found here:
Copy lovelace-webrtc-card.js, adapter-latest.js, jquery-3.4.1.min.js to /config/www/lovelace-webrtc-card.
Also you will need to add the lovelace card to homeassistant by going to Configuration => Lovelace Dashboards => Resources => Add Resource.
Enter http://<your HA server>:8123/local/lovelace-webrtc-card/lovelace-webrtc-card.js?v=0.1 for the URL. Set the resource type to JavaScript Module.
Configure the streams in Alex’s add-on and ensure that under Network you have port 8083 set for the host.
In homeassistant, you can add the card by modifying the following yaml to suit your setup:
type: 'custom:lovelace-webrtc-card'
name: Doorbell
suuid: Doorbell
webrtc_host: 'http://homeassistant:8083/'
Note:
suuid is the name of the stream that you defined in the add-on configuration.
webrtc_host is the URL to your homeassistant server and port running Alex’s add on. The trailing slash is required.
The add-on works for the most part. There is an issue where the stream does not always play immediately when you switch back to the view. I’ve put some logic in set hass() to play the stream if it is paused but this can be delayed until the function is called. I haven’t been able to find a good fix for this yet. Also, the code will play the audio stream by default.
I should mention that I am not a web developer and this has been quickly hacked together to work for my purposes. This can probably be done better but hopefully will serve as a starting point.
3 Likes
I’m struggling a little.
I have removed Alex’s add-on and deleted his repository but when I add your repository it comes up showing Alex’s repository I think due to the repository.json file you include so I am not convinced I have the right version.
However it works in displaying the video within in the addon. I am using the demo source.
I have added your Lovelace card and added it to a view. However it shows nothing, not rendered even a box (but also shows no error). The port is correct.as the forwarded ports but I am on a local LAN anyway
Any ideas ?
Checked and direct web access to that url http://192.168.1.50:8083/ does work
[GIN] 2021/03/18 - 02:16:15 | 200 | 579.998µs | 192.168.1.22 | GET "/"
[GIN] 2021/03/18 - 02:16:15 | 200 | 637.778µs | 192.168.1.22 | GET "/static/css/bootstrap.min.css"
[GIN] 2021/03/18 - 02:16:15 | 200 | 380.019µs | 192.168.1.22 | GET "/static/js/bootstrap.min.js"
[GIN] 2021/03/18 - 02:16:15 | 200 | 480.199µs | 192.168.1.22 | GET "/static/js/jquery-3.4.1.min.js"
[GIN] 2021/03/18 - 02:16:15 | 200 | 459.95µs | 192.168.1.22 | GET "/static/js/adapter-latest.js"
[GIN] 2021/03/18 - 02:16:15 | 200 | 205.794µs | 192.168.1.22 | GET "/static/js/app.js?ver=2021-03-18+02:16:15.183810654+%2B0000+GMT+m%3D%2B833.581531780"
2021/03/18 02:16:15 Codec Not Supported WebRTC ignore this track AAC
[GIN] 2021/03/18 - 02:16:15 | 200 | 44.478µs | 192.168.1.22 | GET "/codec/Demo_H264_AAC"
2021/03/18 02:16:15 Set UDP ports to 50000..50009
2021/03/18 02:16:15 WebRTC Ignore Audio Track codec not supported WebRTC support only PCM_ALAW or PCM_MULAW
[GIN] 2021/03/18 - 02:16:15 | 200 | 68.87051ms | 192.168.1.22 | POST "/recive"
2021/03/18 02:16:32 Client Not Send ACK (probably the browser is minimized) or tab not active Close client
2021/03/18 02:16:32 WritePacket WebRTC Client Offline
2021/03/18 02:22:23 Stream Exit Rtsp Disconnect
2021/03/18 02:22:24 Stream Try Connect Demo_H264_AAC
You are correct, I haven’t updated repository.json but I believe you have picked up the right version as you have direct access to the webrtc_host without ingress. I’ll update repository.json shortly to avoid confusion.
Just to confirm, have you added lovelace-webrtc-card.js to the lovelace resources in homeassistant? And can you access the 3 javascript files through a browser (eg. http://192.168.1.50:8123/local/lovelace-webrtc-card/lovelace-webrtc-card.js).
Lastly, if the card has loaded properly, it will throw an error if you remove suuid. Try removing it to confirm that the card is loading.
Yes re. the js files and addition to LoveLace resources plus it asks (warns missing) for the suuid if I haven’t entered it.
Just going to double check something … 403: Forbidden - at the js directory level
Hmm, it looks like it is loading the javascript. Can you try to change the version string for the resource so it is reloaded (eg. /local/…/lovelace-webrtc-card.js?v=0.0.2). And also try closing your browser and reloading.
If you are using Chrome, you can right click on the page and go to Inspect to look at the console. Is it throwing an error?
If it is picking up the stream, you should see something similar to:
lovelace-webrtc-card.js?v=0.0.1:100 1 video track was delivered
lovelace-webrtc-card.js?v=0.0.1:100 1 audio track was delivered
lovelace-webrtc-card.js?v=0.0.1:100 1 video track was delivered
lovelace-webrtc-card.js?v=0.0.1:100 1 audio track was delivered
lovelace-webrtc-card.js?v=0.0.1:147 sendChannel has opened
is there a way / trick to dosplay this stream directly in fullscreen?
And what is this supposed to be?
this.webrtc_config = {
iceServers: [{
urls: ["stun:stun.l.google.com:19302"]
}]
};
Don’t tell me my stream is linked to google?
Yes - due to https
Although I add https in the config it still uses http Same it seems with an external URL eg NabuCasa
It looks like you have a couple of options to fix the mixed http/https content:
- Use http to access homeassistant (192.168.1.50:8123) and the WebRTC add-on (192.168.1.50:8083)
- Use https for homeassistant and the WebRTC add-on. The WebRTC add-on is served with http. You can setup an nginx reverse proxy to serve it using https.
Option 1) doesn’t work and I think I would have to disable SSL for DuckDNS wouldn’t I ?
Option 2) I’ll look at but shouldn’t the addon use whatever URL is in the config ? Lots of people will have a similar setup I think.
I don’t believe the WebRTC add-on will work if you connect to https://192.168.1.50:8083 as it serves pages using http. Try the URL in a browser and see if it works. I don’t imagine it will. I use a VPN to access my homeassistant server so I haven’t tried https but I believe the lovelace card should work if all the services are configured properly.
Also, this solution should not be used if you are trying to access the streams from an external IP as you will also need to expose the WebRTC add-on to the web. This would be a major security issue especially without some form of authentication (or ingress).
Correct - it doesn’t I’ll try the nginx path - thanks
OK now, and working well - shame can’t be used via NabuCasa securely so can’t check in on home.
WebRTC uses ICE/STUN servers to determine how to traverse a NAT (eg. get the public IPs) to connect 2 peers together. That’s what this sets up.
As for fullscreen. Not sure. There might be a property for the HTML video element to do this. But I’m going to say there isn’t or we’d be seeing fullscreen video ads hijacking our browsers.
I initially had this “sort of working” with the ingress path. The problem was that you would need to manually access the WebRTC add-on through the homeassistant side panel to authenticate your ingress session. This would then allow you to access the WebRTC stream through the view containing the lovelace card. The problem is that if you lose your ingress session, you would have to repeat this step.
See Grafana Dashboard as Lovelace iframe results in ingress issue · Issue #6235 · home-assistant/frontend · GitHub for more information
1 Like
The lovelace card is fairly reliable with a single card/camera (~85% success rate)… but the streams become less likely to load the more I duplicate things out (2, 3, 4, etc. cards).
Just with 2 cards for example, it loads ~40% the time, and the following error often shows up in console -
Uncaught (in promise) DOMException: The play() request was interrupted by a call to pause().
Also a lot of times 1 of X cards will load, but the rest will not.
1 Like
Hi @xAPPO
Card is not displaying, i’m juste having a black card.
url http://192.168.0.42:8083 is working
debugger show:
