Vidéo + IA : Transcription des vidéos de Vonage dans Google Docs

Introduction

Dans le paysage en pleine évolution de la communication Video, alors que de nombreuses fonctionnalités nous éblouissent avec des manipulations de flux vidéo comme les remplacements d'arrière-plan ou les flous, le potentiel de l'audio ne doit pas être négligé. L'étude de l'aspect audio offre de nombreuses possibilités d'amplifier l'expérience de l'utilisateur.

Pour ceux qui utilisent l'API Video de Vonage, le connecteur audio de Vonage est un outil sophistiqué qui canalise l'audio brut d'une session Video de Vonage vers des plateformes externes pour un traitement ultérieur. Avec la possibilité d'envoyer des flux audio individuels ou mixtes et d'identifier facilement les orateurs, cette technologie devient essentielle pour les entreprises qui souhaitent étendre leurs outils de communication.

Dans cet article, nous verrons comment les entreprises et les professionnels peuvent utiliser cet outil pour transcrire des conversations dans Google Docs, transformant ainsi des communications quotidiennes telles que des discussions de vente, des appels stratégiques et des interactions avec les clients en précieux enregistrements textuels. À la fin de cet article, nous aurons mis en place un appel vidéo Vonage qui sera transcrit dans un document Google, avec un contenu divisé distinctement par chaque intervenant.

tl;dr Si vous souhaitez passer directement au déploiement, vous pouvez trouver tout le code de l'application sur GitHub. code de l'application sur GitHub.

Configuration du projet

Un compte Video Vonage Node et npm Ngrok pour tester les webhooks Un compte Google Cloud

Ces documents sont nécessaires au bon fonctionnement du projet. Dans les points ci-dessous, je vous indiquerai où vous pouvez les télécharger ou vous inscrire.

Vonage API Account

To complete this tutorial, you will need a Vonage API account. If you don’t have one already, you can sign up today and start building with free credit. Once you have an account, you can find your API Key and API Secret at the top of the Vonage API Dashboard.

Ready to start building?

Experience seamless connectivity, real-time messaging, and crystal-clear voice and video calls—all at your fingertips.

Ngrok pour le test des webhooks

Si vous ne l'avez pas, installez ngrok sur votre machine locale. Apprenez comment ici. Ensuite, exécutez la commande pour démarrer le tunnel, en spécifiant le numéro de port du serveur local que vous voulez exposer (ngrok http 3000). Ngrok va générer une URL unique qui permet l'accès externe à votre serveur local. Nous en aurons besoin à l'étape suivante lors de la configuration du WebSocket pour le Vonage Audio Connector.

Compte Google Cloud

Tout d'abord, assurez-vous que vous disposez d'un compte Google. Si vous n'en avez pas, créez un compte gratuit à l'adresse suivante : Google Account Signup. Nous aurons besoin d'un Account Google pour interagir avec l'API Google Docs et pour transcrire l'audio en texte. Une fois que vous disposez d'un compte Google, suivez les étapes suivantes :

• Accédez à la Google Cloud Console : Google Cloud Console Créez un nouveau projet et donnez-lui un nom, ajoutez un compte de facturation et un emplacement

• Naviguez vers API et services > Bibliothèque, recherchez "Google Docs API" et activez-la pour votre projet.

• Naviguez vers APIs & Services > Credentials, cliquez sur "Create Credentials" et sélectionnez "OAuth 2.0 Client ID".

• Choisissez "Web application" comme type.

• Sous "URI de redirection autorisés", ajoutez "http://localhost:3003/oauth2callback". Vous recevrez un identifiant et un secret client. Conservez-les précieusement. Téléchargez le fichier JSON et stockez-le dans le répertoire racine du projet

Les informations d'identification ci-dessus sont nécessaires pour écrire dans un document Google Docs.

Ensuite, nous avons besoin d'informations d'identification pour utiliser le service Google Speech-to-Text.

• Sélectionnez le projet que vous avez créé à l'étape précédente

• Dans la barre latérale gauche, cliquez sur "Menu de navigation" (trois lignes horizontales).

• Aller dans APIs & Services > Bibliothèque

• Rechercher "Speech-to-Text" dans la barre de recherche

• Cliquez sur "Cloud Speech-to-Text API".

• Cliquez sur "Enable" pour activer l'API pour votre projet.

• Dans la barre latérale gauche, allez dans "IAM & Admin > Comptes de service

• Cliquez sur le bouton "Créer un compte de service" en haut de la page.

• Fournissez un nom et une description pour le compte de service. Cliquez sur "Créer"

• Trouvez celui que vous venez de créer dans la liste des comptes de service Sur le côté droit, dans la colonne "Actions", cliquez sur les trois points (options) et sélectionnez Gérer les clés

• Cliquez sur "Add Key" et choisissez JSON. La clé JSON sera générée et téléchargée sur votre machine. Stockez cette clé à la racine de votre projet

Aperçu du projet

Commençons par explorer les capacités du connecteur audio de Vonage. Le connecteur audio envoie des flux audio à une WebSocket ouverte sur votre serveur. Cela signifie que vous pouvez capter ces flux et les traiter. Dans notre cas, nous allons d'abord transcrire l'audio en texte à l'aide de l'API Google Speech, puis écrire la transcription dans un fichier Google Docs.

L'architecture du projet est la suivante :

Audio Connector to Google Docs Architecture

Passons en revue les différentes étapes :

Les utilisateurs se connectent à une session vidéo routée de Vonage : le type de session doit être routé. Sinon, la fonction de connecteur audio ne peut pas être utilisée.
Le routeur vidéo de Vonage envoie des morceaux d'audio à une connexion WebSocket ouverte sur le serveur NodeJS. Le serveur d'application (NodeJS) prend les morceaux audio et les envoie au service Google Speech-to-text. Le serveur d'application garde une trace de l'état de la connexion WebSocket. streamId sur la base de la connexion WebSocket. Une fois l'audio transcrit, le serveur envoie la transcription dans un document Google Docs.

Serveur d'applications

Le serveur d'application est construit avec NodeJS et ExpressJS, qui est un cadre de serveur web populaire pour NodeJS. Il utilise également la bibliothèque ws pour gérer la connexion WebSocket. Nous allons nous pencher sur la structure des fichiers dans les sections suivantes.

Le fichier index.js

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

require("dotenv").config();
const express = require("express");
const bodyParser = require("body-parser");
const { authorize, writeToGoogleDoc } = require("./google-apis/googleDoc");
const apiRouter = require("./routes");
const path = require("path");
const app = express();
const PORT = 3000;
const streamingSTT = require("./google-apis/streamingSTT");
const { createSessionandToken, generateToken } = require("./opentok");
const documentId = process.env.GOOGLE_DOCUMENT_ID;

// Set up EJS as templating engine
app.set("views", path.join(__dirname, "views"));
app.set("view engine", "ejs");

// Serve static files (like CSS, JS) from a 'public' directory
app.use(express.static("public"));
app.use(express.json());
app.use(bodyParser.json());

Ensuite, nous établissons la connexion WebSocket et les gestionnaires des messages WebSocket :

app.ws(`/socket/:streamId`, async (ws, req) => {
  console.log("Socket connection received", req.params);
  const { streamId } = req.params;
  const streamingClient = new streamingSTT.GoogleSST(streamId, (data) => {
    const username = data.username ? data.username : data.streamId;
    writeToGoogleDoc(googleClient, documentId, username, data.transcript);
  });
  ws.on("message", (msg) => {
    try {
      if (typeof msg === "string") {
        let config = JSON.parse(msg);
        console.log("First Message Config", config);
        streamingClient.setUsername(config.username);
        streamingClient.transcribe();
      } else {
        if (streamingClient.speechClient) {
          streamingClient.handleAudioStream(msg);
        }
      }
    } catch (err) {
      console.log(err);
      ws.removeAllListeners("message");
      ws.close();
    }
  });

  ws.on("close", () => {
    console.log("Websocket closed");
  });
});

Entrons dans les détails de la connexion URL WebSocket. Observez l'utilisation d'un paramètre de chemin d'accès, /:streamId. Cette conception garantit que pour chaque nouvelle connexion audio, le serveur est informé à la fois de l'adresse streamId et du nom d'utilisateur associé à ce flux audio. Ce choix de conception est essentiel car il facilite l'association de la transcription à un nom d'utilisateur spécifique et à un nom d'utilisateur. streamId.

Ensuite, nous initialisons une nouvelle instance de GoogleSTT (SpeechToText). Ce faisant, nous transmettons à son constructeur l'élément streamId et une fonction de rappel à son constructeur. Ce rappel est déclenché chaque fois qu'une transcription est disponible, en invoquant la fonction writeToGoogleDoc. Cette fonction est responsable de la connexion au document Google Docs et de l'ajout de la transcription.

En approfondissant, l'auditeur de l'événement "message" est l'endroit où la magie opère : les données audio sont relayées au service GoogleSTT. Le message initial du connecteur audio transmet le format audio et les métadonnées du flux (pour plus de détails, voir la documentation du connecteur audio de Vonage de Vonage). Les messages suivants contiennent des morceaux d'audio, qui sont rapidement envoyés au service Google via le protocole streamingClient.handleAudioStream(msg).

Dossier OpenTok

Le dossier OpenTok contient toutes les méthodes OpenTok nécessaires pour créer une session et, surtout, pour créer la connexion WebSocket entre le serveur et Vonage Media Router. Concentrons-nous sur ce dernier point :

const startTranscription = async (streamId, sessionId, username) => {
  try {
    const { token } = generateToken(sessionId, "publisher");
    let socketUriForStream = process.env.NGROK_DOMAIN + "/socket/" + streamId;
    opentok.websocketConnect(
      sessionId,
      token,
      socketUriForStream,
      { streams: [streamId], headers: { username } },
      function (error, socket) {
        if (error) {
          console.log("Error:", error.message);
        } else {
          console.log("OpenTok Socket WwebSsocket connected", socket);
        }
      }
    );
    return response.data;
  } catch (e) {
    console.log(e?.response?.data);
    return e;
  }
};

La fonction accepte principalement trois entrées : streamId, sessionId, et username. Les deux entrées sessionId et streamId jouent un rôle essentiel en informant le routeur média de Vonage du flux audio spécifique que nous souhaitons récupérer. Pour plus de clarté dans nos rappels WebSocket, j'ai inclus le nom d'utilisateur de l'éditeur dans la section des en-têtes. Bien que cette étape reste facultative, elle est essentielle si vous souhaitez annoter l'identité de l'orateur dans les transcriptions.

Dossier Google APIs

GoogleSTT

Ce dossier présente un outil appelé GoogleSTT. Le rôle de cet outil est de convertir les mots parlés en texte à l'aide du service de Google.

Dans l'outil, la partie principale que nous examinons s'appelle la fonction de transcription. Cette fonction définit d'abord certains paramètres de base, comme le type d'audio et la langue parlée. Ensuite, elle lance un processus au cours duquel les données vocales sont envoyées à Google, qui fournit en retour la version textuelle de cette voix.

Lorsque Google renvoie le texte écrit, la fonction appelle la fonction transcriptCallbackqui a été définie lors de la connexion WebSocket.

async transcribe() {
    const request = {
      config: {
        encoding: this.encoding,
        sampleRateHertz: this.sampleRateHertz,
        languageCode: this.languageCode,
      },
      interimResults: false,
    };
    console.log("Request", request);

    this.stream = this.speechClient.streamingRecognize(request);
    this.stream.on("data", async (data) => {
      let transcript = data.results[0].alternatives[0].transcript;
      console.log("Transcript", transcript);
      if (this.transcriptCallback) {
        this.transcriptCallback({
          transcript,
          streamId: this.streamId, //tood need to add User Name ?
          username: this.username,
        });
      }
    });

    this.stream.on("error", (err) => {
      console.error(err);
    });

    this.stream.on("finish", (res) => {});
    return this.stream;
  }

Google Docs

Ce module traite de la connexion aux Google Docs et de la gestion de leur contenu. Dès le début, nous disposons de quelques outils essentiels comme la lecture de fichiers (fs) et les chemins d'accès au système (path).

La partie essentielle de ce module porte sur l'autorisation de Google. Nous devons nous assurer que notre logiciel dispose des autorisations nécessaires pour interagir avec le document Google d'une personne. Pour ce faire, nous disposons d'un ensemble de permissions spécifiques, ou "scopes", définies comme SCOPES.

Le fichier token.json est crucial. Lorsqu'un utilisateur autorise notre logiciel pour la première fois, ses données d'accès sont stockées dans ce fichier. Cela signifie qu'il n'aura pas besoin d'autoriser notre application à chaque fois qu'il l'utilisera.

Maintenant, l'acte principal : writeToGoogleDoc. Une fois que nous avons obtenu les autorisations nécessaires, cette fonction prend en charge un ID de document Google, un nom d'utilisateur et le texte que vous souhaitez ajouter. Elle récupère le document, trouve le bon endroit pour placer le texte et ajoute le texte fourni à cet endroit, en le marquant avec le nom d'utilisateur pour indiquer qui a dit quoi.

Mettre en place et gérer le projet

Tout d'abord, commencez par cloner le dépôt dépôt GitHub sur votre machine locale. Une fois que vous avez fait cela, naviguez jusqu'au répertoire du projet et exécutez la commande npm install pour installer toutes les dépendances nécessaires. Ceci fait, il est temps d'ouvrir un tunnel en utilisant ngrok pour exposer votre environnement de développement local à l'internet.

Ensuite, assurez-vous d'avoir mis à jour le fichier .env avec les configurations appropriées (identifiants Vonage et Google, ID Google Docs et domaine ngrok). Vous êtes maintenant prêt à expérimenter le projet ! Il vous suffit d'ouvrir un navigateur et de vous rendre à une URL structurée comme suit your-url.com/room/enrico . Une fois la page chargée, vous verrez une option permettant d'activer la transcription. Cliquez sur le bouton et c'est parti !

Démonstration

Nous avons vu comment nous connecter avec des WebSockets, transformer de l'audio en texte et placer ce texte dans un document Google Docs. Il est maintenant temps de voir comment tout cela fonctionne. Regardez la Video ci-dessous pour voir le projet fonctionner.

Conclusion

En conclusion, l'introduction du nouveau connecteur audio élargit véritablement l'horizon des applications innovantes. En reliant les flux audio à d'autres services, nous ouvrons un champ de possibilités allant de la transcription à l'analyse en temps réel et au-delà.

Dans ce projet, nous avons exploré un exemple pratique de ce potentiel, en intégrant de manière transparente des flux audio au service Speech-to-Text de Google, puis en capturant les transcriptions dans un document Google Docs. Comme nous l'avons démontré, la combinaison de ces technologies permet non seulement de rationaliser la communication, mais aussi d'ouvrir la voie à des cas d'utilisation variés et passionnants à l'avenir. Qu'il s'agisse de réunions d'affaires, de sessions de formation ou de tout autre scénario dans lequel les mots prononcés ont de la valeur, les portes sont désormais grandes ouvertes à la poursuite de l'exploration et de l'innovation.

Faites-nous savoir ce que vous construisez avec l'Audio Connector. Discutez avec nous sur notre Communauté Vonage Slack ou envoyez-nous un message sur X, anciennement connu sous le nom de Twitter.