Инициализация 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);
};

Почти все что происходит в 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);
  };
})();

Чтобы приведенный выше код работал, мы должны включить 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>
Как альтернативу библиотекам jquery.verto.js, jquery.FSRTC.js и jquery.jsonrpcclient.js можно использовать библиотеку: https://freeswitch.org/stash/projects/FS/repos/freeswitch/browse/html5/verto/demo/js/verto-min.js

Мы не можем открыть 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 - инициация вызова., или Testing bandwidth.

Тест вебсокета 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 была выполнена команда api - Status.
Да, через пользовательский интерфейс вебсокета 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:

jsapi status

jsapi status

{ 
   "jsonrpc":"2.0",
   "id":666,
   "result":{ 
      "systemStatus":"ready",
      "uptime":{ 
         "years":0,
         "days":4,
         "hours":22,
         "minutes":15,
         "seconds":13,
         "milliseconds":470,
         "microseconds":785
      },
      "version":"1.8.5 git 31281a0 2019-01-24 22:53:59Z 64bit",
      "sessions":{ 
         "count":{ 
            "total":9524,
            "active":14,
            "peak":60,
            "peak5Min":14,
            "limit":1000
         },
         "rate":{ 
            "current":0,
            "max":30,
            "peak":7,
            "peak5Min":0
         }
      },
      "idleCPU":{ 
         "used":0,
         "allowed":82.700000
      },
      "stackSizeKB":{ 
         "current":240,
         "max":8192
      },
      "sessid":"5cbfc8d6-c408-11e9-a992-390ef22bcc4a"
   }
}

Документация Freeswitch Verto: WebRTC софтфон

  • freeswitch/verto/003-initializing-verto.txt
  • Последние изменения: 2019/08/22