WebRTC Camera

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

Based on:

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

Starting with version 2 the component supports two protocols automatically and simultaneously. WebRTC in some cases may not work with remote access, then the video will play using MSE. As soon as WebRTC is able to connect - video will play through it, MSE will be stopped.

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

• Home Assistant Mobile App for Android and iOS - has the same capabilities as the main mobile browser
• H264: AVC/H.264
• H265: HEVC/H.265 - not tested
• PCMA: G.711 PCM (A-law)
• PCMU: G.711 PCM (µ-law)

FAQ

Q. I can't see video stream

• 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

In case of any problems, check:

1. Check that you have installed the integration on the "Configuration > Integrations" page
2. Check that you don't have any erros in "Configuration > Logs" page
3. Check if default video with Bunny works:

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

If you are using an iPhone - also read the Why is WebRTC not working?, because your phone does not support MSE technology.

Q. How to use secrets?

A. You can't use secrets.yaml in lovelace card setting. But you can config Generic or FFmpeg or ONVIF or any other camera. And use its entity in card config:

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

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. Why is WebRTC not working?

• Check the I can't see video stream
• Check that you are on the same network as your Hass server
• 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

Q. Exernal access with WebRTC 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, you may be behind a symmetric NAT.

Read how to fix this.

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

Installation

Method 1. HACS:

HACS > Integrations > Plus > WebRTC > Install

Method 2. Manually copy webrtc folder from latest release to /config/custom_components folder.

Configuration

Video DEMO

Configuration > Integrations > Add Integration > WebRTC

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

Component doesn't create devices and entities. It creates only two services and 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
muted: false  # disable sound, default true
ui: true  # custom video controls, default false
shortcuts: # custom shortcuts, default none
  top: 0 # top margin in pixels, default 0
  left: 0 # left margin in pixels, default 0
  orientation: vertical # orientation (horizontal or vertical), default horizontal
  services:
      - name: Record
        icon: mdi:record-circle-outline
        service: switch.toggle
        service_data:
          entity_id: switch.camera_record

background: true  # run stream when not displayed (ex. for quick video loading), default false

ptz:  # check full examples in wiki

mse: false  # disable MSE mode, if you want save NabuCasa traffic 
webrtc: false  # disable WebRTC mode, if you want stream with AAC sound

Pan, tilt, zoom controls: PTZ config examples.

Cast or share stream

Component support streaming to Google Cast Chromecast devices (including Android TV and Google Smart Screen). Read more in wiki.

Also component support creating a temporary or permanent link to a stream without sharing access to you Home Assistant. Read more in wiki.

Known work cameras

WebRTC external access

How to fix external access if it doesn't works?

1. Easy tech way

Don't do anything. The component will automatically use MSE technology instead of WebRTC. It will definitely work with external access. But it doesn't work on iPhones.

2. Medium tech way

If you have public IP-address, you can:

• go to "Configuration > Integrations > WebRTC Camera > Options" and select the list of ports as you like (e.g. 50000-51000)
• you also need forward this UDP port range on your router
• it is recommended to use at least 10 ports per camera

3. Hard tech way

If you have private IP-address and your own VPS, you can:

• install TURN server (e.g. coturn, config example)
• add config to your cameras:

type: 'custom:webrtc-camera'
entity: ...
ice_servers:
  - urls: 'stun:stun.l.google.com:19302'  # optional change to your STUN if you want
  - urls: 'turn:123.123.123.123:3478'  # change to your VPS IP and port
    username: your_user  # change to your username
    credential: your_pass  # change to your password

You need to use both TURN and STUN servers in your config.

Status Icons

icon	description
	starting connection (MSE)
	stream is played with MSE
	starting connection (WebRTC)
	connecting to remote (WebRTC)
	loading video (WebRTC)
	restarting connection (WebRTC)
	stream is played with WebRTC

Debug

Add to your configuration.yaml:

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