Améliorez vos Applications Video de Vonage avec Audio Connector

La communication Video a évolué rapidement ces dernières années, et il existe aujourd'hui de nombreuses fonctionnalités permettant de personnaliser l'expérience des appels vidéo pour les utilisateurs. De nombreuses fonctionnalités se concentrent sur la manipulation du flux vidéo, comme le remplacement de l'arrière-plan ou le flou d'arrière-plan. La composante audio d'un appel vidéo ne doit cependant pas être négligée. La possibilité de travailler avec des flux audio ouvre une multitude de possibilités pour améliorer l'expérience globale de l'utilisateur. Si vous utilisez l'API Video de Vonage, alors le Connecteur audio est conçu exactement à cette fin !

Qu'est-ce qu'un connecteur audio ?

Connecteur audio est une fonction de l'API Video de Vonage qui vous permet d'envoyer des flux audio bruts d'une session Video de Vonage, via votre propre serveur WebSocket, à des services externes pour un traitement ultérieur.

Cette fonction peut être utilisée de plusieurs manières :

• Envoi d'un flux audio unique à une URL WebSocket

• Envoi de plusieurs flux audio, chacun vers une URL WebSocket distincte

• Envoi de plusieurs flux audio mixés à une seule URL WebSocket

Overview Diagram of Audio Connector

Que pouvez-vous faire avec Audio Connector ?

Il existe de nombreuses applications potentielles et de nombreux cas d'utilisation de la fonction Connecteur audio. Par exemple, le traitement des flux audio pour créer un sous-titrage en direct, des transcriptions en direct ou hors ligne, ou des traductions de l'audio pourrait contribuer à améliorer l'accessibilité dans un contexte d'archivage. La recherche de mots spécifiques dans un flux audio pourrait être utilisée pour la modération de contenu ou les applications de recherche et d'indexation. Les flux audio peuvent également être utilisés dans des applications de veille médiatique, comme la création d'un résumé textuel d'un appel ou d'une réunion. Une autre application utilise un flux audio pour l'analyse du sentiment d'une conversation. Il ne s'agit là que de quelques exemples des nombreuses possibilités offertes par cette fonctionnalité.

Comment pouvez-vous utiliser Audio Connector dans vos Applications ?

L'ajout de la fonctionnalité Connecteur audio à vos applications Video de Vonage nécessite les composants suivants :

1. Un websocket, avec un URI de websocket accessible au public

2. Un service externe pour traiter l'audio d'une manière ou d'une autre

3. Le point de terminaison REST /connect de Vonage Video

Il existe de nombreuses façons de mettre en place les composants 1 et 2, et la façon dont vous décidez de le faire dépend vraiment de vous. Plus loin dans cet article, nous verrons un exemple d'application qui utilise les composants Koa WebSocket pour le composant WebSocket, et Symbl.ai pour le composant de traitement audio.

En ce qui concerne le composant 3, le point de terminaison REST /connect de Vonage Video, une documentation détaillée est disponible dans notre Référence de l'API REST et notre Guide du développeur. En bref, une requête HTTP POST vers le point de terminaison commencera à diffuser l'audio de la session Vonage Video spécifiée vers l'URI WebSocket désigné. Le corps de la demande doit contenir certaines informations, telles que l'identifiant de session de la session Video à partir de laquelle l'audio sera diffusé, un jeton valide pour cette session et l'URI de la WebSocket vers laquelle l'audio doit être diffusé. Il existe également des propriétés facultatives, notamment un tableau de flux qui vous permet de spécifier des flux audio individuels à transmettre à la WebSocket ; nous examinerons cette propriété plus en détail dans le cadre de l'exemple d'application.

Du côté de Vonage Video, c'est à peu près tout. L'audio de la session est transmis en continu à la WebSocket. Les possibilités d'utilisation de ces flux audio sont alors infinies.

Voyons un exemple de ce que vous pouvez faire !

Présentation d'un exemple d'application

Dans cette application de démonstration, nous mettons en œuvre une fonctionnalité de transcription pour les appels vidéo en utilisant. Symbl.ai's de Symbl.ai. Vous pouvez consulter (et cloner) l'application de démonstration complète application de démonstration complète sur notre Communauté Vonage GitHub org. Dans ce billet, nous allons passer en revue quelques-unes des principales fonctionnalités et composantes de l'application.

Remarque : il s'agit d'une présentation de haut niveau de certains des éléments clés de l'application plutôt que d'un tutoriel approfondi. Il suppose également une certaine connaissance de la construction d'une application Node de type Express et une certaine familiarité avec le fonctionnement de l'API Video de Vonage.

Aperçu des applications

Nous devons d'abord rejoindre la session Video en entrant un nom et en cliquant sur "Rejoindre". Le nom saisi sera utilisé ultérieurement pour identifier l'orateur pour le flux audio spécifique.

Join Call screenshot

Vous pouvez ensuite partager le lien de la réunion avec d'autres participants. Une fois que tous les participants ont rejoint la session, cliquez sur "Commencer la transcription" pour lancer le processus de transcription.

Menez l'appel vidéo comme d'habitude. Lorsque vous souhaitez consulter la transcription de l'appel, cliquez sur le bouton "Obtenir la transcription" pour afficher une vue montrant les noms des intervenants et l'audio transcrit.

Transcription View screenshot

Vous pouvez regarder une vidéo de l'application en action ci-dessous :

Composants de l'application

La démo est une application Node et utilise le framework Koa Webserver. Si vous êtes déjà familier avec Express.js, Koa est relativement similaire. L'application utilise également un certain nombre d'intergiciels Koa pour des fonctionnalités telles que le routage, le rendu des vues, le service d'actifs statiques, etc. L'un des intergiciels utilisés est Koa WebSocket de Koa. Cette bibliothèque vous permet de créer et d'utiliser des WebSockets dans le cadre de votre application Koa globale.

En outre, l'application utilise le Symbl.ai JavaScript SDK pour simplifier les interactions avec l'API de streaming de Symbli.ai. Du côté de Vonage Video, elle utilise le SDK de serveur OpenTok Node. OpenTok Node server SDK pour gérer les appels d'API côté serveur, et le Client SDK JavaScript d'OpenTok dans les modèles de vue de notre application pour gérer les interactions côté client, telles que la publication et l'abonnement aux flux vidéo.

Le fichier index.js

Le fichier index.js est le point d'entrée de notre application.

En haut du fichier, nous demandons les différentes dépendances dont notre application a besoin pour fonctionner :

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");

Nous instancions ensuite une nouvelle application Koa et l'activons pour les connexions WebSocket, avant d'instancier un nouveau Koa Router que nous utiliserons pour nos routes WebSocket. Enfin, nous rendons ce routeur disponible dans toutes les routes de notre application en l'ajoutant en tant que ws sur app.context.

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

Ensuite, nous avons besoin de certaines routes d'application que nous avons définies dans d'autres fichiers :

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

Nous initialisons ensuite nos objets SDK Video de Vonage et SDK Symbl.ai à l'aide des informations d'identification que nous avons définies en tant que variables d'environnement :

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));

Dans le code ci-dessus, nous rendons également les deux SDK disponibles dans toutes les routes de notre application en les ajoutant à app.contextet nous faisons de même avec un tableau transcriptions que nous utiliserons plus tard pour stocker tous nos objets de transcription.

Nous créons ensuite une nouvelle session vidéo en appelant la méthode suivante du SDK createSession du SDK :

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

Il est important de noter que la valeur mediaMode de la session est fixée à routed. Nous ne pouvons utiliser le connecteur audio que pour les sessions dont les flux sont acheminés via les serveurs de médias vidéo de Vonage.

Nous avons ensuite du code qui configure le service des actifs statiques et le rendu des modèles de vue (que nous ne détaillerons pas ici) avant de configurer l'application pour qu'elle utilise les routes qui ont été définies dans les fichiers de routes ainsi que les routes WebSocket que nous définirons plus tard dans le cadre de la fonctionnalité de transcription. Enfin, nous initialisons l'application.

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'));

Itinéraires

Les routes http de l'application sont définies dans quelques fichiers :

• /routes/basic.js

• /routes/symbl/transcription.js

Nous ne les examinerons pas en détail, car la plupart des itinéraires rendent des vues. L'une des routes les plus importantes est la route /transcribe . Lorsque l'on clique sur le bouton "Démarrer la transcription" dans l'interface utilisateur de l'appel vidéo, une requête POST est envoyée à cette route, invoquant l'action du contrôleur postSymblTranscription que nous verrons plus loin.

L'action du contrôleur postSymblTranscription

Il s'agit de l'élément clé de la gestion de la fonctionnalité de transcription. Ce contrôleur fait plusieurs choses, mais la première chose qu'il doit faire est d'obtenir une liste de tous les flux publiés dans la session Video de Vonage. Il utilise la méthode listStreams streams du SDK OpenTok de Vonage. Celle-ci fournit un tableau d'objets, chaque objet représentant un flux publié dans la session.

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

  // rest of code

 });

Nous parcourons ensuite les flux et effectuons un ensemble particulier d'actions pour chacun d'entre eux. Nous procédons ainsi afin de pouvoir identifier ultérieurement le locuteur de chaque morceau d'audio transcrit.

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

 });

Démarrer une requête de streaming en temps réel de Symbl.ai

Nous utilisons ici la méthode startRealtimeRequest du SDK Symbl.ai pour lancer une requête 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});
	   }
		}
  }
});

Vous pouvez en savoir plus sur la façon dont cela fonctionne dans la documentation de documentation de Symbl.ai. Quelques points à noter cependant :

• Nous fixons un idqui est le stream_id que nous avons obtenu de la session Video de Vonage

• Nous définissons un speaker avec une propriété name dont la valeur est le nom défini pour le flux de la session Video de Vonage.

• Nous avons défini certaines config options. Les options confidenceThreshold et languageCodequi peuvent toutes deux contribuer à améliorer la précision de vos transcriptions.

• Nous définissons un gestionnaire d'événement pour l'événement onSpeechDetected événement. Celui-ci prend les données renvoyées par l'API de streaming de Symbl.ai et les utilise pour remplir un objet avec les propriétés de nom et de transcription que nous poussons ensuite dans notre transcriptions tableau.

Créer un websocket sur notre application

Nous devons également créer des routes websocket individuelles pour chacun de nos flux 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;
		   }
		}
  });
});

Pour ce faire, nous créons une get sur notre objet Koa Websocket avec l'élément stream_id pour ce flux audio spécifique dans le chemin de la route. Dans la route, nous déclarons une variable connection attribuée à l'objet symbl stream pour ce flux audio spécifique, à laquelle nous envoyons ensuite le message reçu par le websocket à l'aide de la méthode Symbl.ai. data reçu par le websocket en utilisant la méthode du SDK Symbl.ai sendAudio du SDK Symbl.ai.

Demander au connecteur audio de commencer à diffuser de l'audio

La dernière action à effectuer est d'envoyer une demande au point de terminaison du connecteur audio de l'API Video de Vonage pour commencer à diffuser le flux audio spécifique sur la WebSocket que nous avons définie pour ce flux :

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');
  }
});

Deux des arguments en faveur de la méthode sont ici essentiels :

• L'URI socketUriForStream est l'URI WebSocket que nous avons créé précédemment pour recevoir des données en continu pour ce flux audio spécifique.

• L'objet spécifie un tableau d'éléments pour lesquels nous voulons que le connecteur audio diffuse de l'audio. streams pour lesquels nous voulons que le connecteur audio diffuse de l'audio. Notez que le tableau n'a qu'un seul élément : l'élément stream_id pour le flux spécifique de l'itération en cours.

Les étapes ci-dessus sont répétées pour chaque flux de la session afin que chacun soit transcrit séparément avec un locuteur identifiable.

La voie et la vue de la transcription des symboles

La dernière chose à mentionner est la route /symbl-transcription et son modèle de vue équivalent. Lorsque l'on clique sur le bouton "Obtenir la transcription", cela envoie une requête à la route, qui appelle à son tour une action du contrôleur pour rendre la vue. GET à la route, qui à son tour appelle une action du contrôleur pour rendre la vue.

L'action du contrôleur définit une variable transcriptions au tableau d'objets transcriptions et la transmet à la vue :

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

Dans le corps de la vue, chaque transcription est présentée sous forme de paragraphe, avec le nom de l'orateur et le texte transcrit.

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

Prochaines étapes

Que construiriez-vous avec le connecteur audio de l'API Video de Vonage ? Vous pouvez utiliser notre application de démonstration comme point de départ pour votre propre projet, ou partir de zéro si vous préférez. Si vous souhaitez utiliser un langage autre que JavaScript pour votre application, la fonction Connecteur audio est également disponible dans nos autres SDK du serveur Video de Vonage.

Bonne construction ! Si vous avez des commentaires ou des questions, n'hésitez pas à nous contacter dans notre Slack des développeurs de Vonage.