Разработка WebRTC видеочата между iOS, Android и браузером

Реализуем трехсторонний видеочат на следующих платформах: Google Chrome на десктопе, Android приложение на планшете, и iOS приложение для Apple iPhone.

Напомним два основных принципа построения видеочата:

1. Каждый подключившийся пользователь может отправить (опубликовать) свой видеопоток на сервер.
2. Пользователи знают имена видеопотоков друг-друга и имеют возможность их воспроизвести.

Таким образом, в видеочате из трех участников, каждому из участников придется воспроизводить по два видеопотока.

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

Публикуют потоки

1. Alice: session.createStream({name:»stream_alice»}).publish();
2. Boris: session.createStream({name:»stream_boris»}).publish();
3. Anna: session.createStream({name:»stream_anna»}).publish();

Играют потоки

4. Alice: session.createStream({name:»stream_anna»}).play();
5. Alice: session.createStream({name:»stream_boris»}).play();
6. Boris: session.createStream({name:»stream_alice»}).play();
7. Boris: session.createStream({name:»stream_anna»}).play();
8. Anna: session.createStream({name:»stream_alice»}).play();
9. Anna: session.createStream({name:»stream_boris»}).play();

От разработчика в данном случае требуется организовать передачу названий и статусов видеопотоков участникам видеочата. Это можно сделать на любой подходящей технологии, например PHP, websockets, Node.js и т.д., так как передача имени видеопотока ничем не отличается от передачи обычного текстового сообщения от одного пользователя к другому.

У потока может быть три основных статуса: PUBLISHING, PLAYING, STOPPED Для успешного воспроизведения, запрашиваемый поток должен быть в активном статусе PUBLISHING.

На этой схеме показано, как именно можно реализовать обмен именами и статусами потоков, в упрощенном варианте, когда Алиса демонстрирует свой видеопоток Борису и Анне. Такая процедура занимает 8 шагов, и может быть названа сигналингом, т.к. В результате этой процедуры проводится согласование:

1. Алиса отправляет видеопоток на WCS-сервер.
2. Алиса получает от сервера подтверждение в виде статуса PUBLISHING
3. Алиса отправляет Борису сообщение, о том, что ее поток готов к воспроизведению.
4. Алиса отправляет Анне сообщение, о том, что ее поток готов к воспроизведению.
5. Анна воспроизводит видеопоток с WCS-сервера.
6. Анна получает подтверждение статус PLAYING.
7. Борис воспроизводит видеопоток с WCS-сервера.
8. Борис получает подтверждение статус PLAYING.

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

Комнаты

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

С другой стороны, для такой задачи напрашивается какое-то универсальное решение, которое могло бы помочь пользователям быстро согласовать потоки и попасть в чат. Такое решение называется Комнаты или Room API.

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

Таким образом, имеем четыре объекта, которые полностью покрывают работу с комнатами:

• Room — комната
• Stream — видеопоток
• Participant — участник
• Message — сообщение

Room API дает возможность кроссплатформенно использовать перечисленные выше абстракции: Room, Stream, Participant и Message для реализации следующих функций:

Подключение

• Пользователь может подключиться к комнате.
• Пользователь задает название комнаты при подключении.
• Если комната с таким названием существует, то пользователь попадает в эту комнату.
• Если комнаты с таким названием нет, то создается новая комната и пользователь попадает во вновь созданную комнату.
• Пользователь получает уведомления о подключениях / отключениях других участников.
• Пользователь может получить список участников.

Стриминг

• Пользователь может опубликовать видеопоток внутри комнаты.
• Пользователь получает уведомления о статусах видеопотоков других участников.
• Пользователь может воспроизвести видеопоток внутри комнаты.

Сообщения

• Пользователи могут обмениваться сообщениями внутри комнаты
• Пользователи могут обмениваться изображениями или другим контентом, если он упакован в текстовый формат
• Сообщение можно отправить одному или нескольким участникам

Room API

Для Web платформы, комнаты были реализованы в виде JavaScript — модуля со следующими основными функциями:

1. Получаем соединение с сервером.

var connection = Flashphoner.roomApi.connect({urlServer: "wss://host:8443", username: "Alice"});

2. Входим в комнату.

connection.join({name: "room1"});

3. Получаем список участников комнаты.

var participants = room.getParticipants();

4. Отправляем свой видеопоток в комнату.

room.publish({
	display: document.getElementById("localDisplay"),
        constraints: constraints,
        record: false,
        receiveVideo: false,
        receiveAudio: false
});

5. Воспроизводим поток участника.

participant.getStreams()[0].play(document.getElementById(pDisplay))

6. Следим за участниками комнаты:

connection.on(ROOM_EVENT.JOINED, function(participant){...});
connection.on(ROOM_EVENT.LEFT, function(participant){...});
connection.on(ROOM_EVENT.PUBLISHED, function(participant){...});

JOINED — к комнате присоединился новый участник
LEFT — участник вышел
PUBLISHED — участник опубликовал свой видеопоток

7. Получаем сообщения от других участников.

connection.on(ROOM_EVENT.MESSAGE, function(participant){...});

8. Отправляем приватное сообщение конкретному участнику

participants[i].sendMessage(message);

9. Отправляем сообщение всем участникам сразу.

var participants = room.getParticipants();
        for (var i = 0; i < participants.length; i++) {
            participants[i].sendMessage(message);
        }
}

Таким образом, реализация комнат дает простой обмен сообщениями и статусами всех подключенных к комнате участников.

Ограничения Room API

Вся логика при работе с комнатами ложится на клиента. Сервер управляет только только базовым функционалом комнаты:

• уведомления о подключении / отключении пользователей в комнате
• уведомления о создании / отключении видеопотоков пользователями внутри комнаты
• маршрутизация сообщений указанным участникам

Таким образом, аутентификация, права доступа, роли участников (модератор, зритель, ведущий), и другая логика, должны быть реализованы на клиенте и / или стороннем бэк-энде. Комнаты лишь помогают произвести быстрый обмен информацией о видеопотоках и статусах.

Комнаты для Web, Android, iOS

В каждой из SDK (Web, Android, iOS) для работы с сервером, есть API для работы с комнатами.

Примеры входа в комнату:

Web SDK

connection.join({name: "room1"});

Android SDK

Room room = roomManager.join(roomOptions);

iOS SDK

room = [roomManager join:options];

Таким образом в одну и ту же комнату может войти три участника с трех разных платформ:

• Web — браузер
• Мобильное приложение для Android
• Мобильное приложение для iOS

Тестовые приложения для работы с комнатами

Ниже мы приведем три тестовых приложения для работы с комнатами. Каждое из них имеет открытый код и может быть собрано из исходников. Каждое из следующих приложений позволяет обмениваться видеопотоками и сообщениями трём участникам:

• Conference for Web
• Conference for Android
• Conference for iOS

Conference for Web

Код этого приложения доступен для скачивания здесь. В HTML-коде можно найти два div-элемента

sudo gem install cocoapods

git clone https://github.com/flashphoner/wcs-ios-sdk-samples.git

wget https://flashphoner.com/downloads/builds/flashphoner_client/wcs-ios-sdk/WCS-iOS-SDK-2.3.0.tar.gz

tar -xvzf WCS-iOS-SDK-2.3.0.tar.gz

cp -R FPWCSApi2.framework wcs-ios-sdk-samples

./build_example.sh