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

Pros, Cons and Browsers	WebRTC	MSE
Pros	best delay	good delay
Cons	complicated external access	jumps over frames
Chrome, Firefox, Chromecast	video: H264 audio: PCMA, PCMU	video: H264 audio: AAC
Safari PC, iOS 13+	video: H264 audio: PCMA, PCMU	video: H264, H265 audio: AAC
Safari iOS 12	video: H264 audio: PCMA, PCMU	doesn't supported
Opera PC	doesn't supported	video: H264 audio: AAC

• 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
• 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.mov'

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.

Install

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.

Config

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
webrtc: false  # leave only MSE

ptz:  # optional PTZ controls
  opacity: 0.4  # optional default contols opacity
  service: sonoff.send_command  # service for control PTZ (check Hass docs to your camera)
  data_left:  # service data for each direction
    device: '048123'
    cmd: left
  data_right:
    device: '048123'
    cmd: right
  data_up:
    device: '048123'
    cmd: up
  data_down:
    device: '048123'
    cmd: down
  data_zoom_in: # optional, for zoom increase
    device: '048123'
    cmd: zoom_in
  data_zoom_out: # optional, for zoom decrease
    device: '048123'
    cmd: zoom_out

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

Brand	Models	Comment
ActiveCam	AC-D2121IR3
ActiveCam	AC-D7121IR1W	support sound
Android	IP Webcam Pro	support sound, rtsp://192.168.1.123:8080/h264_ulaw.sdp
Dahua	DH-IPC-HDPW1431FP-AS-0280B	support sound
EZVIZ	C3S	rtsp://admin:[email protected]:554/h264/ch01/main/av_stream and /h264/ch01/sub/av_stream
Hikvision	DS-2CD2T47G1-L, DS-2CD1321-I, DS-2CD2143G0-IS	rtsp://user:[email protected]:554/ISAPI/Streaming/Channels/102
Reolink	RLC-410, RLC-410W, E1 Pro, 4505MP
Sonoff	GK-200MP2-B	support sound and PTZ, rtsp://rtsp:[email protected]:554/av_stream/ch0 and /av_stream/ch1
TP-Link	Tapo C200
Wyze	Cam v2	support sound
Xiaomi	Dafang	with hack, rtsp://192.168.1.123:8554/unicast Video: H264, size: 1920x1080, bitrate: 1000, format: VBR, frame rate: 10 Audio: PCMU, rate in: 8000, rate out: 44100
Yi	Hi3518e Chipset	with hack
Yi	MStar Infinity Chipset	with hack

WebRTC FAQ

Q. Why is WebRTC not working?

• Check the main FAQ above
• 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 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, 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.

Debug

Add to your configuration.yaml:

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