embedding-broadcasting-WebRTC-to-HLS-Playback

Внедрение WebRTC трансляции и воспроизведения по технологии HLS

Здесь мы покажем простой HTML-код, который поможет встроить HLS-плеер в страницу вашего сайта.

Для того чтобы встроить WebRTC стример, воспользуйтесь рекомендациями в этой статье. Отправка видеопотока осуществляется методом publishStream, который описан в Web SDK.

Подготовка к использованию HLS плеера для iOS Safari

Для воспроизведения HLS видеопотоков с WCS-сервера в iOS Safari браузере вам нужно подготовить необходимые скрипты и файлы:

Установите Web Call Server.
Если вы испытываете сложности с установкой Web Call Server, попробуйте использовать готовый сконфигурированный инстанс в облаке Amazon EС2
Кроме этого вы можете использовать наши демо-серверы для ваших тестов:
wss://wcs5-eu.flashphoner.com:8443
wss://wcs5-us.flashphoner.com:8443
Скачайте последнюю доступную сборку с HTML и JavaScript кодом.
Распакуйте сборку на вашем веб-сервере и используйте следующие файлы:
examples/demo/hls-player/hls-player.html
examples/demo/hls-player/hls-player.js

Эти файлы не требуют каких-либо изменений и содержат код, позволяющий вставить HLS-плеер на страницу для браузера iOS Safari, используя HTML5 и Websocket технологии. Рассмотрим эти файлы более подробно:

Код плеера HLS

hls-player.html

Основная часть кода HLS-плеера это элемент ‘video’, который отображается браузером как обычный плеер с использованием кнопок ‘Play’, ‘Stop’, и т.д., если установлен аттрибут ‘controls’.

WebRTC-to-HLS-Playback-iOS Safari

hls-player.js

В этом скрипте видеоплееру, размещенному с помощью тега ‘video’ устанавливается аттрибут ‘src’, который говорит плееру откуда брать видеопоток для воспроизведения. Это делается динамически для того чтобы иметь возможность воспроизводить различные видеопотоки по имени.

preparing-to-embedding-WebRTC-to-HLS-Playback

В расширении используется m3u8. Пример такого атрибута и кода плеера:
src=”http://wcs5-us.flashphoner.com:8082/stream1/stream1.m3u8”

Весь код будет выглядеть следующим образом:

id=»remoteVideo»
width=»320″
height=»240″
controls=»controls»
type=»application/vnd.apple.mpegurl»
src=”http://wcs5-us.flashphoner.com:8082/stream1/stream1.m3u8”
/>

Таким образом, вы может внедрить только этот минимальный код на вашей веб-странице и это будет HLS-плеер, способный проиграть видеопоток, отправленный из другого браузера по WebRTC или RTMP.

Для разбора демо-примеров перейдите в раздел Тестирование

Эта страница скорее всего устарела

Посетите актуальную страницу для интеграции HLS плеера в ваш HTML-код

Перейти Нет, остаюсь здесь

[/outofdate]