GSP125

Descripción general

La API de transmisión de Google Cloud Speech permite que los desarrolladores conviertan el lenguaje hablado en texto en tiempo real. Si se usa la API en combinación con Websockets y la API de Web Audio de JavaScript, un servlet de Java puede aceptar voz transmitida desde una página web y proporcionar transcripciones de texto, lo que permite que cualquier página web use la palabra hablada como una interfaz de usuario adicional.

Este lab se divide en varias secciones, y cada una presenta un componente de la aplicación web final.

La app web que creas toma el audio del micrófono del cliente y lo transmite a un servlet de Java. El servlet de Java pasa los datos a la API de Cloud Speech, que transmite las transcripciones de cualquier voz que detecte de vuelta al servlet. Luego, el servlet pasa los resultados de la transcripción al cliente, que los muestra en la página.

Para lograr esto, debes crear varios componentes:

• Un servlet de Java para entregar el código estático HTML, JavaScript y CSS para la página web
• El código JavaScript, HTML y CSS para conectar la página web al micrófono del usuario, extraer los bytes sin procesar y transmitirlos al servlet a través de un WebSocket
• Un controlador de Websocket de servlet para transmitir los bytes de sonido que recibe del cliente a la API de Cloud Speech y transmitir los resultados de la transcripción de la API de Cloud Speech al cliente

Actividades

• Crear una máquina virtual (VM)
• Iniciar un servlet de Java HTTP
• Capturar audio en una página web
• Transcribir voz a texto

Requisitos previos

En este lab, se da por sentado que el usuario tiene conocimientos previos sobre los siguientes temas:

• El lenguaje de programación Java
• Servlets de Java (específicamente, el contenedor de servlets Jetty). Si bien se pueden usar otros contenedores de servlet, la solución de ejemplo usa Jetty, lo que dificulta la verificación de soluciones que usan otros contenedores
• El lenguaje de programación JavaScript. El código de las páginas web se escribe casi exclusivamente en JavaScript, por lo que sería difícil evitar su uso en un lab sobre páginas web
• La línea de comandos de Linux. Gran parte del lab se lleva a cabo en un símbolo del sistema de Linux, por lo que es útil tener cierta familiaridad con algunas herramientas comunes y un editor de texto para ese entorno
• La herramienta de administración de proyectos Maven. Si bien, en principio, se puede usar cualquier herramienta de administración de proyectos de Java, la solución de ejemplo usa Maven, lo que dificulta la verificación de soluciones que usan otras herramientas

Configuración y requisitos

Antes de hacer clic en el botón Comenzar lab

Lee estas instrucciones. Los labs cuentan con un temporizador que no se puede pausar. El temporizador, que comienza a funcionar cuando haces clic en Comenzar lab, indica por cuánto tiempo tendrás a tu disposición los recursos de Google Cloud.

Este lab práctico te permitirá realizar las actividades correspondientes en un entorno de nube real, no en uno de simulación o demostración. Para ello, se te proporcionan credenciales temporales nuevas que utilizarás para acceder a Google Cloud durante todo el lab.

Para completar este lab, necesitarás lo siguiente:

• Acceso a un navegador de Internet estándar. Se recomienda el navegador Chrome.

Nota: Usa una ventana del navegador privada o de incógnito (opción recomendada) para ejecutar el lab. Así evitarás conflictos entre tu cuenta personal y la cuenta de estudiante, lo que podría generar cargos adicionales en tu cuenta personal.

• Tiempo para completar el lab (recuerda que, una vez que comienzas un lab, no puedes pausarlo).

Nota: Usa solo la cuenta de estudiante para este lab. Si usas otra cuenta de Google Cloud, es posible que se apliquen cargos a esa cuenta.

Cómo iniciar tu lab y acceder a la consola de Google Cloud

1. Haz clic en el botón Comenzar lab. Si debes pagar por el lab, se abrirá un diálogo para que selecciones la forma de pago. A la izquierda, se encuentra el panel Detalles del lab, que tiene estos elementos:

   • El botón para abrir la consola de Google Cloud
   • El tiempo restante
   • Las credenciales temporales que debes usar para el lab
   • Otra información para completar el lab, si es necesaria

2. Haz clic en Abrir la consola de Google Cloud (o haz clic con el botón derecho y selecciona Abrir el vínculo en una ventana de incógnito si ejecutas el navegador Chrome).

   El lab inicia recursos y abre otra pestaña en la que se muestra la página de acceso.

   Sugerencia: Ordena las pestañas en ventanas separadas, una junto a la otra.

   Nota: Si ves el diálogo Elegir una cuenta, haz clic en Usar otra cuenta.

3. De ser necesario, copia el nombre de usuario a continuación y pégalo en el diálogo Acceder.

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

   También puedes encontrar el nombre de usuario en el panel Detalles del lab.

4. Haz clic en Siguiente.

5. Copia la contraseña que aparece a continuación y pégala en el diálogo Te damos la bienvenida.

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

   También puedes encontrar la contraseña en el panel Detalles del lab.

6. Haz clic en Siguiente.

   Importante: Debes usar las credenciales que te proporciona el lab. No uses las credenciales de tu cuenta de Google Cloud. Nota: Usar tu propia cuenta de Google Cloud para este lab podría generar cargos adicionales.

7. Haz clic para avanzar por las páginas siguientes:

   • Acepta los Términos y Condiciones.
   • No agregues opciones de recuperación o autenticación de dos factores (esta es una cuenta temporal).
   • No te registres para obtener pruebas gratuitas.

Después de un momento, se abrirá la consola de Google Cloud en esta pestaña.

Nota: Para acceder a los productos y servicios de Google Cloud, haz clic en el menú de navegación o escribe el nombre del servicio o producto en el campo Buscar.

Tarea 1: Crea una máquina virtual

Compute Engine es un servicio que te permite iniciar VMs en la infraestructura de Google. En este lab, crearás y usarás una VM para ejecutar un servlet escrito en Java 8 que aloja el sitio web y usa la API de Cloud Speech para proporcionarle transcripciones dinámicas al cliente. A los efectos de este lab, también usarás la VM para ejecutar tu código.

1. Para crear una VM nueva, haz clic en el menú de navegación () > Compute Engine > Instancias de VM.

2. Para crear una instancia nueva, haz clic en Crear instancia.

3. En la Configuración de la máquina, haz lo siguiente:

   • Asígnale el nombre speaking-with-a-webpage a la instancia nueva.

   • Elige una zona como .

   • Deja los otros valores como predeterminados.

4. Haz clic en SO y almacenamiento.

   • Haz clic en Cambiar para comenzar a configurar el disco de arranque y selecciona los siguientes valores:

     • En Sistema operativo, selecciona Debian.

     • En Versión, selecciona Debian GNU/Linux 12 (bookworm).

     • Deja el Tipo de disco de arranque con el valor predeterminado.

     • En la parte inferior de la ventana, haz clic en Seleccionar.

5. Haz clic en Redes.

   • En Firewall, marca las opciones Permitir tráfico HTTP y Permitir tráfico HTTPS.

6. Haz clic en Seguridad.

   • En Identidad y acceso a la API > Cuenta de servicio, deja la configuración predeterminada.

   • En Permisos de acceso, selecciona Permitir el acceso total a todas las APIs de Cloud.

7. Haz clic en Crear.

Después de unos minutos, tu VM estará en funcionamiento. Revisa tu VM y sus detalles en la lista de instancias de VM. Observa el botón SSH que usarás en el siguiente paso y la IP externa que usarás más adelante en este lab.

8. Para conectarte a ella, haz clic en el botón SSH que se encuentra a su derecha. Si se te solicita, haz clic en Autorizar.

Se abrirá una ventana nueva y se te conectará a tu VM, lo que te proporcionará un símbolo del sistema. Usa esta interfaz durante el resto del lab.

Prueba la tarea completada

Haz clic en Revisar mi progreso para verificar la tarea realizada.

Crear una máquina virtual

Documentación relevante

Obtén más información sobre Compute Engine y sus diferentes funciones en la referencia de la documentación de Compute Engine.

Tarea 2: Descarga y configura un ejemplo funcional

1. En tu sesión de SSH, instala Git, Java 17 y la herramienta de administración de proyectos Maven para compilar y ejecutar el código de ejemplo:

sudo apt update && sudo apt install git -y sudo apt install -y maven openjdk-17-jdk Nota: Este comando puede tardar unos minutos en ejecutarse.

2. Clona el ejemplo funcional en tu VM:

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

Con esto, se crea el directorio speaking-with-a-webpage, que contiene subdirectorios para cada una de las siguientes secciones. Cada subdirectorio se basa en el anterior y agrega de forma incremental nuevas funcionalidades:

• 01-hello-https: Contiene un servlet de Jetty mínimo con archivos estáticos y un controlador que se entrega a través de HTTPS.
• 02-webaudio: Completa el código JavaScript del cliente para grabar audio desde el micrófono del cliente y mostrar una visualización para confirmar que funciona.
• 03-websockets: Modifica el cliente y el servidor para que se comuniquen entre sí a través de un WebSocket.
• 04-speech: Modifica el servidor para enviar audio a la API de Cloud Speech y enviar las transcripciones posteriores al cliente de JavaScript.

El ejemplo que se usa en este lab no utiliza el puerto HTTPS normal, sino el puerto sin privilegios 8443, para fines de desarrollo.

3. Para acceder a este puerto desde tu navegador web, abre el firewall de tu VM con este comando de gcloud:

gcloud compute firewall-rules create dev-ports \ --allow=tcp:8443 \ --source-ranges=0.0.0.0/0 Nota: Puedes comparar los cambios entre los pasos.

Si deseas comparar los cambios entre una sección y la siguiente, puedes usar el siguiente comando:

cd ~/speaking-with-a-webpage

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

Esto muestra las diferencias entre los directorios o pasos 02-https y 03-webaudio.

Usa las teclas de flecha, Re Pág o Av Pág para navegar y q para salir.

Prueba la tarea completada

Haz clic en Revisar mi progreso para verificar la tarea realizada.

Instalar el software necesario y crear una regla de firewall

Tarea 3: Inicia el servlet de Java HTTPS

El servlet de Java es la columna vertebral de esta app web, ya que proporciona el código HTML, CSS y JavaScript del cliente necesario, y se conecta a la API de Cloud Speech para proporcionar transcripciones.

Cuando se accede al micrófono de un usuario desde una página web, los navegadores requieren que la página web se comunique a través de un canal seguro para evitar filtraciones. Por este motivo, configura tu servlet para que entregue páginas web a través de HTTPS. Dado que configurar y entregar páginas web seguras es un tema en sí mismo, para este lab, usa los archivos de configuración de Jetty y el certificado autofirmado incluidos en la solución de ejemplo proporcionada, lo que es suficiente para un entorno de desarrollo.

Para esta sección, simplemente lee y ejecuta el proyecto de Maven proporcionado en 01-hello-https. Presta especial atención a los archivos del directorio src/, ya que son los archivos principales que servirán de base en los pasos posteriores:

• Los archivos en src/main/webapp incluyen los archivos de JavaScript, CSS y HTML que Jetty entrega de forma estática.
• TranscribeServlet.java define el servlet que controla las solicitudes a la ruta /transcribe.

Cómo ejecutar la solución de muestra

El subdirectorio 01-hello-https del repositorio speaking-with-a-webpage proporcionado contiene un proyecto de servlet de Maven configurado para HTTPS. Este servlet usa el framework de servlet de Jetty para entregar tanto archivos estáticos como un extremo dinámico. También usa la entrada de blog anterior para generar un certificado autofirmado con el comando Key Tool y agrega la configuración de Jetty para admitir HTTPS.

1. Inicia el servlet. Ve a 01-hello-https.

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

2. Ejecuta el código:

mvn clean jetty:run

3. Luego, dirige tu navegador web a https://<your-external-ip>:8443.

Nota: Puedes encontrar tu dirección IP externa en la página Instancias de VM de la consola de Cloud.

Dado que el servlet de ejemplo está escuchando en un puerto no estándar, hacer clic directamente en el vínculo de la IP externa no te dirige a tu servlet en ejecución. Debes agregar el puerto correspondiente, como se indicó anteriormente, para acceder a tu servlet.

Cuando accedas por primera vez a la app web con la URL HTTPS, es probable que tu navegador te advierta que la conexión no es privada. Esto se debe a que la app de ejemplo usa un certificado SSL autofirmado para el desarrollo. En un entorno de producción, necesitarías un certificado SSL firmado por una autoridad certificadora, pero, para los fines de este lab, un certificado SSL autofirmado es suficiente. Solo asegúrate de no hablar de ningún secreto con tu página web. 😁

Prueba la tarea completada

Haz clic en Revisar mi progreso para verificar la tarea realizada.

Ejecutar la solución de ejemplo (hello-https)

Tarea 4: Captura audio en una página web

La API de Web Audio permite que una página web capture datos de audio del micrófono de un usuario, con su consentimiento. La API de Cloud Speech necesita estos datos sin procesar en un formato determinado y debe conocer la frecuencia con la que se muestrean.

Solución de ejemplo

El subdirectorio 02-webaudio del repositorio speaking-with-a-webpage proporcionado se basa en el código de ejemplo 01-hello-https y agrega la función getUserMedia de Web Audio para conectar el micrófono del usuario a una visualización del audio. Luego, agrega un ScriptProcessorNode a la canalización de audio para recuperar los bytes de audio sin procesar, en preparación para enviarlos al servidor. Dado que la API de Cloud Speech necesitará el sampleRate, también lo recupera. Inicia la app 02-webaudio de la siguiente manera:

1. Presiona CTRL + C para detener el servidor.

2. Ve al directorio que contiene 02-webaudio:

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

3. Ejecuta la aplicación:

mvn clean jetty:run

4. Para acceder a tu app web en ejecución, busca la dirección IP externa en la página Instancias de VM de la consola de Cloud y dirige tu navegador a https://<your-external-ip>:8443.

Nota: Para verificar los cambios entre la sección anterior (01-hello-https) y la actual (02-webaudio), ejecuta el siguiente comando:

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

Prueba la tarea completada

Haz clic en Revisar mi progreso para verificar la tarea realizada.

Ejecutar la solución de ejemplo para capturar audio en la página web

5. Presiona CTRL + C para detener el servidor.

Tarea 5: Transmite audio del cliente al servidor

Una conexión HTTP normal no es ideal para la transmisión de audio en tiempo real a un servidor, mientras se reciben transcripciones a medida que están disponibles. En esta sección, crearás una conexión de WebSocket del cliente al servidor y la usarás para enviar los metadatos de audio (es decir, la tasa de muestreo) y los datos al servidor, mientras se escucha una respuesta (es decir, la transcripción de los datos).

Bytes de audio de transmisión

En el ejemplo proporcionado, se cambia TranscribeServlet para que se extienda desde WebSocketServlet y, así, registrar un WebSocketAdapter. El WebSocketAdapter que define simplemente toma el mensaje que recibió y lo reenvía al cliente.

En el cliente, la muestra reemplaza el scriptNode del paso anterior por uno que envía los datos a un socket que se definirá más adelante. Luego, crea esa conexión segura de WebSocket al servidor. Una vez que se conectan el servidor y el micrófono, comienza a escuchar los mensajes del servidor y, luego, le envía a este la tasa de muestreo. Cuando el servidor devuelve la tasa de muestreo, el cliente reemplaza el objeto de escucha por el controlador de transcripción más permanente y conecta el scriptNode para comenzar a transmitir bytes de audio al servidor.

1. Ve al directorio que contiene 03-websockets:

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

2. Ejecuta la aplicación:

mvn clean jetty:run

3. Para acceder a tu app web en ejecución, busca la dirección IP externa en la página Instancias de VM de la consola de Cloud y dirige tu navegador a https://<your-external-ip>:8443.

4. Presiona CTRL + C para detener el servidor.

Tarea 6: Transcribe voz a texto

La API de transmisión de Google Cloud Speech te permite enviar bytes de audio a la API en tiempo real y recibir de forma asíncrona transcripciones de cualquier voz que detecte. La API espera que los bytes tengan un formato específico, según lo determina la configuración que se envía al comienzo de una solicitud. En esta app web, envías muestras de audio sin procesar de la API en formato LINEAR16; es decir, cada muestra es un número entero con signo de 16 bits, que se envía con la tasa de muestreo que obtiene el cliente.

Solución de ejemplo

El subdirectorio 04-speech del repositorio speaking-with-a-webpage proporcionado completa el código del servidor del paso 03-websockets. Incorpora el código de muestra de StreamingRecognizeClient que aparece más arriba para conectarse con la API de Cloud Speech, pasarle bytes de audio y recibir transcripciones de ella. Cuando recibe las transcripciones de forma asíncrona, usa su conexión con el cliente de JavaScript para pasarlas. El cliente de JavaScript simplemente las muestra en la página web.

1. Inicia la aplicación:

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

2. Para acceder a tu app web en ejecución, busca la dirección IP externa en la página Instancias de VM de la consola de Cloud y dirige tu navegador a https://<your-external-ip>:8443.

Tarea 7: Pon a prueba tus conocimientos

A continuación, se presentan algunas preguntas de opción múltiple para reforzar tus conocimientos de los conceptos de este lab. Trata de responderlas lo mejor posible.

¡Felicitaciones!

Aprendiste a usar gcloud para crear una VM y, luego, iniciar un servlet de Java para capturar audio y transcribirlo como texto en una página web.

Próximos pasos y más información

Piensa en las mejoras de software que podrías agregar:

• Actualmente, la app cliente solo imprime el texto, pero se puede usar de muchas maneras. Piensa en ella como otra interfaz de usuario. Las palabras clave pueden invocar ciertas acciones, puedes integrar el texto con un motor de conversación o se puede usar tal como está para crear subtítulos.
• Integra las transcripciones con la API de Cloud Natural Language, que puede extraer la estructura de texto que, de otro modo, no estaría estructurado.
• La API de Cloud Speech admite más de 80 idiomas, que se pueden elegir a través de un parámetro de configuración simple. Pruébala con otro idioma que hables o que estés aprendiendo.
• La configuración actual del proyecto es adecuada principalmente para fines de desarrollo y se debe cambiar cuando se implemente en producción. Por ejemplo, puedes usar varias instancias de Compute Engine en un grupo de instancias y el balanceador de cargas SSL para proporcionar una comunicación segura entre el cliente y el servidor.

Capacitación y certificación de Google Cloud

Recibe la formación que necesitas para aprovechar al máximo las tecnologías de Google Cloud. Nuestras clases incluyen habilidades técnicas y recomendaciones para ayudarte a avanzar rápidamente y a seguir aprendiendo. Para que puedas realizar nuestros cursos cuando más te convenga, ofrecemos distintos tipos de capacitación de nivel básico a avanzado: a pedido, presenciales y virtuales. Las certificaciones te ayudan a validar y demostrar tus habilidades y tu conocimiento técnico respecto a las tecnologías de Google Cloud.

Actualización más reciente del manual: 15 de septiembre de 2025

Prueba más reciente del lab: 15 de septiembre de 2025

Copyright 2025 Google LLC. All rights reserved. Google y el logotipo de Google son marcas de Google LLC. Los demás nombres de productos y empresas pueden ser marcas de las respectivas empresas a las que estén asociados.