Разработка WebRTC-софтфона для CRM-системы

Введение

Чем занимается Itgrix?
Это продукт-коннектор между Asterisk и CRM-системами (например, Битрикс24 или AmoCRM). Он «слушает» Asterisk, считывает звонки и по событиям, которые приходят в Asterisk, передаёт запросы в CRM: создаёт события по звонкам, сохраняет записи разговоров, формирует лиды и т.д.

Часто возникает проблема: когда мы приходим к клиенту, у него уже есть Битрикс и своя телефония, подключённая к Asterisk, но всё настроено довольно сложно. Вся красивая логика на Asterisk ломается, если подключить ещё один SIP-транк и настроить на стороне Битрикса собственную схему. Клиент хочет, чтобы операторы работали прямо в Битриксе: принимали звонки, совершали исходящие, — всё в одном окне. Мы решили разобраться, как это сделать с помощью WebRTC. На весь путь экспериментов и разработки ушло около двух лет. Сегодня мы расскажем об этом опыте — со всеми трудностями, решениями и вопросами.

Начало работы

Раз мы говорим про WebRTC, то в браузере должны быть необходимые скрипты, чтобы клиент мог подключаться к Asterisk из интерфейса CRM. Мы — партнёры Битрикс24 и сначала хотели встроиться именно туда. Но оказалось, что в облачном Битриксе это сделать невозможно из-за закрытой архитектуры: есть возможности писать приложения, которые встраиваются в iFrame или добавляют свои кнопки, но полноценное приложение, которое висело бы всегда «на фоне» и постоянно коннектилось к Asterisk, написать нельзя.

Тогда мы обратились к AmoCRM, так как изначально оно проектировалось более открытым: там можно создавать виджеты, встраивать собственные JS-скрипты, фактически перекрывать собой интерфейс AmoCRM. Мы попробовали — и оказалось, что действительно можно встроиться. Так что начали работать с AmoCRM.

Выбор библиотеки

Мы рассмотрели три известные библиотеки:

1. sipML5
2. jsSIP
3. SIP.js

SipML5, судя по сайту, давно не обновлялась (последние упоминания датируются 2018 годом). Писали, что есть проблемы с Asterisk и сложный код для изучения. Про JsSIP мы тоже слышали, что могут быть определённые сложности, вплоть до правок в коде библиотеки, чтобы всё заработало с Asterisk. Поскольку нам нужно было MVP и мы не хотели углубляться во внутренности библиотеки, выбрали SIP.js.

Получилось довольно быстро запустить «Hello World» и проверить, что всё работает. В принципе, SIP.js — это ответвление от jsSIP, поэтому функционал у них похож. Мы выбрали SIP.js как более простой вариант для старта, и до сих пор на ней остаёмся: как водится, нет ничего более постоянного, чем временное.

Как мы подключались к Asterisk

Задача была заменить софтфон в браузере. То есть реализовать базовые функции звонков: без видео, без сложных конференций — пока только аудио. Но прежде нужно убедиться, что наш сервер Asterisk и его настройки подходят для WebRTC.

Чтобы проверить, «заведётся» ли всё на стороне Asterisk, нужен был гарантированно рабочий софт. Мы использовали sipML5 от Doubango как тестовый инструмент: вбивали туда IP-адрес, логин, пароль и проверяли, можем ли мы звонить. Если не работает, значит, проблема на стороне Asterisk. Когда SIPML5 нормально соединялся, мы понимали, что бэкенд готов и можно заниматься фронтендом.

В процессе выяснилось, что в FreePBX настройки webrtc=yes и media_encryption=yes по умолчанию доступны только для экстеншенов на драйвере chan_pjsip, а у нас всё было настроено на chan_sip. В итоге мы нашли лайфхак:

1. Переключаем экстеншен на chan_pjsip, включаем нужные настройки
2. Меняем обратно на chan_sip и ставим остальные параметры. Как ни странно, это сработало — особенности FreePBX

Фронтенд и UI

Когда мы убедились, что Asterisk настроен, стали делать фронтенд. Встал вопрос интерфейса: если нарисовать полноценный софтфон поверх всего окна CRM, он будет мешать работе. Мы долго экспериментировали, смотрели, как делают коллеги, и решили пойти путём «ленточного интерфейса»: тонкая полоса, в которой есть плашка общего управления (логин, пароль, настройки) и отдельные блоки под каждый активный звонок (с кнопками «принять», «завершить», «перевести» и т.д.).

Сложным оказался кейс с переводом звонков: если у оператора несколько активных линий, то как именно соединять абонентов? Пришлось рисовать схемы. Ещё оказалось, что мы сначала отладили всё на исходящих звонках и забыли про входящие: внезапно обнаружили, что у нас даже кнопки «Принять вызов» нет! Это добавлялось уже потом.

Тонкости с NAT и сокетами

Естественно, возникли проблемы с NAT. Опытным путём выяснили, что нужны настройки типа force_rport = yes и comedia = yes в sip.conf, но не везде и не всегда. В некоторых сетях force_rport мешает, а comedia нужен, — приходилось разбираться по ситуации.

Потом начались проблемы с WebSocket-соединениями. В каждой вкладке браузера создавалось соединение с Asterisk. При тестах внутри маленькой команды всё было ок, но, когда дали доступ большему числу людей, сервер начал выдавать ошибку close code 1006. Выяснилось, что во встроенном HTTP-сервере Asterisk есть лимит на количество одновременных соединений. Мы его увеличили, но поняли, что это не панацея: если у каждого пользователя открыто по несколько вкладок, лимит всё равно достигается.

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

Результат для AmoCRM

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

А что с Битрикс24?

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

Теперь в Битрикс24 (коробочной) у нас есть кнопка-трубка в интерфейсе, поверх которой «наезжает» наш софтфон. Он может скрываться, чтобы не мешать нажимать на системные кнопки «Сохранить» и т.д. Есть страница настроек модуля: адрес сервера, порт, параметры WebRTC, учётные записи пользователей и т.д. Пользователю не нужно вручную логиниться в софтфон — при входе в Битрикс24 система сама подставляет его SIP-учётные данные.