webrtc-conference-script-for-embedding

Внедрение видеоконференции WebRTC в ваш веб-проект

Для внедрения конференций используются простые возможности сервера по воспроизведению и публикации отдельных видеопотоков. Задействованы два основных метода JavaScript API playStream и publishStream, а также серверный код, который управляет статусами и следит за действиями участников: подключения, отключения, публикация потоков, остановка потоков.

Описание Тестирование Внедрение

Ниже будут показаны основные скрипты, их назначение и принципы работы. Все скрипты доступны на Github, в разделе examples/demo/conference и в виде сборки здесь.

HTML и JavaSript код для внедрения веб видеоконференции

examples/demo/conference/conference.html

Это простой HTML5 веб-интерфейс, который содержит пять видеоокон для воспроизведения видеопотоков участников конференции.

Обратите внимание, что каждый элемент ‘video’ имеет свой идентификатор:

remote-video-1
remote-video-2
и т.д.

Это важно, так как при воспроизведении потока нужно обязательно указать, в каком конкретно окне (элементе video) этот поток должен воспроизводиться.

Пример:

playStream({name:’stream-Alice’,remoteVideoElementId:’remote-video-2’});

В этом примере мы указываем, что поток с именем ‘stream-Alice’ должен воспроизводиться в элементе remote-video-2. Таким образом мы распределяем потоки по интерфейсу и можем выбрать любое расположение.

webrtc-conference-script-html5-video-elements

examples/demo/conference/conference.js

Этот скрипт обслуживает работу интерфейса конференции: добавляет / удаляет видео участников и отображает актуальные статусы.

Обратить внимание здесь нужно на реализацию метода connect()
При соединении с сервером, передается appKey: ‘conferenceApp’ и имя комнаты в поле ‘room’.

conferenceApp — это серверное приложение на языке Java, которое обрабатывает коннекты, дисконнекты, статусы потоков и рассылает эти статусы через dataEventLisener, тем самым реализуя логику работы конференции.

Серверное приложение доступно локально на сервере по адресу: http://localhost:9091/ConferenceApp и его работу можно увидеть в логе сервера flashphoner_manager.log

webrtc-conference-connect-script

Кроме метода connect(), важным методом является dataEventListener, который вызывается со стороны сервера, каждый раз при обновлении статуса участника конференции.

Сервер может присылать следующие статусы для каждого из участников комнаты:

Статус	Описание
JOINED	Участник присоединился к конференции
DISCONNECTED	Участник потерял соединение с конференцией
PUBLISHING	Участник опубликовал видеопоток
UNPUBLISHED	Участник конференции остановил публикацию видеопотока

JOINED The participant joined the room
DISCONNECTED The participant disconnected from the room
PUBLISHING The participant published a video stream
UNPUBLISHED The participant unpublished a video stream

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

webrtc-conference-statuses-scripts

Вы можете также использовать собственное серверное приложение написанное на PHP, JSP или другом серверном языке программирования. Ваше приложение может полностью управлять статусами и аутентификацией участников.

Исходный код управления конференцией на Java / Spring можно найти здесь. На скриншоте ниже показан Spring Controller ‘ConferenceApp.java’ который принимает JSON запросы connect, ConnectionStatusEvent, StreamStatusEvent и рассылает нотификации через встроенный вызов функцией sendData(), которая доставляет нотификацию на web-страницу в JavaScript dataEventListener.

webrtc-conference-server-side-scripts