Создание веб-приложения для группового видеочата

Привет всем, сегодня я хочу рассказать, как создать простое веб-приложение для группового видеочата, очень похожее на Google Hangouts, Skype или любую другую платформу для видеочата, которую вы предпочитаете. Учитывая сегодняшнюю фрагментированную среду JS, я хотел написать это руководство, используя самые базовые версии HTML, CSS и JS. Прежде чем вы это скажете, я знаю, что знаю, что JQuery не является ванильным JS, но Vanilla JS может быть немного многословным для определенных задач DOM. Я решил использовать JQuery, чтобы упростить некоторые вещи. Мы собираемся срезать несколько углов и использовать Bootstrap, чтобы не беспокоиться о написании слишком большого количества пользовательского CSS.

Для толпы TL; DR: ознакомьтесь с демонстрацией кода в действии на страницах GitHub.

Обновлено: 4 июня 2020 г.
Эта публикация и проект были обновлены для использования последней версии веб-SDK Agora.io (v3.1.1)

Предпосылки

• Простой веб-сервер - мне нравится использовать Живой сервер
• Сертификат SSL или способ установить соединение https (я использую ngrok)
• Учетная запись разработчика Agora - зарегистрируйтесь здесь
• Понимание HTML / CSS / JS
• Понимание того, как работают Bootstrap и JQuery
  (необходимы минимальные знания)

Основная структура (HTML)

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

Добавление в CSS и JS

Теперь, когда у нас есть база, мы можем начать расширяться. Используя Bootstrap для нашего CSS, мы можем быстро стилизовать наш html с помощью нескольких простых классов. В приведенном выше коде давайте добавим CSS-ссылки _ (показано ниже) _ в код, где мы видим блок комментариев <!-- CSS includes go here -->.

Хотя Boostrap хорош, но не является целостным решением, поэтому я добавил несколько дополнительных блоков CSS в собственный файл CSS (мы вернемся к этому чуть позже). Это поможет настроить несколько элементов, которые мы не сможем получить идеально сразу с помощью Bootstrap. Я также добавил CSS-фреймворк Font Awesome, потому что нам нужно будет включить значки для различных кнопок, а FA делает это действительно простым.

Как я уже упоминал, Bootstrap - это здорово, но иногда вам все же нужно немного собственного CSS. Вот блоки стиля для упомянутого выше style.css.

Добавление элементов пользовательского интерфейса

Теперь давайте добавим несколько кнопок для управления переключением микрофона, видео или выходом из канала и завершим последние оставшиеся части нашего пользовательского интерфейса. Именно здесь font awesome и bootstrap действительно упрощают работу. Мы будем использовать элемент <button /> и несколько значков FontAwesome.

Разделы ниже соответствуют приведенному выше коду, заменяя комментарии
<!-- insert button to share screen --> и
<!-- insert buttons to toggle audio/video and leave/end call -->

Нам нужно добавить JS для управления кнопками. JQuery действительно поможет нам здесь, упростив код для различных операций DOM, что позволит пользовательскому интерфейсу чувствовать себя динамичным для пользователя.

Как видите, для управления клавиатурой добавлена ​​некоторая логика. Во время тестирования я обнаружил, что сочетания клавиш ускоряют работу. В приведенном выше фрагменте у нас есть поддержка m, v, s, q для переключения микрофона, видео и демонстрации экрана, а также для выхода из вызова (соответственно).

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

<script src="ui.js"></script>

Базовая структура (JS)

Теперь, когда мы разработали структуру HTML / DOM, мы можем добавить JS. Я решил использовать Agora.io, чтобы упростить тяжелую задачу интерфейса WebRTC. Я написал короткий пост о том, как настроить Agora.io для всех, кто плохо знаком с платформой Agora.io. В приведенном ниже коде мы начинаем с объявления и инициализации объекта Client. Когда у нас есть объект Client, мы можем присоединиться к каналу или покинуть его, но также мы добавим слушателей для различных событий движка.

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

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

Для получения дополнительной информации об аутентификации на основе токенов на платформе Agora, пожалуйста, обратитесь к этому руководству: https://bit.ly/3sNiFRs

Следует отметить, что все прослушиватели событий Agora.io SDK должны быть на верхнем уровне, пожалуйста, не делайте ошибки, вкладывая их в обратный вызов присоединения к каналу. Я допустил эту ошибку, и из-за этого у меня был доступ только к тем потокам, которые присоединились к каналу после меня.

Как вы можете видеть в приведенном выше коде, у нас есть обратный вызов ‘stream-added’, именно здесь мы добавим логику для обработки настройки первого удаленного потока на полноэкранное видео и каждого последующего потока в новый контейнер div в div удаленных потоков, который будет предоставьте нам групповую функциональность, выходящую за рамки простого видео 1 к 1. Ниже приведена функция, которую мы будем вызывать каждый раз, когда добавляется новый удаленный поток, и мы хотим, чтобы он динамически добавлялся в DOM.

И последнее примечание к этому разделу: у нас есть кнопки, которые переключают микрофонный и видеопотоки, но нам нужно предоставить обратную связь удаленным пользователям, подписавшимся на отключенные потоки. Не волнуйтесь, SDK Agora предоставляет некоторые функции обратного вызова специально для таких ситуаций. Выше вы можете видеть, что эти случаи обрабатываются такими событиями, как mute-audio или mute-video (, а также их инверсии для включения соответствующих потоков).

Улучшение пользовательского интерфейса за счет обработки удаленных потоковых действий

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

Новые div будут содержать некоторые значки Font Awesome, которые мы можем скрыть / показать всякий раз, когда обратные вызовы событий выполняются для локального и соответствующих удаленных потоков. Теперь, когда у нас есть имена для наших элементов, мы можем легко управлять ими в наших слушателях событий.

Больше излишеств

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

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

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

Собираем все вместе

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

Обратите внимание: в Safari добавлена ​​поддержка обмена видео, но вы должны убедиться, что создание потока происходит в on-click событии.

Давайте поместим наши JS-файлы на нашу html-страницу, чтобы установить последние соединения. Приведенный ниже фрагмент вписывается в основной html (см. Выше), заменяя комментарий <!-- JS Includes go here --> фрагментом, приведенным ниже.

Настройка тестирования (веб-сервер / https)

Поскольку разрешения камеры требуют безопасного (https) соединения, прежде чем мы сможем протестировать наше приложение для видеочата, мы должны запустить простой веб-сервер с https подключением. Браузеры занесли localhost в белый список, поэтому мы можем использовать это для проверки.

Если вы хотите протестировать это с друзьями, вы можете запустить его локально вместе с ngrok, это бесплатный сервис, который создает этот туннель с вашего локального компьютера и предоставляет https URL-адрес для использования. По моему опыту, это один из самых простых способов запустить https защищенный веб-сервер на вашем локальном компьютере.

Когда сервер будет готов, мы можем запустить наш тест.

ПРИМЕЧАНИЕ. для тестирования мы будем использовать две (или более) вкладки браузера для имитации локального хоста и одного / нескольких удаленных хостов.

Плавник.

И вот так все! Если вы не занимались программированием или хотите увидеть готовый продукт целиком, я загрузил весь код на GitHub.

Если вы хотите увидеть демонстрацию в действии, посмотрите демонстрацию кода в действии на страницах GitHub:

Обратите внимание: в связи с большим спросом я обновил сборку, поэтому вам нужно будет зарегистрировать бесплатную учетную запись Agora.io, чтобы получить AppId для тестирования демо. Если вам нужна помощь, у меня есть быстрое трехшаговое руководство.

В приведенном выше коде значения идентификатора приложения, имени канала, токена и UID жестко заданы в файле agora-interface.js. Но в базовом проекте я с тех пор обновил код, включив форму ввода для ввода идентификатора приложения, токена, uid и имени канала.

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

Проверка подлинности с помощью токена рекомендуется для всех приложений RTE, работающих в производственных средах. Для получения дополнительной информации об аутентификации на основе токенов на платформе Agora, пожалуйста, обратитесь к этому руководству: https://bit.ly/3sNiFRs

Если вам понравился этот пост, я бы порекомендовал мой Как создать веб-приложение для прямой трансляции, в котором мы создадим клон YouTube Live с несколькими дополнительными функциями.

Спасибо, что нашли время, чтобы прочитать мое руководство, и если у вас есть какие-либо вопросы, я приглашаю вас присоединиться к сообществу разработчиков Agora Developer Slack. Если вы видите какие-либо возможности для улучшения, не стесняйтесь форкнуть репо и сделать запрос на перенос!