Realtime camera streaming without any delay - WebRTC

filippos · February 24, 2021, 12:10pm

Tried once again but this time worked like a charm.
Tested and verified on cameras (video and audio) :

Foscam C1
Wyzecam
Sonoff

Would be great if you implemented a camera entity for hassio for every camera.

gerliczky · February 28, 2021, 7:16am

I managed to install the addon and it works perfectly in local network. But when I try to access the cameras using mobile internet I always get "disconnected’ or “failed” message. The port forwarding works perfectly in my network as I can see the stream using VLC media player.
If I use the external url in the local network the addon works without problem.
Does a similar setup work for anybody?

danbutter · February 28, 2021, 7:56pm

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:

AlexxIT · March 1, 2021, 9:14am

Did you forward UDP ports range as it described in docs?

gerliczky · March 2, 2021, 8:10am

Thanks for the hint, I did not checked that part in the docs. I will give it a try.

gerliczky · March 2, 2021, 3:00pm

I set up the forwarding of the port range 50000-50009 to HA server. The addon works perfectly. Thanks for the hint.

GizmoLibre · March 6, 2021, 11:37am

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.

mals · March 17, 2021, 12:26am

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.

xAPPO · March 18, 2021, 1:56am

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

mals · March 18, 2021, 8:23am

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.

xAPPO · March 18, 2021, 9:37am

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

mals · March 18, 2021, 10:09am

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

thundergreen · March 18, 2021, 12:00pm

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?

xAPPO · March 18, 2021, 12:23pm

Yes - due to https

Although I add https in the config it still uses http Same it seems with an external URL eg NabuCasa

mals · March 18, 2021, 12:57pm

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.

xAPPO · March 18, 2021, 12:59pm

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.

mals · March 18, 2021, 1:11pm

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).

xAPPO · March 18, 2021, 1:19pm

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.

mals · March 18, 2021, 1:39pm

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.

mals · March 18, 2021, 1:47pm

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