GSP125

Présentation

L'API de traitement par flux Google Cloud Speech permet aux développeurs de convertir en temps réel le langage parlé en texte. En combinant l'API Speech avec l'API Web Audio et les WebSockets de JavaScript, un servlet Java peut accepter le flux audio issu d'une page Web et en fournir une transcription textuelle, ce qui permet à n'importe quelle page Web d'utiliser la parole comme interface utilisateur supplémentaire.

Cet atelier est divisé en plusieurs sections, chacune présentant un composant de l'application Web finale.

L'application Web que vous créez récupère le contenu audio issu du micro du client et le diffuse en flux continu vers un servlet Java. Le servlet Java transmet les données à l'API Cloud Speech, laquelle renvoie au servlet la transcription de toute parole détectée. Le servlet transmet ensuite les résultats de la transcription au client, qui les affiche sur la page.

Pour obtenir ce résultat, vous devez créer plusieurs composants :

• Un servlet Java pour diffuser le code HTML, JavaScript et CSS statique de la page Web
• Le code JavaScript, HTML et CSS permettant de connecter la page Web au micro de l'utilisateur, d'extraire les octets bruts et de les diffuser vers le servlet par le biais d'un WebSocket
• Un gestionnaire de servlet Websocket pour diffuser les octets de contenu audio que le servlet reçoit du client vers l'API Cloud Speech et pour diffuser les résultats de transcription de l'API Cloud Speech vers le client

Objectifs de l'atelier

• Créer une machine virtuelle (VM)
• Démarrer un servlet Java HTTP
• Capturer du contenu audio sur une page Web
• Transcrire le contenu audio en texte

Prérequis

Dans cet atelier, nous partons du principe que vous connaissez bien les éléments suivants :

• Le langage de programmation Java.
• Les servlets Java, et plus précisément le conteneur de servlet Jetty. Bien que d'autres conteneurs de servlet puissent être utilisés, l'exemple de solution utilise Jetty. La validation des solutions utilisant d'autres conteneurs sera par conséquent plus délicate.
• Le langage de programmation JavaScript. Le code des pages Web est presque exclusivement écrit en JavaScript. Il est donc difficile d'éviter de l'utiliser dans un atelier sur les pages Web.
• La ligne de commande Linux. Une grande partie de l'atelier s'effectue via une invite de commande Linux. Il sera donc plus facile de vous y retrouver si vous connaissez un éditeur de texte et certains outils courants pour cet environnement.
• L'outil de gestion de projet Maven. En principe, n'importe quel outil de gestion de projet Java peut être utilisé. Toutefois, l'exemple de solution utilise Maven. La validation des solutions utilisant d'autres outils sera par conséquent plus délicate.

Préparation

Avant de cliquer sur le bouton "Démarrer l'atelier"

Lisez ces instructions. Les ateliers sont minutés, et vous ne pouvez pas les mettre en pause. Le minuteur, qui démarre lorsque vous cliquez sur Démarrer l'atelier, indique combien de temps les ressources Google Cloud resteront accessibles.

Cet atelier pratique vous permet de suivre les activités dans un véritable environnement cloud, et non dans un environnement de simulation ou de démonstration. Des identifiants temporaires vous sont fournis pour vous permettre de vous connecter à Google Cloud le temps de l'atelier.

Pour réaliser cet atelier :

• Vous devez avoir accès à un navigateur Internet standard (nous vous recommandons d'utiliser Chrome).

Remarque : Ouvrez une fenêtre de navigateur en mode incognito (recommandé) ou de navigation privée pour effectuer cet atelier. Vous éviterez ainsi les conflits entre votre compte personnel et le compte temporaire de participant, qui pourraient entraîner des frais supplémentaires facturés sur votre compte personnel.

• Vous disposez d'un temps limité. N'oubliez pas qu'une fois l'atelier commencé, vous ne pouvez pas le mettre en pause.

Remarque : Utilisez uniquement le compte de participant pour cet atelier. Si vous utilisez un autre compte Google Cloud, des frais peuvent être facturés à ce compte.

Démarrer l'atelier et se connecter à la console Google Cloud

1. Cliquez sur le bouton Démarrer l'atelier. Si l'atelier est payant, une boîte de dialogue s'affiche pour vous permettre de sélectionner un mode de paiement. Sur la gauche, vous trouverez le panneau "Détails concernant l'atelier", qui contient les éléments suivants :

   • Le bouton "Ouvrir la console Google Cloud"
   • Le temps restant
   • Les identifiants temporaires que vous devez utiliser pour cet atelier
   • Des informations complémentaires vous permettant d'effectuer l'atelier

2. Cliquez sur Ouvrir la console Google Cloud (ou effectuez un clic droit et sélectionnez Ouvrir le lien dans la fenêtre de navigation privée si vous utilisez le navigateur Chrome).

   L'atelier lance les ressources, puis ouvre la page "Se connecter" dans un nouvel onglet.

   Conseil : Réorganisez les onglets dans des fenêtres distinctes, placées côte à côte.

   Remarque : Si la boîte de dialogue Sélectionner un compte s'affiche, cliquez sur Utiliser un autre compte.

3. Si nécessaire, copiez le nom d'utilisateur ci-dessous et collez-le dans la boîte de dialogue Se connecter.

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

   Vous trouverez également le nom d'utilisateur dans le panneau "Détails concernant l'atelier".

4. Cliquez sur Suivant.

5. Copiez le mot de passe ci-dessous et collez-le dans la boîte de dialogue Bienvenue.

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

   Vous trouverez également le mot de passe dans le panneau "Détails concernant l'atelier".

6. Cliquez sur Suivant.

   Important : Vous devez utiliser les identifiants fournis pour l'atelier. Ne saisissez pas ceux de votre compte Google Cloud. Remarque : Si vous utilisez votre propre compte Google Cloud pour cet atelier, des frais supplémentaires peuvent vous être facturés.

7. Accédez aux pages suivantes :

   • Acceptez les conditions d'utilisation.
   • N'ajoutez pas d'options de récupération ni d'authentification à deux facteurs (ce compte est temporaire).
   • Ne vous inscrivez pas à des essais sans frais.

Après quelques instants, la console Cloud s'ouvre dans cet onglet.

Remarque : Pour accéder aux produits et services Google Cloud, cliquez sur le menu de navigation ou saisissez le nom du service ou du produit dans le champ Recherche.

Tâche 1 : Créer une machine virtuelle

Compute Engine est un service qui vous permet de démarrer des VM sur l'infrastructure de Google. Dans cet atelier, vous allez créer et utiliser une VM pour exécuter un servlet écrit en Java 8 qui héberge le site Web, et utiliser l'API Cloud Speech pour fournir des transcriptions dynamiques au client. Pour les besoins de cet atelier, vous allez également utiliser la VM pour exécuter votre code.

1. Pour créer une VM, cliquez sur le menu de navigation () > Compute Engine > Instances de VM.

2. Pour créer une instance, cliquez sur Créer une instance.

3. Accédez à la section Configuration de la machine.

   • Nommez la nouvelle instance speaking-with-a-webpage.

   • Sélectionnez une zone pour la variable .

   • Conservez les valeurs par défaut des autres options.

4. Cliquez sur OS et stockage.

   • Cliquez sur Modifier pour commencer à configurer le disque de démarrage et sélectionnez les valeurs suivantes :

     • Pour Système d'exploitation, sélectionnez Debian.

     • Pour Version, sélectionnez Debian GNU/Linux 12 (bookworm).

     • Laissez la valeur par défaut dans le champ Type de disque de démarrage.

     • En bas de la fenêtre, cliquez sur Sélectionner.

5. Cliquez sur Mise en réseau.

   • Pour Pare-feu, cochez les cases Autoriser le trafic HTTP et Autoriser le trafic HTTPS.

6. Cliquez sur Sécurité.

   • Pour Identité et accès à l'API > Compte de service, conservez la valeur par défaut.

   • Pour Niveaux d'accès, sélectionnez Autoriser l'accès complet à l'ensemble des APIs Cloud.

7. Cliquez sur Créer.

Au bout de quelques minutes, votre VM est opérationnelle. Vous pouvez voir votre VM et ses détails dans la liste Instances de VM. Notez le bouton SSH à utiliser à l'étape suivante et l'adresse IP externe à utiliser plus tard dans cet atelier.

8. Connectez-vous en cliquant sur le bouton SSH à droite. Cliquez sur Autoriser si vous y êtes invité.

Une nouvelle fenêtre s'ouvre et vous connecte à votre VM, en vous fournissant une invite de commande. Vous utiliserez cette interface pour le reste de cet atelier.

Tester la tâche terminée

Cliquez sur Vérifier ma progression pour valider la tâche exécutée.

Créer une machine virtuelle

Documentation associée

Pour en savoir plus sur Compute Engine et ses différentes fonctionnalités, consultez la documentation de référence Compute Engine.

Tâche 2 : Télécharger et configurer un exemple fonctionnel

1. Dans votre session SSH, installez Git, Java 17 et l'outil de gestion de projet Maven pour compiler et exécuter l'exemple de code :

sudo apt update && sudo apt install git -y sudo apt install -y maven openjdk-17-jdk Remarque : L'exécution de cette commande peut prendre quelques minutes.

2. Clonez l'exemple fonctionnel sur votre VM :

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

Cette commande crée le répertoire speaking-with-a-webpage. Celui-ci contient des sous-répertoires pour chacune des sections qui suivent. Chaque sous-répertoire s'appuie sur le précédent, en ajoutant progressivement de nouvelles fonctionnalités :

• 01-hello-https : contient un servlet Jetty minimal avec des fichiers statiques et un gestionnaire diffusés via HTTPS.
• 02-webaudio : complète le JavaScript côté client pour enregistrer le contenu audio issu du micro du client et affiche une visualisation pour confirmer que tout fonctionne.
• 03-websockets : modifie le client et le serveur pour qu'ils communiquent entre eux via un WebSocket.
• 04-speech : modifie le serveur pour qu'il envoie le contenu audio à l'API Cloud Speech, et les transcriptions résultantes au client JavaScript.

L'exemple utilisé pour cet atelier n'exploite pas le port HTTPS normal, mais le port non privilégié 8443, à des fins de développement.

3. Pour accéder à ce port depuis votre navigateur Web, ouvrez le pare-feu de votre VM à l'aide de cette commande gcloud :

gcloud compute firewall-rules create dev-ports \ --allow=tcp:8443 \ --source-ranges=0.0.0.0/0 Remarque : Vous pouvez effectuer une comparaison pour distinguer les modifications apportées entre les étapes.

Si vous souhaitez comparer deux sections pour observer les modifications, vous pouvez utiliser la commande suivante :

cd ~/speaking-with-a-webpage

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

Cela permet d'afficher les différences entre les répertoires/étapes 01-hello-https et 02-webaudio.

Utilisez les touches fléchées Pg. Préc./Pg. Suiv. pour naviguer et la touche q pour quitter.

Tester la tâche terminée

Cliquez sur Vérifier ma progression pour valider la tâche exécutée.

Installer les logiciels nécessaires et créer une règle de pare-feu.

Tâche 3 : Démarrer le servlet Java HTTPS

Le servlet Java est la clé de voûte de cette application Web. Il fournit le code HTML, CSS et JavaScript requis côté client, et se connecte à l'API Cloud Speech pour fournir des transcriptions.

Lorsqu'un navigateur accède au micro d'un utilisateur à partir d'une page Web, ce navigateur exige que la page Web communique via un canal sécurisé pour éviter tout risque d'espionnage. Par conséquent, vous devez configurer votre servlet pour qu'il diffuse les pages Web via HTTPS uniquement. La configuration et la diffusion de pages Web sécurisées étant un sujet à part entière, vous utiliserez pour cet atelier les fichiers de configuration Jetty et le certificat autosigné de l'exemple de solution fourni. Ces éléments sont suffisants pour un environnement de développement.

Pour cette section, il vous suffit de lire et d'exécuter le projet Maven fourni dans 01-hello-https. Notez en particulier les fichiers du répertoire src/, car ce sont les fichiers principaux sur lesquels vous vous appuierez lors des étapes suivantes :

• Les fichiers dans src/main/webapp incluent les fichiers JavaScript, CSS et HTML, qui sont diffusés de manière statique par Jetty.
• TranscribeServlet.java définit le servlet qui gère les requêtes envoyées au chemin d'accès /transcribe.

Exécuter l'exemple de solution

Le sous-répertoire 01-hello-https du dépôt speaking-with-a-webpage fourni contient un projet servlet Maven configuré pour HTTPS. Ce servlet utilise le framework de servlet Jetty pour tout à la fois diffuser des fichiers statiques et fournir un point de terminaison dynamique. Il utilise également les informations de l'article de blog ci-dessus pour générer un certificat autosigné à l'aide de la commande Key Tool et ajoute une configuration Jetty pour prendre en charge HTTPS.

1. Démarrez le servlet. Accédez à 01-hello-https.

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

2. Exécutez le code :

mvn clean jetty:run

3. Faites ensuite pointer votre navigateur Web vers https://<votre-adresse-ip-externe>:8443.

Remarque : Vous trouverez votre adresse IP externe sur la page Instances de VM de la console Cloud.

Comme l'exemple de servlet écoute sur un port non standard, le fait de cliquer directement sur le lien Adresse IP externe ne vous redirige pas vers le servlet en cours d'exécution. Vous devez ajouter le port approprié, comme indiqué ci-dessus, pour accéder à votre servlet.

Lorsque vous accédez pour la première fois à l'application Web via l'URL HTTPS, il est possible que votre navigateur vous indique que la connexion n'est pas privée. En effet, l'application exemple utilise un certificat SSL autosigné pour le développement. Dans un environnement de production, vous aurez besoin d'un certificat SSL signé par une autorité de certification. Toutefois, pour les besoins de cet atelier, un certificat SSL autosigné suffit. Pensez simplement à ne pas partager de secrets sur votre page Web. 😁

Tester la tâche terminée

Cliquez sur Vérifier ma progression pour valider la tâche exécutée.

Exécuter l'exemple de solution (hello-https)

Tâche 4 : Capturer du contenu audio sur une page Web

L'API Web Audio permet à une page Web de capturer des données audio issues du micro d'un utilisateur, avec son autorisation. L'API Cloud Speech a besoin de ces données brutes dans un format spécifique et doit connaître leur fréquence d'échantillonnage.

Exemple de solution

Le sous-répertoire 02-webaudio du dépôt speaking-with-a-webpage fourni s'appuie sur l'exemple de code 01-hello-https, en y ajoutant la fonction Web Audio getUserMedia pour connecter le micro de l'utilisateur à une visualisation de l'audio. Il ajoute ensuite un ScriptProcessorNode au pipeline audio pour récupérer les octets audio bruts, en vue de les envoyer au serveur. Étant donné que l'API Cloud Speech aura également besoin du sampleRate (taux d'échantillonnage), elle récupère également cette information. Démarrez l'application 02-webaudio comme indiqué ci-dessous :

1. Appuyez sur CTRL+C pour arrêter le serveur.

2. Accédez au répertoire qui contient 02-webaudio :

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

3. Exécutez l'application :

mvn clean jetty:run

4. Pour accéder à l'application Web en cours d'exécution, recherchez l'adresse IP externe sur la page Instances de VM de la console Cloud, puis faites pointer votre navigateur vers https://<votre-adresse-ip-externe>:8443.

Remarque : Vous pouvez vérifier ce qui a changé entre la section précédente (01-hello-https) et la section actuelle (02-webaudio) en exécutant la commande suivante :

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

Tester la tâche terminée

Cliquez sur Vérifier ma progression pour valider la tâche exécutée.

Exécuter l'exemple de solution pour capturer l'audio sur une page Web

5. Appuyez sur CTRL+C pour arrêter le serveur.

Tâche 5 : Diffuser du contenu audio du client vers le serveur

Une connexion HTTP normale n'est pas idéale pour diffuser du contenu audio en temps réel vers un serveur tout en recevant les transcriptions à mesure qu'elles deviennent disponibles. Dans cette section, vous allez créer une connexion WebSocket du client au serveur, et l'utiliser pour envoyer les métadonnées (c'est-à-dire le taux d'échantillonnage) et les données audio au serveur, tout en écoutant la réponse renvoyée (c'est-à-dire la transcription des données).

Diffuser des octets audio

L'exemple fourni modifie TranscribeServlet pour qu'il étende WebSocketServlet afin d'enregistrer un WebSocketAdapter. Le WebSocketAdapter ainsi défini récupère simplement le message qu'il a reçu et le renvoie au client.

Sur le client, l'exemple remplace le scriptNode de l'étape précédente par un nœud qui envoie les données à un socket (qui sera défini ultérieurement). Il crée ensuite cette connexion WebSocket sécurisée vers le serveur. Une fois que le serveur et le micro sont connectés, l'exemple d'application commence à écouter les messages du serveur, puis lui envoie le taux d'échantillonnage. Lorsque le serveur répond à l'envoi du taux d'échantillonnage, le client remplace l'écouteur par le gestionnaire de transcription (permanent) et connecte le scriptNode pour commencer à diffuser des octets audio vers le serveur.

1. Accédez au répertoire contenant 03-websockets :

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

2. Exécutez l'application :

mvn clean jetty:run

3. Pour accéder à l'application Web en cours d'exécution, recherchez l'adresse IP externe sur la page Instances de VM de la console Cloud, puis faites pointer votre navigateur vers https://<votre-adresse-ip-externe>:8443.

4. Appuyez sur CTRL+C pour arrêter le serveur.

Tâche 6 : Transcrire le contenu audio en texte

Avec l'API de traitement par flux Google Cloud Speech, vous pouvez envoyer des octets audio à l'API en temps réel et recevoir de manière asynchrone les transcriptions de toute parole détectée. L'API s'attend à ce que les octets soient dans un format spécifique, tel que déterminé par la configuration envoyée au début d'une requête. Pour cette application Web, vous envoyez les exemples audio bruts à l'API au format LINEAR16, c'est-à-dire que chaque échantillon est un entier signé de 16 bits, envoyé au taux d'échantillonnage obtenu par le client.

Exemple de solution

Le sous-répertoire 04-speech du dépôt speaking-with-a-webpage fourni complète le code du serveur en partant de l'étape 03-websockets. Il intègre le code de l'exemple StreamingRecognizeClient ci-dessus, ce qui permet à l'application de se connecter à l'API Cloud Speech, de lui transmettre des octets audio et de recevoir des transcriptions de cette API. Lorsqu'il reçoit les transcriptions de manière asynchrone, il utilise sa connexion au client JavaScript pour les lui transmettre. Le client JavaScript ne fait que les afficher sur la page Web.

1. Démarrez l'application :

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

2. Pour accéder à l'application Web en cours d'exécution, recherchez l'adresse IP externe sur la page Instances de VM de la console Cloud, puis faites pointer votre navigateur vers https://<votre-adresse-ip-externe>:8443.

Tâche 7 : Tester vos connaissances

Voici quelques questions à choix multiples qui vous permettront de mieux maîtriser les concepts abordés lors de cet atelier. Répondez-y du mieux que vous le pouvez.

Félicitations !

Vous avez appris à utiliser gcloud pour créer une VM et démarrer un servlet Java afin de capturer du contenu audio et de le transcrire au format texte sur une page Web.

Étapes suivantes et informations supplémentaires

Réfléchissez aux améliorations que vous pourriez apporter :

• L'application cliente se contente actuellement d'imprimer le texte à l'écran, mais elle peut être utilisée de différentes manières. Considérez-la comme une interface utilisateur supplémentaire. Des mots clés peuvent déclencher certaines actions. Vous pourriez intégrer le texte à un moteur de conversation ou l'utiliser tel quel pour le sous-titrage.
• Intégrez les transcriptions à l'API Cloud Natural Language, qui peut extraire une structure d'un texte apparaissant comme non structuré.
• L'API Cloud Speech est compatible avec plus de 80 langues, qui peuvent être sélectionnées à l'aide d'un simple paramètre de configuration. Essayez-la avec une autre langue que vous parlez ou que vous apprenez.
• La configuration actuelle du projet convient principalement au développement et doit être modifiée en cas de déploiement en production. Par exemple, vous pouvez utiliser plusieurs instances Compute Engine dans un groupe d'instances et l'équilibreur de charge SSL pour sécuriser la communication entre le client et le serveur.

Formations et certifications Google Cloud

Les formations et certifications Google Cloud vous aident à tirer pleinement parti des technologies Google Cloud. Nos cours portent sur les compétences techniques et les bonnes pratiques à suivre pour être rapidement opérationnel et poursuivre votre apprentissage. Nous proposons des formations pour tous les niveaux, à la demande, en salle et à distance, pour nous adapter aux emplois du temps de chacun. Les certifications vous permettent de valider et de démontrer vos compétences et votre expérience en matière de technologies Google Cloud.

Dernière mise à jour du manuel : 15 septembre 2025

Dernier test de l'atelier : 15 septembre 2025

Copyright 2025 Google LLC. Tous droits réservés. Google et le logo Google sont des marques de Google LLC. Tous les autres noms d'entreprises et de produits peuvent être des marques des entreprises auxquelles ils sont associés.