Внедрение HTML5-RTSP плеера на страницу вашего сайта

Два варианта реализации HTML кода для отображения RTSP контента на страницы браузера
— код для Chrome / Firefox и код для Safari.

Подготовка к использованию кода 

Для организации трансляции RTSP потока непосредственно а браузер Chrome / Firefox или Safari достаточно выполнить следующие шаги:

1. Корректно проинсталлировать (или получить доступ к уже проинсталлированному) Web Call Server.

2. Скачать сборку в которой представлены HTML и JS связанные файлы  с кодом плеера можно тут.

3. Развернуть сборку с кодом на доступном  Web Server’е с сохранением всех представленных в сборке относительных ссылок между файлами.

4. Вставить в создаваемую страницу тэги с код плеера, представленные на следующих примерах HTML страницы с плеером.

Вставка HTML кода плеера в
WebRTC браузер Chrome / Firefox 

Если используется Chrome / Firefox, то вставлять необходимо код из следующего примера:

В сборке  код плеера  WebRTC  находится в файле  Streaming-min.html

Отображение плеера из примера в браузере Chrome / Firefox 

Результат использования этого кода (из примера) показан ниже:

Вставка HTML кода плеера в Websocket браузер Safari

 Если используется Safari то вставлять необходимо из примера ниже:

В сборке  код плеера  Websocket находится в файле  vow-player-min.html

Отображение плеера из примера в браузере Safari

Результат использования этого кода (из примера) показан ниже.

Дополнительные возможности использования кода из примеров

Дополнительно нужно отметить что в файлах с примерами HTML кода представлены тэги для обработки событий, статусов соединений, ввода URL и другие функциональные дополнения к плееру. Например на скриншоте выше видно как под окном с контентом отображены последовательно статусы: соединение с Web Call Server, проигрывание потока, остановка потока, проигрывание потока и приостановка проигрывания. Аналогичным образом обрабатываются события и в Chrome / Firefox.

Таким образом поставленная в начале задача — используя элементы кода из представленных в сборке образцов — создать собственную страницу в WebRTC / Websocket браузере и отобразить в ней RTSP контент — успешно решается.

Для успешного использования предложенного для встраивания в страницы HTML кода — достаточно  функционала запущенного Web Call Server’а и  аккуратно развернутой “сборки” (ссылка представленна выше) с сохранением всех относительных путей к файлам скриптов, внутри которых и  реализован API взаимодействия с Web Call Server. 

Загрузить Web Call Server 5

Системные требования: Linux x86_64, 1 core CPU, 2 Gb RAM, Java

    Загрузить WCS5   

Установка:

1. wget https://flashphoner.com/download-wcs5.2-server.tar.gz
2. Распаковать и установить с помощью скрипта 'install.sh'
3. Запустить сервер с помощью команды 'service webcallserver start'
4. Открыть веб-интерфейс https://host:8444 и активировать вашу лицензию

Если вы используете серверы Amazon EC2, то скачивать ничего не нужно.

WCS5 на Amazon EC2