이전 블로그 게시물에서 우리는 비디오 채팅 애플리케이션에 Agora 클라우드 녹화 기능을 추가하여 녹화 파일을 Amazon S3 버킷에 저장하는 방법을 살펴보았습니다. 이번에는 React Native 애플리케이션에서 녹화된 비디오를 가져오고 재생하는 방법을 설명하겠습니다.
이전 블로그 게시물에서 앱과 백엔드를 업데이트하여 모든 기능을 통합했습니다. 데모만 원하신다면 제공된 링크에서 백엔드를 배포하고 앱을 빌드하시면 됩니다.
필수 조건
- Agora 개발자 계정 (시작하기 참조)
- Amazon AWS 계정
- Heroku 계정 또는 백엔드를 배포할 다른 서비스
- React Native에 대한 이해
아고라 설정
- 프로젝트 생성: 아고라 계정이 있으면 콘솔에서 프로젝트 관리 탭을 클릭합니다. 생성 버튼을 클릭합니다. 프로젝트 이름을 입력합니다. 프로젝트를 생성할 때 보안 모드를 선택합니다.
- 클라우드 녹화 활성화: ‘사용량 보기’ 버튼을 클릭하고 클라우드 녹화 활성화 옵션을 선택합니다.
- 앱 자격 증명 획득: 동일한 페이지에서 App ID와 App Certificate를 텍스트 파일에 복사합니다. 이 정보는 나중에 사용됩니다.
- 고객 자격 증명 획득: RESTful API 페이지로 이동하여 ‘Add Secret’ 버튼을 클릭합니다. Customer ID와 Customer Secret을 텍스트 파일에 복사합니다.
AWS 설정
AWS 계정을 생성한 후에는 비디오 녹화 파일을 저장할 Amazon S3 버킷과 버킷에 액세스할 IAM 사용자를 생성해야 합니다. 이 설정을 이미 완료한 경우 이 섹션을 건너뛸 수 있습니다.
- AWS IAM 콘솔로 이동하여 사용자를 생성합니다. Programmatic Access와 함께 AmazonS3FullAccess 정책을 추가합니다. AWS 액세스 키와 비밀 키를 텍스트 파일에 복사합니다.
- Amazon S3 버킷 생성:
버킷에 이름을 지정하고 해당 이름을 텍스트 파일로 복사하세요. 이 텍스트 파일은 나중에 사용할 것입니다. 버킷에서 미디어 스트리밍에 대한 공개 액세스를 허용하려면 ‘모든 공개 액세스 차단’ 체크 상자를 해제하세요. ‘버킷 생성’ 버튼을 클릭하세요.
참고: 녹화물의 URL을 통해 인터넷상의 누구나 해당 녹화물을 시청할 수 있습니다. 이 게시물의 마지막 부분에서 녹화물을 안전하게 보호하는 방법을 설명하겠습니다.
선택한 AWS 지역의 지역 번호도 필요합니다. 이 표로 이동하여 Amazon S3 탭을 클릭하고 지역 번호를 기록하세요. 예를 들어 US_EAST_1 지역을 사용하는 경우 버킷 번호는 0입니다.
3. 버킷 정책 추가.
모든 사용자가 파일을 액세스할 수 있도록 버킷 정책을 추가합니다. 새로 생성한 버킷의 권한 탭으로 이동하여 다음 정책을 추가하세요:
{
"Version": "2012-10-17",
"Id": "Policy1620917655085",
"Statement": [
{
"Sid": "Stmt1620917653925",
"Effect": "Allow",
"Principal": "*",
"Action": "s3:GetObject",
"Resource": "arn:aws:s3:::agora-rec123/*"
}
]
}백엔드 배포
백엔드를 배포하기 전에 다음 변수가 필요합니다. (이제 텍스트 파일을 사용할 때입니다.) Heroku의 원클릭 배포 기능을 사용해 백엔드를 빠르게 배포할 수 있습니다. 다른 서비스도 사용할 수 있습니다.
참고: 백엔드가 업데이트되었습니다. 이전 게시물의 백엔드를 사용 중이라면 지금 업데이트해야 합니다.
APP_ID=
APP_CERTIFICATE=
RECORDING_VENDOR=
RECORDING_REGION=
BUCKET_NAME=
BUCKET_ACCESS_KEY=
BUCKET_ACCESS_SECRET=
CUSTOMER_ID=
CUSTOMER_CERTIFICATE=참고: RECORDING_VENDOR=1은 AWS용입니다. 자세한 내용은 이 링크를 클릭하세요.
앱 개발
지난 게시물에서 개발한 앱을 기반으로 시작합니다. 이 앱은 그룹 비디오 통화에 참여하고 녹화할 수 있습니다. 앱을 리팩토링하여 모든 비디오 통화 및 녹화 구성 요소를 ./components/Call.tsx로 이동했습니다. 새로운 파일로 시작합니다: ./components/PlayRecording.tsx
우리는 HLS 재생에 react-native-video의 Video 컴포넌트를 사용할 것입니다. 우리는 백엔드 URL, 앱 ID, 채널 이름을 PlayRecording 컴포넌트의 프로퍼티로 전달합니다. 우리는 상태를 위한 인터페이스를 정의합니다. tracks는 각 m3u8 파일의 URL 배열을 포함합니다. currentTrack는 재생 중인 URL의 인덱스입니다. statusMsg는 비디오 플레이어의 현재 상태를 표시하는 문자열을 저장합니다.
우리는 컴포넌트와 초기 상태를 정의합니다. componentDidMount 메서드에서 백엔드 서버의 /api/get/recordingUrls/<ChannelName> 경로로 GET 요청을 수행합니다. 응답 JSON을 받고 tracks 상태 배열을 업데이트합니다.
렌더링 메서드에서 우리는 TouchableOpacity로 감싸진 트랙 목록을 반환합니다. 이 트랙 목록은 ScrollView를 사용하여 표시됩니다. 트랙이 선택되면 currentTrack상태를 트랙 인덱스로 업데이트합니다.
우리는 Video 컴포넌트를 사용하며, 소스로는 재생하려는 URL을 설정합니다 (currentTrack는 우리 tracks 배열의 인덱스입니다). 이벤트 핸들러를 통해 statusMsg를 업데이트합니다. 또한 statusMsg를 Text 컴포넌트에 표시합니다.
다시 조합하기
우리는 PlayRecording 컴포넌트를 App.tsx 파일에서 사용하며, Call 컴포넌트와 함께 모든 기능을 통합합니다.
보안 고려 사항: 앞서 논의한 것처럼 현재 구성에서는 S3 버킷에 저장된 모든 녹화 파일이 공개되어 있어 React Native 클라이언트가 액세스할 수 있습니다. 앱을 생산 환경에서 사용하기 전에 비디오에 대한 액세스 제어를 설정하는 것이 중요합니다. 사용자가 인증되면 해당 사용자에게 파일 액세스 권한을 부여할 수 있으며, 다른 사용자에게는 파일을 비공개로 유지할 수 있습니다. 자세한 정보는 여기 및 여기에서 확인할 수 있습니다.
결론
클라우드 녹화에 대한 자세한 정보는 여기에서 확인할 수 있습니다. Agora SDK를 처음 사용하시는 경우, Agora Video Call Quickstart Guide와 이 블로그 글을 참고하세요.
또한 Agora Developer Slack 커뮤니티에 참여해 주시기를 초대합니다. React Native 관련 질문은 #react-native-help-me 채널에, 클라우드 녹화 관련 질문은 #cloud-recording-help-me 채널에 자유롭게 문의해 주세요.
