Робимо багатоканальну повнодуплексну рацію

Одного разу до нас постучись за допомогою – зробити сервіс-рацію. Після тривалих пошуків клієнту не вдалося знайти відповідне рішення, тому він звернувся до VoxImplant. Нам стало цікаво, що ж він там таке задумав і чи зможемо ми реалізувати його задум на своїй платформі. Нам рідко вдавалося знайти сценарій, який на ній зробити неможливо. Загалом, поспілкувалися ми, всі уважно вислухали і пішли писати код. Рація повинна була вміти підключатися до декількох каналах одночасно (аналогічно частотам в аналогових рацій), а також давати можливість говорити в один з підключених каналів + було бажано відображати активність в каналі. Під катом розповідь про те, як ми зробили цей сервіс за кілька годин.

Схема роботи
Завжди корисно намалювати схему, перш ніж приступати до роботи. В результаті цієї операції у нас вийшло щось таке:

Логіка наступна:

1. Користувач SDK робить дзвінок, сценарій (WTGatekeeper) прокидає дзвінок в конференцію
2. Така конференція створюється на кожного юзера і потрібно для того, щоб підключати вхідний звук від всіх каналів, на які підписується юзер і прокидати вихідний звук у вибраний канал
3. Локальна конференція обробляє сигнальні події join_channel, leave_channel, choose_channel, а також надсилає події channel_activity, channel_connected, channel_disconnected (див. сценарій WTUserConf в сторону юзера
4. Канали-конференції (див. сценарій WTChannelConf) просто підключають всі вхідні дзвінки з локальних конференцій

Разом виходить, що по одній конференції створюється для кожного користувача, і на кожен канал.

Функціонал клієнта включає:

  • список каналів з відповідними елементами управління
  • можливість підписатися на вхідний звук від каналу
  • кнопка для вибору каналу, куди будемо говорити
  • кнопка push-to-talk, яка активує відправку вихідного звуку в обраний канал
Для прискорення процесу ми створили демо додаток з допомогою Web SDK і ReactJS. Вийшов такий інтерфейс:

Для реалізації візуалізації голосової активності в підключеному каналі ми скористалися вбудованим в платформу VAD. На кожен дзвінок можна повісити обробник цієї події і транслювати на клієнт інформацію про активність:

call.addEventListener. (CallEvents.MicStatusChange, handleChannelAudio);
call.handleMicStatus(true);
function handleChannelAudio(e) {
// Send info about channel audio
user_call.sendMessage(JSON.stringify({
подія: "channel_activity",
name: e.call.number().replace("channel_", ""),
active: e.active 
}));
}

Візуалізацію активності в каналі зробили наступним чином:


Незважаючи на те, що все виглядає просто, бекенд VoxImplant виконує безліч завдань для забезпечення роботи сервісу. Було приємно, що вдалося все це налаштувати досить швидко без танців з бубном.

Подивитися на результат
Ви можете самостійно протестувати одержаний сервіс та поспілкуватися в одному з декількох доступних каналів по цьому посиланню. Використовуйте Chrome/Firefox/інший браузер з підтримкою WebRTC.
Джерело: Хабрахабр

0 коментарів

Тільки зареєстровані та авторизовані користувачі можуть залишати коментарі.