Course
Using the Google Cloud Speech API
Lab
목록
- Speech-to-Text API: Qwik Start
- Speaking with a Webpage - Streaming Speech Transcripts ⬅️ 오늘의 Lab!
- Speech to Text Transcription with the Speech-to-Text API
- Using the Google Cloud Speech API: Challenge Lab
🌠 Speaking with a Webpage - Streaming Speech Transcripts
개요
- 가상 머신(VM) 만들기
- HTTP Java 서블릿 시작하기
- 웹페이지에서 오디오 캡처
- 음성을 텍스트로 변환
주의✨
이 실습은 사용자가 다음에 익숙하다는 가정하에 진행된다.
- Java 프로그래밍 언어
- Java 서블릿(구체적으로는 Jetty 서블릿 컨테이너)
- JavaScript 프로그래밍 언어
- Linux 명령줄
- Maven 프로젝트 관리 도구
참고사항
아키텍처
✅ 생성한 웹앱은 클라이언트의 마이크에서 오디오로 가져와 Java 서블릿으로 스트리밍
✅ Java 서블릿은 데이터를 Cloud Speech API에 전달
✅ Cloud Speech API는 감지된 음성의 스크립트를 서블릿에 다시 스트리밍
✅ 서블릿은 스크립트 결과를 클라이언트에 전달
✅ 클라이언트는 페이지에 표시
구성요소
- 웹페이지의 정적 HTML, JavaScript, CSS를 제공하는 Java 서블릿
- 웹페이지를 사용자의 마이크에 연결하고, 원시 바이트를 추출하고, Websocket을 통해 서블릿으로 스트리밍하는 JavaScript, HTML, CSS
- 클라이언트로부터 수신한 사운드 바이트를 Cloud Speech API로 스트리밍하고 Cloud Speech API의 스크립트 결과를 클라이언트로 다시 스트리밍하는 서블릿 Websocket 핸들러
VM ☁️
실습과정
1. VM 만들기
(1) 메뉴 접속
➡️ Compute Engine > VM instances > Create instance
(2) 머신 구성
✅ 새 인스턴스 이름: speaking-with-a-webpage
✅ Region/Zone: 실습 계정에 따라 상이
(3) OS 및 스토리지
✅ 운영체제: Debian
✅ 버전: Debian GNU/Linux 12(bookworm)
(4) 네트워킹
✅ 방화벽: HTTP, HTTPS 트래픽 허용
(5) 보안
✅ 액세스 범위: Allow full access all Cloud APIs
(6) VM 생성 확인
➡️ 보안까지 설정 후, Create 버튼을 눌러 생성하고 조금 기다리면 방금 만들었던 VM의 정보를 확인할 수 있다.
2. 작업 예시 다운로드 및 설정
(1) SSH 접속
➡️ VM의 SSH 버튼 클릭
(2) 설치 - Git, Java 17, Maven 프로젝트 관리도구
# Git 설치
sudo apt update && sudo apt install git -y
# Java 17, Maven 프로젝트 관리 도구 설치
sudo apt install -y maven openjdk-17-jdk(3) 작업 예시 Git Clone
git clone https://github.com/googlecodelabs/speaking-with-a-webpage.git(4) 작업 예시 파일 확인
파일 확인👀
01-hello-https- HTTPS를 통해 제공되는 정적 파일과 핸들러가 있는 최소한의 Jetty 서블릿이 포함되어 있다.02-webaudio- 클라이언트 측 JavaScript를 작성하여 클라이언트의 마이크에서 오디오를 녹음하고 시각화를 표시하여 작동 여부를 확인한다.03-websockets- websocket을 통해 서로 통신하도록 클라이언트와 서버를 모두 수정한다.04-speech- 서버를 수정하여 오디오를 Cloud Speech API로 전송하고 후속 스크립트를 JavaScript 클라이언트로 전송한다.
(5) VM 방화벽 오픈
gcloud compute firewall-rules create dev-ports \
--allow=tcp:8443 \
--source-ranges=0.0.0.0/0✅ 일반 HTTPS 포트 대신 권한이 없는 포트 8443을 개발 목적으로 사용
3. HTTPS Java 서블릿하기
(1) 경로 이동 및 실행
# 경로 이동
cd ~/speaking-with-a-webpage/01-hello-https
# 코드 실행
mvn clean jetty:run(2) VM 외부 주소 확인
(3) 브라우저 액세스
✅ https://<EXTERNAL_IP>:8443 으로 액세스
4. 웹페이지에서 오디오 캡처
설명
Web Audio API를 사용하면 사용자의 동의를 얻어 웹페이지에서 사용자 마이크의 오디오 데이터를 캡처할 수 있습니다. Cloud Speech API는 특정 형식의 원시 데이터가 필요하며 원시 데이터의 샘플링 레이트를 알아야 합니다.
(1) 경로 이동 및 실행
# 01-hello-https의 서버 중단
Ctrl+c
# 02-webaudio 프로젝트 경로로 이동
cd ~/speaking-with-a-webpage/02-webaudio
# 애플리케이션 실행
mvn clean jetty:run(2) 브라우저 액세스
✅ 같은 VM 내에 있으므로, 액세스 주소는 같다.
5. 클라이언트에서 서버로 오디오 스트리밍
설명
일반적인 HTTP 연결로는 오디오를 서버로 실시간 스트리밍하는 작업과 제공되는 스크립트를 수신하는 작업을 동시에 수행하기가 어렵습니다. 이 섹션에서는 클라이언트에서 서버로 이어지는 Web Socket 연결을 만들고 이를 사용하여 오디오 메타데이터(예: 샘플링 레이트)와 데이터를 서버로 전송하는 동시에 응답(예: 데이터의 스크립트)을 수신 대기합니다.
(1) 경로 이동 및 실행
# 02-webaudio 서버 중단
Ctrl+c
# 03-websockets 프로젝트 경로로 이동
cd ~/speaking-with-a-webpage/03-websockets
# 애플리케이션 실행
mvn clean jetty:run(2) 브라우저 액세스
6. 음성을 텍스트로 변환
설명
Google Cloud Speech 스트리밍 API를 사용하면 오디오 바이트를 API로 실시간 전송하고 감지된 음성의 스크립트를 비동기식으로 수신할 수 있습니다. API는 요청 시작 부분에 전송되는 구성에 따라 결정되는 특정 형식으로 바이트가 제공되길 기대합니다. 이 웹앱에서는 LINEAR16 형식의 API 원시 오디오 샘플을 전송합니다. 즉, 각 샘플은 클라이언트에서 획득한 샘플링 레이트로 전송되는 부호 있는 16비트 정수입니다.
(1) 경로 이동 및 실행
# 03-websockets 서버 중단
Ctrl+c
# 04-speech 프로젝트 경로로 이동
cd ~/speaking-with-a-webpage/04-speech
# 애플리케이션 실행
mvn clean jetty:run(2) 브라우저 액세스
