trendingtechnology / webrtc

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

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, iPadOS 13+	video: H264 audio: PCMA, PCMU	video: H264, H265 audio: AAC
Safari iOS	video: H264 audio: PCMA, PCMU	doesn't supported
Opera PC	doesn't supported	video: H264 audio: AAC
macOS app	doesn't supported	doesn't supported

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

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

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
Foscam	C1	rtsp://user:[email protected]:554/videoMain
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 C100/C200	rtsp://user:[email protected]:554/stream1 and /stream2
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 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