Инициализация Verto
Теперь отредактируем main.js
JavaScript файл. Начнем со следующей структуры:
// наша главная функция (function() { var vertoHandle, vertoCallbacks; // здесь будет код! })();
Иницализация
Инициализация Verto подготовит браузер для работы с WebRTC, тестирует доступ к медиа и проверяет доступное оборудование (микрофон, камера, динамик ).
$.verto.init({}, bootstrap);
Начальная загрузка
Функция bootstrap подключается к серверу verto и регистрируется на нем с указанными параметрами.
Замените значения в квадратных скобках на данные вашего Freeswitch и STUN серверов.
function bootstrap(status) { // Создаем новый экземпляр verto: // Зададим параметры регистрации через защищенный websocket. (используйте ws:// для незащищенного подключения) // Пользователь должен быть создан в user directory Freeswitch. vertoHandle = new jQuery.verto({ login: '[USER]@[YOUR_FREESWITCH_SERVER_DOMAIN]', passwd: '[PASSWORD]', // Порт назначается в verto.conf.xml на сервере Freeswitch. socketUrl: 'wss://[YOUR_FREESWITCH_SERVER_DOMAIN]:8082', ringFile: 'sounds/bell_ring2.wav', // можно назначить несколько STUN/TURN серверов. // Вместо массива объектов можно передать булево false, для выкл. STUN. // пример: url: 'stun:stun.freeswitch.org' iceServers: [ { url: 'stun:[YOUR_STUN_SERVER]', }, ], // Данные параметры могут быть назначены при вызове, но лучше при регистрации. // Значением может быть ID устройства, 'any' или 'none' для отключения. deviceParams: { // Установите 'none' для откл. исходящего аудио. useMic: 'any', // Установите 'none' для откл. входящего аудио. useSpeak: 'any', // Установите 'none' для откл. исходящего видео. useCamera: 'any', }, // Дополнительный Id для HTML аудио/видео тега воспроизведения медиа. // Может быть функцией возвращающей Id элемента. (Это может быть использовано для создания уникальных элементов для каждого нового вызова, когда вы имеете дело с множеством одновременных вызовов, во избежания конфликтов между медиа потоками. // В данном случае, тег задан статично. // На практике, даже если не используется видео, HTML элемент с данным Id, должен существовать: // <video id="video-container" autoplay="autoplay" class="video-style" hidden></video> tag: "video-container", //Ниже перечислены аудио параметры конфигурации подстроек/фильтров Google Chrome. //audioParams: { // googEchoCancellation: true, // googAutoGainControl: true, // googNoiseSuppression: true, // googHighpassFilter: true, // googTypingNoiseDetection: true, // googEchoCancellation2: false, // googAutoGainControl2: false, //}, // Внутренний ID сессии используемый Verto для отслеживания вызова или восстановления вызова. // Генерируется случайное значение, если не задано. //sessid: sessid, }, vertoCallbacks); };
Callbacks
Почти все что происходит в Verto отправляется как событие. Так что мы нуждаемся в обработчиках для принимаемых и исполняемых событий.
И первое из них это регистрация:
function onWSLogin(verto, success) { console.log('onWSLogin', success); if (success) { // В этой точке мы, подключившись к Freeswitch, можем инициировать какое-либо действие, // например, автоматически вызвать конференцию или функцию теста пропускной способности. // А еще подписаться на Presence. } };
Затем добавим функцию в словарь коллбэков Verto. Значение переменной success
будет напечатано в консоли браузера, когда
регистрация через вебсокет будет выполнена.
vertoCallbacks = { onWSLogin: onWSLogin, };
Так же надо задать событие onWSClose
. И не забыть добавить ее в vertoCallbacks.
Полный код
В итоге мы должны получить что-то подобное в нашем файле Javascript:
(function() { var vertoHandle, vertoCallbacks; $.verto.init({}, bootstrap); function bootstrap(status) { vertoHandle = new jQuery.verto({ // Параметры подключения... }, vertoCallbacks); }; vertoCallbacks = { onWSLogin: onWSLogin, onWSClose: onWSClose }; function onWSLogin(verto, success) { console.log('onWSLogin', success); }; function onWSClose(verto, success) { console.log('onWSClose', success); }; })();
HTML код
Чтобы приведенный выше код работал, мы должны включить Verto и зависимости в наш HTML файл.
Отредактируйте index.html
следующим образом.
<!-- Зависимости Verto --> <script src="../lib/node_modules/jquery/dist/jquery.min.js"></script> <script src="../lib/node_modules/jquery-json/dist/jquery.json.min.js"></script> <!-- Библиотека Verto --> <script src="../lib/node_modules/verto/src/jquery.verto.js"></script> <script src="../lib/node_modules/verto/src/jquery.FSRTC.js"></script> <script src="../lib/node_modules/verto/src/jquery.jsonrpcclient.js"></script> <!-- Наш проект --> <script src="main.js"></script>
Испытание
Мы не можем открыть index.html
напрямую в браузере без веб сервера, т.к. file://
не будет работать корректно.
Требуется получить доступ к файлу через веб сервер, вы можете использовать Apache, nginx или использовать встроенный Python HTTP server,
запустив его прямо в корневой директории нашего приложения:
python -m SimpleHTTPServer
или для Python3
python3 -m http.server 8000
Теперь вы можете получить доступ к приложению открыв в браузере адрес http://127.0.0.1:8000/src/index.html и протестировать соединение использовав консоль (F12).
В случае успешного подключения вы увидите в консоли onWSLogin true
Тест вебсокета Verto другими средствами
Подключенные нами библиотеки Javascript являются вебсокет клиентом, который устанавливает соединение с Freeswitch и отправляет ему команды в формате JSON-RPC используя данные определенные нами в переменной vertoHandle
.
Для наглядности мы можем поэксперементировать с другим клиентом и попробовать пообщаться с Verto самостоятельно.
В примере используем приложение websocat.
Выполним разобранную в данном примере процедуру log in.
Предположим что Freeswitch запущен на этом же хосте.
Использовать защищенное соединение не обязательно, независимо от расположения FS.
websocat ws://127.0.0.1:8081
и отправим команду jsonrpc:
{"jsonrpc":"2.0", "method":"login","params":{"login":"USER@FS_DOMAIN","passwd":"PASS","loginParams":{},"sessid":""}}
если все правильно, FS ответит:
{"jsonrpc":"2.0","id":null,"result":{"message":"logged in","sessid":"5cbfc8d6-c408-11e9-a992-390ef22bcc4a"}} {"jsonrpc":"2.0","id":4875,"method":"verto.clientReady","params":{"reattached_sessions":[]}}
Подключимся к консоли FS и проверим статус verto:
freeswitch@verto> verto status Name Type Data State ================================================================================================= default-v4 profile ws:0.0.0.0:8081 RUNNING default-v4 profile wss:0.0.0.0:8082 RUNNING default-v4::USER@FS_DOMAIN client 127.0.0.1:38638 CONN_REG (WS) =================================================================================================
Теперь попробуем что-нибудь более осмысленное:
FreeswitcH: FSAPI over Verto
{"jsonrpc":"2.0","method":"jsapi", "id":666, "params":{"command":"status", "data":{}}}
Да, через пользовательский интерфейс вебсокета Verto можно обращаться к fsapi.
Т.е. метод «jsapi» является командой - Freeswitch: fsapi - Json
Пользователю Directory должны быть выданы соответствующие разрешения:
<users> <user id="USER"> <params> <param name="jsonrpc-allowed-methods" value="verto"/> <param name="jsonrpc-allowed-event-channels" value="demo,conference,presence"/> <param name="jsonrpc-allowed-fsapi" value="all"/> <param name="jsonrpc-allowed-jsapi" value="all"/> ... </params> ...
Ответ FS:
Документация Freeswitch Verto: WebRTC софтфон