Mejora tus Video Applications de Vonage con Audio Connector

La comunicación por Video ha evolucionado rápidamente en los últimos años, y hoy en día existen muchas funciones para personalizar la experiencia de videollamada de los usuarios. Muchas de ellas se centran en la manipulación de la señal de vídeo, como la sustitución o el desenfoque del fondo. Sin embargo, no hay que descuidar el componente de audio de una videollamada. La capacidad de trabajar con señales de audio abre un montón de posibilidades para mejorar la experiencia general del usuario. Si utilizas la Video API de Vonage, entonces el Conector de audio está diseñada exactamente para este propósito.

¿Qué es el conector de audio?

Conector de audio es una función de la API de Video de Vonage que te permite enviar secuencias de audio sin procesar desde una sesión de Vonage Video, a través de tu propio servidor WebSocket, a servicios externos para su posterior procesamiento.

Esta función puede utilizarse de varias maneras:

• Enviar un único flujo de audio a una URL WebSocket

• Enviar varios flujos de audio, cada uno a una URL WebSocket distinta

• Envíe varios flujos de audio mezclados a una única URL WebSocket

Overview Diagram of Audio Connector

¿Qué puedes hacer con Audio Connector?

Existen muchas aplicaciones y casos de uso potenciales para la función Conector de audio. Por ejemplo, el procesamiento de flujos de audio para crear subtítulos en directo, transcripciones en directo o fuera de línea, o traducciones del audio podría ayudar a mejorar la accesibilidad en un contexto de mantenimiento de registros. La búsqueda de palabras específicas en un flujo de audio podría utilizarse para aplicaciones de moderación de contenidos o de búsqueda e indexación. Los flujos de audio también pueden utilizarse en aplicaciones de inteligencia de medios, como la creación de un resumen textual de una llamada o reunión. Otra aplicación utiliza un flujo de audio para analizar el sentimiento de una conversación. Estos son sólo algunos ejemplos de las muchas posibilidades que ofrece esta función.

¿Cómo puedes utilizar Audio Connector en tus aplicaciones?

Para agregar la funcionalidad del conector de audio a tus aplicaciones de Vonage Video se necesitan los siguientes componentes:

1. Un websocket, con un URI de websocket de acceso público

2. Un servicio externo para procesar el audio de alguna manera

3. El punto final REST /connect de Vonage Video

Hay muchas formas de configurar los componentes 1 y 2, y cómo decidas hacerlo depende de ti. Más adelante en este artículo, veremos un ejemplo de aplicación que utiliza Koa WebSocket para el componente WebSocket, y Symbl.ai para el componente de procesamiento de audio.

Con respecto al componente 3, el punto final REST /connect de Vonage Video, hay documentación detallada disponible en nuestra Referencia de API REST y Guía para desarrolladores. En resumen, una solicitud HTTP POST al punto final comenzará a transmitir el audio de la sesión de Vonage Video especificada al WebSocket URI designado. El cuerpo de la solicitud requiere que se incluya cierta información, como el sessionId de la sesión de Video desde la cual se transmitirá el audio, un token válido para esa sesión y el URI del WebSocket al cual se transmitirá el audio. También hay algunas propiedades opcionales, incluyendo una matriz de flujos que le permite especificar flujos de audio individuales para ser transmitidos al WebSocket; veremos esta propiedad en más detalle como parte del tutorial de la aplicación de ejemplo.

En cuanto a Vonage Video, eso es todo. El audio de la sesión se transmite al WebSocket. Existen infinitas posibilidades para lo que haces con esas transmisiones de audio.

Veamos un ejemplo de lo que puede hacer.

Recorrido por las aplicaciones de muestra

En esta aplicación de demostración, implementamos una función de transcripción para videollamadas utilizando Symbl.ai's de Symbl.ai. Puede consultar (y clonar) la aplicación de demostración completa en nuestra Vonage Community GitHub org. En esta publicación, recorreremos algunas de las funciones y componentes clave de la aplicación.

Nota: este es un recorrido de alto nivel de algunos de los elementos clave de la aplicación más que un tutorial en profundidad. Además, asume cierto conocimiento de la creación de una aplicación Node estilo Express y cierta familiaridad con el funcionamiento de la Video API de Vonage.

Aplicaciones

Primero tenemos que unirnos a la sesión de Video introduciendo un nombre y haciendo clic en "Unirse". El nombre introducido se utilizará posteriormente para identificar al orador de la secuencia de audio específica.

Join Call screenshot

A continuación, puedes compartir el enlace de la reunión con otros participantes. Una vez que todos los participantes se hayan unido a la sesión, al hacer clic en "Iniciar transcripción" se iniciará el proceso de transcripción.

Realice la videollamada con normalidad. Cuando quieras ver la transcripción de la llamada, haz clic en el botón "Obtener transcripción" para ver los nombres de los interlocutores y el audio transcrito.

Transcription View screenshot

A continuación puede ver un Video de la aplicación en acción:

Application Components

La demo es una aplicación Node y utiliza el framework Koa Webserver. Si ya estás familiarizado con Express.js, entonces Koa es relativamente similar. La aplicación también utiliza un montón de middleware Koa para la funcionalidad, tales como enrutamiento, renderizado de vistas, servir activos estáticos, etc. Uno de los middlewares utilizados es Koa WebSocket de Koa. Esta librería te permite crear y usar WebSockets como parte de tu aplicación Koa.

Además, la aplicación utiliza el Symbl.ai JavaScript SDK para simplificar las interacciones con la API de transmisión de Symbli.ai. En cuanto a Vonage Video, utiliza el SDK de servidor de Vonage Video SDK de servidor OpenTok Node para manejar las llamadas a la API del lado del servidor, y el Opentok JavaScript Client SDK en las plantillas de vista de nuestra aplicación para manejar las interacciones del lado del cliente, como la publicación y suscripción a secuencias de vídeo.

El archivo index.js

El archivo index.js es el punto de entrada de nuestra aplicación.

En la parte superior del archivo requerimos las diversas dependencias que nuestra aplicación necesita para funcionar:

require('dotenv').config();

const Koa = require('koa');
const Router = require('@koa/router');
const render = require('koa-ejs');
const path = require('path');
const serve = require('koa-static');
const websockify = require('koa-websocket');
const OpenTok = require("opentok");

Luego instanciamos una nueva aplicación Koa y la habilitamos para conexiones WebSocket, antes de instanciar un nuevo router Koa que usaremos para nuestras rutas WebSocket. Finalmente, hacemos que ese router esté disponible en todas las rutas de nuestra aplicación añadiéndolo como una variable ws variable en app.context.

const app = new Koa();
const socket = websockify(app);
const ws = new Router();
app.context.ws = ws;

A continuación necesitamos algunas rutas de aplicación que hemos definido en otros archivos:

const basicHttp = require('./routes/basic');
const symblTranscriptionHttp = require('./routes/symbl/transcription');

A continuación, inicializamos nuestros objetos Vonage Video SDK y Symbl.ai SDK utilizando las credenciales que hemos establecido como variables de entorno:

const opentok = new OpenTok(process.env.VONAGE_API_KEY, process.env.VONAGE_API_SECRET);
app.context.opentok = opentok;

const symblSdk = require('@symblai/symbl-js').sdk;
app.context.symblSdk = symblSdk;
app.context.transcriptions = [];

symblSdk.init({
  appId: process.env.SYMBL_APP_ID,
  appSecret: process.env.SYMBL_APP_SECRET,
  basePath: 'https://api.symbl.ai'
})
.then(() => console.log('Symbl.ai SDK Initialized.'))
.catch(err => console.error('Error in initialization.', err));

En el código anterior, también hacemos que ambos SDK estén disponibles en todas las rutas de nuestra aplicación añadiéndolos a app.contexty hacemos lo mismo con un array transcriptions que utilizaremos más adelante para almacenar todos nuestros objetos de transcripción.

A continuación, creamos una nueva sesión de vídeo llamando al método createSession del SDK:

opentok.createSession({ mediaMode: "routed" }, function (err, session) {
  if (err) throw err;
    app.context.openTokSession = session;
});

Una cosa importante a tener en cuenta aquí es el mediaMode para la sesión se establece en routed. Sólo podemos usar el conector de audio para sesiones en las que las transmisiones se enrutan a través de los servidores de medios de video de Vonage.

A continuación, tenemos algo de código que configura el servicio de activos estáticos y el renderizado de plantillas de vista (que no detallaremos aquí) antes de configurar finalmente la aplicación para utilizar las rutas que se han definido en los archivos de rutas, así como las rutas WebSocket que definiremos más adelante como parte de la funcionalidad de transcripción. Finalmente, inicializamos la aplicación.

app.use(basicHttp.routes()).use(basicHttp.allowedMethods());
app.ws.use(ws.routes()).use(ws.allowedMethods());

app.use(symblTranscriptionHttp.routes()).use(symblTranscriptionHttp.allowedMethods());

app.listen(3000, console.log('Listening on port 3000'));

Rutas

Las rutas http de la aplicación se definen en un par de archivos:

• /routes/basic.js

• /routes/symbl/transcription.js

No vamos a explorarlas en detalle, ya que la mayoría de las rutas ofrecen vistas. Sin embargo, una de las rutas clave es la /transcribe . Cuando se pulsa el botón "Iniciar transcripción" en la interfaz de usuario de la videollamada, se envía una solicitud POST a esta ruta, invocando la acción del controlador postSymblTranscription que veremos a continuación.

La acción del controlador postSymblTranscription

Este es el componente clave para administrar la funcionalidad de transcripción. Este controlador hace varias cosas, pero lo primero que debe hacer es obtener una lista de todas las transmisiones que se publican en la sesión de Vonage Video. Utiliza el método listStreams streams del SDK de Vonage OpenTok Node. Esto provee un array de objetos, donde cada objeto representa un stream publicado en la sesión.

opentok.listStreams(otSession.sessionId, function(error, streams) {

  // rest of code

 });

A continuación, iteramos a través de los flujos y realizamos un conjunto concreto de acciones para cada flujo. Lo hacemos específicamente para poder identificar más tarde al hablante de cada pieza de audio transcrita.

streams.forEach(async stream => {
  let stream_id = stream.id;
  let stream_name = stream.name;
  let symblConnection;
  let socketUriForStream = socketURI + '/' + stream_id;

  // 1. start a Symbl.ai realtime streaming request

  // 2. create a websocket on our application

  // 3. request the Audio Connector to start streaming audio to that websocket

 });

Iniciar una solicitud de transmisión en tiempo real de Symbl.ai

Aquí utilizamos el método startRealtimeRequest del SDK de Symbl.ai para iniciar una solicitud de streaming:

symblConnection = await symblSdk.startRealtimeRequest({
  id: stream_id,
  speaker: {
		name: stream_name
  },
  insightTypes: \['action_item', 'question'],
  config: {
		meetingTitle: 'My Test Meeting',
		confidenceThreshold: 0.9,
		timezoneOffset: 0, // Offset in minutes from UTC
		languageCode: 'en-GB',
		sampleRateHertz: 16000,
  },
  handlers: {
		onSpeechDetected: (data) => {
	   if (data && data.isFinal) {
	     const {user, punctuated} = data;
	     console.log('Live: ', punctuated.transcript);
	     transcriptions.push({id: user.id, name: user.name, transcription: punctuated.transcript});
	   }
		}
  }
});

Puede obtener más información sobre cómo funciona exactamente en la documentación de documentación de Symbl.ai. Algunas cosas a tener en cuenta son:

• Fijamos un idque es el stream_id que obtuvimos de la sesión de Video de Vonage

• Definimos un speaker con una propiedad name cuyo valor es el nombre establecido para el flujo de la sesión de Vonage Video.

• Establecemos algunas config opciones. De particular interés son las opciones confidenceThreshold y languageCodeque pueden ayudar a mejorar la precisión de las transcripciones.

• Definimos un manejador de eventos para el onSpeechDetected evento. Esto toma los datos devueltos por la API de streaming de Symbl.ai y utiliza esos datos para rellenar un objeto con propiedades de nombre y transcripción que luego empujamos a nuestro transcriptions array.

Crear un websocket en nuestra aplicación

También necesitamos crear rutas websocket individuales para cada uno de nuestros flujos de audio:

ws.get('/socket/' + stream_id, ctx => {
  let connection = symblConnection;
  console.log(connection);
  ctx.websocket.on('message', function(message) {
		try {
		   const event = JSON.parse(message);
		   if (event.event === 'websocket:connected') {
		     console.log(event);
		   }
		} catch(err) {
		   if (connection) {
		     connection.sendAudio(message);
		     return;
		   }
		}
  });
});

Para ello, creamos una ruta get en nuestro objeto Koa Websocket con la ruta stream_id para ese flujo de audio específico como parte de la ruta. Dentro de la ruta, declaramos una variable connection variable asignada al objeto symbl stream para este flujo de audio específico, al que luego enviamos el mensaje data recibido por el websocket utilizando el método de Symbl.ai SDK. sendAudio de Symbl.ai.

Solicita al conector de audio que inicie la transmisión de audio

La última acción que debemos realizar es enviar una solicitud al punto final del conector de audio de la Video API de Vonage para iniciar la transmisión de audio de la transmisión de audio específica al WebSocket que hemos definido para esa transmisión:

opentok.websocketConnect(otSession.sessionId, token, socketUriForStream, {streams: \[stream_id]}, function(error, socket) {
  if (error) {
		console.log('Error:', error.message);
	} else {
		console.log('OpenTok Socket websocket connected');
  }
});

Dos de los argumentos del método son clave aquí:

• El socketUriForStream es el WebSocket URI que creamos anteriormente para recibir datos de streaming para este flujo de audio específico.

• El objeto especifica un array de los que streams queremos que el Conector de Audio transmita audio. Ten en cuenta que el array sólo tiene un elemento: el stream_id para el stream específico en la iteración actual.

Los pasos anteriores se repiten para cada flujo de la sesión, de modo que cada uno se transcribe por separado con un locutor identificable.

La ruta y la vista de la simblotranscripción

Por último, cabe mencionar la /symbl-transcription y su plantilla de vista equivalente. Cuando se hace clic en el botón "Obtener transcripción", se envía una solicitud a la ruta, que a su vez llama a una acción del controlador para mostrar la vista. GET a la ruta, que a su vez llama a una acción del controlador para generar la vista.

La acción del controlador establece una variable transcriptions a la matriz de objetos de transcripciones y la pasa a la vista:

exports.getSymblTranscription = (ctx) => {
    let transcriptions = ctx.transcriptions;
    return ctx.render('symbl-transcription', {
    transcriptions: transcriptions
   }
 );
};

En el cuerpo de la vista, cada transcripción se muestra como un párrafo, con el nombre del orador y el texto transcrito.

<body>
  <h2>Vonage Video Demo - Audio Connector & Symbl.ai: Transcription</h2>
  <% transcriptions.forEach(transcription => { %>
		<p><strong><%= transcription.name %>:</strong>  <%= transcription.transcription %></p>
  <% }); %>
</body>

Próximos pasos

¿Qué construirías con el conector de audio de la API de Video de Vonage? Puedes usar nuestra aplicación de demostración como punto de partida para tu propio proyecto, o comenzar desde cero si lo prefieres. Si deseas utilizar un lenguaje que no sea JavaScript para tu aplicación, la función Audio Connector también está disponible en nuestros otros SDK del servidor de video de Vonage.

¡Feliz construcción! Si tienes algún comentario o pregunta, no dudes en comunicarte con nosotros en nuestro Slack para desarrolladores de Vonage.