Пошаговое руководство о том, как создавать видеозвонки в приложении с помощью SDK для JavaScript-вызовов Sendbird.

Алекс Орр
Инженер по решениям | Sentbird

Возможно, вам будет полезно ознакомиться с примером кода Sendbird Calls. Если вам нужны дополнительные рекомендации, прочтите нашу документацию. Дополнительную информацию о Sendbird Calls см. на этой странице.

На нашем портале для разработчиков вы можете найти множество руководств по сборке с помощью Sendbird. Ознакомьтесь с нашими руководствами по созданию чата и звонков в приложении для iOS, Android, JavaScript и других устройств!

Введение

Это руководство, состоящее из двух частей, по созданию видеозвонков в приложении на JavaScript. Часть 1 показывает, как настроить вызовы в Sendbird, а вторая часть показывает, как вы можете реализовать функцию совместного использования экрана с минимальными изменениями в вашей реализации.

Шаг 1: Создайте учетную запись Sendbird

1. Зарегистрируйтесь для получения бесплатной учетной записи Sendbird.
2. Создайте учетную запись, используя свой адрес электронной почты, или выберите Продолжить с Google.
3. Настройте свою организацию, введя Название организации и Номер телефона.
4. Создайте новое приложение Чат + Звонки в регионе, ближайшем к вашему региону.

В левой части экрана вы должны увидеть меню «Вызовы». Зайдите в «Студию» и создайте нового пользователя «телефонной будки».

Определите идентификатор пользователя, которому следует позвонить. Идентификатор модератора будет 789298.

Шаг 2. Создайте новый проект

Начнем с создания пустой папки и добавления следующих файлов:

  • Index.html
  • index.js

Индекс.html

Этот файл содержит два раздела:

Раздел «Вход»: здесь вы вводите свой идентификатор приложения Sendbird и информацию о пользователе.
Раздел «Видео»: после подключения появятся два видеоэлемента, с другими кнопками, такими как «Позвонить», «Завершить вызов», «Позвонить пользователю» и «Остановить общий доступ».

Импорт библиотеки

Единственная библиотека, используемая для этого проекта, — sendbird-calls. Я буду импортировать его с помощью NPM.

Я создам файл package.json по умолчанию, выполнив следующую команду: npm init -y.

Это создаст новый файл в вашей папке. Затем загрузите Sendbird Calls и запустите:

npm install sendbird-calls

Дождитесь загрузки. Затем вы должны увидеть что-то подобное ниже для вашего файла package.json.

Обратите внимание, что эта версия для вашей библиотеки Sendbird (1.5.4) может быть выше.

Откройте файл index.html и включите эту библиотеку:

При желании я включу Bootstrap для некоторых стилей. Обратите внимание, что это не требуется.

Часть 3: Создание пользовательского интерфейса

Связь

Внутри тега вашего файла index.html добавьте элементы для ввода вашего идентификатора приложения Sendbird, идентификатора пользователя (и токена доступа, если необходимо). Добавьте кнопку Подключить для вызова нашей функции в Javascript.

Вы можете быстро запустить это в своем браузере несколькими способами. Плагин Live Server — это один из способов упростить это, если вы используете VSCode. Если вы откроете это в браузере, вы сможете увидеть следующие результаты:

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

Если вы запустите это в браузере, вы должны увидеть что-то вроде этого:

Кнопки не видны, как видите. Я применю логин внутри файла index.js, чтобы показать их в нужный момент. Давайте скроем их все, кроме «Позвонить». Проверьте, применяется ли дополнительный style=”display:none”.

Замените код сверху на этот новый:

Если вы обновите свой браузер, вы должны увидеть что-то вроде этого:

Это все, что вам нужно для части представления. Давайте теперь перейдем к коду Javascript. Создайте файл index.js в той же папке.

Внутри файла index.html, прямо перед закрывающим тегом, добавьте следующую строку:

Часть 4: Реализация

Index.js

Этот файл содержит всю логику Javascript для подключения к Sendbird, совершения, приема и завершения вызова. Он также содержит логику для совместного использования экрана.

Глобальная переменная

У нас будет одна глобальная переменная с именем currentCall. Он будет удерживать текущий вызов после его установления.

Подключиться к Sendbird

Далее создайте функцию для подключения к Sendbird.

  1. Init Sendbird Calls и подтвердите свой идентификатор приложения.
  2. Запросите разрешение браузера на передачу аудио и видео. Всплывающее окно будет отображаться для пользователей. Они должны это одобрить.
  3. Авторизуйте пользователя на платформе Sendbird.

Запрос разрешения браузера — это простой вызов:

Авторизация пользователя с помощью Sendbird имеет решающее значение для его проверки в нашей базе данных:

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

Теперь вы можете звонить и принимать звонки!

Звонок

Перед демонстрацией экрана вам необходимо установить соединение. Для этого добавим следующую функцию:

  1. Мы используем функцию приглашения, чтобы задать пользователю user_id, который мы хотим вызвать. Он встроен в Javascript, и вы можете использовать свою собственную реализацию.
  2. Когда у нас есть пункт назначения user_id, мы можем установить параметры набора номера. (Обратите внимание, что вы должны определить, какие элементы видео вы будете использовать для своего звонка.)
  3. Далее делаем вызов, т.е. с SendbirdCall.dial, и отправляем эти параметры на сервер.
  4. Созданы некоторые функции слушателя:
    а) onEstablished: Он запускает вашу логику, когда установлен вызов с удаленным пользователем.
    б) onConnected: Он запускает вашу логику, когда вызов соединен (еще не установлен) с удаленным пользователем.
    c) onEnded: запускается ваша логика, когда вызов завершается.
    d) onRemoteAudioSettingChanged: запускается ваша логика, когда удаленный пользователь меняет настройки звука.
    e) onRemoteVideoSettingChanged : Он запускает вашу логику, когда удаленный пользователь меняет свои настройки видео.

Чтобы получить дополнительную информацию, ознакомьтесь с нашей официальной документацией.

Проверить вызов

Чтобы проверить вызов, вы можете использовать панель управления Sendbird. Из студии звонков у вас есть возможность открыть телефонную будку и позвонить модератору. Идентификатор пользователя для модераторов обычно представляет собой число. Здесь мой идентификатор модератора: 789298.

Прием вызова

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

Обновите свою функцию waitForCalls() { … }:

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

  • onRinging: вызывается при приеме вызова, который еще не принят.
  • onConnected: вызывается, когда принимается вызов.
  • onEstablished: вызывается, когда вызов принят обеими сторонами.
  • onEnded: вызывается, когда вызов завершается по какой-либо причине.

Заключение

Это все, что нужно! Поздравляем с первым звонком! В этом руководстве описано, как создать новое приложение на панели инструментов, создать пользователей и создать пример приложения, способного совершать и принимать видеозвонки.

Как упоминалось в начале, это руководство состоит из двух частей; ознакомьтесь с нашим следующим разделом, в котором показано как реализовать демонстрацию экрана!

Удачных звонков! 👨‍💻

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

Ресурсы и полезные ссылки

  1. Портал для разработчиков
  2. JavaScript документы
  3. Подробности о Sendbird Calls
  4. Пример кода на GitHub

Дополнительные материалы на PlainEnglish.io. Подпишитесь на нашу бесплатную еженедельную рассылку новостей. Подпишитесь на нас в Twitter и LinkedIn. Присоединяйтесь к нашему сообществу Discord.