0,0
рейтинг
2 ноября 2014 в 04:27

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



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

Или другой сценарий — входящий в компанию звонок. Как здорово, когда ты в качестве клиента звонишь на безликий 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 файла записи разговора.

Вот так, быстро и красиво мы научили нашу веб-систему звонить на мобильные номера и записывать все разговоры. Если тема окажется интересной, в следующей статье расскажу о приёме входящих звонков — а пока всех с праздниками и отличных коммуникаций!
Алексей Голобурдин @sterx
карма
18,0
рейтинг 0,0
Реклама помогает поддерживать и развивать наши сервисы

Подробнее
Реклама

Самое читаемое Разработка

Комментарии (20)

  • +1
    Меня всегда смущало в JS API к подобным системам, что данные приложения email + password видно в открытом виде.

    Есть ли у voxImplant возможность например для приложения задать только номера куда можно звонить (свой например номер)?
    • +1
      Да, всё это можно сделать с помощью сценариев. Можно передавать в voximplant просто id номера, а в сценарии дергать сам номер с сервера с использованием json, например. Очень классная штуковина.
      • 0
        ок, понял спасибо.
    • 0
      Судя по урлу в конце статьи запрос шлётся по https
    • +1
      Email и пароль очень просто можно скрывать от посторонних.

      Задать скрытые номера для дозвона тоже можно, как правильно говорит drakmail, с помощью сценария и передачи в него идентификатора номера. Тоже такую задачу решаем, чтобы не палить прямые номера, иногда есть такая необходимость.
      • 0
        Тоже интересно, спасибо.

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

        Не в курсе как у voxImplant на счет телефонного флуда? Когда «спамят» телефонный номер дозвоном, а при поднятии трубки бросают?
    • 0
      В идеале, данные должен вводить пользователь при входе в систему. + есть вариант, как уже коллеги написали, когда логин происходит по хэшу, которые считается на стороне вашего сервера
  • +2
    Если тема окажется интересной, в следующей статье расскажу о приёме входящих звонков — а пока всех с праздниками и отличных коммуникаций!

    Ждем
  • +3
    Где-то слышал, что запись телефонного разговора без уведомления типа «все разговоры записываются...» считается незаконным. Система способна автоматически добавлять такое голосовое уведомление?
    • +1
      Автоматически она и не должна, есть функция для проигрывания text-to-speech или mp3 файла — добавляете в сценарий и будет нотификация.
    • +3
      call.say("Все разговоры записываются", Language.RU_RUSSIAN_FEMALE);
  • 0
    Подскажите, первый скрин — это где такой интерфейс?
    • 0
      Битрикс24 — там тоже VoxImplant работает, кстати
    • +1
      Все верно, первый скрин это Битрикс24 — мы активно используем платформу Voximplant для решения наших телекоммуникационных задач (исходящие, входящие, сип). Спасибо коллегам из VI они сделали отличную платформу :)
  • 0
    Что с номером для входящих звонков, какой номер будет определяться у исходящих? Не силен в телефонии, но подозреваю, что номер будет из номеров посредника. Если это так, то лучше пилить свое решение, если оно не безумных денег стоит.
    • 0
      Есть разные варианты: можно валидировать свой callerid и его подставлять (гарантии 100% в таком случае вам никто не даст), а можно взять номер у VoxImplant и его использовать как callerid, тогда все будет работать 100%.

      +всегда можете свой SIP завести на платформу или звонить через своего оператора.
  • 0
    Штука точно полезная, а на чем еще кроме Битрикса работать будет?
    • 0
      Скрин из Битрикса только как пример использования VI здесь показан.
  • 0
    Уважаемый автор, спасибо за статью!
    Хотел обратить ваше внимание, у вас в первом примере кода ошибка: ковычки неправильные.

    voxImplant.call(«79636722229»
    • 0
      Спасибо! Поправил

Только зарегистрированные пользователи могут оставлять комментарии. Войдите, пожалуйста.