Русские Блоги
В этой статье будет подробно рассказано, как создать простой проект и использовать Agora Web SDK для реализации базовых индивидуальных видеозвонков.
Из-за того, что политика безопасности браузера ограничивает HTTP-адреса, отличные от 127.0.0.1, Agora Web SDK поддерживает только протокол HTTPS или http: // localhost (http://127.0.0.1), пожалуйста, не используйте протокол HTTP для развертывания вашего проект.
Демо-опыт
Мы предоставляем на GitHub базовый пример проекта видеовызова с открытым исходным кодом. Вы можете испытать эффект аудио- и видеозвонка в этом примере проекта до начала разработки.
Условия развития
1. Установите браузер, поддерживаемый Agora Web SDK, как показано в следующей таблице:
2. Получите действующую учетную запись Agora. Чтобы
Примечание. Если в вашей сетевой среде развернут брандмауэр, откройте соответствующие порты в соответствии с разделом «Применение ограничений корпоративного брандмауэра» в Центре документации Shengwang.
Настроить среду разработки
Вам необходимо подготовить собственный проект и интегрировать в него Agora Web SDK.
Создать веб-проект
Если у вас уже есть веб-проект, пропустите этот раздел и прочтите сразу Интегрированный SDK 。
В предоставленном нами примере кода используются файлы сторонних библиотек для реализации стиля и макета страницы. Вы можете посетить адрес Github в начале этой статьи, получить следующие файлы в папке vendor или использовать другие методы для его реализации.
Ниже приводится пример:
Для этого проекта требуется только один файл HTML.
1. Создайте новый файл HTML. Здесь мы называем файл index.html (далее — файл проекта).
2. Откройте файл с помощью редактора кода (например, VS Code).
3. Скопируйте следующий код и вставьте его в файл проекта.
На этом шаге будет создан пользовательский интерфейс интерфейсной страницы для вашего проекта. Здесь мы напрямую используем код из примера проекта Agora, вы также можете настроить свой пользовательский интерфейс.
Интегрированный SDK
Выберите любой из следующих способов для получения Agora Web SDK:
Метод 1. Используйте npm для получения SDK
1. Запустите команду установки
2. Добавьте строку в код Javascript вашего проекта:
Метод 2: используйте метод CDN для получения SDK
Этот метод не требует загрузки установочного пакета. В файле проекта добавьте следующий код в <style> предыдущая строка:
Метод 3: получите SDK с официального сайта
1. Загрузите последнюю версию программного пакета Agora Web SDK.
2. В скачанном программном пакете AgoraRTCSDK-3.0.0.js Файл сохраняется в каталоге, в котором находится файл проекта.
3. В файле проекта добавьте следующий код в <style> предыдущая строка:
Для удобства здесь мы выбрали второй способ и напрямую используем ссылку CDN.
Теперь мы интегрировали в проект Agora Web SDK. Затем нам нужно реализовать основные функции аудио- и видеозвонков, вызвав базовый API, предоставляемый Agora Web SDK.
Осуществляйте аудио и видео звонки
Далее мы расскажем, как использовать Agora Web SDK для реализации аудио- и видеозвонков.
При использовании Agora Web SDK вы часто будете использовать следующие два объекта:
Объект Client представляет локального клиента. Методы класса Client обеспечивают основные функции аудио- и видеозвонков, такие как присоединение к каналам и публикация аудио- и видеопотоков.
Объект Stream представляет локальные и удаленные аудио- и видеопотоки. Методы класса Stream используются для определения поведения объектов аудио- и видеопотоков, таких как управление воспроизведением потока, конфигурация кодирования аудио и видео и т. Д. При вызове метода Stream обратите внимание на различие между локальным потоком и удаленными объектами потока.
На рисунке ниже показан базовый индивидуальный вызов API для аудио- и видеовызовов. Обратите внимание, что методы на рисунке вызываются для разных объектов.
Примечание. В этой статье представлены только самые основные методы и обратные вызовы Agora Web SDK. Полные методы API и обратные вызовы см. В Справочнике по веб-API Центра документации Shengwang.
Для удобства мы определили две переменные для примера кода, который будет использоваться ниже. В этом шаге нет необходимости, у вас могут быть другие реализации в соответствии с вашим проектом.
Присоединяйтесь к каналу
1. Перед присоединением к каналу нам необходимо создать и инициализировать клиентский объект.
В AgoraRTC.createClient В методе обратите внимание на mode с участием codec Настройки этих двух параметров:
mode Используется для установки режима канала. Во время индивидуального или многостороннего разговора рекомендуется установить "rtc" Использовать режим связи; при интерактивной прямой трансляции рекомендуется установить "live" , Воспользуйтесь живым режимом.
codec Он используется для установки формата кодека, используемого браузером. Если вам нужно использовать Safari 12.1 и более ранние версии, установите для этого параметра значение "h264" ; Если вам нужно использовать Agora Web SDK на своем мобильном телефоне, обратитесь к странице «Использование веб-SDK на мобильном телефоне» в Центре документации Shengwang.
На этом этапе вам необходимо ввести идентификатор приложения проекта. Выполните следующие действия, чтобы создать проект Agora на консоли и получить идентификатор приложения:
а. Войдите в консоль и нажмите левую панель навигации. Управление проектом Значок 
。
б. Щелкните Создайте , Следуя инструкциям на экране, задайте имя проекта, выберите механизм аутентификации и нажмите Отправить 。
c. в Управление проектом Пейдж, вы можете получить App ID 。
Чтобы упростить демонстрацию, в нашем примере проекта на веб-странице создается текстовое поле для ввода идентификатора приложения. В реальных приложениях идентификатор приложения следует указывать в коде.
2. В Client.init из onSuccess Вызывается при обратном вызове Client.join Присоединяйтесь к каналу.
В Client.join Обратите внимание на настройки следующих параметров:
Дополнительные сведения о настройке параметров см. Client.join Описание параметра в интерфейсе.
В тестовой среде мы рекомендуем использовать консоль для создания временных токенов, подробности см. В разделе Получение временных токенов.
В производственной среде мы рекомендуем вам сгенерировать токен на своем собственном сервере. Подробнее см. Создание токена.
token : Этот параметр необязательный. Если в вашем проекте Agora включен сертификат приложения, вам необходимо передать токен в этом параметре.
channel : Имя канала, строка длиной 64 байта или меньше.
uid : User ID, UID каждого пользователя в канале должен быть уникальным. Если вы будете uid Установить как null , Agora автоматически назначит UID и onSuccess Обратный звонок.
Опубликовать локальный поток
1. в Client.join из onSuccess Вызывается при обратном вызове AgoraRTC.createStream Метод создания локального аудио и видео потока.
При создании потока установите audio с участием video Параметр для управления публикацией аудио и видео.
2. Позвоните Stream.init Метод инициализирует созданный поток.
При инициализации потока в браузере появится всплывающее окно с запросом разрешений для камеры и микрофона. Убедитесь, что вы авторизованы.
3. На Stream.init из onSuccess Вызывается при обратном вызове Client.publish Метод, опубликуйте локальный поток.
Подпишитесь на удаленный поток
Когда удаленный поток присоединяется к каналу, он запускает stream-added Событие, которое нам нужно пройти Client.on Наблюдайте за событием и подпишитесь на вновь добавленный удаленный поток в обратном вызове.
Мы рекомендуем слушать события сразу после создания клиентского объекта.
1. Мониторинг "stream-added" Событие, когда присоединяется удаленный поток, подписывается на поток.
2. Мониторинг "stream-subscribed" Событие, проиграйте удаленный поток после успешной подписки.
На это влияет политика браузера в браузерах Chrome 70+ и Safari, Stream.play Метод должен запускаться жестами пользователя. Подробнее см. В разделе «Изменения политики автозапуска».
3. Мониторинг "stream-removed" Событие, когда удаленный поток удален (например, удаленный пользователь вызывает Stream.unpublish ), прекратите воспроизведение потока и удалите его изображение.
Мы рекомендуем прислушиваться к событиям сразу после создания клиентского объекта.
Вам необходимо самостоятельно реализовать функции addView и removeView, вы можете обратиться к нашему образцу проекта: http://dwz.date/uwr
Покинуть канал
перевод Client.leave Способ покинуть канал.
Запустите ваше приложение
Затем возьмите наш образец проекта в качестве примера, чтобы проиллюстрировать, как запустить и протестировать ваше веб-приложение.
Мы рекомендуем протестировать ваше приложение на локальном веб-сервере. Здесь мы используем live-сервер npm для настройки локального сервера.
Запуск веб-приложения на локальном сервере (localhost) предназначен только для тестирования. При развертывании производственной среды обязательно используйте протокол HTTPS.
1. Установите live-сервер.
2. Введите каталог, в котором находится ваш проект, в командной строке. В нашем примере проекта каталог находится по адресу /Basic-Video-Call/One-to-One-Video/Agora-Web-Tutorial-1to1 。
3. Запустите приложение.
Теперь ваш браузер должен автоматически открывать страницу вашего веб-приложения.
4. Введите свой идентификатор приложения, имя канала, токен и нажмите JOIN Начни звонок.
Возможно, вам потребуется предоставить браузеру разрешения для камеры и микрофона. Если вы открыли видео при создании локального потока, теперь вы должны увидеть свой собственный видеоэкран.
5. Откройте другую страницу в браузере и введите тот же URL-адрес. Нажмите JOIN Кнопка. Теперь вы должны увидеть два видеоэкрана.
Если страница не работает нормально, вы можете открыть консоль браузера, чтобы просмотреть сообщение об ошибке для устранения неполадок. Общие сообщения об ошибках включают:
INVALID_VENDOR_KEY : ID приложения неправильный, проверьте введенный вами ID приложения.
ERR_DYNAMIC_USE_STATIC_KE : Ваш проект Agora активировал сертификат приложения. Вам необходимо ввести токен при присоединении к каналу.
Media access:NotFoundError : Проверьте, правильно ли работают ваша камера и микрофон.
MEDIA_NOT_SUPPORT : Используйте протокол HTTPS или локальный хост.
Примечание. Agora Web SDK не поддерживает имитацию отладки мобильного устройства в браузере.
Если у вас возникнут проблемы во время разработки, вы можете посетить сообщество разработчиков RTC, чтобы задать вопросы.
Интеллектуальная рекомендация
Реализация JavaScript Hashtable
причина Недавно я смотрю на «Структуру данных и алгоритм — JavaScript», затем перейдите в NPMJS.ORG для поиска, я хочу найти подходящую ссылку на библиотеку и записывать его, я могу исполь.
MySQL общие операции
jdbc Транзакция: транзакция, truncate SQL заявление Transaction 100 000 хранимая процедура mysql msyql> -определить новый терминатор,Пробелов нет mysql>delimiter // mysql> -создание хранимой .
Используйте Ansible для установки и развертывания TiDB
жизненный опыт TiDB — это распределенная база данных. Настраивать и устанавливать службы на нескольких узлах по отдельности довольно сложно. Чтобы упростить работу и облегчить управление, рекомендуетс.
Последняя версия в 2019 году: использование nvm под Windows для переключения между несколькими версиями Node.js.
С использованием различных интерфейсных сред вы можете переключаться между разными версиями в любое время для разработки. Например, развитие 2018 года основано наNode.js 7x версия разработана. Тебе эт.
Шаблон проектирования — Создать тип — Заводской шаблон
Заводская модель фабрикиPattern Решать проблему: Решен вопрос, какой интерфейс использовать принципСоздайте интерфейс объекта, класс фабрики которого реализуется его подклассом, чтобы процесс создания.
Как: Создать приложение для видеочата на Android
В этом руководстве мы создадим базовое приложение для видеочата за 10 простых шагов, используя Agora.io Видео SDK для… С тегами android, java, agora io.
- Автор записи
В этом руководстве мы создадим базовое приложение для видеочата за 10 простых шагов, используя Agora.io Video SDK для Android.
Обновлено: 24 мая 2021 г. Этот учебник и проект были обновлены для использования версии v3.4.1 Agora Video для Android SDK
Предпосылки
Шаг 1: Agora.io Счет
Как только вы завершите процесс регистрации, вы будете перенаправлены на панель мониторинга. Откройте вкладку “Проекты” на левой панели навигации, чтобы увидеть идентификатор приложения вашего проекта по умолчанию.
Шаг 2: Создайте приложение для Android
В Android Studio создайте новое приложение с одним действием.
Шаг 3: Интеграция Agora SDK
Есть два способа добавить Agora Video SDK в ваш проект. Вы можете использовать Центр или вы можете вручную добавить SDK. Для этого проекта мы добавим проект с помощью Center.
Добавьте следующую строку в свой уровень проекта build.gradle :
Добавьте следующую строку в файл /app/build.gradle вашего проекта:
Настройка идентификатора ПРИЛОЖЕНИЯ Agora ###
Далее, пришло время добавить свой Agora.io Идентификатор приложения (см. Шаг 1) в проекта Android Strings.xml (app/src/main/res/values/Strings.xml ) .
Следующим шагом будет добавление соответствующих разрешений в Manifest.xml
Последний шаг – предотвратить запутывание классов Agora, хотя это может показаться сложным, на самом деле все просто. В proguard-rules.pro файл, добавить:
записка: Убедитесь, что плагин Android NDK установлен и настроен для этого проекта
Шаг 4: Настройка Просмотры
Теперь, когда у нас есть Agora.io SDK интегрирован, давайте настроим наш пользовательский интерфейс. Я пройдусь по этой части, поскольку мы будем использовать стандартные элементы пользовательского интерфейса.
В приведенном примере я решил использовать ImageView вместо Button для различных элементов пользовательского интерфейса. Либо работает, важно отметить, что существуют функции, на которые мы ссылаемся с помощью свойства onClick .
Шаг 5: Проверка разрешений
Я знаю, о чем вы, должно быть, думаете… “Разве мы уже не настроили разрешения?” Ранее мы сообщали Манифесту приложений, какие разрешения планирует использовать наше приложение, но мы все равно должны явно запросить у пользователя предоставление этих разрешений. Не волнуйтесь, это последний шаг в запуске шаблонного проекта, и он проходит безболезненно.
Во-первых, давайте объявим, какие разрешения мы хотим запросить.
Далее мы настроим пару функций, которые помогут нам. Сначала мы добавим метод, который будет запрашивать разрешения для заданной строки разрешений и кода.
Далее у нас есть метод обратного вызова, который будет вызван после того, как пользователь ответит на запрос запроса разрешений.
Наконец, в onCreate нашего класса мы проверяем, были ли предоставлены ваши разрешения, и если нет, то вышеуказанные методы будут обрабатывать запросы.
Шаг 6: Инициализация Agora.io SDK
Теперь, когда у нас есть свое мнение, мы готовы инициализировать Agora.io SDK, настройте профиль пользователя и установите настройки качества видео.
На предыдущем шаге вы, возможно, заметили, что есть пара мест, которые я вызываю initAgoraEngine() . Прежде чем мы сможем погрузиться в инициализацию, нам нужно убедиться, что наша активность имеет доступ к экземпляру Agora.io Двигатель Rtc .
В рамках нашей Основной деятельности Класс, нам нужно объявить свойство класса для хранения нашего экземпляра Rtc Engine.
Теперь пришло время для инициализации! После всех стандартных настроек мы, наконец, подошли к тому этапу, на котором мы можем начать играть с Agora.io двигатель!
Идите дальше и объявите свой метод initAgoraEngine внутри вашего класса. В рамках этой функции мы создадим новый экземпляр Rtc Engine , используя базовый контекст, Agora AppID ((((объявленный выше) и экземпляр RtcEngineEventHandler (мы вернемся к этому немного позже) .
Как только у нас появится наш новый экземпляр, пришло время настроить сеанс нашего пользователя. Здесь мы можем настроить профиль канала на Общение, так как это видеочат, а не трансляция. Здесь же мы настраиваем настройки нашего видеокодера.
Шаг 7: Подключение видеопотоков
Прежде чем мы сможем присоединиться к вызову просмотра, нам нужно иметь возможность представить локальный видеопоток пользователю с помощью элементов пользовательского интерфейса, которые мы настроили ранее (Шаг 4) .
В первой строке мы получаем ссылку на элемент пользовательского интерфейса, который будет выступать в качестве нашего родительского представления для нашего видеопотока. Второй шаг заключается в использовании Rtc Engine для создания SurfaceView , который будет отображать поток с фронтальной камеры, мы также устанавливаем новую VideoSurface для отображения поверх ее родительского вида. Следующим шагом будет добавление Video Surface в качестве подвида элемента пользовательского интерфейса. Наконец, мы передаем Video Surface движку как часть объекта Video Canvas . Мы оставляем параметр uid пустым, чтобы SDK мог обрабатывать создание динамического идентификатора для каждого пользователя.
Теперь, когда у нас есть настройка локальной видеопотока, нам нужно использовать аналогичную функцию для подключения нашего удаленного видеопотока.
Основное отличие удаленного видео от локального заключается в параметре user id , который передается движку как часть объекта VideoCanvas , который передается движку. Последняя строка устанавливает резервную опцию на случай ухудшения качества видео, движок вернется только к аудио.
Шаг 8: Настройка обработчика событий SDK
Ранее я сделал ссылку на обработчик событий Rtc Engine , и теперь пришло время объявить его как свойство нашего MainActivity Класс. Движок будет вызывать эти методы из обработчика событий Rtc Engine/| .
Каждое событие запускает несколько довольно простых функций, включая ту, которую мы написали на предыдущем шаге. В интересах сохранения этой краткости я приведу приведенный ниже код, но не буду давать подробную разбивку.
Шаг 9: Присоединение к каналам и выход из них
Я знаю, о чем ты думаешь, ШАГ 9. Не волнуйтесь, следующие два шага действительно просты. Давайте начнем с присоединения к вызову…
Ниже вы можете видеть из первой строки, Agora SDK упрощает это, движок вызывает join Channel, передавая название канала, за которым следует вызов для настройки нашего локального видеопотока. (Шаг 7)
Покинуть канал еще проще, движок вызывает команду покинуть канал. Выше вы заметите, что есть несколько строк для удаления вложенных просмотров видеопотока из каждого элемента пользовательского интерфейса.
Шаг 10: Добавление функциональности пользовательского интерфейса
Последние оставшиеся части связаны с подключением элементов пользовательского интерфейса для переключения микрофона и видеопотока на локальном устройстве. Давайте начнем с переключения звука.
Сначала мы получаем ссылку на нашу кнопку, а затем проверяем, была ли она включена/выключена с помощью IsSelected() . Как только мы обновили состояние элемента пользовательского интерфейса, мы передаем обновленное состояние кнопки движку.
Переходя к переключению видео, как и в случае с переключением звука, мы проверяем/обновляем состояние кнопки с помощью Выбрано() , а затем передаем это движку. Чтобы обеспечить лучшее визуальное представление отключаемого видео, мы скрываем/показываем Поверхность видео .
Agora The Future Of Voice Call
Agora is providing a voice calling platform which provides good audio quality for the users.
This platform supports voice calling in any network and in any devices like mobile phones and desktops. This platform supports one to one voice calling and group calls. The developers have made this platform useful for users to connect easily and clearly at any time and any where they want. Agora provides the best quality audio calling platform for the users.
Agora.io has become the global leader in real-time communication solutions. They have released a SDK known as “Agora React Native SDK” which is an open source developer toolset for adding voice call functionality to the apps using the React Native Framework.
Agora’s software-Defined Real-Time Network is a real time transmission network infrastructure designed for real time communication. This app deploys almost 200 data centers worldwide that use dynamic routing algorithms to achieve millisecond latency.
Features Of Agora
- Very easy to implement
- Provides 3D surround sound experience
- Optimize Anti-packet loss
Let me show you guys an example of how to implement voice call feature in Agora in Android:
Requirements
- Android Studio 3.0 or later
- Android SDK API Level 16 or higher
- A mobile device with Android 4.1 or later
- A valid Agora account
Steps:
- Create an android project in Android Studio.
- Integrate the Agora Voice SDK to your project.
- To integrate the SDK, just add the following line /app/build.gradle file of the project.
…
dependencies <
…
// 3.0.0 is the latest version of the Agora Voice SDK. You can set it to other versions.
implementation ‘io.agora.rtc:voice-sdk:2.9.4'
>
3. Now you must add project permissions for device access according to your needs.
- Add the following permissions to /app/src/main/AndroidManifest.xml
<manifest xmlns:android=”http://schemas.android.com/apk/res/android”
package=”io.agora.tutorials1v1acall”>
<uses-permission android:name=”android.permission.READ_PHONE_STATE” />.
<uses-permission android:name=”android.permission.INTERNET” />
<uses-permission android:name=”android.permission.RECORD_AUDIO” />
<uses-permission android:name=”android.permission.MODIFY_AUDIO_SETTINGS” />
<uses-permission android:name=”android.permission.ACCESS_NETWORK_STATE” />
<uses-permission android:name=”android.permission.BLUETOOTH” />
<uses-permission android:name=”android.permission.ACCESS_WIFI_STATE” />
// Add the following permission if your scenario involves reading the external storage:
<uses-permission android:name=”android.permission.READ_EXTERNAL_STORAGE” />
// For devices running Android 10.0 or later, you also need to add the following permission:
<uses-permission android:name=”android.permission.READ_PRIVILEGED_PHONE_STATE” />
…
</manifest>
Implementing the basic voice call
- Create the user interface (UI) for one-to-one voice call in the layout of your project.
- Now import the following classes in the activity file of your project:
import io.agora.rtc.IRtcEngineEventHandler;
import io.agora.rtc.RtcEngine;
3. Next step is to call the checkSelfPermission method to access the microphone of the Android device.
private static final int PERMISSION_REQ_ID_RECORD_AUDIO = 22;
// Check the microphone access when running the app.
@Override
protected void onCreate(Bundle savedInstanceState) <
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_voice_chat_view);
// Initialize RtcEngine after getting the permission.
if (checkSelfPermission(Manifest.permission.RECORD_AUDIO, PERMISSION_REQ_ID_RECORD_AUDIO)) <
initAgoraEngineAndJoinChannel();
>
>
private void initAgoraEngineAndJoinChannel() <
initializeAgoraEngine();
joinChannel();
>
public boolean checkSelfPermission(String permission, int requestCode) <
Log.i(LOG_TAG, “checkSelfPermission “ + permission + “ “ + requestCode);
if (ContextCompat.checkSelfPermission(this,
permission)
!= PackageManager.PERMISSION_GRANTED) <
ActivityCompat.requestPermissions(this,new String[]
, requestCode);
return false;
>
return true;
>
4. Initializing RtcEngine
- Go to Console and click the Project Management icon.
- Click Create and set the project name, choose an authentication mechanism, and Click Submit.
- On the Project Management page, find the App ID of your project.
- Call the create method and pass in the App ID to initialize the RtcEngine object.
private RtcEngine mRtcEngine;
private final IRtcEngineEventHandler mRtcEventHandler = new IRtcEngineEventHandler() <
// Listen for the onUserOffline callback.
// This callback occurs when the remote user leave the channel or drops offline.
@Override
public void onUserOffline(final int uid, final int reason) <
runOnUiThread(new Runnable() <
@Override
public void run() <
onRemoteUserLeft(uid, reason);
>
>);
>
// Listen for the onUserMuterAudio callback.
// This callback occurs when a remote user stops sending the audio stream.
@Override
public void onUserMuteAudio(final int uid, final boolean muted) <
runOnUiThread(new Runnable() <
@Override
public void run() <
onRemoteUserVoiceMuted(uid, muted);
>
>);
>
>;
// Call the create method to initialize RtcEngine.
private void initializeAgoraEngine() <
try <
mRtcEngine = RtcEngine.create(getBaseContext(), getString(R.string.agora_app_id), mRtcEventHandler);
mRtcEngine.setChannelProfile(Constants.CHANNEL_PROFILE_COMMUNICATION);
> catch (Exception e) <
Log.e(LOG_TAG, Log.getStackTraceString(e));
throw new RuntimeException(“NEED TO check rtc sdk init fatal error\n” + Log.getStackTraceString(e));
>
>
5. After initializing the RtcEngine, can call the joinChannel method to join a channel. In this method, set the following parameters:
private void joinChannel() <
String accessToken = getString(R.string.agora_access_token);
if (TextUtils.equals(accessToken, “”) || TextUtils.equals(accessToken, “#YOUR ACCESS TOKEN#”)) <
accessToken = null; // default, no token
>
mRtcEngine.joinChannel(accessToken, “voiceDemoChannel1", “Extra Optional Data”, 0); // The uid is not specified. The SDK will assign one automatically.
>
6. Call the leaveChannel method to leave the current call.
7. Run the project on your Android device. That’s it. Now you can hear the remote user when you start a one-to-one voice call in the app.
История одной интеграции Agora SDK
Всем привет. Меня зовут Дмитрий, и я типичный представитель касты гребцов на галере X. Основной ЯП, который я использую — PHP, но иногда приходится писать на других.
Предыстория
Как-то пришел очередной, немного не доделанный, проект «убийца» продукта Y. Все бы ничего, если бы его не делали изначально индусы. Первоначальный анализ кода и все оценкой фич занимался другой разработчик. В итоге было решено взять наследие индусов, немного подправить и в прод.
Немного подправить и в продакшн, растянулось где-то на пол года. Все уже к этому времени поняли что лучше бы выбрали вариант — переписать заново, но было уже поздно, а отступать назад не хотелось. В итоге проект выехал live, но был чертовски страшный и неудобный со стороны UI/UX. Поэтому начался плавный редизайн всего и вся. Все что описано выше, было до меня, я пришел на проект только через пол года.
Постановка задачи и начальные условия
Новый спринт, новые тикеты. Одна из задач звучит как: «Редизайн текущего механизма видео/аудио звонков». Для данного функционала мы использовали Agora Web SDK 3.4.0v. Почему именно Agora — потому что ее выбрали индусы (скорее всего из-за 10000 бесплатных минут). Возможно еще подкупило то что есть SDK под различные платформы:
Поехали
Первый делом я глянул последнюю версию Web SDK. Как оказалось — уже вышла абсолютно новая мажорная версия Agora Web SDK 4.x. Ну, если мы все равно полностью редизайним — то почему бы и не взять новую версию и использовать ее. Все равно будет полный прогон со стороны QA, в добавок — поменялся сам флоу созвона. Сказано — сделано, только насторожила запись:
Вроде разговор идет только про несовместимость Web SDK (у нас еще используется React Native SDK для мобильных устройств), но осадок остался.
На новый дизайн и сервер ушло где-то 3 — 4 дня (не люблю верстать, но что поделать). Настало время самого интересного — запуск процесса интервью. В итоге была взята Agora Web SDK 4.4.0. В течение следующего дня получилось сделать всю JS часть для созвона по видео и ауди (со всеми плюшками). За основу был взят пример из их же гитхаба (если что, то в архиве с самой либой лежат похожие примеры интеграции)
Еще через день все было уже на testing энвайронменте. Первые пол дня тестов прошли хорошо, на web портале все более-менее работало. Настало время проверки звонков с разных платформ (один человек с мобильного девайса — второй с сайта).
Первый звоночек
При звонке с мобилы на web, и наоборот — звонок не устанавливается. Проверили на проде тот же кейс — все огонь. Значит что-то пошло не так. Так как код на мобильных девайсах не менялся вообще (на их стороне изначально подумали над дизайном и все продумали) — значит проблема на моей стороне. Первое действие — нужно подписаться на все события от SDK что доступны — https://docs.agora.io/en/Voice/API%20Reference/web_ng/interfaces/iagorartcclient.html и смотреть что, где всплывает. Каково же было мое удивление, когда я увидел пустоту в консоле хромиума. Да это же не может быть, что бы Agora Web SDK 4.4.0 была не совместима с Agora React Native API 3.х!
После многих попыток, хоть как-то это дело завести — пришло «Принятие». Что поделать, придется брать все же Agora Web SDK 3.x.
Новый день начинается со скачивания последней версии (в рамках 3.x) и переделкой существующего функционала под другой SDK. К счастью, дело пошло быстро и за первую половину дня — все было готово. На локальной машине все работало отлично. Решил протестировать с коллегой по офису (он должен открыть ветку с прода и попробовать созвонится). И хоп, мы получаем ту же проблему — звонок не устанавливается, но что обнадеживает — в консоле проскакивают логи, что оппонент по звонку выходит из румы (в терминах агоры — это channel). Ну хоть какой прогресс, по сравнению с 4.x.
После первых двух часов дебага — было решено взять код с прода и попробовать его запустить. К черту текущее решение, просто берем код с прода, вcтавляем в HTML, пробрасываем пару конфигов и запускаем. О чудо, все работает. Все друг друга видят и слышат. Первая хорошая новость за день. Значит минорные версии 3.x совместимы между собой (это вселяет надежду с мобилами). Быстро подчищаем код с HTML и переносим его в JS модули. Запускаем и получаем дырку от бублика. Да что ж за день то сегодня такой. Откатываемся назад на вариант с кодом в HTML — работает. Ладно, теперь это уже личное.
Переносим «строчку за строчкой» из HTML в JS модули и почти каждый раз проверяем локально и с коллегой. Хм. Почему же оно все еще работает? Когда была перенесена последняя строчка, я очень удивился. Код был почти один-в-один как после миграции на 3.x, который я получил пол дня назад и он РАБОТАЛ. А давай-ка я попробую запустить старый свой вариант на 3.x. Оп-па не работает. Истина где-то рядом. Как хорошо что есть гит и можно сравнить. Отбросив различия в кодстайле я был очень удивлен увиденным:
Да не может же быть, что бы я так лоханулся. Быстро открываем документацию по либе (uid используется для подключения к руме). Нас интересует метод join:
Все! Я больше не могу. Поеду я домой, рабочий день уже давно закончен.
Второй звоночек
Новый день — новые силы. Как оказалось — на проде используется number, потому что со стороны мобил (с их слов) было жесткое требование на int и ничего более. Успокаиваемся и работаем. Проверяем локально, потом с коллегой, все хорошо — едем на testing. Проверяем web — хорошо, мобилы — черный экран у того кто остался на вебе, но звук работает отлично. Хоть какой прогресс.
После пары часы дебага и проверки различный гипотез, я был готов сдаться, но здесь произошло чудо. Разраб со стороны мобил говорит что у него все работает. После того, как мы созвонились, через один из мессенджеров, и расшарили экран — я действительно убедился, все условия соблюдены и оно действительно работает. Начали искать отличия. Мы с коллегой в офисе. QA на уделенке дома. Разработчик мобильной версии в Латвии. Просим QA пере-проверить кейс со звонком на разных платформа, только пусть звонит на мне в офис, а кому-то вне офиса. О-да, работает. Мы где-то близко.
Услышав наши «горячие» споры в комнате офиса, глава департамента встает и говорит: «Парни, а вы используете STUN / TURN сервера?». Такие слова я слышал впервые, поэтому пришлось гуглить.
В общем, все сошлись на том что для текущей версии проекта — никто не будет пока подключать STUN / TURN сервера (ибо если бесплатные STUN еще можно найти, то бесплатных TURN нет).
Почему не догадались, что из-за NAT в офисе — ловим проблемы? Да потому что звук работал. И видео на одной стороне работало отлично. А как раз черный экран в видео мы уже получали, когда ловили кейсы, где один клиент инициировал созвон по связке rtc/vp8, а второй live/h264.