Web-телефон на jquery¶
Примечание
технология WebRTC работает стабильно только на Chromium-подобных браузерах: Google Chrome, Яндекс Браузер, Microsoft Edge, Chromium.
Демонстрационная страница web-телефона: https://operator/phone/phone_v2.html
Минимальный код для подключения web-телефона¶
- Заружаем необходимые компоненты:
<script src="https://code.jquery.com/jquery-2.2.4.min.js" integrity="sha256-BbhdlvQf/xTY9gja0Dq3HiwQF8LaCRTXxZKRutelT44=" crossorigin="anonymous"></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'));
}); // для заполнения и вызова