Бэрримор, что за шум вокруг Voximplant? Внедрили веб-сокеты, сэр
WebSocket — это прогрессивный стандарт полнодуплексной (двусторонней) связи между клиентом и сторонним сервисом в режиме реального времени. Веб-сокеты используются для организации непрерывного обмена данными без разрыва соединения и дополнительных HTTP-запросов.
Отныне вы сможете передавать текст и аудио, пользуясь преимуществами веб-сокетов в полной мере. И мы рады сообщить вам, что все это стало возможным в Voximplant благодаря новому модулю VoxEngine, который называется – сюрприз – WebSocket. Проще говоря, у вас появился еще один инструмент, чтобы прокачать ваше приложение.
Из этой статьи вы узнаете, как создать исходящее WebSocket-соединение, передать через него аудиопоток и преобразовать его в текст с помощью Google Cloud Speech-to-Text API.
Данный модуль использует функции от Google, Yandex и Tinkoff, см. Обратите внимание, что у Voximplant есть встроенная функциональность преобразования речи в текст в реальном времени под управлением модуля ASR. подробности здесь.
Текущая же статья описывает случай, когда вы хотите использовать сторонний сервис преобразования речи в текст и/или тратить средства с его аккаунта, а не с аккаунта Voximplant.
Начнем с того, что разберемся, какие бывают типы соединений и как их установить.
Есть два типа WebSocket-соединений:
- исходящее;
- входящее.
Исходящее
Первое, что вам нужно сделать при создании исходящего соединения — это запустить сценарий VoxEngine. Затем вызвать метод VoxEngine.createWebSocket, который создаст объект WebSocket. Данный метод принимает 2 параметра: URL в формате 'wss: // + domain + path' и protocols (опционально). Вот как это будет выглядеть в коде:
VoxEngine.addEventListener(AppEvents.CallAlerting, function(e) { const webSocket = VoxEngine.createWebSocket( /*url*/ "wss://your_link/"); // You can handle an outgoing WebSocket connection here
});
Если все сработало, метод call.sendMediaTo направит аудиопоток в сокет, а WebSocket.send, в свою очередь, будет пересылать декодированный аудиопоток в формате JSON через него. В результате чего вам будут приходить сообщения от сервиса, обрабатывающего запросы.
Обратите внимание, что соединение может быть закрыто как со стороны клиента, так и со стороны сервера.
Метод WebSocket.close нужен, чтобы закрыть соединение.
Входящее
Для того, чтобы разрешить входящие соединения, необходимо сообщить об этом через VoxEngine.allowWebSocketConnections, а также подписаться на событие AppEvents.WebSocket. После чего можно будет принять входящее соединение и получить объект WebSocket: event.WebSocket. Смотрите код ниже:
VoxEngine.allowWebSocketConnections(); VoxEngine.addEventListener(AppEvents.WebSocket, function(e) { // You can handle an incoming WebSocket connection here
});
Для создания входящего веб-сокета нужен управляющий accessSecureURL. Его можно взять из события AppEvents.Started или ответа на HTTP-запрос, который запустил сессию. Обратите внимание, что «https» должно быть изменено на 'wss' в URL.
Остальные шаги идентичны представленным в схеме исходящего соединения.
Вам понадобятся
Чтобы заимплементить технологию WebSocket и распознавание речи в ваше приложение, вам понадобятся:
- аккаунт Voximplant. Если у вас его нет, смело регистрируйтесь по ссылке;
- приложение Voximplant, а также сценарий, правило и один пользователь. Все это будет создано в данном туториале;
- простой бэкенд (мы запустим сервер на node.js) с подключенным Cloud client library для Speech-to-Text API;
- веб-клиент для совершения звонка (мы будем использовать вебфон на phone.voximplant.com).
1. Настройки VOXIMPLANT
Для начала авторизуйтесь в вашем аккаунте на manage.voximplant.com/auth. В меню слева нажмите «Приложения», затем «Новое приложение» и создайте приложение с именем websocket. Зайдите в ваше приложение, переключитесь на вкладку «Сценарии», создайте сценарий и вставьте в него следующий код:
require(Modules.WebSocket); VoxEngine.addEventListener(AppEvents.CallAlerting, function(e) ); webSocket.addEventListener(WebSocketEvents.CLOSE, function(e) { Logger.write("LOG OUTGOING: WebSocketEvents.CLOSE: " + e.reason); call.sendMessage("LOG OUTGOING: WebSocketEvents.CLOSE: " + e.reason); }); webSocket.addEventListener(WebSocketEvents.OPEN, function(e) { Logger.write("LOG OUTGOING: WebSocketEvents.OPEN"); Logger.write(JSON.stringify(e)) call.sendMessage("LOG OUTGOING: WebSocketEvents.OPEN"); }); webSocket.addEventListener(WebSocketEvents.MESSAGE, function(e) { Logger.write("LOG OUTGOING: WebSocketEvents.MESSAGE: " + e.text); call.sendMessage("LOG OUTGOING: WebSocketEvents.MESSAGE: " + e.text); if (e.text == "Hi there, I am a WebSocket server") { call.sendMediaTo(webSocket, { encoding: WebSocketAudioEncoding.ULAW, "tag": "MyAudioStream", "customParameters": { "param1": "12345" } }); } }); call.addEventListener(CallEvents.Disconnected, function(e) { Logger.write("LOG OUTGOING: terminating in 1 sec"); webSocket.close(); setTimeout(VoxEngine.terminate, 1000); });
});
Этот сценарий VoxEngine отправляет аудиопоток в WebSocket, а также отслеживает его события (ERROR, CLOSE, OPEN, MESSAGE). Углубиться в детали сценария мы сможем немного позже.
Теперь осталось лишь выбрать ваш сценарий, а маску оставить по умолчанию ( .* ). А сейчас давайте перейдем на вкладку «Роутинг», нажмем «Новое правило» и назовем его socketRule.
Последнее, что требуется сделать на данном этапе – создать пользователя. Переключитесь на вкладку «Пользователи», нажмите «Создать пользователя», укажите имя (например, socketUser) и пароль, затем кликните «Создать». Эта пара логин-пароль понадобится нам для аутентификации в веб-клиенте на последнем шаге.
Конфигурация завершена, но прежде чем приступить к созданию сервера, давайте рассмотрим, как работает модуль WebSocket в нашем сценарии.
2. Детали сценария
Модуль WebSocket позволяет разработчикам открывать устойчивое соединение и отправлять через него данные. Чтобы использовать этот модуль, мы должны подключить его в самом начале сценария:
require(Modules.WebSocket);
Через метод createWebSocket мы определяем URL-адрес и protocols (опционально). Вы можете узнать, как получить URL для WebSocket из следующего раздела.
const webSocket = VoxEngine.createWebSocket( /*url*/ "wss://your_ngrok_link/");
После создания объекта WebSocket мы продолжаем управление звонком внутри обработчика. А именно, отправляем медиа объекту WebSocket с помощью метода call.sendMediaTo.
Если вы не установите кодировку, по умолчанию будет использоваться PCM8. Здесь можно установить предпочтительный формат кодировки, тэг и некоторые кастомные параметры.
В нашем сценарии код вызова выглядит так: Данный метод вызывается, когда приходит сообщение об успешном соединении.
call.sendMediaTo(webSocket, { encoding: WebSocketAudioEncoding.ULAW, "tag": "MyAudioStream", "customParameters": { "param1": "12345" }
});
Все остальные события WebSocket, которые вы видите в коде, предназначены для отладки. Соответствующие обработчики ничего не делают, кроме отправки сведений в лог Voximplant-сессии. Вы можете убрать их, если хотите.
В нашем случае сессия Voximplant закончит свою работу через 1 секунду после завершения установленного вызова (Disconnected): Наконец, мы добавляем правильный обработчик завершения передачи данных.
call.addEventListener(CallEvents.Disconnected, function(e) { Logger.write("LOG OUTGOING: terminating in 1 sec"); webSocket.close(); setTimeout(VoxEngine.terminate, 1000);
});
Теперь, когда логика сценария ясна, пришло время перейти к следующей, очень важной части нашего примера.
3. Backend
Во-первых, убедитесь, что на вашем компьютере установлен Node.js. В противном случае перейдите на основной сайт Node.js и скачайте его.
Затем выполните следующие команды в окне терминала одну за другой, чтобы настроить рабочую среду:
npm install express
npm install ws
npm install @google-cloud/speech
А когда это будет сделано, создайте пустой JS-файл и поместите туда следующий код (нюансы кода будут освещены ниже):
const app = require('express')();
const http = require('http').createServer(app);
const WebSocket = require('ws');
const fs = require('fs'); const wss = new WebSocket.Server({ server: http
}); // Импортируем клиентскую библиотеку для Google Cloud
const speech = require('@google-cloud/speech'); // Создаем инстанс клиента
const client = new speech.SpeechClient(); const config = { encoding: 'MULAW', sampleRateHertz: 8000, languageCode: 'en-US',
}; const request = { config, interimResults: true,
}; let audioInput = [];
let recognizeStream = null;
process.env["NODE_TLS_REJECT_UNAUTHORIZED"] = 0; app.get('/', function(req, res) { res.send('<h1>Hello world</h1>');
}); wss.on('connection', (ws) => { // Создаем поток, позволяющий сохранить переданные данные в файл var wstream = fs.createWriteStream('myBinaryFile'); // Очищаем текущий audioInput audioInput = []; // Инициируем распознавание аудиопотока recognizeStream = client .streamingRecognize(request) .on('error', err => { console.error('API request error ' + err); }) .on('data', data => { ws.send(data.results[0].alternatives[0].transcript) process.stdout.write( data.results[0] && data.results[0].alternatives[0] ? `Transcription: ${data.results[0].alternatives[0].transcript}\n` : `\n\nReached transcription time limit, press Ctrl+C\n` ) }); ws.on('close', (message) => { wstream.end(); }) // Соединение установлено, добавляем логику для события message ws.on('message', (message) => { // Помещаем аудио в формате base64 в recognizeStream try { let data = JSON.parse(message) if (data.event == "media") { let b64data = data.media.payload; let buff = new Buffer.from(b64data, 'base64'); recognizeStream.write(buff); wstream.write(buff); } } catch (err) { console.log(message) } }); // Отправляем уведомление об установке соединения ws.send('Hi there, I am a WebSocket server');
}); http.listen(3000, function() { console.log('listening on *:3000');
});
Теперь, когда сервер настроен, он поможет нам выполнить распознавание речи. Протестируйте свое решение локально, создав туннель на localhost 3000 с помощью ngrok.
Для этого выполните следующие действия:
- Установите ngrok, следуя инструкциям на его сайте.
- Укажите свой authtoken для ngrok, чтобы привязать клиента к этой учетной записи.
- Выполните команду node your_file_name.js, чтобы запустить ваш сервер на localhost: 3000.
- Перейдите в папку ngrok на вашем компьютере и выполните команду ./ngrok http 3000, чтобы сделать туннель между работающим локальным сервером и публичным URL.
Обратите внимание на сгенерированный публичный URL, мы используем его в качестве WebSocket URL с префиксом 'wss' в сценарии:
4. Распознавание речи
Вы наверняка заметили, что код нашего бэкенда содержит строки, относящиеся к Google Cloud.
Сама библиотека импортируется следующим образом:
const speech = require('@google-cloud/speech');
Теперь вам нужно указать, как обрабатывать запрос на распознавание речи. Для этого выберите encoding, sampleRateHertz и languageCode в создаваемом config:
const config = { encoding: 'MULAW', sampleRateHertz: 8000, languageCode: 'en-US',
};
Далее, создайте поток на запись, позволяющий сохранить переданные данные в файл:
var wstream = fs.createWriteStream('myBinaryFile');
Когда все настроено, необходимо распарсить сообщение и поместить аудиоданные в формате base64 в recognizeStream:
let data = JSON.parse(message)
if (data.event == "media") { b64data = data.media.payload; let buff = new Buffer.from(b64data, 'base64'); recognizeStream.write(buff); wstream.write(buff);
}
Сразу после этого будет инициирован запрос на распознавание и начнется обработка этого запроса:
recognizeStream = client .streamingRecognize(request) .on('data', data => { ws.send(data.results[0].alternatives[0].transcript) });
И наконец, предоставьте учетные данные вашего service account, чтобы подключить библиотеку Google к ее бэкенду. Для этого перейдите на страницу аутентификации Google и выполните все шаги, перечисленные там. Затем запустите команду экспорта в той же рабочей области (в той же вкладке «Терминал»), что и команду node your_file_name.js:
export GOOGLE_APPLICATION_CREDENTIALS="/home/user/Downloads/[FILE_NAME].json"
Запускаем сокеты
Откройте phone.voximplant.com, заполните форму и нажмите Sign in. Username и password относятся к пользователю, созданному на шаге 1:
После успешной авторизации нажмите Call и начните говорить. Облако Speech-to-Text будет преобразовывать вашу речь в текст в режиме реального времени, и вы сможете увидеть этот текст в окне терминала.
Надеемся, что статья пришлась вам по нраву, и желаем больше интеграций и новых челленджей. Вы справились, поздравляем!