Браузер арқылы RTSP камераны қалай көруге болады
Chrome, Firefox, Safari, Edge браузерлерінде rtsp:// сілтемесі неге ашылмайды және оны айналып өтудің 4 нақты жолы: HLS, WebRTC, MJPEG және WebSocket. Бөлек серверсіз RTSP.KZ-ті пайдалану — бір минуттың ішінде дайын embed-сілтеме.
60 секундта — қысқаша
- Браузерлер тек http/https/ws/wss хаттамаларын түсінеді, rtsp:// — қолдау жоқ (RFC 2326)
- Шешу: ретрансляторда RTSP-ты HLS-ке немесе WebRTC-ке түрлендіру
- 4 негізгі әдіс: HLS (қарапайым), WebRTC (жылдам), MJPEG (керексіз), WebSocket+canvas (кастом)
- Ең қарапайымы — RTSP.KZ-ті пайдалану: тіркеусіз 1 сағат тегін, HTTPS embed дайын
Неге rtsp:// браузерде ашылмайды
RTSP (Real-Time Streaming Protocol) — 1998 жылы шыққан хаттама. IP-камералар, NVR-лар, ONVIF-құрылғылар осы арқылы бейне береді. Форматы:
Бірақ заманауи браузерлер (Chrome, Firefox, Safari, Edge) тек келесі схемаларды түсінеді: http, https, ws, wss, ftp, mailto, file. RTSP тізімге кірмейді — URL spec-те «special scheme» ретінде тіркелмеген.
2015 жылға дейін Internet Explorer мен Chrome ActiveX/NPAPI-плагиндер арқылы RTSP-ты ойнататын, бірақ Flash-тің құрып бітуімен бірге барлық плагиндер өшірілді. Қазір браузерде RTSP көру үшін ретранслятор қажет — сервер камерадан RTSP-ты алып, HLS немесе WebRTC түрінде қайта таратады.
4 әдісті салыстыру — кесте
| Әдіс | Кідіріс | Браузер | Күрделілік | Трафик |
|---|---|---|---|---|
| HLS | 5–10 сек | Бәрі | Оңай | Төмен |
| WebRTC | 0.2 сек | Заманауи | Күрделі | Орта |
| MJPEG | 1–2 сек | Бәрі | Оңай | Жоғары |
| WS+canvas | 0.5 сек | Заманауи | Кастом | Орта |
1-әдіс: HLS — әмбебап, оңай, барлық жерде істейді
HLS (HTTP Live Streaming)
Принципі: ретранслятор камерадан RTSP-ағынды алып, оны .ts-сегменттерге (2–10 секунд ұзындықта) кеседі және .m3u8-манифест жариялайды. Браузер манифестті жүктеп, содан кейін сегменттерді бірінен кейін бірін алып, <video>-тегте ойнатады (HLS-конверсия туралы толық мақала).
Артықшылықтары: кез келген браузерде істейді (Safari нативті, Chrome/Firefox hls.js арқылы), корпоративтік firewall-дардан өтеді (қарапайым HTTPS), CDN арқылы жақсы масштабталады.
Кемшіліктері: сегменттерді буферлеуге байланысты 5–10 секунд кідіріс. LL-HLS (Low-Latency HLS, iOS 14+) 2–3 секундқа дейін төмендете алады, бірақ баптау күрделі (кідірісті қалай төмендетуге болады).
Дайын құралдар:
- MediaMTX — ашық код, бір бинарлы файл (жиі қателер)
- go2rtc — WebRTC-ты қоса тіректейтін ашық код
- RTSP.KZ — дайын SaaS, 1 сағат тегін
2-әдіс: WebRTC — минимал кідіріс, күрделі баптау
WebRTC (Web Real-Time Communication)
Принципі: камера RTSP береді, ретранслятор оны WebRTC-ке (WHEP хаттамасы бойынша) түрлендіріп, браузермен peer-connection орнатады. Бейне RTCPeerConnection API арқылы <video>-тегке беріледі.
Артықшылықтары: кідіріс 200 миллисекундқа дейін, ойын мен тірі трансляцияға сәйкес. Zoom, Google Meet, Discord осы технологияны пайдаланады.
Кемшіліктері: корпоративтік NAT арқылы кейде өтпейді — STUN/TURN сервері қажет. WHEP хаттамасы жаңа, барлық камералар қолдамайды.
3-әдіс: MJPEG — қарапайым, бірақ трафик көп
Motion JPEG
Әр кадр — жеке JPEG-сурет. <img src="/mjpeg">-тегте ағын ретінде беруге болады. 90-жылдардан бері қолданылатын әдіс, бірақ H.264 сияқты компрессия жоқ, сондықтан трафик 5-10 есе көп.
Тек ескі IP-камералардың admin-интерфейсінде немесе арнайы қосымшаларда кездеседі. Өнімдік жүйеде ұсынылмайды.
4-әдіс: WebSocket + canvas — кастом low-latency
WS + canvas (jsmpeg, mse-live-player)
Сервер камерадан ағынды алып, оны MPEG-TS немесе fMP4 сегменттеріне түрлендіреді және WebSocket арқылы браузерге жібереді. Клиентте <canvas>-та JavaScript-декодер (jsmpeg) немесе WebCodecs API ойнатады.
Қуатты 3D-графикамен қосу немесе бейнеге overlay қосу қажет болса ыңғайлы. Бірақ баптау мен қолдау күрделі.
Меншікті серверді бақылап отыруды қаламайсыз ба?
RTSP.KZ бәрін өз мойнына алады: HLS + WebRTC қораптан шыққан бетте, embed үшін HTTPS-сілтемелер, Қазақстанның барлық провайдерлерінде істейді. 1 сағат тегін тіркеусіз.
Тегін бастау →Дайын код: RTSP-ты сайтқа 5 минутта орнату
Мысал: RTSP.KZ арқылы HLS-сілтеме алдыңыз. Оны сайтқа <video>-тег арқылы қоспалау:
<video controls src="https://rtsp.kz/hls/abc123/index.m3u8"></video>
<!-- Chrome/Firefox — hls.js қажет -->
<video controls id="v"></video>
<script src="https://cdn.jsdelivr.net/npm/hls.js@latest"></script>
<script>
const video = document.getElementById('v');
const hls = new Hls();
hls.loadSource('https://rtsp.kz/hls/abc123/index.m3u8');
hls.attachMedia(video);
</script>
Бір мезгілде Safari-де де, Chrome-да да жұмыс істейтін нұсқа: алдымен hls.js бар-жоғын тексеріп, жоқ болса нативтіні пайдалану:
const hls = new Hls();
hls.loadSource(url);
hls.attachMedia(video);
} else if (video.canPlayType('application/vnd.apple.mpegurl')) {
video.src = url;
}
Мысал: Шымкенттегі корпоративтік портал
2024 жылы Шымкенттегі бір өндіріс кәсіпорнында 12 камерадан бейнені 50 қызметкерге көрсету қажет болды. Талап: браузерде, VLC-сіз, кідіріс ≤10 сек, СТ-KZ сертификациясы үшін е-өндіріс.gov.kz порталына қосу.
Шешім: RTSP.KZ SaaS-і қолданылды. Әр камераға RTSP-сілтеме RTSP.KZ-ке жіберілді, HLS-сілтеме алынды, ол корпоративтік порталдың iframe-ына орнатылды. 40 минутта дайын болды. Кідіріс 6–8 секунд, трафик — камерадағы 1 Мбит/с × 12 = 12 Мбит/с сервер жағында, ал корпоративтік порталдан бейне CDN арқылы таратылды.
Жиі қойылатын сұрақтар
Chrome, Firefox, Safari, Edge браузерлері тек http, https, ws, wss, ftp, mailto хаттамаларын түсінеді. RTSP — жеке хаттама (RFC 2326), заманауи браузерлерде қолдау жоқ. 2015-ке дейін IE/Chrome ActiveX/NPAPI-плагиндер арқылы ашатын, бірақ қазір жалғыз жол — HLS немесе WebRTC-ке түрлендіру.
HLS — қарапайым, кез келген браузерде істейді, кідіріс 5–10 секунд. WebRTC — 200 мс дейін, бірақ TURN сервері мен күрделі баптау керек. Қарау үшін — HLS, интерактив үшін (ойын, кері байланыс) — WebRTC.
Иә. RTSP.KZ сияқты SaaS-тарды пайдалансаңыз, ретрансляция олардың серверлерінде болады. Сізге тек камерадан RTSP-сілтемені беру керек — HLS/WebRTC embed қорап бетінен дайын келеді.
Иә, Safari HLS-ті нативті қолдайды. <video src="stream.m3u8"> — жеткілікті. Chrome/Firefox үшін hls.js кітапханасы қажет.
VLC Media Player: Медиа → Желі көзін ашу → сілтемені жапсыр. Немесе RTSP URL Builder — 17 бренд үшін дайын генератор.