Verbessern Sie Ihre Vonage Video Applications mit Audio Connector

Die Videokommunikation hat sich in den letzten Jahren rasant weiterentwickelt, und es gibt heute viele Funktionen, mit denen die Benutzer ihre Videogespräche individuell gestalten können. Viele Funktionen konzentrieren sich auf die Manipulation des Videofeeds, wie z. B. die Ersetzung des Hintergrunds oder die Unschärfe des Hintergrunds. Die Audiokomponente eines Videoanrufs sollte jedoch nicht vernachlässigt werden. Die Möglichkeit, mit Audio-Feeds zu arbeiten, eröffnet eine Vielzahl von Möglichkeiten zur Verbesserung des gesamten Benutzererlebnisses. Wenn Sie die Video API von Vonage verwenden, können Sie den Audio-Anschluss Funktion genau für diesen Zweck entwickelt!

Was ist ein Audioanschluss?

Audio-Konnektor ist eine Funktion der Vonage Video API, mit der Sie rohe Audioströme aus einer Vonage Video-Sitzung über Ihren eigenen WebSocket-Server zur weiteren Verarbeitung an externe Dienste senden können.

Es gibt mehrere Möglichkeiten, wie diese Funktion genutzt werden kann:

• Senden eines einzelnen Audiostroms an eine WebSocket-URL

• Senden mehrerer Audioströme, jeder an eine eigene WebSocket-URL

• Senden Sie mehrere, gemischte Audioströme an eine einzige WebSocket-URL

Overview Diagram of Audio Connector

Was können Sie mit Audio Connector tun?

Es gibt viele potenzielle Applications und Anwendungsfälle für die Audio Connector-Funktion. Zum Beispiel könnte die Verarbeitung von Audiostreams zur Erstellung von Live-Untertiteln, Live- oder Offline-Transkriptionen oder Übersetzungen der Audiodaten dazu beitragen, die Zugänglichkeit in einem Aufzeichnungskontext zu verbessern. Das Scannen nach bestimmten Wörtern in einem Audiostrom könnte für die Moderation von Inhalten oder für Such- und Indexanwendungen verwendet werden. Audiostreams können auch in Media Intelligence-Anwendungen verwendet werden, z. B. zur Erstellung einer textlichen Zusammenfassung eines Anrufs oder einer Besprechung. Eine andere Anwendung nutzt einen Audiostrom für die Stimmungsanalyse eines Gesprächs. Dies sind nur einige Beispiele für die vielen Möglichkeiten, die sich mit dieser Funktion bieten.

Wie können Sie Audio Connector in Ihren Applications verwenden?

Zum Hinzufügen der Audio Connector-Funktionalität zu Ihren Vonage Video Applications sind die folgenden Komponenten erforderlich:

1. Ein Websocket mit einer öffentlich zugänglichen Websocket-URI

2. Ein externer Dienst, der die Audiodaten auf irgendeine Weise verarbeitet

3. Der Vonage Video /connect REST-Endpunkt

Es gibt viele Möglichkeiten, wie Sie die Komponenten 1 und 2 einrichten können, und wie Sie dies tun, bleibt wirklich Ihnen überlassen. Später in diesem Artikel werden wir eine Beispielanwendung durchgehen, die Koa WebSocket für die WebSocket-Komponente und Symbl.ai für die Audioverarbeitungskomponente verwendet.

Für die Komponente 3, den Vonage Video /connect REST-Endpunkt, finden Sie eine ausführliche Dokumentation in unserer REST-API-Referenz und Entwicklerhandbuch. Kurz gesagt, eine HTTP-POST-Anfrage an den Endpunkt startet das Streaming des Audios von der angegebenen Vonage Video-Sitzung an den angegebenen WebSocket-URI. Der Anforderungskörper muss bestimmte Informationen enthalten, z. B. die sessionId für die Video-Sitzung, von der das Audio gestreamt werden soll, ein gültiges Token für diese Sitzung und die URI für den WebSocket, an den das Audio gestreamt werden soll. Es gibt auch einige optionale Eigenschaften, darunter ein Streams-Array, mit dem Sie einzelne Audioströme angeben können, die an den WebSocket gestreamt werden sollen; wir werden uns diese Eigenschaft im Rahmen des Anwendungsbeispiels genauer ansehen.

Was Vonage Video betrifft, so ist das so ziemlich alles. Der Ton der Sitzung wird an den WebSocket gestreamt. Es gibt dann unendlich viele Möglichkeiten, was Sie mit diesen Audioströmen machen können.

Sehen wir uns ein Beispiel dafür an, was Sie tun können!

Beispielhafte Anwendung - Walkthrough

In dieser Demoanwendung implementieren wir eine Transkriptionsfunktion für Videoanrufe mit Symbl.ai's Streaming API. Sie können sich die vollständige Demo-Applikation auf unserer Vonage Gemeinschaft GitHub org. In diesem Beitrag gehen wir auf einige der wichtigsten Funktionen und Komponenten der App ein.

Hinweis: Dies ist eher ein Überblick über einige Schlüsselelemente der Anwendung als ein ausführliches Tutorial. Außerdem wird vorausgesetzt, dass Sie mit der Erstellung einer Node-Anwendung im Express-Stil vertraut sind und wissen, wie die Vonage Video API funktioniert.

Überblick über die Anwendung

Zunächst müssen wir der Video-Sitzung beitreten, indem wir einen Namen eingeben und auf "Beitreten" klicken. Der eingegebene Name wird später verwendet, um den Sprecher für den jeweiligen Audiostream zu identifizieren.

Join Call screenshot

Sie können dann den Link zur Sitzung für andere Teilnehmer freigeben. Sobald alle Teilnehmer der Sitzung beigetreten sind, klicken Sie auf "Transkription starten", um den Transkriptionsprozess zu beginnen.

Führen Sie das Video-Gespräch wie gewohnt. Wenn Sie die Transkription des Anrufs sehen möchten, klicken Sie auf die Schaltfläche "Transkription abrufen", um eine Ansicht mit den Namen der Sprecher und dem transkribierten Audio zu erhalten.

Transcription View screenshot

Nachfolgend sehen Sie ein Video, das die Anwendung in Aktion zeigt:

Komponenten der Anwendung

Die Demo ist eine Node-Anwendung und verwendet das Koa Webserver-Framework. Wenn Sie bereits mit Express.js vertraut sind, dann ist Koa relativ ähnlich. Die Anwendung verwendet auch eine Reihe von Koa-Middleware für Funktionen wie Routing, Rendering von Ansichten, Bereitstellung statischer Assets usw. Eine der verwendeten Middlewares ist Koa WebSocket Bibliothek. Mit dieser Bibliothek können Sie WebSockets als Teil Ihrer gesamten Koa-Anwendung erstellen und verwenden.

Außerdem verwendet die Anwendung das Symbl.ai JavaScript SDK zur Vereinfachung der Interaktion mit der Symbli.ai Streaming-API. Auf der Seite von Vonage Video verwendet sie das Vonage Video OpenTok Node Server SDK um die serverseitigen API-Aufrufe zu verarbeiten, und das Opentok JavaScript Client SDK in den Ansichtsvorlagen unserer Anwendung, um clientseitige Interaktionen wie das Veröffentlichen und Abonnieren von Videostreams zu verarbeiten.

Die Datei index.js

Die Datei index.js Datei ist der Einstiegspunkt für unsere Anwendung.

Am Anfang der Datei werden die verschiedenen Abhängigkeiten angegeben, die unsere Anwendung benötigt, um zu funktionieren:

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

Dann instanziieren wir eine neue Koa-App und aktivieren sie für WebSocket-Verbindungen, bevor wir einen neuen Koa-Router instanziieren, den wir für unsere WebSocket-Routen verwenden werden. Schließlich machen wir diesen Router in allen Routen unserer Anwendung verfügbar, indem wir ihn als eine ws Variable auf app.context.

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

Als nächstes benötigen wir einige Anwendungsrouten, die wir in anderen Dateien definiert haben:

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

Anschließend initialisieren wir unsere Vonage Video SDK- und Symbl.ai SDK-Objekte mit den Anmeldeinformationen, die wir als Umgebungsvariablen festgelegt haben:

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

Im obigen Code machen wir beide SDKs auch in allen Routen unserer Anwendung verfügbar, indem wir sie zu app.contexthinzufügen, und wir tun dasselbe mit einem transcriptions Array, das wir später zum Speichern aller unserer Transkriptionsobjekte verwenden werden.

Anschließend erstellen wir eine neue Video-Sitzung, indem wir die SDK createSession Methode:

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

Wichtig ist dabei, dass die mediaMode für die Sitzung auf routed. Wir können den Audio Connector nur für Sitzungen verwenden, bei denen die Streams über die Vonage Video Media Server geleitet werden.

Dann folgt Code, der das Serving statischer Assets und das Rendering von View-Templates einrichtet (auf den wir hier nicht näher eingehen), bevor wir die Anwendung schließlich so einrichten, dass sie die in den Routes-Dateien definierten Routen sowie die WebSocket-Routen verwendet, die wir später als Teil der Transkriptionsfunktionalität definieren werden. Schließlich initialisieren wir die Anwendung.

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

Routen

Die http-Routen der Anwendung sind in mehreren Dateien definiert:

• /routes/basic.js

• /routes/symbl/transcription.js

Wir werden diese nicht im Detail erkunden, da die meisten Routen Ansichten darstellen. Eine der wichtigsten Routen ist jedoch die /transcribe Route. Wenn die Schaltfläche "Start Transcription" in der Videoanruf-UI angeklickt wird, wird eine POST-Anfrage an diese Route gesendet, die die postSymblTranscription Controller-Aktion aufruft, die wir uns als nächstes ansehen werden.

Die postSymblTranscription-Controller-Aktion

Dies ist die Schlüsselkomponente für die Verwaltung der Transkriptionsfunktionalität. Dieser Controller macht mehrere Dinge, aber das erste, was er tun muss, ist eine Liste aller Streams zu erhalten, die in der Vonage Video Sitzung veröffentlicht werden. Dazu wird die Methode listStreams streams des Vonage OpenTok Node SDK verwendet. Diese liefert ein Array von Objekten, wobei jedes Objekt einen Stream darstellt, der in der Sitzung veröffentlicht wird.

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

  // rest of code

 });

Anschließend gehen wir die Streams durch und führen für jeden Stream eine bestimmte Reihe von Aktionen durch. Wir tun dies speziell, damit wir später den Sprecher für jedes transkribierte Audio-Stück identifizieren können.

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

 });

Starten Sie eine Symbl.ai-Echtzeit-Streaming-Anfrage

Hier verwenden wir die startRealtimeRequest Methode des Symbl.ai SDK, um eine Streaming-Anfrage zu starten:

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

Mehr darüber, wie das genau funktioniert, können Sie in der Symbl.ai-Dokumentation. Einige Dinge, die Sie beachten sollten, sind:

• Wir setzen ein idein, die der stream_id die wir von der Vonage Video-Sitzung erhalten haben

• Wir definieren ein speaker Objekt mit einer name Eigenschaft, deren Wert der Name ist, der für den Stream aus der Vonage Video-Sitzung festgelegt wurde.

• Wir stellen einige config Optionen. Von besonderem Interesse sind die confidenceThreshold und languageCodedie beide dazu beitragen können, die Genauigkeit Ihrer Transkriptionen zu verbessern.

• Wir definieren einen Eventhandler für das onSpeechDetected Ereignis. Dieser nimmt die Daten, die von der Symbl.ai Streaming API zurückgegeben werden und verwendet diese Daten, um ein Objekt mit Namen und Transkriptionseigenschaften zu füllen, die wir dann in unser transcriptions Array übertragen.

Erstellen Sie einen Websocket für unsere Anwendung

Außerdem müssen wir für jeden unserer Audioströme individuelle Websocket-Routen erstellen:

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

Wir tun dies, indem wir eine get Route auf unserem Koa-Websocket-Objekt mit dem stream_id für diesen speziellen Audiostream als Teil des Pfades für die Route. Innerhalb der Route deklarieren wir eine connection Variable, die dem Symbl-Stream-Objekt für diesen speziellen Audiostream zugewiesen ist, an die wir dann die Nachricht data die vom Websocket empfangen wurde, mit der Symbl.ai SDK sendAudio Methode.

Fordern Sie den Audio Connector an, um das Audio-Streaming zu starten

Die letzte Aktion, die wir ausführen müssen, ist das Senden einer Anforderung an den Vonage Video API Audio Connector Endpunkt, um das Streaming von Audio für den spezifischen Audiostream an den WebSocket zu starten, den wir für diesen Stream definiert haben:

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

Zwei der Argumente für die Methode sind hier entscheidend:

• Die socketUriForStream ist der WebSocket-URI, den wir zuvor erstellt haben, um Streaming-Daten für diesen speziellen Audiostrom zu empfangen.

• Das Objekt spezifiziert ein Array, das streams der Audio Connector Audio streamen soll. Beachten Sie, dass das Array nur ein Element hat: die stream_id für den spezifischen Stream in der aktuellen Iteration.

Die oben genannten Schritte werden für jeden Stream der Sitzung wiederholt, so dass jeder Stream separat mit einem identifizierbaren Sprecher transkribiert wird.

Die Symboltranskription Route und Ansicht

Abschließend sei noch auf die /symbl-transcription Route und die entsprechende Ansichtsvorlage. Wenn die Schaltfläche "Get Transcription" angeklickt wird, sendet dies eine GET Anfrage an die Route, die wiederum eine Controller-Aktion zum Rendern der Ansicht aufruft.

Die Controller-Aktion setzt eine transcriptions Variable auf das Array der Transkriptionsobjekte und übergibt diese an die Ansicht:

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

Im Hauptteil der Ansicht wird jede Transkription als Absatz dargestellt, der den Namen des Sprechers und den transkribierten Text enthält.

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

Nächste Schritte

Was würden Sie mit dem Video API Audio Connector von Vonage bauen? Sie können unsere Demo-Anwendung als Ausgangspunkt für Ihr eigenes Projekt verwenden oder von Grund auf neu beginnen, wenn Sie dies wünschen. Wenn Sie eine andere Sprache als JavaScript für Ihre Anwendung verwenden möchten, ist die Audio Connector-Funktion auch in unseren anderen Vonage Video Server SDKs.

Viel Spaß beim Bauen! Wenn Sie irgendwelche Kommentare oder Fragen haben, können Sie uns gerne in unserem Vonage Entwickler-Slack.