GSP125

Übersicht

Mit der Streaming API von Google Cloud Speech können Entwickler gesprochene Sprache in Echtzeit in Text umwandeln. Wird die API zusammen mit der Web Audio API und Websockets von JavaScript verwendet, kann ein Java-Servlet gestreamte Sprache von einer Webseite empfangen und Texttranskripte davon bereitstellen. So kann jede Webseite gesprochene Sprache als zusätzliche Benutzeroberfläche nutzen.

Dieses Lab ist in mehrere Abschnitte unterteilt. In jedem Abschnitt wird eine Komponente der endgültigen Webanwendung vorgestellt.

Die Webanwendung, die Sie erstellen, nimmt Audio vom Mikrofon des Clients auf und streamt es an ein Java-Servlet. Das Java-Servlet leitet die Daten an die Cloud Speech API weiter, die wiederum Transkriptionen aller erkannten Spracheingaben zurück an das Servlet streamt. Das Servlet übergibt die Transkriptionsergebnisse dann an den Client, der sie auf der Seite anzeigt.

Dazu müssen Sie mehrere Komponenten erstellen:

• Ein Java-Servlet, das die statischen HTML-, JavaScript- und CSS-Dateien für die Webseite bereitstellt.
• JavaScript, HTML und CSS, um die Webseite mit dem Mikrofon des Nutzers zu verbinden sowie die Rohbytes zu extrahieren und über einen Websocket an das Servlet zu streamen.
• Websocket-Handler für Servlets, der die vom Client empfangenen Soundbytes an die Cloud Speech API streamt und die Transkriptionsergebnisse dann von der Cloud Speech API zurück an den Client streamt.

Aufgaben

• Virtuelle Maschine (VM) erstellen
• HTTP-Java-Servlet starten
• Audio von einer Webseite aufnehmen
• Sprache zu Text transkribieren

Voraussetzungen

Für dieses Lab wird davon ausgegangen, dass Sie mit den folgenden Tools vertraut sind:

• Programmiersprache Java
• Java-Servlets (insbesondere dem Jetty-Servlet-Container). Auch andere Servlet-Container sind möglich. In der Beispiellösung wird jedoch Jetty verwendet, sodass Lösungen mit anderen Containern schwieriger zu überprüfen sind.
• Programmiersprache JavaScript. Der Code für Webseiten wird fast ausschließlich in JavaScript geschrieben. Daher ist es kaum möglich, in einem Lab, das sich mit einer Webseite befasst, auf diese Sprache zu verzichten.
• Linux-Befehlszeile. Ein Großteil des Labs findet an einer Linux-Eingabeaufforderung statt. Vertrautheit mit den gängigen Tools und einem Texteditor für diese Umgebung macht die Arbeit einfacher.
• Projektmanagementool Maven. Grundsätzlich kann jedes Java-Projektmanagementtool verwendet werden. In der Beispiellösung wird jedoch Maven verwendet, sodass Lösungen mit anderen Tools schwieriger zu überprüfen sind.

Einrichtung und Anforderungen

Vor dem Klick auf „Start Lab“ (Lab starten)

Lesen Sie diese Anleitung. Labs sind zeitlich begrenzt und können nicht pausiert werden. Der Timer beginnt zu laufen, wenn Sie auf Lab starten klicken, und zeigt Ihnen, wie lange Google Cloud-Ressourcen für das Lab verfügbar sind.

In diesem praxisorientierten Lab können Sie die Lab-Aktivitäten in einer echten Cloud-Umgebung durchführen – nicht in einer Simulations- oder Demo-Umgebung. Dazu erhalten Sie neue, temporäre Anmeldedaten, mit denen Sie für die Dauer des Labs auf Google Cloud zugreifen können.

Für dieses Lab benötigen Sie Folgendes:

• Einen Standardbrowser (empfohlen wird Chrome)

Hinweis: Nutzen Sie den privaten oder Inkognitomodus (empfohlen), um dieses Lab durchzuführen. So wird verhindert, dass es zu Konflikten zwischen Ihrem persönlichen Konto und dem Teilnehmerkonto kommt und zusätzliche Gebühren für Ihr persönliches Konto erhoben werden.

• Zeit für die Durchführung des Labs – denken Sie daran, dass Sie ein begonnenes Lab nicht unterbrechen können.

Hinweis: Verwenden Sie für dieses Lab nur das Teilnehmerkonto. Wenn Sie ein anderes Google Cloud-Konto verwenden, fallen dafür möglicherweise Kosten an.

Lab starten und bei der Google Cloud Console anmelden

1. Klicken Sie auf Lab starten. Wenn Sie für das Lab bezahlen müssen, wird ein Dialogfeld geöffnet, in dem Sie Ihre Zahlungsmethode auswählen können. Auf der linken Seite befindet sich der Bereich „Details zum Lab“ mit diesen Informationen:

   • Schaltfläche „Google Cloud Console öffnen“
   • Restzeit
   • Temporäre Anmeldedaten für das Lab
   • Ggf. weitere Informationen für dieses Lab

2. Klicken Sie auf Google Cloud Console öffnen (oder klicken Sie mit der rechten Maustaste und wählen Sie Link in Inkognitofenster öffnen aus, wenn Sie Chrome verwenden).

   Im Lab werden Ressourcen aktiviert. Anschließend wird ein weiterer Tab mit der Seite „Anmelden“ geöffnet.

   Tipp: Ordnen Sie die Tabs nebeneinander in separaten Fenstern an.

   Hinweis: Wird das Dialogfeld Konto auswählen angezeigt, klicken Sie auf Anderes Konto verwenden.

3. Kopieren Sie bei Bedarf den folgenden Nutzernamen und fügen Sie ihn in das Dialogfeld Anmelden ein.

   {{{user_0.username | "Username"}}}

   Sie finden den Nutzernamen auch im Bereich „Details zum Lab“.

4. Klicken Sie auf Weiter.

5. Kopieren Sie das folgende Passwort und fügen Sie es in das Dialogfeld Willkommen ein.

   {{{user_0.password | "Password"}}}

   Sie finden das Passwort auch im Bereich „Details zum Lab“.

6. Klicken Sie auf Weiter.

   Wichtig: Sie müssen die für das Lab bereitgestellten Anmeldedaten verwenden. Nutzen Sie nicht die Anmeldedaten Ihres Google Cloud-Kontos. Hinweis: Wenn Sie Ihr eigenes Google Cloud-Konto für dieses Lab nutzen, können zusätzliche Kosten anfallen.

7. Klicken Sie sich durch die nachfolgenden Seiten:

   • Akzeptieren Sie die Nutzungsbedingungen.
   • Fügen Sie keine Wiederherstellungsoptionen oder Zwei-Faktor-Authentifizierung hinzu (da dies nur ein temporäres Konto ist).
   • Melden Sie sich nicht für kostenlose Testversionen an.

Nach wenigen Augenblicken wird die Google Cloud Console in diesem Tab geöffnet.

Hinweis: Wenn Sie auf Google Cloud-Produkte und ‑Dienste zugreifen möchten, klicken Sie auf das Navigationsmenü oder geben Sie den Namen des Produkts oder Dienstes in das Feld Suchen ein.

Aufgabe 1: Virtuelle Maschine erstellen

Compute Engine ist ein Dienst, mit dem Sie VMs in der Infrastruktur von Google starten können. In diesem Lab erstellen und verwenden Sie eine VM. Auf dieser führen Sie ein in Java 8 geschriebenes Servlet aus, das die Website hostet. Außerdem stellen Sie dem Client mit der Cloud Speech API dynamische Transkriptionen bereit. Sie nutzen die VM in diesem Lab auch zum Ausführen Ihres Codes.

1. Klicken Sie zum Erstellen einer neuen VM im Navigationsmenü () auf Compute Engine > VM-Instanzen.

2. Klicken Sie auf Instanz erstellen, um eine neue VM-Instanz zu erstellen.

3. In der Maschinenkonfiguration:

   • Geben Sie der neuen Instanz den Namen speaking-with-a-webpage.

   • Wählen Sie eine Zone als aus.

   • Übernehmen Sie für die anderen Werte die Standardeinstellung.

4. Klicken Sie auf Betriebssystem und Speicher.

   • Klicken Sie auf Ändern, um mit der Konfiguration des Bootlaufwerks zu beginnen, und wählen Sie die folgenden Werte aus:

     • Wählen Sie unter Betriebssystem die Option Debian aus.

     • Wählen Sie unter Version die Option Debian GNU/Linux 12 (Bookworm) aus.

     • Behalten Sie die Einstellung des Bootlaufwerktyps auf Standard bei.

     • Klicken Sie unten im Fenster auf Auswählen.

5. Klicken Sie auf Netzwerke.

   • Aktivieren Sie unter Firewall die Optionen HTTP-Traffic zulassen und HTTPS-Traffic zulassen.

6. Klicken Sie auf Sicherheit.

   • Behalten Sie für Identität und API-Zugriff > Dienstkonto die Standardeinstellung bei.

   • Wählen Sie als Zugriffsbereich Uneingeschränkten Zugriff auf alle Cloud APIs zulassen aus.

7. Klicken Sie auf Erstellen.

Nach wenigen Minuten ist Ihre VM einsatzbereit! Sehen Sie sich die VM und die zugehörigen Details in der Liste VM-Instanzen an. Beachten Sie die Option SSH und die externe IP-Adresse. Diese Optionen werden Sie im nächsten Schritt bzw. im späteren Verlauf dieses Labs verwenden.

8. Stellen Sie eine Verbindung zur VM her, indem Sie rechts auf den Button SSH klicken. Klicken Sie auf Autorisieren, wenn Sie dazu aufgefordert werden.

Ein neues Fenster wird geöffnet. Es enthält eine Eingabeaufforderung zur Verbindung mit der VM. Diese Oberfläche verwenden Sie auch im weiteren Verlauf des Labs.

Abgeschlossene Aufgabe testen

Klicken Sie auf Fortschritt prüfen.

Virtuelle Maschine erstellen

Relevante Dokumentation

Weitere Informationen zur Compute Engine und ihren verschiedenen Funktionen finden Sie in der Compute Engine-Dokumentation.

Aufgabe 2: Arbeitsbeispiel herunterladen und einrichten

1. Installieren Sie in Ihrer SSH-Sitzung Git, Java 17 und das Projektmanagementtool Maven. Damit werden Sie den Beispielcode kompilieren und auszuführen:

sudo apt update && sudo apt install git -y sudo apt install -y maven openjdk-17-jdk Hinweis: Die Ausführung dieses Befehls kann einige Minuten dauern.

2. Klonen Sie das Arbeitsbeispiel auf Ihre VM:

git clone https://github.com/googlecodelabs/speaking-with-a-webpage.git

Damit wird das Verzeichnis speaking-with-a-webpage erstellt, das Unterverzeichnisse für jeden der folgenden Abschnitte enthält. Die einzelnen Unterverzeichnisse bauen aufeinander auf und fügen schrittweise neue Funktionen hinzu:

• 01-hello-https: Enthält ein minimales Jetty-Servlet mit statischen Dateien und einem über HTTPS bereitgestellten Handler
• 02-webaudio: Füllt das clientseitige JavaScript aus. Audio soll vom Mikrofon des Clients aufgenommen und eine Visualisierung angezeigt werden, die bestätigt, dass es funktioniert.
• 03-websockets: Client und Server werden so angepasst, dass sie über ein WebSocket miteinander kommunizieren.
• 04-speech: Der Server wird so angepasst, dass er zuerst Audio an die Cloud Speech API und dann nachfolgende Transkriptionen an den JavaScript-Client sendet.

In diesem Lab-Beispiel wird nicht der normale HTTPS-Port verwendet, sondern der für Entwicklungszwecke vorgesehene nicht privilegierte Port 8443.

3. Damit Sie über Ihren Webbrowser auf diesen Port zugreifen können, öffnen Sie die Firewall Ihrer VM mit dem folgenden gcloud-Befehl:

gcloud compute firewall-rules create dev-ports \ --allow=tcp:8443 \ --source-ranges=0.0.0.0/0 Hinweis: Sie können vergleichen, was sich zwischen den Schritten geändert hat.

Wenn Sie vergleichen möchten, was sich zwischen zwei Abschnitten geändert hat, verwenden Sie den folgenden Befehl:

cd ~/speaking-with-a-webpage

git diff --no-index 01-hello-https/ 02-webaudio/

Hier werden die Unterschiede zwischen den Verzeichnissen/Schritten 02-https und 03-webaudio angezeigt.

Verwenden Sie die Pfeiltasten und die Bild-auf-/Bild-ab-Tasten zur Navigation sowie q, um das Programm zu beenden.

Abgeschlossene Aufgabe testen

Klicken Sie auf Fortschritt prüfen.

Erforderliche Software installieren und Firewallregel erstellen

Aufgabe 3: HTTPS-Java-Servlet starten

Das Java-Servlet ist das Rückgrat der Webanwendung. Es stellt den erforderlichen HTML-, CSS- und JavaScript-Code auf der Clientseite bereit und stellt eine Verbindung zur Cloud Speech API her, um Transkriptionen zu ermöglichen.

Wenn der Zugriff auf das Mikrofon eines Nutzers über eine Webseite erfolgt, muss die Webseite über einen sicheren Kanal kommunizieren, der vor Abhörversuchen geschützt ist. Richten Sie Ihr Servlet daher so ein, dass die Webseiten über HTTPS bereitgestellt werden. Die Konfiguration und Bereitstellung sicherer Webseiten sind ein eigenständiger Themenbereich. Verwenden Sie für dieses Lab daher das selbst signierte Zertifikat und die Jetty-Konfigurationsdateien in der bereitgestellten Beispiellösung. Das ist für eine Entwicklungsumgebung ausreichend.

Lesen Sie sich für diesen Abschnitt einfach das bereitgestellte Maven-Projekt in 01-hello-https durch und führen Sie es aus. Beachten Sie insbesondere die folgenden Dateien im Verzeichnis src/. Dies sind die primären Dateien, auf denen in den weiteren Schritten aufgebaut wird:

• Die Dateien in src/main/webapp enthalten die JavaScript-, CSS- und HTML-Dateien, die von Jetty statisch bereitgestellt werden.
• In TranscribeServlet.java wird das Servlet definiert, das Anfragen an den Pfad /transcribe verarbeitet.

Beispiellösung ausführen

Das Unterverzeichnis 01-hello-https des bereitgestellten Repositorys speaking-with-a-webpage enthält ein für HTTPS konfiguriertes Maven-Servlet-Projekt. Dieses Servlet stellt mit dem Jetty-Servlet-Framework sowohl statische Dateien als auch einen dynamischen Endpunkt bereit. Außerdem wird mithilfe des oben genannten Blogposts ein selbst signiertes Zertifikat mit dem Keytool-Befehl generiert und eine Jetty-Konfiguration für die HTTPS-Unterstützung hinzugefügt.

1. Starten Sie das Servlet. Rufen Sie 01-hello-https auf.

cd ~/speaking-with-a-webpage/01-hello-https

2. Führen Sie den Code aus:

mvn clean jetty:run

3. Rufen Sie dann in Ihrem Webbrowser die folgende Adresse auf: https://<your-external-ip>:8443

Hinweis: Ihre externe IP-Adresse finden Sie auf der Seite Cloud Console – VM-Instanzen.

Da das Beispiel-Servlet keinen Standard-Port überwacht, werden Sie durch Klicken auf den Link Externe IP-Adresse nicht direkt zu Ihrem laufenden Servlet weitergeleitet. Für den Zugriff auf Ihr Servlet müssen Sie den entsprechenden Port wie oben angegeben hinzufügen.

Wenn Sie zum ersten Mal über die HTTPS-URL auf die Webanwendung zugreifen, werden Sie im Browser wahrscheinlich gewarnt, dass die Verbindung nicht privat ist. Das liegt daran, dass in der Beispielanwendung ein selbst signiertes SSL-Zertifikat für die Entwicklung verwendet wird. In einer Produktionsumgebung benötigen Sie ein von einer Zertifizierungsstelle signiertes SSL-Zertifikat. Für dieses Lab reicht jedoch ein selbst signiertes SSL-Zertifikat aus. Passen Sie aber auf und geben Sie auf Ihrer Webseite keine Geheimnisse preis. 😁

Abgeschlossene Aufgabe testen

Klicken Sie auf Fortschritt prüfen.

Beispiellösung ausführen (hello-https)

Aufgabe 4: Audio von einer Webseite aufnehmen

Mit der Web Audio API kann eine Webseite mit Einwilligung des Nutzers Audiodaten vom Mikrofon des Nutzers erfassen. Die Cloud Speech API benötigt diese Rohdaten in einer bestimmten Form und muss die Abtastrate kennen.

Beispiellösung

Das Unterverzeichnis 02-webaudio des bereitgestellten Repositorys speaking-with-a-webpage baut auf dem Beispielcode 01-hello-https auf. Es wird die Web Audio-Funktion getUserMedia hinzugefügt, um das Mikrofon des Nutzers mit einer Visualisierung des Audiosignals zu verbinden. Anschließend wird der Audio-Pipeline ein ScriptProcessorNode hinzugefügt, um die Roh-Audiobytes abzurufen und sie für das Senden an den Server vorzubereiten. Da die Cloud Speech API irgendwann auch die sampleRate benötigt, wird diese ebenfalls abgerufen. Starten Sie die App 02-webaudio so:

1. Drücken Sie STRG + C, um den Server zu beenden.

2. Wechseln Sie zum Verzeichnis, das 02-webaudio enthält:

cd ~/speaking-with-a-webpage/02-webaudio

3. Führen Sie die Anwendung aus:

mvn clean jetty:run

4. Wenn Sie auf die von Ihnen ausgeführte Webanwendung zugreifen möchten, suchen Sie auf der Seite Cloud Console – VM-Instanzen nach der externen IP-Adresse und rufen Sie in Ihrem Browser die Adresse https://<your-external-ip>:8443 auf.

Hinweis: Sie können prüfen, was sich zwischen dem vorherigen Abschnitt (01-hello-https) und dem aktuellen Abschnitt (02-webaudio) geändert hat. Führen Sie dazu folgenden Code aus:

cd ~/speaking-with-a-webpage git diff --no-index 01-hello-https/ 02-webaudio/

Abgeschlossene Aufgabe testen

Klicken Sie auf Fortschritt prüfen.

Führen Sie die Beispiellösung aus, um Audio auf einer Webseite aufzunehmen.

5. Drücken Sie STRG + C, um den Server zu beenden.

Aufgabe 5: Audio vom Client zum Server streamen

Für das Echtzeit-Streaming von Audio an den Server und das gleichzeitige Empfangen der verfügbar werdenden Transkriptionen ist eine normale HTTP-Verbindung nicht ideal. Daher erstellen Sie in diesem Abschnitt eine WebSocket-Verbindung vom Client zum Server. Damit senden Sie die Audio-Metadaten (d. h. die Abtastrate) und Daten an den Server, während Sie auf eine Antwort (d. h. die Transkription der Daten) warten.

Audiobytes streamen

Im bereitgestellten Beispiel wird TranscribeServlet angepasst. Das Servlet wird nun von WebSocketServlet abgeleitet, um einen WebSocketAdapter zu registrieren. Der definierte WebSocketAdapter nimmt lediglich die Nachricht entgegen und sendet sie an den Client zurück.

Auf dem Client wird der scriptNode aus dem vorherigen Schritt durch einen Knoten ersetzt, der die Daten an einen später zu definierenden Socket sendet. Anschließend wird eine sichere Websocket-Verbindung zum Server hergestellt. Sobald der Server und das Mikrofon verbunden sind, beginnt das Gerät, auf Nachrichten vom Server zu warten. Anschließend wird die Abtastrate an den Server gesendet. Wenn der Server die Abtastrate zurückgibt, ersetzt der Client den Listener durch den dauerhafteren Transkriptions-Handler. Anschließend verbindet er den scriptNode und beginnt mit dem Streaming von Audiobytes an den Server.

1. Wechseln Sie zum Verzeichnis, das 03-websockets enthält:

cd ~/speaking-with-a-webpage/03-websockets

2. Führen Sie die Anwendung aus:

mvn clean jetty:run

3. Wenn Sie auf die von Ihnen ausgeführte Webanwendung zugreifen möchten, suchen Sie auf der Seite Cloud Console – VM-Instanzen nach der externen IP-Adresse und rufen Sie in Ihrem Browser die Adresse https://<your-external-ip>:8443 auf.

4. Drücken Sie STRG + C, um den Server zu beenden.

Aufgabe 6: Sprache zu Text transkribieren

Mit der Streaming API von Google Cloud Speech können Sie Audiobytes in Echtzeit an die API senden und asynchron Transkriptionen aller erkannten Sprachdaten empfangen. Die API erwartet die Bytes in dem Format, das in der am Anfang einer Anfrage gesendeten Konfiguration festgelegt ist. Für diese Webanwendung senden Sie der API Audio-Rohdaten im Format LINEAR16. Das bedeutet, jedes Beispiel ist eine 16-Bit-Ganzzahl mit Vorzeichen und wird mit der vom Client abgerufenen Abtastrate gesendet.

Beispiellösung

Das Unterverzeichnis 04-speech des bereitgestellten Repositorys speaking-with-a-webpage enthält den Servercode aus Schritt 03-websockets. Darin ist der Code aus dem obigen Beispielcode StreamingRecognizeClient enthalten. Er dient dazu, eine Verbindung zur Cloud Speech API herzustellen, Audiobytes an die Cloud Speech API zu übergeben und Transkripte von der Cloud Speech API zu empfangen. Wenn die Transkripte asynchron empfangen werden, werden sie über die Verbindung zum JavaScript-Client weitergeleitet. Der JavaScript-Client gibt sie dann einfach auf der Webseite aus.

1. Starten Sie die Anwendung:

cd ~/speaking-with-a-webpage/04-speech mvn clean jetty:run

2. Wenn Sie auf die von Ihnen ausgeführte Webanwendung zugreifen möchten, suchen Sie auf der Seite Cloud Console – VM-Instanzen nach der externen IP-Adresse und rufen Sie in Ihrem Browser die Adresse https://<your-external-ip>:8443 auf.

Aufgabe 7: Testen Sie Ihr Wissen

Im Folgenden stellen wir Ihnen einige Multiple-Choice-Fragen, um Ihr bisher erworbenes Wissen zu testen und zu festigen. Beantworten Sie die Fragen, so gut Sie können.

Glückwunsch!

Sie haben gelernt, wie Sie mit gcloud eine VM erstellen und ein Java-Servlet starten, das Audiodaten auf einer Webseite erfasst und in Text transkribiert!

Weitere Informationen

Überlegen Sie sich, welche Verbesserungen an der Software zusätzlich möglich wären:

• Die Client-App gibt den Text derzeit nur aus, kann aber auf viele andere Weisen verwendet werden – sehen Sie sie einfach als eine weitere Benutzeroberfläche. Schlüsselwörter können bestimmte Aktionen auslösen. Sie könnten den Text in eine Konversations-Engine einbinden oder ihn unverändert für Untertitel verwenden.
• Binden Sie die Transkriptionen in die Cloud Natural Language API ein, mit der Sie Struktur aus ansonsten unstrukturiertem Text extrahieren können.
• Die Cloud Speech API unterstützt mehr als 80 Sprachen, die über einen einfachen Konfigurationsparameter auswählbar sind. Probieren Sie es mit einer anderen Sprache, die Sie sprechen oder gerade lernen.
• Die aktuelle Projektkonfiguration ist hauptsächlich für Entwicklungszwecke geeignet und sollte bei der Bereitstellung in der Produktion angepasst werden. Sie könnten beispielsweise mehrere Compute Engine-Instanzen in einer Instanzgruppe verwenden und den SSL-Load-Balancer für eine sichere Kommunikation zwischen Client und Server nutzen.

Google Cloud-Schulungen und -Zertifizierungen

In unseren Schulungen erfahren Sie alles zum optimalen Einsatz unserer Google Cloud-Technologien und können sich entsprechend zertifizieren lassen. Unsere Kurse vermitteln technische Fähigkeiten und Best Practices, damit Sie möglichst schnell mit Google Cloud loslegen und Ihr Wissen fortlaufend erweitern können. Wir bieten On-Demand-, Präsenz- und virtuelle Schulungen für Anfänger wie Fortgeschrittene an, die Sie individuell in Ihrem eigenen Zeitplan absolvieren können. Mit unseren Zertifizierungen weisen Sie nach, dass Sie Experte im Bereich Google Cloud-Technologien sind.

Anleitung zuletzt am 15. September 2025 aktualisiert

Lab zuletzt am 15. September 2025 getestet

© 2025 Google LLC. Alle Rechte vorbehalten. Google und das Google-Logo sind Marken von Google LLC. Alle anderen Unternehmens- und Produktnamen können Marken der jeweils mit ihnen verbundenen Unternehmen sein.