Realtime camera streaming without any delay - WebRTC

thats great. thanks for your effort. @allenporter & @AlexxIT

one last question since i dont know how webRTC works in detail: will it somehow be possible to view the stream over remote access since webRTC atm only works when you access Home Assistant locally, right?

Does anyone else have issues with WebRTC v2.1.0 and Firefox 0.98 on Windows 10 ? If I use Chrome on Windows 10 or the Companion App on IOS I do not see any issues. However, on Firefox under Windows 10, the stream will start and play (MSE?), once WebRTC kicks in it will continue play for about 5-10 seconds then pause, resume, pause. Sometimes it just stays paused/frozen, I use the date/time stamp of my camera to watch the progress. Any ideas? workarounds?

Edit: Added some more details.
Edit 2: For anyone else with this issue, I found that MSE works fine. If you go into about:config on firefox and set media.peerconnection.enabled to false, WebRTC wont load.
Edit 3: I can block the outbound ports on my firewall and WebRTC does not kick in. Setting media.peerconnection.enabled to false causes the plugin to fail on next browser load.

I get in Firefox console the following error:

Loading module from “https://<<REDACTED>>/webrtc/webrtc-camera.js?v2.0.2” was blocked because of a disallowed MIME type (“text/plain”).

Strange thing is that the version installed is not 2.0.2 but 2.1.0, the latest available from HACS. Did someone also experienced the problem ?

I also have Frigate Card installed, which, if I’m not wrong, also uses WebRTC js.

This is a big GitHub bug. Lost the latest 2.2.0 release. You can install the master version for now. It has the latest code version

6 Likes

@AlexxIT

are you the maintainer?

the integration doesnt work anymore, i cant set it up under integrations, it says only : “not loaded”

Traceback (most recent call last):
  File "/usr/src/homeassistant/homeassistant/setup.py", line 228, in _async_setup_component
    result = await task
  File "/config/custom_components/webrtc/__init__.py", line 75, in async_setup
    utils.register_static_path(hass.http.app, url_path, path)
  File "/config/custom_components/webrtc/utils.py", line 74, in register_static_path
    app['allow_cors'](route)
  File "/usr/local/lib/python3.9/site-packages/aiohttp/web_app.py", line 186, in __getitem__
    return self._state[key]
KeyError: 'allow_cors'

there are issues on github opend

Answer in my post above

1 Like

okay i installed it manually. comes it to hacs ?

For anyone who is interested, here is a detailed write-up of how I managed to display a low-latency real time feed from my doorbell in a picture-in-picture popup on Android TV using WebRTC Camera and PiPup (side loaded apk on Android TV).

10 Likes

Excellent writeup! Worthy read as a WebRTC primer even if you can’t utilize the pip stuff. Was disappointed to find out it only works in Android TV - deceptive advertising in the headline! lol

Now I’m curious if there is a way to pull this off with WebOS TV and a Chromecast (probably not).

1 Like

knows somebody how the include command for the configuration.yaml is?

in the wiki stands nothing, i tried, but no luck

      { url: '/local/custom_components/webrtc/www/webrtc-camera.js',                 type: module },

Thanks for this writeup! I was going insane thinking why all of sudden I could not view my video outside the LAN. Wasn’t aware of the NAT limitation of the official integration. Official doesn’t always mean best I see. :slight_smile:

Edit: Upon quick testing, it seems it’s the OPPOSITE for me? Using the integrated one I can view outside LAN, using Alex’s WebRTC I cannot? Using with Frigate Card if it matters. Any ideas on how to debug? Do I need I open any ports on router by any chance for this?

I include it from /webrtc/webrtc-camera.js?v2.2.0 and it works. There’s a more complete code snippet in my blog post above if you like.

2 Likes

i must use

/config/custom_components/webrtc/www/webrtc-camera.js?v2.2.0

@pipi1310 I believe the path you specify( /config/custom_components/webrtc/www/webrtc-camera.js) is where it should be installed on the file system. However, to access it from a web browser, I find you must use https://homeassistant.local:8123/webrtc/webrtc-camera.js. (the ?v2.2.0 URL parameter is used for “cache busting”).

The reason for the unusual path is that this file is being served by the integration itself, not by home assistant (see code here). Most of the frontend integrations on my system are served by Home Assistant from the /config/www/community/ directory. But webrtc-camera serves the /webrtc/webrtc-camera.js path itself.

Therefore, to explicitly add it as a Lovelace resource, something like this is necessary in your Lovelace yaml config:

lovelace:
  # ...
  resources:
    # ...
    - url: /webrtc/webrtc-camera.js?v2.2.0
      type: module

I see the integration attempts to automatically add this resource when it is being set up (see code), but in my experience this did not work consistently, even when I fully cleared my browser cache. I suppose there’s a bug in there somewhere.

2 Likes

okay i tested it and you are right, the correct path is /webrtc/webrtc-camera.js?v2.2.0

thank you

I am looking for a low latency wifi camera (<300ms). I have the impression that most camera of the list compatible with this plugin has more. Can you tell me if you have managed to reach such a low latency; which camera did you use?

Whether or not WebRTC works on iOS using a cell connection is carrier-specific. I noticed this while traveling between the USA and Canada.

Phone: iPhone 12 Max Pro

WiFi (not the same network as Home Assistant server, connecting via Nabu Casa): iOS app, Safari, and Chrome work.

Cellular (T-Mobile, USA, via Nabu Casa): iOS app, Safari, and Chrome cannot connect.

Cellular (Telus, Canada, via Nabu Casa): iOS app, Safari, and Chrome work just fine.

Hello. I have a reolink RLC-520 and I have Webrtc installed. The stream works flawlessly on my iPhone 13 via wifi but with everything else its lagging, for example iPad 2021 and Lenovo Tab M10. Is it a performance issue or what?

Try different browsers and see if that changes anything.

WebRTC is awesome , 0 delay in browser.
Was wondering if i can add the webrtc camera stream to stream to my nest hub / chromecast ?
I can cast with webdash , but i would like the camera in my google home , so i can call it with voice !

1 Like