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

Для того чтобы встроить браузерный телефон в вебсайт или веб-проект, используется простой HTML код и специальные скрипты — зависимости, которые обеспечивают работу с микрофоном и соединение с Web Call Server.

Подготовка к интеграции веб-телефона
в веб-страницу

Для внедрения браузерного телефона вам нужно подготовить 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/phone/Phone-min.html смотреть на Github
7. examples/min/phone/Phone-min.js смотреть на Github

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

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

Перечислим основные элементы скриптов Phone-min.html и Phone-min.js, которые будут использоваться в SIP-звонке.

Phone-min.html

Важно добавить все необходимые зависимости для корректной работы звонков в браузерах Chrome, Firefox, IE, Edge, и т.д.

Например, зависимости в строках 8-18 позволяют аудиозвонкам работать из браузеров IE8 и IE9 по технологии Flash.

Основной файл API: Flashphoner.js — это скрипт, который реализует всю работу с сервером.

Ниже перечислены текстовые поля, которые содержат минимальные данные для соединения с SIP-шлюзом: sipLogin, sipPassword, sipDomain, sipPort. Блок ссылок содержит простые команды управления соединением и звонками:

Данные функции управления звонком реализованы в скрипте Phone-min.js

Phone-min.js

Важная часть скрипта — это инициализация. Здесь инициализируется Flashphoner API и основные обработчики статусов.

Функция connect устанавливает соедиение с сервером и передает все необходимые SIP-данные для авторизации на SIP-шлюзе.

Далее идут функции управления звонком и состоянием соединения с сервером:

• Hangup
• Mute
• Unmute
• Call
• Answer
• connectionStatusListener
• registrationStatusListener
• callListener

Скрипт максимально упрощен и не выводит никаких данных на экран. Используйте Developer Tools / Console в браузере Google Chrome для того, чтобы увидеть логи и получить больше информации о работе скрипта.

Более сложный скрипт с обработкой статусов и изменением состояний кнопок веб-интерфейса, можно найти по этому пути: examples/demo/phone. Протестировать его можно в разделе Demo / Phone Min по адресу https://wcs5-us.flashphoner.com:8888

Скрипт с максимальным дизайном находится по пути examples/demo/phone-ui. Процесс его тестирования описан в разделе Тестирование.

Загрузить 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