Потоковое соединение с помощью WebRTC и simple-peer

Реализация потокового соединения на JavaScript с использованием технологии WebRTC и библиотеки simple-peer

WebRTC и ICE

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

Установка соединения между браузерами предполагает обмен данными и наличие двух сторон: инициирующей и принимающей. Чтобы установить соединение, пользователи должны найти друг друга в сети и сообщить о типе своих носителей. Но если у устройств нет публичного адреса, соединение напрямую невозможно. Для этого мы и используем ICE – Interactive Connectivity Establishment. ICE представляет собой метод, позволяющий двум компьютерам находить способ соединения друг с другом настолько напрямую, насколько это возможно. Он состоит из 3 процессов: Nat, Stun, Turn, которые в совокупности позволяют сгруппировать несколько устройств под одним IP-адресом, получить IP-адрес и порт, гарантировать прямое соединение.

Чтобы не настраивать все этапы вручную, мы используем библиотеку simple-peer.

Реализация на simple-peer

Итак, давайте напишем простое приложение для трансляции видео-потока.

Верстка выглядит так:

Как вы могли заметить, у нас два поля для ввода и две кнопки. Это вызвано особенностями работы библиотеки – для подключения необходимо обменяться не только данными, но и ответами. То есть после получения данных нашего собеседника на его основе создается ответ, который нужно отправить.

Механизм обмена ответами будет указан ниже. А пока приступим к написанию кода.

1. Создадим основной объект peer, и сформируем наши данные:

Функция navigator.mediaDevices.getUserMedia — запрашивает доступ к камере и микрофону, в зависимости от значений параметров video и audio.

Далее мы создаем пир, в который передаем параметры. Initiator:true говорит что данный пир - инициатор, и будет формировать наши данные. В дальнейшем, нам понадобится второй пир, для формирования ответа.

Если оставить параметр trickle:false и запустить сайт, в консоли появится следующее:

В этом большом объеме строк содержится информация о нас.

Если убрать параметр trickle:false, сообщений станет больше. И как раз для того, чтобы объединить данные, мы и будем использовать trickle:false.

Последний параметр – stream – хранит наши видео/аудио данные и при включенном параметре данные будут формироваться с учетом того, что мы хотим передавать аудио/видео данные.

2. Создадим обработчик события клика по кнопке, при котором мы будем получать значение input и на его основе формировать наш ответ. Заметьте, что для ответа мы создали еще один peer

3. Теперь мы должны получить наш ответ из поля ввода

Поздравляю! Мы сделали peer соединения, теперь нам осталось получить видео поток и добавить его в тег <video>

4. Получение и добавление видео потока

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

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

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