Просмотр RTSP-потока в интерфейсе
Контроллер выводит на панель управления живое видео с IP-камеры, видеорегистратора или другого источника, который отдаёт поток по протоколу RTSP.
Браузер не умеет открывать адреса вида rtsp:// напрямую. Поэтому контроллер сам получает поток от источника и показывает его на обычной веб-странице — странице видеоплеера. Чтобы увидеть видео на панели:
Составьте адрес страницы видеоплеера: в нём указаны адрес источника и разрешение.
Добавьте в интерфейс элемент «Web URL» и вставьте в него этот адрес. О самом элементе — в разделе «Web URL» страницы «Справочник элементов».
Что понадобится
RTSP-адрес источника. Его можно найти в документации или в веб-интерфейсе камеры. Обычно он выглядит так:
rtsp://логин:пароль@192.168.1.64:554/stream1.IP-адрес контроллера. Его видно на странице настроек; в примерах ниже —
192.168.1.250.Сеть. Источник видео должен быть доступен по сети с контроллера, а устройство, на котором открыта панель, должно иметь доступ к контроллеру.
Как составить адрес
Адрес для элемента «Web URL» выглядит так:
http://<IP контроллера>:3002/webrtc?rtsp=<RTSP-адрес источника>&resolution=<разрешение>
Часть адреса |
Обязательность |
Описание |
|---|---|---|
|
обязательно |
Адрес страницы видеоплеера на контроллере. Пишите вместе с |
|
обязательно |
Адрес потока, который нужно показать. |
|
необязательно |
Разрешение, в котором видео будет показано на панели. Если параметр не указан, используется |
Пример готового адреса:
http://192.168.1.250:3002/webrtc?rtsp=rtsp://user:password@192.168.1.64:554/stream1&resolution=720p
Примечание
Если IP-адрес контроллера был изменён, его нужно изменить и во всех адресах, указанных в элементах «Web URL».
Примечание
Если контроллер работает в режиме HTTPS, адрес плеера должен начинаться с https://: браузер не покажет страницу по http:// внутри защищённой страницы. Пример: https://192.168.1.250:3002/webrtc?rtsp=…. Порт 3002 описан на странице «Сетевые порты и протоколы». Остальные примеры ниже даны для режима HTTP.
Разрешение
Разрешение можно задать готовым названием или числами.
Значение |
Разрешение |
|---|---|
|
3840×2160 |
|
2560×1440 |
|
1920×1080 |
|
1280×720 |
|
854×480 |
|
640×360 |
|
426×240 |
Своё разрешение пишите в формате ширина x высота, например resolution=800x450. Допустимая ширина — от 160 до 7680, высота — от 120 до 4320. Если значение указано с ошибкой, используется разрешение по умолчанию 1024x586.
Рекомендации по выбору разрешения:
Выбирайте разрешение, близкое к размеру элемента на панели. Слишком большое разрешение не улучшит картинку в маленьком окне, но увеличит нагрузку на контроллер и сеть.
Указывайте разрешение с тем же соотношением сторон, что и у источника (чаще всего 16:9), иначе изображение будет растянуто.
Особые символы в адресе источника
Если RTSP-адрес источника содержит особые символы, их нужно заменить по таблице, иначе адрес будет прочитан неправильно.
Символ |
Чем заменить |
|---|---|
|
|
|
|
|
|
|
|
пробел |
|
Чаще всего встречается символ &. Например, адрес источника:
rtsp://user:password@192.168.1.64:554/cam/realmonitor?channel=1&subtype=0
в адресе для элемента «Web URL» записывается так:
http://192.168.1.250:3002/webrtc?rtsp=rtsp://user:password@192.168.1.64:554/cam/realmonitor?channel=1%26subtype=0&resolution=720p
Проверка потока в браузере
Перед добавлением в интерфейс проверьте, что адрес составлен правильно.
На компьютере, который находится в одной сети с контроллером, откройте браузер.
Вставьте готовый адрес в адресную строку и нажмите Enter.
Что вы увидите: через несколько секунд в окне браузера появится видео.
Проверка потока в браузере: 1 — страница видеоплеера с видео камеры
Если видео не появилось, смотрите раздел «Если видео не отображается».
Добавление видео на страницу в UI-Designer
Откройте в UI-Designer (редактор интерфейсов) страницу или оверлей (подстраницу со своим холстом), на котором должно отображаться видео.
Над холстом нажмите «Создать Виджет» и выберите «Создать Web URL».
Зажмите левую кнопку мыши и протяните на холсте рамку по области, в которой должно отображаться видео.
Меню «Создать Виджет»: 1 — пункт «Создать Web URL»
Что вы увидите: на холсте появится серый прямоугольник с надписью «Web URL». Само видео в UI-Designer не показывается, оно появится только на панели.
Элемент на холсте: 1 — серый прямоугольник «Web URL»
В правой панели «Свойства» в разделе «Основные свойства» введите в поле «Имя» имя элемента латиницей, например
Camera.Задайте положение и размер элемента. Чтобы видео занимало всю область без чёрных полос, дайте элементу то же соотношение сторон, что и у видео.
Раскройте раздел «Свойства Web URL» и нажмите на поле «Web URL».
Свойства элемента: 1 — раздел «Свойства Web URL», 2 — поле «Web URL»
В открывшемся окне вставьте подготовленный адрес и нажмите «OK».
Ввод адреса: 1 — поле адреса, 2 — кнопка «OK»
Сохраните и опубликуйте проект: порядок и статусы «Сохранено ✓» и «Опубликовано ✓» — в разделе «Сохраните и опубликуйте» страницы «Первый интерфейс».
Откройте интерфейс на UI-Panel, как описано в разделе «Откройте интерфейс на UI-Panel» той же страницы (подробнее — «UI-Panel»), и перейдите на страницу с элементом.
Что вы увидите: видео появится через несколько секунд после открытия страницы.
UI-Panel: 1 — элемент «Web URL» с видео камеры
Примечание
Имена всех элементов используются как ID в U-Logic (редактор программы управления), поэтому должны быть указаны на латинице.
Несколько камер
Для каждой камеры добавьте на страницу отдельный элемент «Web URL» со своим адресом. Каждый новый поток увеличивает нагрузку на контроллер, поэтому для нескольких камер на одной странице выбирайте небольшое разрешение.
Несколько камер на одной странице: 1 и 2 — элементы «Web URL» с разными адресами
Примечание
Если одна и та же камера показывается на нескольких панелях или страницах, указывайте везде полностью одинаковый адрес — с тем же разрешением. Тогда контроллер обработает поток один раз для всех панелей. Разные разрешения одной камеры обрабатываются как разные потоки.
Переключение камеры из логики
Адрес в элементе «Web URL» можно менять во время работы панели, например чтобы показывать разные камеры в одном окне по нажатию кнопок. Для этого используется команда webUrl узла Scripter:
const panel = ctrl.panel('Panel1');
const camera = (rtsp) => `http://192.168.1.250:3002/webrtc?rtsp=${rtsp}&resolution=720p`;
panel.onTap('Cam1_b', () => panel.webUrl('Camera', camera('rtsp://192.168.1.64:554/stream1')));
panel.onTap('Cam2_b', () => panel.webUrl('Camera', camera('rtsp://192.168.1.65:554/stream1')));
Здесь Panel1 — имя панели, Camera — имя элемента «Web URL», а Cam1_b и Cam2_b — имена кнопок на панели. В режиме HTTPS в функции camera замените http:// на https://.
Особенности
Передаётся только изображение, звук не воспроизводится.
Частота кадров — 15 кадров в секунду, на любом контроллере.
Видео вписывается в элемент целиком с сохранением пропорций. Если пропорции элемента и видео не совпадают, по краям остаются чёрные полосы.
Поток запускается, когда видео открыто хотя бы на одной панели, и останавливается, когда его закрыли на всех панелях. Пока видео никто не смотрит, контроллер и камера не нагружаются.
Если видео не отображается
Что происходит |
Что проверить |
|---|---|
В UI-Designer вместо видео серый прямоугольник «Web URL» |
Это нормально. Видео отображается только на панели после публикации проекта. |
Элемент на панели пустой или показывает сообщение о недоступности страницы |
Адрес должен начинаться с |
Контроллер переведён в режим HTTPS, а видео пропало |
В адресах всех элементов «Web URL» замените |
В элементе показан текст |
В адресе отсутствует параметр |
Надпись «Подключение к потоку…» не исчезает |
С устройства, на котором открыта панель, должен быть доступен порт |
Надпись «Ожидание первого кадра…» не исчезает |
Контроллер не получает видео от источника. Проверьте RTSP-адрес, логин и пароль, доступность источника по сети с контроллера и замену особых символов в адресе. RTSP-адрес можно проверить отдельно, например открыть его в проигрывателе VLC. |
Чёрный экран без надписей |
Проверьте оба предыдущих пункта: доступность порта |
Изображение растянуто |
Укажите в |
Изображение нечёткое |
Увеличьте разрешение в параметре |
Видео идёт рывками, панель работает медленно |
Уменьшите разрешение или количество одновременно показываемых потоков. |