Трансляция WebRTC видеопотока на iOS Safari, IE и другие браузеры по протоколу Websockets с минимальной задержкой

low-latency-video-streaming-to-iOS-Safari

Решение для доставки low-latency видео на iOS Safari

Браузеры iOS Safari, Internet Explorer, Mac Safari, и ряд других браузеров не поддерживает технологию WebRTC, которая максимально подходит для организации вещаний видеопотоков в реальном времени.

В WebRTC для транспорта видеопотоков используется RTP-протокол, что позволяет получить минимальную задержку(low-latency) видеопотока при воспроизведении. Это может быть критически важно в интерактивных приложениях, таких как видеочаты, живые трансляции, показ экрана (screen sharing), вебинары и в других приложениях, где важно чтобы зритель видел поток в реальном времени и без запаздывания в 10-15 секунд.

Рис 1. iOS Safari не поддерживает WebRTC.

IOS-Safari-Does-Not-Support-WebRTC

Мы приводим в пример именно iOS Safari по той причине, что в этом браузере отсутствует и поддержка Flash. Т.е. если на десктопных браузерах IE и Safari мы можем использовать Adobe Flash Player для отображения живого потока, то iOS Safari лишен такой возможности.

Рис. 2. Apple HTTP Live Streaming — как решение задачи доставки живого видеопотока.

HTTP-Live-Streaming-As-Solution

Существующее решение: HLS (HTTP Live Streaming) позволяет доставить видеопоток на iOS Safari и другие браузеры без поддержки WebRTC. Однако такое решение не обеспечивает низкой задержки(low-latency) и не может быть использовано там, где требуется низкая задержка.

Рис 3. HLS не обеспечивает низкую задержку.

HLS-cant-deliver-low-latency-video-stream

Решение на базе Web Call Server 5 позволяет доставить WebRTC видео на iOS Safari и другие браузеры с минимальной задержкой. Для доставки потока используется технология HTML5 Websockets, которая в разы опережает HLS по производительности и скорости доставки видеоконтента за счет передачи бинарных данных внутри Websocket-соединения без необходимости закачки фрагментов видео по HTTP, как это происходит в случае применения HTTP Live Streaming.

Рис. 4. Web Call Server 5 как решение для доставки low-latency видеопотока.

low-latency-iOS-Safari-iPhone-Streaming-without-HLS

Соотношение в значениях задержки в случае передачи видео по HLS и по Websockets может быть в 5 и более раз в пользу технологии Websocket.

На тестах с WCS4 удалось получить задержку 3 секунды для Websockets и 15 секунд для HLS. Таким образом характеристики доставки потока в реальном времени показали улучшение в 5 раз.

Рис 5. Соотношение задержки в 5 раз.

HLS-vs-Websocket-Latency-in-Seconds

Проверяем работу плеера

Проверить как это работает можно прямо с нашей демо-страницы.

Откройте Demo / Streaming Min на демо-странице WebRTC-стриминга в браузере Google Chrome.
Убедитесь что ваша web-камера подключена. Введите произвольное имя потока и нажмите кнопку, ‘Connect’, а затем ‘Start’ чтобы отправить видеопоток на сервер.

Рис.6. Отправка WebRTC-видеопотока из Web-браузера.

iOS-Safari-broadcasting-form-Chrome

Откройте интерфейс Demo / WS Player Min чтобы воспроизвести отправленный видеопоток в iOS Safari по технологии HTML5:

Обратите внимание, что мы отдаем плееру именно тот поток, который был отправлен с браузера Google Chrome и интерфейса Streaming Min.

В результате получаем картинку, которая проигрывается уже без участия WebRTC.

Рис 8. Получение видео через Websockets.

testing-iOS-Safari-broadcasting-form-Chrome

Установка и настройка на собственном сервере

1. Скачиваем wcs-сервер: wget https://flashphoner.com/download-wcs5-server.tar.gz

Далее распаковываем и запускаем скрипт install.sh

2. Открываем контрольную панель сервера по алресу http://host:9091, активируем лицензию и заходим в интерфейс Demo / Streaming Min

Это все. В результате вы развернули демо на вашем собственном сервере и сможете протестировать его точно так же, как показано выше при проверке работы плеера.

Если у вас возникли какие-либо вопосы, пожалуйста обращайтесь на форумы техподдержки: http://forum.flashphoner.com

Пройдите по ссылке Web Call Server 5 чтобы получить дополнительную информацию по продукту.