Как открыть rtsp поток в браузере

Как открыть rtsp поток в браузере

В этой статье покажем 7 технологически разных способов отображения видеопотока с IP-камеры с поддержкой RTSP на web-странице браузера.

Браузеры, как правило, не поддерживают RTSP, поэтому поток будет конвертироваться для браузера через промежуточный сервер.

Способ 1 — RTMP

RTMP протокол браузеры не поддерживают, но его поддерживает старый добрый Flash Player, который работает неплохо, хоть и не во всех браузерах, и может отобразить видеопоток.

Код плеера в этом случае будет построен на Action Script 3 и выглядеть примерно так:

rtmp://192.168.88.59/live — это адрес промежуточного сервера, который заберет RTSP видеопоток с камеры и конвертирует его в RTMP

rtsp://192.168.88.5/live.sdp — это RTSP адрес самой камеры.

Немного избыточный вариант кода плеера на Flex и AS3 доступен здесь.

Выглядит это так:

Способ 2 — RTMP с оберткой HTML5

Желающих кодить на Action Script 3 все меньше. Специально для этого придуман способ с HTML5 оберткой, которая позволяет управлять RTMP-плеером из JavaScript. В этом случае флэшка подгружается на HTML-страницу только для того чтобы отобразить картинку и выдать в динамики звук.

Полный код плеера находится здесь. А выглядит это так:

Способ 3 — RTMFP

Протокол RTMFP также работает внутри флэш плеера. Разница с RTMP в том, что RTMFP работает поверх протокола UDP и тем самым является более пригодным для получения трансляции с низкой задержкой.

Код плеера на AS3 в этом случае полностью идентичен используемому в RTMP, добавлена одна буква F в строке протокола подключения к серверу.

Для порядка дадим скриншот с RTMFP

Способ 4 — RTMFP c оберткой HTML5

Этот способ идентичен пункту 2, с той разницей, что мы при инициализации в JavaScript устанавливаем RTMFP протокол для использования в нижележащей флэшке (swf-объекте).

Способ 5 — WebRTC

В данном случае Flash не используется совсем и видеопоток проигрывается средствами самого браузера, без использования сторонних плагинов. Это работает и в Android Chrome и Android Firefox — мобильных браузерах, где Flash не установлен. WebRTC дает самую низкую задержку — менее 0.5 секунды.

Читайте также:  Как сделать чтобы эксель считал в градусах

Код плеера тот же:

Автоматически определяется поддержка WebRTC, и если поддерживается то поток играет по WebRTC.

Способ 6 — Websockets

WebRTC и Flash не покрывают все браузеры и платформы. Например, в браузере iOS Safari эти технологии не поддерживаются.

На iOS Safari можно доставить видеопоток по транспорту Websocket (TCP соединению между браузером и сервером). В этот туннель можно завернуть сконвертированный с RTSP видеопоток. После того, как бинарные данные придут их можно декодировать с помощью JavaScript и отрисовать на Canvas HTML5-элементе.

Именно этим занимается Websocket — плеер при работе в браузере iOS Safari, а его код снаружи выглядит также:

Это чем-то похоже на подход с флэшкой, когда под HTML5 лежит swf-элемент. В данном случае, под HTML5-страницей лежит не swf-объект, а JavaScript-приложение, которое тянет данные по вебсокетам, декодирует и отрисовывает на Canvas в нескольких потоках.

Так выглядит RTSP поток на Canvas в браузере iOS Safari

Способ 7 — HLS

При конвертации RTSP в HLS, видеопоток разбивается на сегменты, которые благополучно скачиваются с сервера и отображаются в HLS-плеере.


В качестве HLS-плеера мы используем video.js. Код плеера можно скачать здесь.

Как выглядит плеер:

Способ 8 — Android приложение, WebRTC

Приложение забирает поток с сервера по WebRTC. Задача сервера в этом случае — сконвертировать RTSP в WebRTC и скормить мобильному приложению.

Java-код плеера для Android находится здесь и выглядит так:

Тестовое мобильное приложение плеера можно установить из Google Play, а исходники приложения скачать здесь.

Так выглядит воспроизведение RTSP потока по WebRTC на планшете Asus под Android:

Способ 9 — iOS приложение, WebRTC

Приложение также как и в случае Android забирает поток с сервера по WebRTC.

Скачать исходный код плеера для iOS можно здесь.

А из App Store можно установить тестовое приложение, которое использует показанные выше куски кода. Его работа с RTSP-потоком выглядит так:

Результаты

Подведем итоги и объединим полученные результаты в табличку:

Способ отображения Применение Задержка
1 RTMP Там, где важно использование legacy — флэш клиента, Flex или Adobe Air medium
2 RTMP + HTML5 В браузерах IE, Edge, Mac Safari, если там установлен Flash Player medium
3 RTMFP Там, где важно использование legacy — флэш клиента, Flex или Adobe Air и важна низкая задержка low
4 RTMFP + HTML5 В браузерах IE, Edge, Mac Safari, если там установлен Flash Player и важна низкая задержка. low
5 WebRTC В браузерах Chrome, Firefox, Opera на десктопах и мобильных браузерах под Android, где важна real-time задержка. real-time
6 Websocket В браузерах, где нет Flash и WebRTC, но нужна средняя или низкая задержка. medium
7 HLS Во всех браузерах. Где не важна задержка. high
8 Android app, WebRTC В нативных мобильных приложениях под Android, где требуется real-time задержка. real-time
9 iOS app, WebRTC В нативных мобильных приложениях под iOS, где требуется real-time задержка. real-time
Читайте также:  Перечислите функции памяти и процессора

Для тестирования мы использовали сервер Web Call Server 5, который конвертирует RTSP поток для раздачи в 9 перечисленных направлениях.

Ссылки

Web Call Server 5 — сервер для раздачи RTSP потока
Flash Streaming — пример swf приложения, проигрывающего потоки по RTMP и RTMFP. Способы 1 и 3.
Source — исходный код swf приложения на Flex / AS3.

Player — пример web-приложения, которое воспроизводит RTSP поток по RTMP, RTMFP, WebRTC, Websocket. Способы 2,4,5,6.
Source — исходный код веб-плеера.

HLS плеер — пример web-плеера, играющего HLS. Способ 7.
Source — исходный код HLS плеера.

Android плеер WebRTC — пример мобильного приложения, которое играет поток по WebRTC. Способ 8.
Source — исходный код мобильного приложения.

iOS плеер WebRTC — пример мобильного приложения, которое играет WebRTC поток. Способ 9.
Source — исходный код мобильного приложения.

Есть ip-камера (embedded устройство с FreeRTOS), которая отдает видео поток (H.264). Просмотр реализован в браузере, с использованием VLC

Вопрос: Как реализовать просмотр видео потока в браузерах (IE, FF, Chrome) без VLC? Если ли
open-source решение (на базе Flash, Java или иное)?

Есть некое устройство — мобильный видеорегистратор на базе платформы armhf, работает исключительно через веб-интерфейс. Было неплохое решение по отображению RTSP потока в браузере (Chrome) работавшее на базе расширения VXG Media Player (PNaCl расширение), однако в Chrome 76 оно перестало работать. Как я понял, сейчас для всех NaCl/PNaCl расширений требуется Origin Trial, который Google выдает, и то до декабря 2020, а дальше полный отказ. Ошибка в консоли браузера выглядит так "PNaCl modules can only be used on the open web (non-app/extension) when the PNaCl Origin Trial is enabled". Но есть сложность — все это решение работало на устройстве, которое получает адрес по DHCP, в общем домена нет, адрес постоянно меняется — Origin Trial, как я понимаю, не получишь.

Читайте также:  Vipnet фильтры открытой сети

Пошёл в поисках нового решения по трансляции RTSP потока.

Попытка использования ffserver + ffmpeg особо ничего не дала — задержка огромная, довести качество до уровня предыдущего решения не удалось (ранее было FHD разрешение с отличным качеством в браузере).

Следующее решение в теории расписанное везде — использование websocket или WebRTC. И есть готовые решение от Streamdian и Flashphoner. Бесплатные плееры есть, но их websocket-сервера стоят прям немало, да и лицензии на них привязываются к IP/домену. В общем не очень годится. Хотя решение от Streamdian протестировал, качество есть, задержка 5-10 сек, и с небольшими косяками, но возможно можно довести до ума.

Есть бесплатный websocketd (есть даже скомпилированное решение под armhf, которое мне нужно), но как через него прогонять RTSP — — как то непонятно. По факту websocketd проксирует в веб любую программу, использующую stdin/stdout. Для проксирования RTSP нужен какой то проксирующий скрипт.

Конечно, как вариант, остается писать десктопное приложение, но пока не очень хочется.

Что еще не пробовал — это HLS.

Может кто еще другие варианты знает, пока я тестирую HLS.

Ссылка на основную публикацию
Как оживить маркер на спиртовой основе
Обычный строительный (разметочный) маркер высох, как и чем его заправить. На упаковке маркеров (фломастеров) в начале прочитайте информацию о том...
Как использовать шкалу в mortal kombat x
Игровая механика Mortal Kombat X более глубока по сравнению с прошлыми частями родом из 90-х. Комбо, суперудары, атаки X-Ray. Сходу...
Как на роутере мегафон прочитать смс
В этом обзоре мы рассмотрим роутер Мегафон – приведем характеристики выбранной модели, сделаем небольшой обзор доступных моделей и расскажем о...
Как оглушить врагов в метро 2033
Как знают поклонники шутеров серии Metro от украинской студии 4A Games, Metro 2033 и Metro: Last Light, решения игрока в...
Adblock detector