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

Для внедрения кнопки Click to Call вам нужно встроить HTML код и зависимые скрипты API в ваш сайт

Для быстрой установки и настройки WCS сервера воспользуйтесь этой инструкцией. Кроме этого, для тестирования вы можете подключиться к нашему демо-серверу demo.flashphoner.com

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

Для внедрения кнопки Click to Call на свою web-страницу, создадим два пустых файла click-to-call-min.html и click-to-call-min.js. Эти файлы будут содержать минимальный код.

Разберем содержимое файлов

HTML

Разместим в click-to-call-min.html необходимые элементы:

1. Импортируем скрипт основного API

<script type="text/javascript" src="https://flashphoner.com/downloads/builds/flashphoner_client/wcs_api-2.0/current/flashphoner.js"></script>

2. Импортируем скрипт функции Click to Call

1	`<script` `type="text/javascript"` `src="click-to-call-min.js"></script>`

3. Инициализируем API на загрузку страницы

1	`<body onload="init_page()">`

4. Добавляем кнопку «Call» при нажатии на которую будет совершаться звонок на заранее запрограммированный номер

1	`<input` `type="button"` `id="callBtn"` `Value="Call"/>`

5. Добавляем два div-элемента в которых будет проигрываться звук

<div id="localAudio"></div>
<div id="remoteAudio"></div>

Полный код HTML — страницы выглядит так:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <script type="text/javascript" src="https://flashphoner.com/downloads/builds/flashphoner_client/wcs_api-2.0/current/flashphoner.js"></script>
    <script type="text/javascript" src="click-to-call-min.js"></script>
 
</head>
<body onload="init_page()">
    <input type="button" id="callBtn" Value="Call"/>
    <div id="remoteAudio"></div>
    <div id="localAudio"></div>
</body>
</html>

before Click to call SIP phone SIP WCS WebSocket browser

JavaScript

1. Создаем константы для статуса работы WCS и SIP сервера

var SESSION_STATUS = Flashphoner.constants.SESSION_STATUS;
var CALL_STATUS = Flashphoner.constants.CALL_STATUS;

2. Создаем глобальные переменные для аудио потока

var localAudio;
var remoteAudio;

3. При загрузке HTML страницы инициализируем API, получаем div-элементы для проигрывания аудио и вызываем функцию «connect()», которая обеспечивает подключение к WCS и SIP серверу

function init_page() {
    Flashphoner.init({});
    localAudio = document.getElementById("localAudio");
    remoteAudio = document.getElementById("remoteAudio");
    connect();
}

4. В функции «connect()» объявляем переменные для параметров подключения к WCS и SIP серверам. Для корректной работы вам следует заменить значения на свои. URL — адрес вашего WCS, sipOptions — данные для подключения к вашему SIP серверу. После объявления переменных, функция запускает соединение с WCS и SIP серверами

function connect() {
    var url = "wss://demo.flashphoner.com:8443"
    var registerRequired = true;
    var sipOptions = {
        login: "10001",
        authenticationName: "10001",
        password: "Pass123",
        domain: "your_sip_server.com",
        outboundProxy: "your_sip_server.com",
        port: "5060",
        registerRequired: registerRequired
    };
    var connectionOptions = {
        urlServer: url,
        sipOptions: sipOptions
    };
    console.log("Create new session with url " + url);
Flashphoner.createSession(connectionOptions).on(SESSION_STATUS.ESTABLISHED, function(session) {
        console.log(SESSION_STATUS.ESTABLISHED);
    }).on(SESSION_STATUS.REGISTERED, function(session) {
        console.log(SESSION_STATUS.REGISTERED);
    });
    callBtn.onclick = call
}

5. Функция «call(session)» вызывается при нажатии на кнопку «Call» и обеспечивает работу исходящего звонка на заранее заданный номер. Номер указывается в параметре «callee»

function call(session) {
    var constraints = {
        audio: true,
        video: false
    };
    var session = Flashphoner.getSessions()[0];
    var outCall = session.createCall({
        callee: "10002",
        remoteVideoDisplay: remoteAudio,
        localVideoDisplay: localAudio,
        constraints: constraints,
        stripCodecs: "SILK"
    });
    outCall.call();
    callBtn.value = "Hangup";
    callBtn.onclick = function() {
        callBtn.value = "Call";
        outCall.hangup();
        connect();
    }
}

Полный код JavaScript выглядит так:

var SESSION_STATUS = Flashphoner.constants.SESSION_STATUS;
var CALL_STATUS = Flashphoner.constants.CALL_STATUS;
var localAudio;
var remoteAudio;
 
function init_page() {
    Flashphoner.init({});
    localAudio = document.getElementById("localAudio");
    remoteAudio = document.getElementById("remoteAudio");
    connect();
}
 
function connect() {
    var url = "wss://demo.flashphoner.com:8443"
    var registerRequired = true;
    var sipOptions = {
        login: "10001",
        authenticationName: "10001",
        password: "Pass123",
        domain: "your_sip_server.com",
        outboundProxy: "your_sip_server.com",
        port: "5060",
        registerRequired: registerRequired
    };
    var connectionOptions = {
        urlServer: url,
        sipOptions: sipOptions
    };
    console.log("Create new session with url " + url);
    Flashphoner.createSession(connectionOptions).on(SESSION_STATUS.ESTABLISHED, function(session) {
        console.log(SESSION_STATUS.ESTABLISHED);
    }).on(SESSION_STATUS.REGISTERED, function(session) {
        console.log(SESSION_STATUS.REGISTERED);
    });
    callBtn.onclick = call
}
 
function call(session) {
    var constraints = {
        audio: true,
        video: false
    };
    var session = Flashphoner.getSessions()[0];
    var outCall = session.createCall({
        callee: "10002",
        remoteVideoDisplay: remoteAudio,
        localVideoDisplay: localAudio,
        constraints: constraints,
        stripCodecs: "SILK"
    });
    outCall.call();
    callBtn.value = "Hangup";
    callBtn.onclick = function() {
        callBtn.value = "Call";
        outCall.hangup();
        connect();
    }
}

Вид кнопки «Click to Call» во время совершения звонка

after Click to сall SIP phone SIP WCS WebSocket browser

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

Представленный выше пример — это вариант минимального рабочего кода для реализации на web-странице функции Click to Call. Передавать параметры подключения к SIP серверу в JS коде не безопасно, поэтому для production реализации мы рекомендуем использовать технологию REST hook для передачи этих параметров. Подробности здесь.