How to Stream an RTSP Camera to Your Browser with WebRTC
Most IP cameras and CCTV DVRs speak RTSP. Browsers don't. If you open rtsp://192.168.1.20:554/stream1 in Chrome, nothing happens. To show a live camera on a web page you need a small server in between that converts RTSP into something the browser understands.
This guide explains the options and walks through the quickest working setup.
Your three options
| Method | Latency | Good for |
|---|---|---|
| HLS | Several seconds | Many viewers, simple CDN hosting |
| MJPEG / snapshots | Low, but heavy bandwidth | Quick prototypes |
| WebRTC | Under a second | Live monitoring, PTZ control, doorbells |
For anything "live", WebRTC is the right choice.
The quickest working setup: MediaMTX
MediaMTX is a free, single-binary media server that reads RTSP and serves WebRTC out of the box.
1. Download the release for your OS from its GitHub page and unzip it.
2. Add your camera to mediamtx.yml:
paths:
cam1:
source: rtsp://user:pass@192.168.1.20:554/stream13. Run it:
./mediamtx4. Open http://localhost:8889/cam1 in your browser. You should see the live feed.
Embedding it in your own page
The simplest way is an iframe pointing at the MediaMTX player:
<iframe src="http://YOUR-SERVER:8889/cam1"
width="640" height="360" allow="autoplay"></iframe>For full control (custom UI, multiple cameras, recording), you'll talk to the server with the WHEP protocol from JavaScript.
Common problems
- Black screen: the camera may send H.265. Most browsers need H.264, so switch the camera's encoding in its settings.
- Works on LAN, not outside: WebRTC needs UDP ports open, or a TURN server.
- Wrong RTSP URL: test it first in VLC (Media → Open Network Stream).
My ebook Camera to Browser walks through a complete RTSP-to-WebRTC setup, with working code and troubleshooting.
Get the ebookNeed something like this built? I take freelance projects in streaming, web apps and automation. Get in touch.