Web-телефон на jquery

Примечание

Технология WebRTC работает стабильно только на Chromium-подобных браузерах: Google Chrome, Яндекс Браузер, Microsoft Edge, Chromium.

Демонстрационная страница web-телефона: https://operator/phone/phone_v2.html

Минимальный код для подключения web-телефона

Загружаем необходимые компоненты:

<script src="https://operator/phone/js/jquery-2.2.4.min.js"></script>

<script src="https://operator/phone/js/vertojs/dist/verto.js"></script>

<script src="https://operator/phone/js/jquery.phone.webrtc.js"></script>

Определяем элемент страницы, к которой привязываем web-телефон:

<div id='phoneID'></div>

Код, размещаемый внизу страницы

<script>
    /* Делаем переадресацию на https, некоторые браузеры не поддерживают нешифрованный трафик */

    if (window.location.protocol != "https:")
       window.location.href = "https:" + window.location.href.substring(window.location.protocol.length);

    /* Параметры подключения web-телефона:
        обязательные:
            host_source_link - адрес сервера телефонии,
            wss - адрес подключения к вебсокету

        дополнительные:
            login - логин,
            password - пароль,
            autologin - автоматическая регистрация телефона при значении true, иначе - необходимо нажать кнопку "Включить"
    */

    /*Задаем настройки web-телефона*/
    settings = {
        host_source_link: 'https://pbx.runtel.org',
        wss: 'wss://<domain or host name>:8086',
        login: 'uid@domain',
        password: 'password',
        autologin: true
    }

    /* Загружаем плагин web-телефона */
    $Phone = $("#phoneID").phone(settings);
</script>

События web-телефона:

Вешаем колбэки на события:

login - событие на регистрацию, возвращает код клиента и Доменное имя, необходимы для запроса статистики,

incall - событие на входящий вызов, возвращает входящий номер клиента и имя звонящего,

answer - событие на ответ оператора, возвращает входящий номер клиента

Пример кода

$Phone.on('login', function(evt, domain, session){
    console.log(JSON.stringify({domain: domain, session: session}));
});

$Phone.on('incall', function(evt, number, name){
    console.log(JSON.stringify({number: number, name: name}));
});

$Phone.on('answer', function(evt, number){
    console.log(JSON.stringify({number: number}));
});

Звонок по клику, через web-телефон:

html:

<div id="phoneID"></div>
<a rel="phone" href="4951343060">+7 495 134-30-60</a>

js:

$('a[rel="phone"][href]').on('click', function(evt) {
    evt.preventDefault();
    $("#phoneID").find('#phone').data('phone').call($(this).attr('href'));
}); // для заполнения и вызова

Серверные методы (/api/verto/)

Помимо медиа-соединения с FreeSWITCH, виджет обращается к вспомогательному REST-эндпоинту POST {{v2_host}}/api/verto/ (заголовок Verto-Session-Id: <session_id>) для операций, не связанных с передачей звука: статусы, адресная книга, история вызовов, профиль, переводы.

Конверт запроса: {"action": "...", "obj": "...", "params": {"login": "uid@domain", ...}}.

Действие	Параметры (params)	Описание
user_status_list	login	Список статусов домена (алиас: agent_status_list)
user_status	login	Текущий статус агента
user_change_status	login, status_id	Сменить статус агента
address_book	login, limit, offset, sort	Адресная книга домена (с пагинацией)
cdr	login	История вызовов (до 100 за год)
get_tz	login	Часовой пояс домена
get_device_id	login	Получить ID устройства
set_device_id	login, device_id	Сохранить ID устройства
get_profile	login	Профиль телефона и флаги
get_verto_mode	login, channels_for_check	Режим, активные сессии и статусы каналов
set_transfer_uuid	login, current_call_uuid, current_session_uuid, is_blind, transfered_number, target_number	Зафиксировать перевод вызова (слепой/консультативный)

Настройки телефона пользователя

Действие get_profile возвращает настройки телефона пользователя (модель DomainPhoneParams):

Поле	Тип	Описание
auto_login	Boolean	Автоматическая регистрация при загрузке
wss	String	Персональный WSS (переопределяет базовый)
device_id	String	Идентификатор устройства (CTI, браузер)
func_key_list	List	Функциональные клавиши (тип 0 — быстрый набор, 1 — перевод вызова)
ice_server_list	List	STUN/TURN-серверы для WebRTC ICE
auto_answer	Integer	Секунд до автоответа (0 — выключен)

Дополнительно в ответе передаются настройки CTI домена (кнопки перевода/видео/подслушивания, горячие клавиши, порядок поиска имени звонящего и т.д.) и адреса подключения: базовый wss://<домен>:8086 и персональный (если задан в профиле).

Примечание

Режим многовкладочного телефона задаётся настройкой verto_mode: 0 — активен в последней открытой вкладке, 1 — в первой (основной).