Автор статьи инженер WebRTC Ventures. На Интернет-конференции в реальном времени RTC 2018 ведущие инженеры-программисты из WebRTC Ventures поделятся своим опытом разработки WebRTC. Добро пожаловать в гостиСообщество разработчиков RTC, чтобы обменяться опытом с другими разработчиками WebRTC.
Простой способ понять, как работает WebRTC, — научиться создавать приложение для видеоконференций с использованием WebRTC и медиасервера Kurento. Хотя WebRTC изначально предназначался для установления одноранговых соединений, медиасерверы полезны для добавления таких функций, как запись, многосторонний вызов и т. д. Мы будем использовать Kurento, медиа-сервер с открытым исходным кодом, чтобы обеспечить поддержку подключения для нашего приложения, когда есть более двух пользователей. Далее давайте рассмотрим весь процесс, разделим процесс установления соединения через WebRTC на три шага:
1. Браузер получает медиаустройство (камеру и микрофон)
2. Каждый одноранговый узел обменивается информацией со всеми другими одноранговыми узлами посредством процесса отправки.
3. После обмена информацией пиры могут подключиться через медиасервер и начать общение.
Обратите внимание, что нам по-прежнему нужен сервер сигнализации для обмена сообщениями и сервер STUN или TURN для обхода NAT. Кроме того, мы добавили медиа-сервер для направления потоков на различные узлы.
Наше приложение включает в себя экран входа в систему, где пользователь вводит имя и номер комнаты, в которую он хочет присоединиться и поговорить, где он может видеть других участников видеоконференции.
Код этого руководства можно получить в общедоступном каталоге на Github, вы можете клонировать его в свой локальный каталог и использовать напрямую, или вы можете следовать нашей статье, чтобы сделать это шаг за шагом. Если вы выберете последнее, загрузите adapter.js и kurento-utils.min.js, которые мы будем использовать позже.
Мы используем JavaScript в качестве языка программирования и Node.js в качестве механизма выполнения, поэтому, если у вас нет узла, вам нужноУстановитьЭто. Мы также будем использовать Docker для локального запуска медиа-сервера.
Начнем с создания новой папки, это будет папка проекта.
Затем создайте внутри папку с именем public, а теперь скопируйте туда загруженную библиотеку. С помощью командной строки перейдите в папку проекта и введите следующие команды для установки необходимой среды. Для загрузки библиотеки требуется подключение к Интернету.
Кроме того, запустите медиа-сервер и введите следующую команду в командной строке.
Для начала нам нужно создать html-файл, содержащий два div, один для входа в систему и один для фактического общения. Аналогичным образом мы добавляем библиотеку kurento-utils, для которой требуются файлы adapter.js, клиентской библиотеки socket.io и client.js.
Используя ваш любимый текстовый редактор, создайте новую папку, вставьте следующий код и сохраните его в папке проекта, назовите его index.html в общей папке.
Отлично, теперь давайте создадим клиентский JS-файл. Мы начинаем с получения ссылки на веб-элемент и объявления переменных для имени пользователя и номера комнаты клиента.Нам также нужно объявить переменную для хранения списка участников собрания. Затем, как и в версии приложения «один к одному», мы используем socket.io для подключения к сигнальному серверу и регистрируем событие click для отправки первого сообщения на сервер, которое является сообщением «присоединиться к комнате». . На этот раз вместо прямого использования функции socket.emit() мы используем функцию sendMessage(), которая определена в нижней части файла. Нам также необходимо объявить обработчики для информации о сервере.
С помощью текстового редактора создайте файл client.js и сохраните его в общей папке проекта.
Далее создаем сервер. Сначала мы добавляем необходимые пакеты узлов, затем объявляем пару переменных для хранения ссылки на клиент Kurento и очередь для хранения ледяных кандидатов, полученных до того, как была установлена точка останова Kurento.
Затем установите URL-адрес приложения и сервера Kurento на as_uri и ws_uri. Обратите внимание, что во время выполнения мы минимизируем использование пакетов, чтобы обеспечить поддержку установки этих значений с помощью командной строки.
Затем мы создаем статический хост для общей папки и определяем обработчики событий, полученных через socket.io. Наконец, мы создаем функцию для получения ссылки клиента Kurento с медиасервера и устанавливаем прослушиватель приложения на порт 3000.
Используйте свой любимый текстовый редактор, чтобы создать файл server.js и сохранить его в папке проекта.
Теперь, чтобы продолжить процесс разговора, на стороне сервера, после того, как мы получим отправленную клиентом информацию для присоединения к комнате, мы вызываем функцию joinRoom, которая использует функцию getRoom для управления комнатой.
В функции getRoom при приходе первого клиента мы создаем новую комнату и новый Kurento MediaPipeline, который делится с комнатой и пустым списком участников. Когда приходит другой клиент, нам не нужно создавать новый конвейер, поэтому просто добавьте клиента в комнату.
Вернувшись в функцию joinRoom, после получения комнаты мы создаем точку останова Kurento WebRTC, которая назначается пользователю. Затем, если в очереди есть какой-либо лед-кандидат, он будет добавлен вызовом функции addIceCandidate точки останова, а затем мы создадим событие onIceCandidate.
Отправляя две части информации, функция заканчивается: сообщение для других пользователей в комнате, чтобы сообщить им о новых участниках, это еще одна информация для информирования пользователя нынешних участников в настоящее время существуют. К функции Server.js следующим образом.
На стороне клиента две функции управляют событиями newParticipantArrived и existingParticipants, отправляемыми сервером, — это функции ReceiveVideo и onExistingParticipants.
В функции onNewParticipants нам сначала нужно создать элемент видео для отображения потока и создать пользователя в качестве текущего участника. Пользовательский объект будет хранить только что созданный элемент видео и поле rtcPeer.
После сохранения объекта пользователя в глобальном массиве участников мы реализуем объект API Kurento, назначаем его в поле rtcPeer и готовим запрос на запуск процесса отправки. Завершите функцию, вызвав функцию receiveVideo.
Каждая функция имеет свои собственные внутренние функции для событий onOffer и onIceCandidate, события запускаются объектом rtcPeer, и когда они готовы, они отвечают за отправку фактического запроса и ледяных кандидатов на сервер, отправку информации о receiveVideoFrom и кандидате. Добавьте следующий код в client.js.
На данный момент мы завершили первый шаг и начали процесс отправки писем.
На стороне сервера события ReceiveVideoFrom и кандидаты обрабатываются функциями ReceiveVideoFrom и addIceCandidate. Третья функция под названием getEndpointForUser также используется для восстановления контрольных точек Kurento WebRTC, связанных с каждым пользователем.
Функция recomevideofrom очень проста, когда она получает соответствующую точку останова, она обрабатывает запрос, генерирует ответ, отправляет его клиенту и начинает собирать кандидаты льда. Точно так же, что функция AddicecanDidate принимает кандидат на льду и добавляет его к Соответствующая точка останова нажмите. GetEntPointForUser получает правильную точку останова, чтобы получить видео. Добавьте следующий код на Server.js.
Затем на стороне клиента нам нужно обработать события ReceiveVideoAnswer и кандидаты, отправленные сервером, что делается с помощью функций onReceiveVideoAnswer и addIceCandidate. Добавьте их в файл client.js.
Используя приведенный выше код, мы завершили процесс отправки, и шаг 2 завершен.
Когда мы используем библиотеку kurento-utils на стороне клиента, клиенту не нужно выполнять никаких дополнительных действий. Таким образом, шаг 3 выполняется автоматически.
Теперь пришло время запустить приложение, в командной строке перейдите в папку проекта и введите следующую команду
node server.js
Затем с помощью Google Chrome или Mozilla Firefox откройте http://localhost:3000 в трех или более вкладках, введите другое имя участника и тот же номер комнаты и нажмите Enter.