Video + KI: Vonage Videoabschrift in Google Docs

Einführung

In der sich schnell entwickelnden Landschaft der Videokommunikation blenden uns zwar zahlreiche Funktionen mit Videofeed-Manipulationen wie Hintergrundersetzungen oder Unschärfen, aber das Potenzial von Audio sollte nicht übersehen werden. Die Vertiefung des Audioaspekts bietet eine Reihe von Möglichkeiten zur Verbesserung der Benutzererfahrung.

Für diejenigen, die die Video-API von Vonage nutzen, ist der Audio-Connector von Vonage ein hochentwickeltes Tool, das Roh-Audio aus einer Vonage Video-Sitzung zur weiteren Verarbeitung an externe Plattformen weiterleitet. Mit der Möglichkeit, einzelne oder gemischte Audioströme zu senden und die Sprecher leicht zu identifizieren, wird diese Technologie für Unternehmen, die ihre Kommunikationstools erweitern möchten, unverzichtbar.

In diesem Artikel erfahren Sie, wie Unternehmen und Fachleute dieses Tool nutzen können, um Gespräche in Google Docs zu transkribieren und so alltägliche Kommunikation wie Verkaufsgespräche, strategische Anrufe und Kundeninteraktionen in wertvolle Textaufzeichnungen zu verwandeln. Am Ende dieses Artikels werden wir ein Vonage-Videogespräch einrichten, das in ein Google Doc transkribiert wird, wobei der Inhalt deutlich nach den einzelnen Sprechern unterteilt ist.

tl;dr Wenn Sie es überspringen und direkt mit dem Einsatz beginnen möchten, finden Sie den gesamten Code für die Anwendung auf GitHub.

Projekt einrichten

Ein Vonage Video-Konto Node und npm Ngrok für Webhook-Tests Ein Google Cloud-Konto

Diese sind erforderlich, damit das Projekt funktioniert. In den folgenden Punkten zeige ich Ihnen, wo Sie sie herunterladen bzw. sich dafür anmelden können.

Vonage API-Konto

Um dieses Tutorial durchzuführen, benötigen Sie ein Vonage API-Konto. Wenn Sie noch keines haben, können Sie sich noch heute anmelden und mit einem kostenlosen Guthaben beginnen. Sobald Sie ein Konto haben, finden Sie Ihren API-Schlüssel und Ihr API-Geheimnis oben auf dem Vonage-API-Dashboard.

Sind Sie bereit, mit dem Bau zu beginnen?

Erleben Sie nahtlose Konnektivität, Echtzeit-Messaging und kristallklare Sprach- und Videoanrufe - alles auf Knopfdruck.

Ngrok für Webhook-Tests

Wenn Sie es nicht haben, installieren Sie ngrok auf Ihrem lokalen Rechner. Wie das geht hier. Führen Sie dann den Befehl zum Starten des Tunnels aus und geben Sie die Portnummer des lokalen Servers an, den Sie freilegen wollen (ngrok http 3000). Ngrok wird eine eindeutige URL generieren, die den externen Zugriff auf Ihren lokalen Server ermöglicht. Wir benötigen sie im nächsten Schritt, wenn wir den WebSocket für den Vonage Audio Connector einrichten.

Google Cloud-Konto

Vergewissern Sie sich zunächst, dass Sie ein Google-Konto haben. Wenn Sie noch keines haben, erstellen Sie ein kostenloses Konto bei Google Account Signup. Wir benötigen ein Google-Konto, um mit der Google Text & Tabellen-API zu interagieren und auch, um die Audiodaten in Text umzuwandeln. Sobald Sie ein Google-Konto haben, folgen Sie diesen Schritten:

• Gehen Sie zur Google Cloud Console: Google Cloud-Konsole Erstellen Sie ein neues Projekt und geben Sie ihm einen Projektnamen, fügen Sie ein Rechnungskonto und einen Standort hinzu

• Navigieren Sie zu APIs & Dienste > Bibliothek, suchen Sie nach "Google Docs API" und aktivieren Sie sie für Ihr Projekt.

• Navigieren Sie zu APIs & Services > Credentials, klicken Sie auf "Create Credentials" und wählen Sie "OAuth 2.0 Client ID".

• Wählen Sie als Typ "Webanwendung".

• Fügen Sie unter "Authorized redirect URIs" "http://localhost:3003/oauth2callback" hinzu. Sie erhalten dann eine Client-ID und ein Client-Geheimnis. Bewahren Sie diese sicher auf. Laden Sie die JSON-Datei herunter und speichern Sie sie im Stammverzeichnis des Projekts

Die oben genannten Anmeldedaten werden benötigt, um in ein Google Docs-Dokument zu schreiben.

Dann benötigen wir Anmeldeinformationen, um den Google Speech-to-Text-Dienst zu nutzen.

• Wählen Sie das Projekt, das Sie im vorherigen Schritt erstellt haben

• Klicken Sie in der linken Seitenleiste auf "Navigationsmenü" (drei horizontale Linien)

• Gehen Sie zu APIs & Dienste > Bibliothek

• Suche nach "Speech-to-Text" in der Suchleiste

• Klicken Sie auf "Cloud Speech-to-Text API".

• Klicken Sie auf "Aktivieren", um die API für Ihr Projekt zu aktivieren.

• Gehen Sie in der linken Seitenleiste zu "IAM & Admin > Dienstkonten

• Klicken Sie oben auf die Schaltfläche "Servicekonto erstellen".

• Geben Sie einen Namen und eine Beschreibung für das Dienstkonto an. Klicken Sie auf "Erstellen".

• Suchen Sie das soeben erstellte Konto in der Liste der Dienstkonten. Klicken Sie auf der rechten Seite in der Spalte "Aktionen" auf die drei Punkte (Optionen) und wählen Sie Schlüssel verwalten

• Klicken Sie auf "Schlüssel hinzufügen" und wählen Sie JSON. Der JSON-Schlüssel wird generiert und auf Ihren Rechner heruntergeladen. Speichern Sie diesen Schlüssel im Stammverzeichnis Ihres Projekts

Überblick über das Projekt

Beginnen wir damit, die Möglichkeiten des Vonage Audio Connectors zu erkunden. Der Audio Connector sendet Audioströme an einen WebSocket, der auf Ihrem Server geöffnet ist. Das bedeutet, dass Sie diese Ströme abfangen und verarbeiten können. In unserem Fall werden wir zunächst die Audiodaten mithilfe der Google Speech API in Text umwandeln und dann die Transkription in eine Google Docs-Datei schreiben.

Die Projektarchitektur sieht wie folgt aus:

Audio Connector to Google Docs Architecture

Lassen Sie uns die Schritte durchgehen:

Benutzer verbinden sich mit einer gerouteten Vonage Video-Sitzung: Der Sitzungstyp muss geroutet sein. Andernfalls kann die Audio-Connector-Funktion nicht verwendet werden.
Vonage Video Router sendet Audio-Bausteine an eine WebSocket-Verbindung, die auf dem NodeJS-Server geöffnet ist. Der Anwendungsserver (NodeJS) nimmt die Audio-Bausteine und sendet sie an den Google Speech-to-text-Dienst. Der Anwendungsserver verfolgt die streamId basierend auf der WebSocket-Verbindung. Sobald das Audio transkribiert wurde, sendet der Server die Transkription an ein Google Docs-Dokument.

Anwendungsserver

Der Anwendungsserver wurde mit NodeJS und ExpressJS erstellt, einem beliebten Webserver-Framework für NodeJS. Er verwendet auch die ws Bibliothek, um die WebSocket-Verbindung zu verwalten. In den nächsten Abschnitten werden wir uns mit der Dateistruktur befassen.

Die Datei index.js

Am Anfang der Datei müssen wir die verschiedenen Abhängigkeiten angeben, die unsere Anwendung benötigt, um zu funktionieren

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

Danach richten wir die WebSocket-Verbindung und die Handler für die WebSocket-Nachrichten ein:

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

Schauen wir uns die Details der WebSocket-URL-Verbindung an. Beachten Sie die Verwendung eines Pfadparameters, /:streamId. Dieses Design stellt sicher, dass der Server bei jeder neuen Audioverbindung sowohl über den streamId und den Benutzernamen, die mit diesem Audiostrom verbunden sind. Diese Designentscheidung ist entscheidend, da sie die Zuordnung der Transkription zu einem bestimmten Benutzernamen und streamId.

Anschließend initialisieren wir eine neue Instanz von GoogleSTT (SpeechToText). Dabei übergeben wir die streamId und eine Callback-Funktion an seinen Konstruktor. Dieser Callback wird jedes Mal ausgelöst, wenn eine Transkription verfügbar ist, und ruft die Funktion writeToGoogleDoc auf. Diese Funktion ist für die Verbindung mit dem Google Docs-Dokument und das Anhängen der Transkription verantwortlich.

Bei genauerer Betrachtung ist der Hörer für das Ereignis "Nachricht" der Ort, an dem die Magie passiert: Audiodaten werden an den GoogleSTT-Dienst weitergeleitet. Die erste Nachricht des Audio Connectors übermittelt das Audioformat und die Metadaten des Streams (weitere Details finden Sie in der Vonage Audio Connector Dokumentation). Nachfolgende Nachrichten enthalten Audio-Chunks, die umgehend an den Google-Dienst über streamingClient.handleAudioStream(msg).

OpenTok-Ordner

Der Ordner OpenTok enthält alle notwendigen OpenTok-Methoden, um eine Sitzung und vor allem die WebSocket-Verbindung zwischen dem Server und dem Vonage Media Router herzustellen. Konzentrieren wir uns auf Letzteres:

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

Die Funktion akzeptiert in erster Linie drei Eingaben: streamId, sessionId, und username. Sowohl die sessionId und streamId spielen eine entscheidende Rolle bei der Information des Vonage Media Routers über den spezifischen Audiostrom, den wir abrufen wollen. Um die Übersichtlichkeit unserer WebSocket-Callbacks zu erhöhen, habe ich den Benutzernamen des Herausgebers in die Header-Sektion aufgenommen. Dieser Schritt ist zwar optional, aber er ist wichtig, wenn Sie die Identität des Sprechers in den Transkriptionen angeben möchten.

Google APIs-Ordner

GoogleSTT

Diese Datei stellt ein Tool namens GoogleSTT vor. Dieses Tool hat die Aufgabe, gesprochene Wörter mit Hilfe des Google-Dienstes in Text umzuwandeln.

Der Hauptteil des Tools, den wir uns ansehen, ist die Transkriptionsfunktion. Diese Funktion legt zunächst einige grundlegende Einstellungen fest, wie die Art des Audios und die Sprache, in der gesprochen wird. Danach beginnt ein Prozess, bei dem Sprachdaten an Google gesendet werden, und im Gegenzug liefert Google die Textversion dieser Stimme.

Wenn Google den geschriebenen Text zurückgibt, ruft die Funktion die Funktion transcriptCallbackauf, die bei der WebSocket-Verbindung gesetzt wurde.

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

In diesem Modul geht es um die Verbindung zu Google Docs und die Verwaltung der darin enthaltenen Inhalte. Gleich zu Beginn haben wir einige wichtige Werkzeuge wie das Lesen von Dateien (fs) und Systempfade (path).

Der wichtigste Teil dieses Moduls dreht sich um die Autorisierung von Google. Wir müssen sicherstellen, dass unsere Software über die richtigen Berechtigungen verfügt, um mit dem Google-Dokument einer Person zu interagieren. Zu diesem Zweck haben wir eine Reihe von spezifischen Berechtigungen oder "Bereichen", die als SCOPES definiert sind.

Die Datei mit dem Namen token.json ist entscheidend. Wenn ein Benutzer unserer Software zum ersten Mal die Erlaubnis erteilt, werden seine Zugangsdaten in dieser Datei gespeichert. Das bedeutet, dass sie unsere App nicht jedes Mal neu autorisieren müssen, wenn sie sie verwenden.

Und nun der Hauptakt: writeToGoogleDoc. Sobald wir die erforderlichen Berechtigungen haben, nimmt diese Funktion eine Google-Dokument-ID, einen Nutzernamen und den Text, den Sie hinzufügen möchten, auf. Sie ruft das Dokument ab, findet die richtige Stelle für den Text und fügt den angegebenen Text genau an dieser Stelle ein, wobei sie ihn mit dem Nutzernamen markiert, um anzuzeigen, wer was gesagt hat.

Das Projekt einrichten und durchführen

Beginnen Sie zunächst mit dem Klonen des GitHub-Repository auf Ihren lokalen Rechner klonen. Sobald Sie das getan haben, navigieren Sie zum Projektverzeichnis und führen den Befehl npm install aus, um alle erforderlichen Abhängigkeiten einzurichten. Nun ist es an der Zeit, einen Tunnel mit ngrok zu öffnen, um Ihre lokale Entwicklungsumgebung dem Internet auszusetzen.

Stellen Sie anschließend sicher, dass Sie die .env-Datei mit den entsprechenden Konfigurationen (Vonage- und Google-Anmeldeinformationen, Google Docs-ID und ngrok-Domäne) aktualisiert haben. Nun sind Sie bereit, das Projekt zu erleben! Öffnen Sie einfach einen Browser und navigieren Sie zu einer URL, die wie folgt strukturiert ist ihre-url.com/raum/enrico . Sobald die Seite geladen ist, sehen Sie eine Option zur Aktivierung der Transkription. Klicken Sie auf die Schaltfläche, und schon können Sie loslegen!

Demo

Wir haben besprochen, wie man eine Verbindung mit WebSockets herstellt, Audio in Text umwandelt und diesen Text in ein Google Docs-Dokument einfügt. Jetzt ist es an der Zeit zu sehen, wie das alles zusammenkommt. Sehen Sie sich das Video unten an, um zu sehen, wie das Projekt funktioniert.

Schlussfolgerung

Zusammenfassend lässt sich sagen, dass die Einführung des neuen Audio Connectors den Horizont für innovative Anwendungen wirklich erweitert. Durch die Verknüpfung von Audioströmen mit anderen Diensten eröffnen wir eine Vielzahl von Möglichkeiten, von der Transkription bis hin zu Echtzeit-Analysen und darüber hinaus.

In diesem Projekt haben wir ein praktisches Beispiel für dieses Potenzial untersucht, indem wir Audiostreams nahtlos in den Speech-to-Text-Dienst von Google integriert und dann die Transkriptionen in einem Google Docs-Dokument erfasst haben. Wie wir gezeigt haben, vereinfacht die Kombination dieser Technologien nicht nur die Kommunikation, sondern ebnet auch den Weg für vielfältige und spannende Anwendungsfälle in der Zukunft. Ob für geschäftliche Besprechungen, Schulungen oder andere Szenarien, in denen gesprochene Worte von Wert sind, die Türen stehen nun weit offen für weitere Erkundungen und Innovationen.

Lassen Sie uns wissen, was Sie mit dem Audio Connector bauen. Chatten Sie mit uns auf unserem Vonage Community Slack oder senden Sie uns eine Nachricht auf X, früher bekannt als Twitter.