Внедрение в веб-страницу функционала браузерного онлайн звонка на мобильные телефоны и SIP

Для внедрения кнопки Click to Call вам нужно встроить HTML код и зависимые скрипты API в ваш сайт. В результате кнопка или ссылка может быть размещена на любой из страниц вашего сайта и делать вызов на нужный номер телефона.

Подготовка к внедрению кнопки Click to Call в страницу сайта

Для внедрения кнопки онлайн-звонка Click to Call, вам потребуется подготовить Web Call Server и необходимые скрипты и файлы

1. Установите Web Call Server на свой хостинг и импортируйте SSL-сертификаты для работы технологии WebRTC.
2. Если установка сервера вызывает у вас какие-либо затруднения, вы можете запустить готовый к работе и сконфигурированный виртуальный Web Call Server в облаке Amazon и импортировать SSL сертификат.
3. Кроме этого вы можете подключиться к нашим демо-серверам, wss://wcs5-eu.flashphoner.com:8443, wss://wcs5-us.flashphoner.com:8443
4. Скачайте последнюю сборку с HTML и JavaScript кодом
5. Распакуйте сборку на вашем веб-сервере и откройте файлы
6. examples/min/click-to-call/Click-to-Call-min.html смотреть на Github
7. examples/min/click-to-call/Click-to-Call-min.js смотреть на Github

Эти файлы являются минимальным кодом, позволяющим разместить ссылку или кнопку для браузерных звонков с сайта. Рассмотрим их ниже.

HTML и JavaScript код для встраивания кнопки онлайн-звонка в веб-страницу

Опишем основные элементы скриптов Click-to-Call-min.hml и Click-to-Call-min.js

Click-to-Call-min.html

HTML-файл очень короткий и фактически состоит из трех блоков:

• Зависимости
• Поле вывода статуса звонка
• Ссылка ‘Call’

Все зависимости перечислены в HTML-элементе head. Это набор скриптов, необходимый для захвата аудио с микрофона, соединения с сервером и воспроизведения голоса абонента.

В блоке с идентификатором ‘info’ выводится информация о текущем статусе звонка, а по клику на ссылку ‘Call’ инициируется вызов. Блоки на скриншоте помечены цифрами.

Click-to-Call-min.js

В этом скрипте важные функции помечены цифрами

1. Взятие ссылки на Flashphoner API
2. Инициализация API
3. Установка соединения с сервером
4. Звонок
5. Событие успешной установки соединения, после которого можно делать вызов (line 51).

Таким образом, при нажатии на ссылку ‘Call’ происходит два действия: установка соединения с сервером и последующий вызов, как только от сервера пришло подтверждение коннекта.

За установку соединения и звонок отвечают следующие строки кода:

22

f.connect({urlServer: «ws://192.168.1.5:8080», appKey: «click2call»});

40

call.callee = «override_by_rest»;

Для тестов вам необходимо в этих строках прописать конкретные значения.

Например

22

// Данные для подключения к SIP-шлюзу
f.connect({urlServer: ‘wss://wcs5-us.flashphoner.com:8443’, appKey: ‘defaultApp’,sipLogin:’TEST009′,sipPassword:’12345678′,sipDomain:’sipnet.ru’,sipPort:5060});

40

// Номер телефона вызываемого абонента
call.callee = ‘+79230000000’;

Если все прописано верно, должен проходить звонок на мобильный телефон. Для отладки вы можете использовать Chrome / Developer Tools. Для проверки вашего SIP-шлюза можете воспользоваться бесплатным SIP-софтфоном Xlite или Linphone.

В текущем примере мы вставляем SIP-параметры прямо в код и они видны пользователю. Такой вариант подойдет если у вас есть возможность разрешить звонки только на определенные номера телефонов на стороне SIP-провайдера или на подконтрольной цифровой АТС. В других же случаях раскрывать и хранить SIP-данные в коде веб-клиента нежелательно.

Web Call Server имеет широкие возможности по интеграции и кастомизации. Его можно сконфигурировать так, чтобы никакие данные на веб-клиенте не хранились. В этом случае при попытке звонка, Web Call Server будет обращаться по защищенному соединению к вашему Web-серверу или скрипту чтобы получить SIP-данные для звонка. Таким образом секретные данные не будут переданы на клиента и не будут доступны пользователю, тем самым обеспечивая максимальную безопасность.

Полная документация по интеграционным возможностям сервера содержится в документации Руководство Администратора и Последовательность вызовов

Тестирование кнопки Click to Call подробно описано в разделе Тестирование

Загрузить Web Call Server 5

Системные требования: Linux x86_64, 1 core CPU, 2 Gb RAM, Java

    Загрузить WCS5   

Установка:

1. wget https://flashphoner.com/download-wcs5.2-server.tar.gz
2. Распаковать и установить с помощью скрипта 'install.sh'
3. Запустить сервер с помощью команды 'service webcallserver start'
4. Открыть веб-интерфейс https://host:8444 и активировать вашу лицензию

Если вы используете серверы Amazon EC2, то скачивать ничего не нужно.

WCS5 на Amazon EC2