이 블로그는 Akshat Gupta Agora 슈퍼스타가 작성했습니다. Agora 슈퍼스타 프로그램은 전 세계 개발자들이 열정과 기술 전문 지식을 공유하고, Agora의 맞춤형 SDK를 활용해 혁신적인 실시간 통신 앱과 프로젝트를 개발할 수 있도록 지원합니다.
소개
자막 또는 폐쇄 자막은 대부분의 비디오 회의 애플리케이션에서 매우 일반적인 기능이 되었습니다.
이 서비스는 청각 장애를 가진 사람뿐만 아니라 다른 상황에서도 유용합니다. 예를 들어, 소음이 많은 환경(예: 공항)이나 조용히 유지해야 하는 환경(예: 도서관)에서 오디오를 들을 수 없을 때 자막 텍스트를 읽을 수 있습니다.
학생들에게는 이 서비스가 필기하는 데 유용할 수 있습니다. 특히 수업에서 뒤처진 학생들이 진도를 따라잡는 데 트랜스크립션 기능이 도움이 될 수 있습니다.
이 기능의 장점 때문에 마이크로소프트 팀즈, 구글 미트, 줌, 스카이프 등 주요 비디오 통화 플랫폼들이 이 기능을 애플리케이션에 통합했습니다.
이 튜토리얼에서는 JavaScript의 Web Speech API, Agora Web SDK, Agora RTM SDK를 사용하여 음성 텍스트 변환 트랜스크립션을 지원하는 웹 애플리케이션을 개발할 것입니다.
필수 조건
- 자바스크립트, JQuery, Bootstrap, Font Awesome 사용 경험
- Agora 계정 (Agora 시작 방법)
- Agora Web SDK () 및 Agora RTM SDK () 사용 방법
프로젝트 설정
먼저 기본 HTML 구조를 설정해 보겠습니다. 로컬 비디오 스트림, 원격 비디오 스트림, 통화 참여/이탈 버튼, 사용자의 음성 녹음 시작/중지 버튼 등 몇 가지 UI 요소가 필요합니다.
App Id, 채널 이름, 사용자 이름 입력 필드를 div 태그로 감싼 비디오 컨테이너와 트랜스크립션 출력 상자 위쪽에 추가했습니다. 필요한 CDN을 임포트하고 커스텀 CSS 및 JS 파일을 연결했습니다:
Agora Web SDK를 사용하여 비디오 통화를 설정하는 방법에 익숙하지 않다면 이 튜토리얼을 참고하세요.
색상 추가
기본 레이아웃이 준비되었으니 이제 CSS를 추가할 차례입니다.
HTML에 사이트를 보기 좋게 만들기 위해 기본 Bootstrap 클래스를 이미 추가했지만, 사이트를 파란색 Agora 기반 테마와 일치시키기 위해 사용자 정의 CSS를 사용할 것입니다:
핵심 기능 (JS)
HTML/DOM 구조가 완성되었으니 이제 Agora Web SDK를 사용하는 JS를 추가할 수 있습니다. 처음에는intimidating해 보일 수 있지만, Agora의 공식 문서와 데모를 참고하고 조금만 연습하면 쉽게 이해할 수 있습니다.
먼저 클라이언트를 생성(2행)하고 오디오 및 비디오 트랙을 지정합니다. 사용자가 버튼을 클릭하여 채널에 가입(43행)하면 사용자의 스트림이 구독(91행)되고 게시(112행)됩니다.
마지막으로 사용자에게 스트림을 종료하고 채널을 탈퇴(79행)할 수 있는 옵션을 제공합니다:
음성 텍스트 변환 서비스 추가
기본 영상 통화 기능이 구현되었으므로, Web Speech API를 사용하여 음성을 인식하고 RTM을 통해 채널 내 모든 사용자에게 변환된 텍스트를 전송하는 JS를 추가할 수 있습니다. Web Speech API의 기능을 탐색하려면 이 기사를 참고하시고, Agora의 공식 문서를 통해 RTM에 대한 내용을 확인하시면 문제없이 따라할 수 있습니다.
우리는 Web Speech API를 초기화합니다(2행과 3행)하고 기본 글로벌 변수 값을 설정합니다. 메모 작성 버튼 클릭 시(11행), 전사된 텍스트가 자동으로 사용자에게 표시됩니다(31행).
채널 내 모든 다른 사용자에게 동일한 전사된 텍스트를 전송하려면 RTM을 사용하여 전사된 내용을 포함한 메시지를 전송합니다.
RTM 클라이언트가 초기화되면 먼저 로그인(53행)을 수행한 후, 채널에 연결된 모든 사용자에게 새로운 전사된 내용을 포함한 메시지를 전송합니다(82행).
ChannelMessage 콜백(97행)을 사용하여 수신된 메시지 내용을 수신하고 표시합니다:
이제 응용 프로그램을 실행하고 테스트할 수 있습니다.
참고: 테스트를 위해 두 개 이상의 브라우저 탭을 사용하여 통화 중 다중 사용자를 시뮬레이션할 수 있습니다.
결론
성공했습니다!
우리는 웹 비디오 통화 애플리케이션 내부에 자체적인 트랜스크립션 및 노트 작성 서비스를 성공적으로 구현했습니다. 코딩을 따라하지 않았거나 완성된 제품을 한 번에 확인하고 싶다면, 모든 코드를 GitHub에 업로드했습니다:
코드의 데모를 확인해 보실 수 있습니다:
Thanks for taking the time to read my tutorial. If you have questions, please let me know with a comment. If you see room for improvement, feel free to fork the repo and make a pull request!
