Verto: Ответ, отбой, удержание и перевод вызова
Научим наше приложение отвечать, разъединять, ставить на удержание и переводить вызов на другого абонента.
HTML интерфейс
Добавим кнопку ответа, разъединения вызова и др. в html код:
<!--container--> <div class="container"> <h1>Verto - Demo Application</h1> <input type="text" id="number" name="number"/> <button id="make-call">Вызов</button> <br /><br /> <button id="answer-call">Ответ</button> <button id="hang-up-call">Отбой</button> <br /><br /> <button id="hold-call">Удерж.</button> <button id="unhold-call">Возврат</button> <br /><br /> <button id="transfer-call">Перевод</button> <video id="video-container" autoplay="autoplay" class="video-style" hidden></video> </div> <!-- /container -->
Обработка события
Внутри функции bootstrap добавим обработчик нажатия кнопок с коллбэком:
function bootstrap(status) { // ... document.getElementById("make-call").addEventListener("click", makeCall); document.getElementById("hang-up-call").addEventListener("click", hangupCall); document.getElementById("answer-call").addEventListener("click", answerCall); document.getElementById("hold-call").addEventListener("click", holdCall); document.getElementById("unhold-call").addEventListener("click", unholdCall); document.getElementById("transfer-call").addEventListener("click", transferCall); };
Коллбэки
У нас есть вызов коллбэков, теперь добавим сами функции обратного вызова.
function transferCall() { var destinationNumber = prompt("Введте номер для перевода:"); if (destinationNumber) { currentCall.transfer(destinationNumber); } }; function hangupCall() { currentCall.hangup(); }; function answerCall() { currentCall.answer(); }; function holdCall() { currentCall.hold(); }; function unholdCall() { currentCall.unhold(); };
Полный код
В итоге мы должны получить что-то подобное в файле main.js
:
(function() { var vertoHandle, vertoCallbacks, currentCall; $.verto.init({}, bootstrap); function bootstrap(status) { document.getElementById("make-call").addEventListener("click", makeCall); document.getElementById("hang-up-call").addEventListener("click", hangupCall); document.getElementById("answer-call").addEventListener("click", answerCall); document.getElementById("hold-call").addEventListener("click", holdCall); document.getElementById("unhold-call").addEventListener("click", unholdCall); document.getElementById("transfer-call").addEventListener("click", transferCall); vertoHandle = new jQuery.verto({ login: 'USER@FS_DOMAIN', passwd: 'PASS', socketUrl: 'ws://127.0.0.1:8081', //Рингтон ringFile: 'sounds/bell_ring.mp3', iceServers: [{ url: 'stun:stun.freeswitch.org', }, ], deviceParams: { useMic: 'any', useSpeak: 'any', useCamera: 'false', }, tag: "video-container", }, vertoCallbacks); }; function makeCall() { var numToDial = document.getElementById("number").value; currentCall = vertoHandle.newCall({ // Extension to dial. destination_number: numToDial, caller_id_name: 'T.Testov', caller_id_number: '6666', outgoingBandwidth: 'default', incomingBandwidth: 'default', useStereo: true, useVideo: true, dedEnc: false, userVariables: { email: 'test@test.com' }, }); }; function transferCall() { var destinationNumber = prompt("Введите номер перевода:"); if (destinationNumber) { currentCall.transfer(destinationNumber); } }; function hangupCall() { currentCall.hangup(); }; function answerCall() { currentCall.answer(); }; function holdCall() { currentCall.hold(); }; function unholdCall() { currentCall.unhold(); }; vertoCallbacks = { onWSLogin: onWSLogin, onWSClose: onWSClose, onDialogState: onDialogState }; function onWSLogin(verto, success) { console.log('onWSLogin', success); }; function onWSClose(verto, success) { console.log('onWSClose', success); }; function onDialogState(dialog) { console.debug('onDialogState', dialog); switch (dialog.state.name) { case "trying": break; case "ringing": //alert('Входящий вызов!'); break; case "answering": break; case "active": break; case "hangup": console.log("Причина завершения: " + dialog.cause); break; case "destroy": break; } if (!currentCall) { currentCall = dialog; } }; })();
Debug
Подробнее разобрать формат команд jsonrpc которыми обмениваются наше приложение и сервер можно в консоли разработчика, во вкладке network:
Документация Verto Communicator