Как вставить RTSP-камеру на сайт: полное руководство

Пошаговая инструкция: как встроить видео с IP-камеры на сайт. Конвертация RTSP в HLS, iframe-плеер, адаптивный дизайн. Без VLC и плагинов.

Решить через RTSP.KZ Смотреть демо

Почему нельзя просто вставить RTSP на сайт?

Тег <video src="rtsp://..."> не работает. Браузеры поддерживают только HTTP-протоколы для видео: HLS (.m3u8), DASH (.mpd), MP4. RTSP — это другой протокол, требующий серверной конвертации.

Что нужно для камеры на сайте:

Конвертер RTSP → HLS — сервер, который принимает RTSP-поток и создаёт HLS-сегменты
HLS-плеер — JavaScript-библиотека (hls.js) или нативная поддержка Safari
Хостинг — для раздачи HLS-сегментов (.ts файлов)

Или RTSP.KZ — всё это в одном сервисе. Вставляете RTSP-ссылку, получаете iframe-код для вставки на сайт.

Способ 1: Через RTSP.KZ (рекомендуем)

Зарегистрируйтесь

Создайте аккаунт на rtsp.kz

Добавьте камеру

Вставьте RTSP URL вашей камеры

Скопируйте iframe

Вставьте код на сайт

Код для вставки на сайт:

<iframe src="https://rtsp.kz/embed/ваш-id"
  width="100%" height="450"
  frameborder="0" allowfullscreen
  style="border-radius: 12px;">
</iframe>

Адаптивный плеер: автоматически подстраивается под ширину контейнера, работает на мобильных.

Способ 2: Свой сервер (FFmpeg + hls.js)

Если нужен полный контроль — настройте конвертацию самостоятельно:

Шаг 1: FFmpeg конвертирует RTSP → HLS

ffmpeg -i rtsp://admin:pass@192.168.1.100:554/stream \
  -c:v copy -c:a aac \
  -f hls -hls_time 2 -hls_list_size 5 \
  -hls_flags delete_segments \
  /var/www/html/camera/stream.m3u8

Шаг 2: HTML-плеер с hls.js

<script src="https://cdn.jsdelivr.net/npm/hls.js@latest"></script>
<video id="player" controls style="width:100%"></video>
<script>
  var video = document.getElementById('player');
  if (Hls.isSupported()) {
    var hls = new Hls();
    hls.loadSource('/camera/stream.m3u8');
    hls.attachMedia(video);
  } else if (video.canPlayType('application/vnd.apple.mpegurl')) {
    video.src = '/camera/stream.m3u8'; // Safari native
  }
</script>

Внимание: FFmpeg должен работать постоянно (systemd/supervisor). При обрыве потока нужен скрипт автоперезапуска. RTSP.KZ делает это автоматически.

Примеры использования

Веб-камера на сайте отеля

Покажите вид из окна или бассейн. Привлекает гостей, повышает доверие к отелю. Камера на крыше → RTSP.KZ → iframe на сайте.

Трансляция производства (e-ondiris)

Обязательная трансляция для СТ-КЗ. Камера в цеху → RTSP.KZ → ссылка для портала e-ondiris.gov.kz.

Стройплощадка в реальном времени

Заказчик видит ход строительства. Таймлапс + live-поток. Несколько камер → единый дашборд.

Часто задаваемые вопросы

Как встроить камеру видеонаблюдения на сайт?

Напрямую вставить RTSP на сайт нельзя — браузеры не поддерживают этот протокол. Нужна конвертация в HLS. Самый простой способ: зарегистрируйтесь на RTSP.KZ, добавьте камеру, скопируйте iframe-код на сайт.

Будет ли задержка при трансляции камеры на сайте?

При HLS-трансляции задержка составляет 3-5 секунд. Для видеонаблюдения это приемлемо. Если нужна минимальная задержка (менее 1 секунды) — используйте WebRTC.

Можно ли показать несколько камер на одной странице?

Да. Каждая камера получает свой iframe. Разместите несколько iframe в CSS Grid или Flexbox для создания мозаичного (multi-view) макета.

Работает ли видео с камеры на мобильных?

Да. HLS нативно поддерживается Safari (iOS). Для Chrome/Android используется hls.js. RTSP.KZ автоматически адаптирует плеер под все устройства.