Pull to refresh

Звоним на мобильные телефоны из браузера с записью разговоров

Reading time 6 min
Views 79K


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

Или другой сценарий — входящий в компанию звонок. Как здорово, когда ты в качестве клиента звонишь на безликий 8800 и девушка на том конце телефона отвечает тебе приятным голосом — здравствуйте, Алексей (подставить_свое_имя)! Это производит потрясающий эффект. Когда вместо «назовите себя, номер паспорта и имя кота, информация грузится — послушайте шестую симфонию Моцарта» оператор уже поднимая трубку знает, как вас зовут и видит по вам всю информацию. Сервис, что и говорить.

Но есть ли возможность реализовать такую систему без погружения в дебри настройки АТС — максимально быстро и минимальной кровью? Желательно еще, чтобы все разговоры записывались для целей контроля и обучения сотрудников. Ответ — конечно, погнали под кат.

Варианты реализации


Итак, сегодня для решения описанной задачи есть несколько вариантов. Первый — это, конечно, поставить широко известный в узких кругах Asterisk или систему на его основе, сконфигурировать всё, затем либо купить VoIP-GSM шлюз (кои делают даже из USB модемов за 800 рублей), либо прокинуть трафик через одного из множества SIP провайдеров, дающих выход в ТФоП (телефонные сети общего пользования — в т.ч. мобильные телефоны). Затем написать с использованием WebRTC веб-интерфейс к звонилке. Вариант вероятно наиболее дешевый, но и наиболее затратный по времени и усилиям.

Второй путь — использование сервисов, позволяющих не ставить Asterisk, дающих удобный API для звонков из браузера и имеющих выход на ТФоП. На нашем российском рынке это Oktell и VoxImplant. Для работы Oktell требуется-таки устанавливать софт на сервер и закупать лицензии — не мой вариант. Было принято решение остановиться на VoxImplant, замечательном проекте Алексея Айларова, основателя Zingaya. Об этой платформе и пойдет дальше речь.

Забегая вперед, скажу, что стартануть страничку, по нажатию на кнопку на которой идет звонок на мобильный, удастся в случае с VoxImplant за какие-то минут 10. Всё действительно очень просто и никаких диалпланов и подобных умных слов ip-телефонии. Разберем именно пример исходящих звонков.

VoxImplant — готовим площадку


Первое, что нужно сделать — зарегистрироваться на VoxImplant, это бесплатно + на счете сразу $5 на тесты звонков, приятно. В системе нужно будет сделать 3 вещи — создать пользователя, который будет звонить, создать сценарий, в котором будет описываться логика обработки звонков, и создать приложение, объединяющее пользователя (дающее ему доступ к звонкам) и сценарий.

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

В нашем случае сценарий будет очень прост. Жмём «Создать сценарий», указываем имя сценария callToCustomer и в поле ввода сценария копируем код (это обычный JavaScript с использованием API VoxImplant — в системе вообще все пишется на привычном большинству веб-разработчиков JS):

// совершаем звонок
VoxEngine.forwardCallToPSTN();




Сохранив сценарий, переходим на вкладку Пользователи — необходимо создать аккаунт человека, который будет звонить. Жмём «Создать пользователя», вводим имя пользователя, например, alexey.goloburdin, пароль, в моем случае testPassword, отображаемое имя и жмём «Сохранить».



Затем переходим на вкладку Приложения, где жмём соответственно «Создать приложение». Вводим имя, в моём случае firstapp и жмём «Создать».



После этого выбираем «Привязать пользователей» — привязываем только что созданного юзера alexey.goloburdin.



Переходим на вкладку Правила, жмём «Добавить правило», перетаскиваем созданный ранее сценарий callToCustomer в раздел Привязанные, вводим название callToCustomerRule и жмём «Добавить».



На этом всё — настройка системы завершена. Переходим к написанию простой HTML-странички с кнопкой звонка.

Старый добрый HTML/JS


<html>
<head>
<script type="text/javascript" src="http://cdn.voximplant.com/voximplant.min.js"></script>
<script type="text/javascript">
var initialized = false, // SDK загружено
     loggedIn = false, // пользователь авторизован
     connected = false, // получено соединение с VoxImplant сервером
     voxImplant = VoxImplant.getInstance();

// добавляем прослушивателей основных событий
// событие загрузки SDK
voxImplant.addEventListener(VoxImplant.Events.SDKReady, handleSDKReady);
// событие установки соединения с сервером VoxImplant
voxImplant.addEventListener(VoxImplant.Events.ConnectionEstablished, handleConnectionEstablished);
// событие авторизации пользователя на сервере VoxImplant
voxImplant.addEventListener(VoxImplant.Events.AuthResult, handleAuthResult);

// SDK загружен, соединяемся с VoxImplant сервером
function handleSDKReady() {
     initialized = true;
     voxImplant.connect();
}

// соединились с VoxImplant сервером успешно, авторизуем юзера
function handleConnectionEstablished() {
     connected = true;
     login();
}

// проверяем статус авторизации
function handleAuthResult(e) {
     if (e.result) {
          // Авторизовались успешно
          loggedIn = true;
          makeCall();
     }
}

// проводим авторизацию
function login(){
     // данные созданного пользователя и приложения
     voxImplant.login("alexey.goloburdin@firstapp.sterx.voximplant.com", "testPassword");
}

function makeCall(){
     var call = voxImplant.call("79636722229"); // ваш номер для дозвона
}

function testCall() {
     // если SDK не инициализирован - проводим процесс
     if (!initialized) voxImplant.init();
     else {
          // если не установлено соединение с сервером VoxImplant - устанавливаем
          if (!voxImplant.connected()) voxImplant.connect();
          else {
               // если юзер не авторизован - авторизуем, если авторизован - звоним
               if (!loggedIn) login();
               else makeCall();
          }
     }
}
</script>
</head>
<body>
     <a href="javascript:testCall()">Позвони мне, позвони!</a><br/>
</body>
</html>

Код достаточно прост. Загружаем VoxImplant SDK, устанавливаем соединение с сервером VoxImplant, затем авторизуем пользователя и звоним. Здесь стоит обратить внимание на функцию login — не забудьте указать свой логин созданного в первом пункте юзера до знака собачки (в моем случае alexey.goloburdin), свое имя приложения (firstapp) и свое имя аккаунта (sterx), а также свой пароль (testPassword). В функции makeCall не забудьте указать свой номер телефона для теста — в будущем приложении здесь будет номер клиента, которому звоним. Адрес приложения можно посмотреть на странице приложений в общем списке.



Загружаем созданную HTML страничку на сервер, жмем на ссылку, разрешаем использование микрофона (разумеется, он должен присутствовать на ноутбуке/компьютере, с которого звоните) и спустя несколько секунд слышим заветный звонок на телефоне.

Итак, система работает, звонки проходят, всё в порядке. Но как быть с записью разговоров?

Пишем разговоры


Для записи разговоров нужно будет внести изменения в сценарий callToCustomer:

// подключаем модуль записи
require(Modules.Recorder);

// устанавливаем прослушиватель события звонка - включаем запись разговора
VoxEngine.addEventListener(AppEvents.CallAlerting, function (e) {
  var call = e.call, // экземпляр звонка
  recorder = VoxEngine.createRecorder(); // создаем экземпляр записывающего "магнитофона"

  // как только установлено соединение - включаем запись
  call.addEventListener(CallEvents.Connected, function (callevent) {
    call.sendMediaTo(recorder);
  });
});

// совершаем сам звонок
VoxEngine.forwardCallToPSTN();

Теперь система не только звонит, но и записывает все звонки в MP3 файлы. Услышать их можно из интерфейса VoxImpant со вкладки Звонки — для записанных разговоров появился соответствующий значок.



Из интерфейса VoxImplant — хорошо, но хотелось бы из своей системы записи дергать. Для этого каждому записанному разговору нужно присвоить свой уникальный айдишник — например, в реальной системе это может быть внутренний id пользователя, скленный с меткой времени. В нашем случае передадим просто строку ’callStamp’, для этого поправим функцию makeCall нашего HTML файла:

function makeCall(){
     var call = voxImplant.call("79636722229", false, 'callStamp');
} 

Задача получения записей разговоров реализуется с помощью HTTP API и его метода GetCallHistory, возвращающего информацию о совершенных звонках. Вообще через HTTP API можно создавать в VoxImplant пользователей и выполнять другие административные задачи, очень удобно интегрировать с внутренними системами в компании. Для работы с HTTP API нужно получить ключ api_key и account_id в разделе «Доступ к API» в правом верхнем углу интерфейса VoxImplant.



Для получения записи нашего разговора, помеченного меткой callStamp, нужно выполнить такой GET запрос:

api.voximplant.com/platform_api/GetCallHistory/?account_id=########&api_key=############&with_records=true&call_session_history_custom_data=callStamp

В ответ придет JSON массив, в свойстве result[0][records][0][record_url] находится URL MP3 файла записи разговора.

Вот так, быстро и красиво мы научили нашу веб-систему звонить на мобильные номера и записывать все разговоры. Если тема окажется интересной, в следующей статье расскажу о приёме входящих звонков — а пока всех с праздниками и отличных коммуникаций!
Tags:
Hubs:
+41
Comments 20
Comments Comments 20

Articles