В этой статье мы покажем 7 технологически различных способов отображения видеопотока с IP-камеры с поддержкой RTSP на веб-странице браузера.
Браузеры обычно не поддерживают 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-адрес самой камеры.var nc:NetConnection = nc.connect(" rtmp://192.168.88.59/live",obj ); var subscribeStream:NetStream = new NetStream(nc); subscribeStream.play(" rtsp://192.168.88.5/live.sdp ");
Доступна слегка дублированная версия кода плеера на Flex и AS3. Здесь .
Это выглядит так: 
Способ 2 — RTMP с оболочкой HTML5.
Желающих программировать на Action Script 3 становится все меньше.Для этого был придуман специальный способ с помощью HTML5-обертки, который позволяет управлять RTMP-плеером из JavaScript. В этом случае флэшка загружается на HTML-страницу только для отображения картинки и вывода звука на динамики.
var session = Flashphoner.createSession({urlServer:" wss://192.168.88.59:8443 "});
session.createStream({name:" rtsp://192.168.88.5/live.sdp ", display:myVideo }).
play();
Полный код игрока находится Здесь .
И это выглядит так: 
Метод 3 — РТМФП
Протокол RTMFP также работает внутри флеш-плеера.Разница с RTMP заключается в том, что RTMFP работает поверх протокола UDP и поэтому больше подходит для приема широковещательных сообщений с низкой задержкой.
Код плеера на AS3 в этом случае полностью идентичен тому, который используется в RTMP; В строке протокола подключения к серверу добавляется одна буква F. var nc:NetConnection = nc.connect(" rtmfp://192.168.88.59/live",obj );
var subscribeStream:NetStream = new NetStream(nc);
subscribeStream.play(" rtsp://192.168.88.5/live.sdp ");
Для порядка приведем скриншот с RTMFP 
Способ 4 — RTMFP с оболочкой HTML5
Этот метод идентичен пункту 2, с той разницей, что при инициализации в JavaScript мы устанавливаем протокол RTMFP для использования в базовой флешке (swf-объекте).
Var session = Flashphoner.createSession({urlServer:" wss://192.168.88.59:8443 ", flashProto:"rtmfp"});
session.createStream({name:" rtsp://192.168.88.5/live.sdp ", display:myVideo }).
play();
Изображение игрока: 
Способ 5 — WebRTC
При этом Flash вообще не используется и видеопоток воспроизводится с помощью самого браузера, без использования сторонних плагинов.Это также работает в Android Chrome и Android Firefox — мобильных браузерах, в которых не установлен Flash. WebRTC дает самую низкую задержку — менее 0,5 секунды.
Код плеера тот же: var session = Flashphoner.createSession({urlServer:" wss://192.168.88.59:8443 "});
session.createStream({name:" rtsp://192.168.88.5/live.sdp ", display:myVideo }).
play();
Поддержка WebRTC определяется автоматически, и если она поддерживается, поток воспроизводится через WebRTC. 
Способ 6 — веб-сокеты
WebRTC и Flash поддерживают не все браузеры и платформы.Например, браузер iOS Safari не поддерживает эти технологии.
В iOS Safari вы можете доставлять видеопоток через транспорт Websocket (TCP-соединение между браузером и сервером).
В этот туннель можно завернуть видеопоток, преобразованный из RTSP. Как только двоичные данные поступят, их можно декодировать с помощью JavaScript и отобразить в элементе Canvas HTML5.
Именно это делает плеер Websocket при запуске в браузере iOS Safari, и его код снаружи выглядит так же: var session = Flashphoner.createSession({urlServer:" wss://192.168.88.59:8443 "});
session.createStream({name:" rtsp://192.168.88.5/live.sdp ", display:myVideo }).
play();
Это чем-то похоже на подход с флешкой, когда в HTML5 есть элемент swf. В данном случае под HTML5-страницей лежит не swf-объект, а JavaScript-приложение, которое перетягивает данные через веб-сокеты, декодирует их и в несколько потоков рисует на Canvas.
Вот как выглядит RTSP-поток на Canvas в браузере iOS Safari. 
Метод 7 — ЗОЖ
При конвертации RTSP в HLS видеопоток разбивается на сегменты, которые безопасно загружаются с сервера и отображаются в HLS-плеере.
Мы используем video.js в качестве проигрывателя HLS. Код плеера можно скачать Здесь .
Как выглядит плеер: 
Способ 8 — приложение для Android, WebRTC
Приложение принимает поток с сервера через WebRTC. Задача сервера в данном случае — преобразовать RTSP в WebRTC и передать его мобильному приложению.
Java-код плеера для Android находится Здесь и выглядит так: SessionOptions sessionOptions = new SessionOptions(" wss://192.168.88.59:8443 ");
Session session = Flashphoner.createSession(sessionOptions);
StreamOptions streamOptions = new StreamOptions(" rtsp://192.168.88.5/live.sdp ");
Stream playStream = session.createStream(streamOptions);
playStream.play();
Тестовое приложение мобильного плеера можно установить с сайта Гугл игры и загрузите исходные коды приложения Здесь .
Вот как выглядит воспроизведение потока RTSP через WebRTC на планшете Asus Android: 
Способ 9 — приложение для iOS, WebRTC
Приложение, как и в случае с Android, принимает поток с сервера через WebRTC.
Код проигрывателя Objective-C выглядит так:
FPWCSApi2SessionOptions *options = [[FPWCSApi2SessionOptions alloc] init];
options.urlServer = @" wss://192.168.88.59:8443 ";
FPWCSApi2Session *session = [FPWCSApi2 createSession:options error:&error];
FPWCSApi2StreamOptions *options = [[FPWCSApi2StreamOptions alloc] init];
options.name = @" rtsp://192.168.88.5/live.sdp ";
FPWCSApi2Stream *stream = [session createStream:options error:nil ];
stream play:&error;
Вы можете скачать исходный код плеера для iOS Здесь .
А из App Store вы можете установить тестовое приложение , который использует фрагменты кода, показанные выше.
Его работа с RTSP-потоком выглядит так: 
Результаты
Подведем итоги и объединим результаты в таблицу:| Метод отображения | Приложение | Задерживать | |
| 1 | RTMP | Там, где важно использование устаревших версий — Flash-клиент, Flex или Adobe Air | середина |
| 2 | РТМП + HTML5 | В браузерах IE, Edge, Mac Safari, если там установлен Flash Player | середина |
| 3 | РТМФП | Там, где важно использовать устаревшие версии — флэш-клиент, Flex или Adobe Air и важна низкая задержка.
|
низкий |
| 4 | РТМФП + HTML5 | В браузерах IE, Edge, Mac Safari, если установлен Flash Player и важна низкая задержка.
|
низкий |
| 5 | ВебRTC | В браузерах Chrome, Firefox, Opera для настольных компьютеров и мобильных браузерах для Android, где важна задержка в реальном времени.
|
в реальном времени |
| 6 | Вебсокет | В браузерах, где нет Flash и WebRTC, но нужна средняя или низкая задержка.
|
середина |
| 7 | Х.
Л. С.
|
Во всех браузерах.
Где промедление не имеет значения.
|
высокий |
| 8 | Android-приложение, WebRTC | В нативных мобильных приложениях для Android, где требуется задержка в реальном времени.
|
в реальном времени |
| 9 | iOS-приложение, WebRTC | В нативных мобильных приложениях для iOS, где требуется задержка в реальном времени.
|
в реальном времени |
Ссылки
Веб-сервер вызовов 5 — сервер для раздачи RTSP потока Флэш-стриминг — пример swf-приложения, воспроизводящего потоки через RTMP и RTMFP. Способы 1 и 3. Источник — исходный код SWF-приложения на Flex/AS3. Игрок — пример веб-приложения, воспроизводящего RTSP-поток через RTMP, RTMFP, WebRTC, Websocket. Методы 2,4,5,6. Источник — исходный код веб-плеера.HLS-плеер — пример веб-плеера, играющего в HLS. Способ 7. Источник — Исходный код HLS-плеера.
Android-плеер WebRTC — пример мобильного приложения, воспроизводящего поток через WebRTC. Способ 8. Источник — исходный код мобильного приложения.
iOS-плеер WebRTC — пример мобильного приложения, воспроизводящего поток WebRTC. Способ 9. Источник — исходный код мобильного приложения.
Теги: #rtsp #ip-камера #потоковая передача #живое видео #браузер #Android #iOS #webrtc #rtmp #rtmfp #websocket #hls #latency #latency #flash #Action Script 3 #objective-c #Разработка веб-сайтов #Разработка для iOS # Разработка мобильных приложений #Разработка Android
-
Неожиданная Встреча. Глава 5
19 Oct, 24 -
Что Означает Вывод «Ss -S»?
19 Oct, 24 -
Популярные Статьи В Прямом Эфире
19 Oct, 24 -
Осмос Портирован На Linux
19 Oct, 24 -
Музыка На Commodore Pet — Faulty Robots
19 Oct, 24 -
Pycon Russia Переезжает В Москву
19 Oct, 24 -
Гугл Адсенс
19 Oct, 24 -
Google Подвел Итоги «Поискового Года»
19 Oct, 24
