React Native와 Agora SDK를 사용하여 라이브 트랜스크립션이 포함된 음성 채팅 앱 구축하기
David Ubong Ekanem은 새로운 기술, 그리고 학습과 글쓰기 사이의 연결고리를 탐구하는 애플리케이션 제작을 즐기는 창의적인 소프트웨어 엔지니어입니다.
Agora 튜토리얼 블로그 작성에 관심이 있으신가요? 지금 바로 주제를 보내주세요!
커뮤니케이션은 일상 생활의 필수적인 부분입니다. 모바일 기술의 확산으로 음성 채팅 애플리케이션은 상호 연결을 가능하게 합니다. 하지만 여전히 화상 회의 중 오간 회의 내용을 추적하는 것은 어렵습니다.
학교나 직장에서 필기할 때 유용한 서비스를 만드는 과정을 저와 함께하세요. 음성-텍스트 트랜스크립션을 지원하는 React Native 애플리케이션을 만들겠습니다. 앱의 구조, 설정, 실행에 대해 살펴본 후 작동 원리를 살펴보겠습니다.
아래 예제에서는 React Native용 Agora RTC SDK를 사용하겠습니다. 이 글을 쓰는 시점에 저는 v4.1.0 버전을 사용하고 있습니다.
아고라 계정 만들기
https://console.agora.io/로 이동하여 계정을 만들고 대시보드에 로그인합니다. 이 가이드를 참조하세요: https://www.agora.io/en/blog/how-to-get-started-with-agora.
사이드바를 클릭한 다음 Project Management 탭을 클릭합니다. Create a Project 버튼을 클릭하여 새 프로젝트를 만듭니다.
프로젝트가 생성되면 App ID를 검색합니다. 토큰이 포함된 App ID를 선택하고 프로젝트에 대한 임시 토큰을 받습니다. 편집 페이지에서 링크를 클릭하여 임시 토큰을 생성합니다. 임시 토큰은 애플리케이션을 개발하는 동안 요청을 승인하는 데 사용됩니다.
참고: 프로덕션 환경에서 실행되는 모든 RTE 앱에는 토큰 인증을 권장합니다. Agora 플랫폼의 토큰 기반 인증에 대한 자세한 내용은 이 가이드(https://docs.agora.io/en/video-calling/get-started/authentication-workflow)를 참조하세요.
OpenAI 계정 만들기
https://platform.openai.com/으로 이동하여 계정을 만들고 대시보드에 로그인합니다. 사용자 섹션 탭을 클릭하고 View API keys를 선택합니다. API 키를 발급받거나, 이 프로젝트를 위해 특별히 새 키를 생성합니다.
애플리케이션의 구조
앱 실행하기
시스템에 Node.js 및 NPM의 LTS 버전이 설치되어 있어야 합니다.
- Agora 계정을 등록하고, 프로젝트를 설정하고, App ID(및 임시 토큰)를 생성했는지 확인합니다.
- OpenAI 계정을 등록하고 API 키를 발급받았는 지 확인합니다.
- Master branch에서 ZIP 파일을 다운로드하여 압축을 풉니다.
- 또는 npm install을 실행하여 압축이 풀린 디렉터리에 앱 종속 요소를 설치합니다.
- ./App.tsx로 이동하여 Agora Console appid: ”에서 가져온 App ID를 입력합니다. 토큰을 사용하는 경우, 토큰과 채널 이름을 입력합니다.
- iOS용으로 빌드하는 경우, 터미널을 열고 cd ios && pod install을 실행합니다.
- yarn start 또는 npm run start를 실행하여 메트로 서버를 시작합니다.
- 메트로 서버가 시작되면 콘솔에 다음과 같은 화면이 표시됩니다.
- iOS 및 Android 시뮬레이터는 카메라를 지원하지 않습니다. 대신 실제 디바이스를 사용하세요.
- 애플리케이션이 실제 디바이스에서 시작되어야 합니다.
이상입니다. 당신은 이제 통화에 참여하거나 종료할 수 있습니다. 앱은 채널 이름으로 agoraReactNativeStream을 사용합니다.
작동 방식 알아보기
트랜스크립션된 텍스트와 interimTranscribedText를 받아들이고 TranscribedText를 표시하는 컴포넌트를 내보내고 있습니다. 이 컴포넌트는 영상 통화에서 트랜스크립션된 텍스트를 표시하는 데 사용됩니다.
App.tsx 파일에는 영상 통화의 핵심 로직이 포함되어 있습니다.
먼저 import 문을 작성합니다. 다음으로 App ID, 토큰, OpenAI 키, 채널 이름에 대한 몇 가지 상수를 작성합니다. 다른 상수(샘플 속도, 채널 수, 통화당 샘플 수)는 오디오 파일을 저장하는 방법을 지정합니다.
우리는 함수형 컴포넌트를 정의하는데, 이 컴포넌트에는 agoraEngineClass 변수가 IRtcEngine 클래스를 저장합니다. 이 클래스는 애플리케이션에서 영상 통화를 관리하기 위해 호출할 수 있는 메서드를 제공합니다. UseState hook은 트랜스크립션된 텍스트의 데이터를 저장합니다.
setupVideoSDKEngine은 앱 시작 시 아고라 엔진을 초기화합니다. 애플리케이션이 필요한 권한을 요청하고 권한이 부여되면 Agora 엔진이 초기화됩니다. 필요한 경우 onPlayAudioFrame 메서드에 접근할 수 있도록 audioFrameObserver를 등록합니다.
join 함수는 사용자가 원하는 채널에 참여하는 것을 가능케 하기에 특히 유용합니다. transcribedText가 사용 가능한 상태이면 채널에 참여하기 전에 트랜스크립션을 초기화합니다. startAudioRecording 메서드를 호출합니다. 오디오를 저장할 filePath를 전달합니다.
React Native 애플리케이션의 네이티브 파일 시스템에 접근하기 위해 React Native File System에 의존합니다. Encoding은 false로 설정하고, 상수 SAMPLE_RATE는 샘플 속도를 나타냅니다. fileRecordingType을 AudioFileRecordingMixed로 설정합니다. 로컬 및 모든 원격 사용자의 믹싱된 오디오를 녹음하도록 설정합니다.
leave 함수는 사용자가 채널을 종료하고 오디오 녹음을 중지할 수 있도록 합니다. 앞서 등록한 audioFrameObserver의 등록을 해제합니다. 오디오 녹음이 종료되면 애플리케이션이 startTranscribe 함수를 호출합니다.
startTranscribe 함수에서 recordingPath와 fileName은 filePath를 구성합니다. 이 filePath는 audioData로 가는 경로를 보여줍니다. whisperAPI는 audioData를 수신하고, 우리는 트랜스크립션된 텍스트를 받습니다.
통화 참여 또는 종료 버튼을 표시하기 위한 render 함수를 정의합니다. render 함수는 트랜스크립션된 텍스트도 표시합니다.
완성된 애플리케이션입니다.
결론
영상 통화 애플리케이션 내에서 트랜스크립션 애플리케이션을 구축하는 것이 얼마나 쉬운지 알 수 있습니다. 애플리케이션에 추가 기능을 빠르게 추가하는 데 도움이 되는 메서드를 보려면 Agora React Native API 참조를 참조하세요.
앱을 프로덕션 환경에 배포하는 경우, 이 블로그 게시물에서 토큰을 사용하는 방법에 대해 자세히 알아볼 수 있습니다.
아고라 개발자 Slack 커뮤니티에 여러분을 초대합니다. React Native에 대한 질문이 있으시면 #react-native-help-me 채널에서 언제든지 질문해 주세요.
