streaming html5

требования • публикация • Подписка

RED5 Pro HTML -потоковая проверка

Этот репозиторий содержит простой проект с рядом примеров, которые можно использовать для тестирования и ссылки для SDK Red5 Pro Pro.

Требования

Вам понадобится функциональный, работающий в Red5 Pro Server Web- (или локально), доступный для клиентского браузера (Mobile & Desktop) для подключения.

Для получения дополнительной информации посетите https://www.red5.net/.

Композиция браузера

Red5 Pro Webrtc SDK стремится использовать WEBRTC для своего потокового решения (как публикации, так и подписки), но также обеспечивает поддержку HLS для браузеров, которые поддерживают его национально (например, мобильный и настольный сафари).

Более подробную информацию о сравнении браузера можно посмотреть на информации о контактах с контактом Webrtc на caniuse.com.

Издатель

Термин издатель в контексте Red5 Pro относится к клиенту, который производит трансляцию. Существует два типа экземпляров от SDK, которые можно использовать для запуска издателя :

1. WHIPClient - WHIPClient полагается на протокл проглатывания WEBRTC -HTTP, чтобы установить соединение через серию запросов HTTP/S.
2. RTCPublisher - RTCPublisher полагается на соединение WebSocket , чтобы создать сеанс вещания.

Последовательность подключения WHEPClient очень быстрая - ~ 1 секунда - тогда как RTCPublisher из -за его зависимости от WebSocket может занять примерно 3 - 5 секунд для подключения к потоку.

Подписчик

Термин абонента в контексте Red5 Pro относится к клиенту, который потребляет и восхищает уже живой трансляционный поток. Существует три типа экземпляров от SDK, которые можно использовать для запуска подписчика :

1. WHEPClient - WHEPClient полагается на протокол Egress webrtc -HTTP, чтобы установить соединение через серию запросов HTTP/S.
2. RTCSubscriber - RTCSubscriber полагается на соединение WebSocket , чтобы создать сеанс вещания.
3. HLSSubscriber - HLSSubscriber полагается на нативную способность воспроизводить потоки HLS (например, мобильные и настольные сафари).

Последовательность соединения WHEPClient очень быстрая - ~ 1 секунду - тогда как RTCPublisher , из -за его зависимости от WebSocket может занять примерно 3 - 5 секунд для подключения к потоку

HLSSubscriber не проходит последовательность соединения и транслирует HLS непосредственно с сервера, однако он имеет задержку до 6 секунд из -за длины его живых сегментов.

Примечание . WHIPClient и WHEPClient были введены в выпуске 11.0.0 Red5 Pro Webrtc SDK.

Настраивать

Вам нужно будет изменить поле хоста со страницы настроек , чтобы указать на IP -адрес экземпляра вашего сервера. Если вы этого не сделаете, примеры не будут функционировать при строительстве. Если вы запускаете сервер локально, то ваша машина и мобильное устройство должны быть в одной и той же сети Wi -Fi.

Примечание на TLS и CORS

Важно отметить, что некоторые из этих примеров - в частности, те, которые включают публикацию с использованием WEBRTC, - требуют запуска на TLS и, таким образом, обслуживаемым в HTTPS. Если вы запустите примеры на localhost , вы не должны видеть проблем, но если ваш сервер развернут удаленно, вам необходимо убедиться, что эти примеры подаются по HTTPS, а настройки обмена ресурсами Cross Origin (CORS) определены для сервера.

• Узнайте больше о Red5 Pro и SSL.
• Больше информации о CORS.

Инструкции

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

Чтобы определить хост с помощью IP -адреса экземпляра сервера, нажмите поля хоста F и введите в локальный или удаленный IP -адрес - например, 10.0.0.5 , 76.199.199.199 .

Подсказка: вы также можете открыть целевую страницу экземпляра вашего сервера в порту 5080 (то есть http://localhost:5080 , если она будет запущена локально), а страница отобразит свой IP в верхнем правом углу.

Вариант настройки кнута/WHEP

Вы можете выбрать, чтобы предпочесть Whip/Whep на странице настроек . Выбирая эту опцию, все тесты будут использовать WHEPClient и WHIPClient для публикации и подписки, соответственно.

Если вы решите выбрать опцию Whip/WHEP , все тесты будут возвращаться к использованию RTCPublisher и RTCSubscriber для публикации и подкраски соответственно. Эти случаи требуют поддержки WebSocket в браузере на этапе их переговоров. После того, как соединение будет сделано, система транспортировки обмена сообщениями переключается на RTCDataChannel , а WebSocket закрыт.

Примеры

Издательский

Издатель
Основной пример издателя с использованием WEBRTC, с вариантом использования либо WEBRTC-HTTP Ingestion (AKA, WHIP ), либо WebSockets для установления вещательного соединения.

1080p
Высококачественный издатель.

Добавлять
Демонстрирует запись потока на сервер с опцией приложения.

Аутентификация
Демонстрирует аутентификацию с простой авто-плугином для публикации.

Источник камеры
Демонстрирует выбор желаемой камеры для публикации.

Обмен камерой
Демонстрирует запрос на MediaStream с определенным источником video для ограничения, основанного на задней и передней части камеры мобильного устройства и браузера, который поддерживает противоречия facingMode Media.

Пользовательские настройки
Позволяет настроить настройки медиа -трансляции для издателя WEBRTC.

Пользовательские настройки звука
Позволяет настроить настройки звука для издателя WEBRTC.

MediaStream Swap
Демонстрирует использование replaceTrack для замены в динамическом источнике камеры для издателей на основе WEBRTC.

Захват изображения
Демонстрирует захват изображения живого видео, опубликованного.

Немой
Приглушение и непрерывное звук для публикации живого видео.

Записывать
Демонстрирует запись потока на сервер для воспроизведения VOD (видео по запросу).

Добавлять
Демонстрирует функцию применения записи поток на сервер для воспроизведения VOD (видео по запросу).

Отдаленный звонок
Демонстрирует отправку удаленного сообщения всем подписанным клиентам.

Аутентификация туда и обратно
Пример использования аутентификации об обратном пути с Red5 Pro.

Screen Share
Пример использования возможностей совместного использования экрана Chrome и Firefox . Для использования с примером общего экрана подписки.

Общий объект
Демонстрирует использование удаленного общего объекта для отправки и получения информации между подключенными клиентами.

Поток социальных сетей
Пример ретрансляции прямой трансляции на платформе социальных сетей.

VP8
Пример для запроса видеокодека VP8 при публикации

Publishing - примеры менеджера потока

Потоковой менеджер
Демонстрирует использование API Manager Red5 Pro Stream для публикации в AutoScaling Cluster's Origin.

Поток менеджер по доверенности
Демонстрирует использование Manager Red5 Pro Stream в качестве прокси SSL WebSocket для публикации WEBRTC для происхождения автоматического кластера.

Прокси -камера потока диспетчера выбора
Демонстрирует использование Manager Red5 Pro Stream в качестве прокси SSL WebSocket для публикации WEBRTC для происхождения автоматического кластера с выбором камеры.

Настройки прокси -сервера Stream Manager
Демонстрирует использование Manager Red5 Pro Stream в качестве прокси SSL Websocket для публикации WEBRTC с пользовательскими настройками видео для AutoScaling Cluster Origin.

Настройки прокси -сервера Stream Manager с аудио
Демонстрирует использование Manager Red5 Pro Stream в качестве прокси SSL WebSocket для публикации WEBRTC с пользовательскими настройками звука для происхождения автоматического кластера.

Поток менеджер по доверенности
Пример использования аутентификации об обратном пути с Red5 Pro Over Stream Manager Proxy.

STREM MANGENCE PROXY SCERE SHARE
Пример использования возможностей совместного использования экрана Chrome и Firefox . Для использования с примером STREAD Manager Proxy Proxy. Пример.

Поток менеджера по прокси -медиа -потоку в социальных сетях
Пример ретрансляции прямой трансляции на платформе социальных сетей.

Форма обеспечения транскода потока менеджера
Предоставляет простую форму, чтобы опубликовать новое положение менеджеру потока для трансляций ABR. После того, как положение будет опубликовано, используйте свой любимый медиа -энкодер для трансляции вариантов.

Прокси -транскодер потока менеджера
Предоставляет простую форму, чтобы опубликовать новое положение для менеджера потока для трансляций ABR и запустить один вариант трансляции с использованием Transcoder.

Прокси -прокси -транскодер Stream Manager с аутентификацией
Предоставляет простую форму, чтобы опубликовать новое положение для менеджера потока для трансляций ABR и запустить один вариант трансляции с использованием транскодер, включая аутентификацию.

Прокси -проверка прокси -сервера потока
Пример использования параметров валидации с Red5 Pro через прокси -прокси -сервер.

Мульти

Двусторонний
Демонстрирует одновременно публикацию при подписке - позволяя разговор. Включает в себя обнаружение потока и автоматическое соединение.

Двухсторонний прокси-диспетчер
Двусторонний пример через менеджер потока, включая использование прокси. Включает в себя обнаружение потока и автоматическое соединение.

Конференция
Демонстрирует многопартийную связь с использованием Red5 Pro. Он также демонстрирует использование общих объектов в качестве уведомлений для распознавания добавления и удаления вещания сторон.

Конференция - менеджер потока
Демонстрирует многопартийную связь с использованием Red5 Pro Over Stream Manager. Он также демонстрирует использование общих объектов в качестве уведомлений для распознавания добавления и удаления вещания сторон.

Общий объект (только веб -питания)
Демонстрирует использование общих объектов через прокси WebSocket от Red5 Pro HTML SDK.

Подписка

Подписчик
Основной пример подписчика с отказа. то есть, если нет поддержки браузера Webrtc, то сначала не обнаруживается флеш -плеер, то HLS.

360
Пример подписки на поток камеры 360

Только аудио
Демонстрирует воспроизведение потока только для аудио.

Аутентификация
Демонстрирует аутентификацию с простой авто-плугином для подписки.

Захват изображения
Демонстрирует захват изображения употребляемого видео живого видео.

Кластер
Демонстрирует доступ к IP от API Red5 Pro Cluster, чтобы подписаться на живой поток.

HLS
Это пример подписки на поток только с использованием HLS. В случае, если HLS не поддерживается в браузере, используется 3-й партийной библиотека HLS.JS.

Захват изображения
Этот пример демонстрирует захват неподвижного воспроизведения, используя API drawImage CanvasRenderingContext2D .

Восстановить связь
Демонстрирует механизм аварийного перерыва Red5 Pro HTML SDK, чтобы выбрать подписчика на основе поддержки браузера и автоматического разъединения при закрытии трансляции или потери подключения.

Отдаленный звонок
Демонстрирует получение удаленного сообщения от телекомпании.

Повторите неверное имя
Демонстрирует использование свойства конфигурации maintainConnectionOnSubscribeErrors подписчика для поддержания соединения WebSocket после ошибок из запроса subscribe после интриализации.

Аутентификация туда и обратно
Пример использования аутентификации в обратном пути с Red5 Pro Over Stream Manager Proxy

Screen Share
Пример использования возможностей совместного использования экрана Chrome и Firefox . Для использования с примером публикации Share Share.

Общий объект
Демонстрирует использование удаленного общего объекта для отправки и получения информации между подключенными клиентами.

Поддерживать
Пример использования резервного API для запроса «паузы» при получении видео и аудиоданных в MediaStream, а также подключение подключения клиента к серверу.

Переключатель потока
Пример, который демонстрирует переключение потока текущего подписчика на другой живой поток через WEBRTC.

Два потока
Пример, который подписывается на два потока, используя переменные Stream1 Name и Stream 2 Name на странице «Настройки».

Видео -нить
Пример, чтобы продемонстрировать подписку на трансляцию, которая имеет видеопоток «приглушен».

VP8
Демонстрирует запрос кодирования видео VP8 для потока воспроизведения.

Подписка - примеры менеджера потока

Потоковой менеджер
Демонстрирует использование API Red5 Pro Stream Manager и выступая в качестве прокси SSL Websocket, чтобы получить доступ к IP -адресу сервера Edge, чтобы подписаться на прямой трансляцию.

Поток менеджер по доверенности
Демонстрирует использование API Red5 Pro Stream Manager для доступа к IP -адресам сервера Edge, чтобы подписаться на живой поток.

Прокси -прокси -прокси -диссерт
Демонстрирует механизм аварийного перерыва Red5 Pro HTML SDK, чтобы выбрать подписчика на основе поддержки браузера и автоматического разъединения при закрытии трансляции или потери подключения.

Прокси -регион потокового менеджера
Демонстрирует использование API Red5 Pro Stream Manager для доступа к IP -адресам сервера Edge, чтобы подписаться на живой поток.

Аутентификация прокси -поездки управляющего потоком менеджера
Демонстрирует подписку с использованием аутентификации туда и обратно, указана регион.

Прокси -прокси -прокси -прокси -сервер (RTC)
Демонстрирует использование API Red5 Pro Stream Manager для доступа к положениям и IP-адресу сервера Edge, чтобы подписаться на живой поток на основе WEBRTC с адаптивным элементом управления битрейтом.

Прокси -прокси -транскодер Stream Manager (RTMP)
Демонстрирует использование API Red5 Pro Stream Manager для доступа к положениям и IP-адресу сервера Edge для подписки на живой потоковой потоки на основе флэш-памяти с адаптивным элементом управления битрейтом.

Прокси -прокси -транскодер Stream Manager (HLS)
Демонстрирует использование API Red5 Pro Stream Manager для доступа к положениям и IP-адресу сервера Edge, чтобы подписаться на живой поток на основе HLS с адаптивным элементом управления битрейтом.

STREM MANGENCE PROXY SCERE SHARE
Пример использования возможностей совместного использования экрана Chrome и Firefox . Для использования с примером публикации Share Share.

Микшер - примеры менеджера потока

Участник прокси -конференции управляющего потоком
Демонстрирует использование API Manager Red5 Pro Stream для присоединения к видео конференции с одним потоком возврата.

Ведущий прокси -конференции потока
Демонстрирует использование API Manager Red5 Pro Stream для размещения и управления видеоконференцией с одним потоком возврата.

Хост композиции сетки потока
Демонстрирует использование API Red5 Pro Stream Manager для создания и управления композицией нескольких живых потоков в один поток.

Пример макета сетки 2x2
Демонстрирует составление набора живых потоков в сетку 2x2, которая может быть загружена в миксер Red5 Pro, чтобы создать композицию с 4 потоками.

Пример макета сетки 3x3
Демонстрирует составление набора живых потоков в сетку 3x3, которая может быть загружена в миксер Red5 Pro, чтобы создать композицию с до 9 потоков.

Пример макета сетки nxn Manager nxn
Демонстрирует составление набора живых потоков в сетку NXN, которая может автоматически изменять размер, когда к нему добавляются новые потоки. Страница может быть загружена в микшер Red5 Pro, чтобы создать композицию со многими потоками.

Метка конференции по потоковой конференции
Демонстрирует составление набора живых потоков в сфокусированный макет для видео конференции, где подчеркивается докладчик. Страница может быть загружена в микшер Red5 Pro, чтобы создать видеоконференцию с одним обратным потоком.

Примечания

1. Для примеров подписчика вам нужно будет публиковать в настоящее время живой поток, который в настоящее время публикуется и назван на основе поля Stream 1 настройки . Вы можете использовать другое устройство для начала потоковой передачи с помощью этого веб -приложения, или вы также можете использовать веб -браузер для публикации через Flash, http: // your_red5_pro_server_ip: 5080/live.
2. Вы можете увидеть список активных потоков, перейдя на http: // your_red5_pro_server_ip: 5080/live/adpcribe.jsp (необходимо обновить эту страницу после того, как вы начали публиковать).
3. Вы можете получить доступ к IP -адресу сервера вашей установки Red5 Pro Server - для использования в поле хоста настройки - открыв http: // your_red5_pro_server_ip: 5080/и обнаружив IP, напечатанный в верхнем праве страницы.
4. Если вы не запускаете сервер локально, WEBRTC Publishing требует действительного сертификата SSL.