Home Assistant custom component for viewing IP cameras RTSP stream in real time using WebRTC technology.

Based on:

• Pion - pure Go implementation of WebRTC
• RTSPtoWebRTC - Go app by @deepch and @vdalex25

Why WebRTC:

• works in any modern browser, even on mobiles
• the only browser technology with minimal camera stream delays (0.5 seconds and below)
• works well with unstable channel
• does not use transcoding and does not load the CPU
• support camera stream with sound

Q. I can't see video stream
A.

• If your camera works with another integration - it doesn’t mean it will work with this integration
• If your camera works in VLC - it doesn’t mean it will work with this integration
• If your camera works remotely with another integration - it doesn’t mean it will work remotely with this integration

In case of any problems, check:

1. Check that you have installed the integration on the "Configuration > Integrations" page
2. Check that you are on the same network as your Hass server
3. Check that you don't setup Hass server with forward only 8123 port (users with Virtual Machine or Docker installation or firewall), because WebRTC using random UDP ports for video streaming
4. Check that you don't have any erros in "Configuration > Logs" page
5. Check if default video with Bunny works:

type: 'custom:webrtc-camera'
url: 'rtsp://wowzaec2demo.streamlock.net/vod/mp4:BigBuckBunny_115k.mov'

PS. Some mobile browsers can't show stream without HTTPS. There are also problems with the stream in the Firefox browser.

Q. Error: Custom element doesn't exist: webrtc-camera.
A. Component automatically adds custom card /webrtc/webrtc-camera.js to your resources.

Check if you install component in "Integrations" page. And try to clear your browser cache. Also, you can try to add this card to your resources manually.

Q. Exernal access to streams doesn't work
A. WebRTC technology can't use your HTTP/HTTPS-access to Hass. It uses a random UDP port to connect. And it can handle access to stream even if you have private IP-address, but not in all cases.

At each start of the streaming, a random UDP port is occupied. The port is released when the streaming ends. The data should theoretically be encrypted, but I haven't tested :)

If your stream does not start with an external connection (stuck on status Trying to connect), you may be behind a symmetric NAT. Some users are helped by UDP port forwarding on the router. You can customize the range of ports in the integration options. It is recommended to use at least 10 ports per camera.

For more tech info read about STUN and UDP hole punching.

Q. Some streams are not loaded when there are many cameras on the page.
A. The default settings only support 10 simultaneous streams (from Hass server to app or browser). Go to "Configuration > Integrations > WebRTC Camera > Options" and increase port range. You also need forward new port range on your router if you want external access to cameras.

Q. Which codecs are supported?
A. WebRTC supported: AVC/H.264 for video and G.711 PCM (A-law), G.711 PCM (µ-law) for audio.

WebRTC technology doesn't support HEVC/H.265 for video and AAC for audio.

You can install component with HACS custom repo: HACS > Integrations > 3 dots (upper top corner) > Custom repositories > URL: AlexxIT/WebRTC > Category: Integration

Or manually copy webrtc folder from latest release to custom_components folder in your config folder.

Video DEMO

With GUI. Configuration > Integration > Add Integration > WebRTC Camera.

If the integration is not in the list, you need to clear the browser cache.

Component doesn't create devices/entities/services. It creates only lovelace custom card:

Minimal

type: 'custom:webrtc-camera'
url: 'rtsp://rtsp:[email protected]:554/av_stream/ch0'

or

type: 'custom:webrtc-camera'
entity: camera.generic_stream  # change to your camera entity_id

Full

type: 'custom:webrtc-camera'
url: 'rtsp://rtsp:[email protected]:554/av_stream/ch0'
title: My super camera  # optional card title
poster: https://home-assistant.io/images/cast/splash.png  # still image when stream is loading
intersection: 0.75  # auto pause stream when less than 75% of video element is in the screen, 50% by default
ui: true  # custom video controls, default false

• Google Chrome (macOS, Windows, Android)
• Safar (macOS, iOS)
• Firefox (macOS, Windows)
• Home Assistant Mobile App (Android, iOS)

Add to your configuration.yaml:

logger:
  default: warning
  logs:
    custom_components.webrtc: debug