Назад к кейсам

Видео-звонки консультанту на сайте

3 мая, 2023 10 минут
О клиенте

К нам обратился официальный российский представитель одной из крупнейших компаний, производящей автомобили премиум класса. Общий объем продаж за 2021 год составил более 150 000 авто.

О проекте

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

Цели
  • Увеличить продажи, позволив вести их в более удобном формате.

  • Привлечь новых покупателей. Сделать консультации доступными в любой точке страны.

Решение
Изначальная идея звучала довольно просто — сделать платформу для аудио и видео-звонков в браузере. Ключевой технологией для реализации подобной задумки является WebRTC — протокол передачи данных в реальном времени. Всё, что видят и с чем взаимодействуют пользователи, разработано с помощью Vue.js. Серверная часть платформы написана на Node.js, а коммуникация между сервером и клиентом построена на протоколе WebSocket, обеспечивающим очень быстрый обмен данными, которые не относятся к медиа-трафику.

Медиа-возможности платформы не сильно отличаются от того, что мы привыкли видеть в других сервисах видеоконференций, а именно:
  1. Микрофон.
  2. Веб-камера.
  3. Демонстрация экрана.

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


В платформе предусматривается две роли:


  • Гость. Им может оказаться любой желающий — достаточно лишь открыть страницу и нажать на кнопку вызова. Если в данный момент есть свободный консультант, ему поступит звонок, после принятия которого установится соединение. Если свободного консультанта нет, гость увидит экран ожидания.

  • Консультант. Принимает входящие звонки от гостей, видит некоторую справочную информацию о том, из какого места поступил звонок, был ли такой гость ранее, и если был — некоторые заметки о нём. Консультант имеет полный контроль над сессией и может принудительно её завершить, если гость ушел, но не завершил звонок, или если гость оказался недобросовестным. На подобных гостей есть возможность наложить временную или постоянную блокировку, предотвратив будущие звонки от них.

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

Интерфейс приложения.
Вызовы
  1. Работа с аудио и видео. Несмотря на развитые технологии и возможности современных браузеров, по-прежнему непростой задачей остается интеграция этих технологий в полноценное приложение, выходящее за рамки примеров и технических демо. На практике часто приходится сталкиваться со сценариями, которые не предусмотрены в примерах или справочных материалах. Избежать проблем было практически невозможно, поэтому неотъемлемой частью разработки стала отладка и поиск проблем. Это сказалось на времени разработки, но с лихвой компенсировалось качеством итогового решения. Мы прошли большое количество сценариев, провели много экспериментов и в результате получили стабильную передачу аудио и видео.

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

  3. Сотовая связь. Технология передачи звука и видео поддерживает прямое соединение между клиентами, избавляя от необходимости в стороннем сервере, который будет обрабатывать аудио и видео-потоки. Мы были осведомлены о том, что такое Peer-to-Peer соединение возможно установить далеко не во всех случаях, и как правило это связано с работой механизма NAT, особенно в мобильных сотовых сетях. Однако до последнего мы не были уверены, что для решения нашей задачи понадобится отдельный медиа-сервер. В ходе практических тестов на самых разных устройствах и в самых разных локациях выяснилось, что большой процент пользователей действительно не может установить прямое соединение. Для решения этой проблемы мы развернули сервер, работающий по протоколу TURN. Важной деталью является то, что мы оптимизируем нагрузку на этот сервер за счет использования прямого соединения в тех случаях, когда это возможно.

Цифры
  • > 100 Консультаций в месяц.
  • 0,5 сек Увеличили количество заявок при том же количестве клиентов.
  • 24/7 Звонки в любое время.

Технологии

  • Vue.js
  • WebRTC
  • WebSocket
  • Node.js
  • STUN
  • TURN

Сотрудничество

2021 — 2022