2022년 3월 20일 업데이트: 이 블로그는 아고라 React Native UIKit v4.0.0과 호환되도록 업데이트되었습니다.
React Native UIKit은 몇 분 만에 자체 비디오 통화 앱을 쉽게 개발할 수 있도록 도와줍니다. 자세한 내용은 여기에서 확인할 수 있습니다. 이 블로그 게시물에서는 AI 노이즈 제거를 예시로 삼아 UIKit을 확장하고 맞춤형 기능을 추가하는 방법을 살펴보겠습니다.
필수 조건
- 아고라 개발자 계정 (무료, 여기에서 가입하세요!)
- Node.js LTS 버전
- 테스트용 iOS 또는 Android 기기
- React Native 개발에 대한 기본적인 이해
설정
예제 코드는 GitHub에서 다운로드할 수 있으며, 자체 React Native 프로젝트를 생성할 수도 있습니다. 터미널을 열고 다음 명령어를 실행하세요:
npx react-native init demo --template react-native-template-typescript
cd demo아고라 React Native SDK 및 UIKit을 설치합니다:
npm i react-native-agora agora-react-native-rtm agora-rn-uikit이 글을 작성하는 시점 현재, agora-rn-uikit의 최신 버전은 v4.0.0이며, react-native-agora의 최신 버전은 v3.7.0이며, agora-react-native-rtm의 최신 버전은 v1.5.0입니다.
iOS 기기를 사용 중이라면 cd ios && pod install를 실행하여 CocoaPods를 설치해야 합니다. 또한 앱 서명 및 권한 설정을 구성해야 합니다. 이를 위해 Xcode에서 /ios/.xcworkspace 파일을 열 수 있습니다.
설정이 완료되었습니다. 이제 npm run android 또는 npm run ios를 실행하여 서버를 시작하고 기본 React Native 앱을 확인할 수 있습니다.
비디오 통화 구축
UIKit은
<AgoraUIKit>
라는 고수준 컴포넌트에 접근할 수 있도록 제공합니다. 이 컴포넌트는 전체 비디오 통화를 렌더링하는 데 사용할 수 있습니다. UIKit 블로그에는 코드를 많이 작성하지 않고 UI와 기능을 맞춤화하는 방법에 대한 자세한 설명이 있습니다.
<AgoraUIKit>
컴포넌트는 더 작은 컴포넌트로 구성되어 있으며, 비디오 통화 로직을 신경 쓰지 않고 완전히 맞춤화된 경험을 구축하는 데도 사용할 수 있습니다.
App.tsx 파일을 정리하고 새로 시작합니다:
inCall이라는 상태 변수를 생성합니다. 이 변수가 true일 때 비디오 통화를 렌더링하고, false일 때 빈 <View>를 렌더링합니다. 현재는 다음과 같습니다:
비디오 통화를 구현하기 위해 UIKit에서 PropsContext, RtcConfigure, 및 GridVideo 컴포넌트를 가져옵니다. RtcConfigure 컴포넌트는 비디오 통화의 논리를 처리합니다. 이 컴포넌트를 PropsContext로 감싸서 UIKit에 사용자 프로퍼티를 전달합니다.
그 다음 <GridVideo> 컴포넌트를 렌더링합니다. 이 컴포넌트는 모든 사용자 비디오를 그리드 형식으로 표시합니다. 대신 <PinnedVideo> 컴포넌트를 사용할 수 있습니다. AI 노이즈 제거 기능을 활성화/비활성화하는 버튼을 만들려면 <Controls>라는 사용자 정의 컴포넌트를 생성하고 그리드 아래에 렌더링합니다:
우리는 UIKit에서 LocalAudioMute, LocalVideoMute, SwitchCamera 및 Endcall 버튼을 사용할 수 있으며, 이를 <View> 내에 렌더링할 수 있습니다.
새로운 컴포넌트인 CustomButton을 생성할 것입니다. 이 컴포넌트는 노이즈 제거 기능을 활성화 및 비활성화하는 코드를 포함합니다:
우리는 RtcEngine 인스턴스에 RtcContext를 사용하여 액세스할 수 있습니다. 이로써 UIKit에서 사용되는 Agora SDK가 노출한 엔진 인스턴스에 액세스할 수 있습니다. 우리는 상태 변수 `enabled`를 정의하여 노이즈 제거 효과를 토글할 것입니다. <TouchableOpacity>를 사용하여 버튼을 생성하고, 이 버튼은 상태에 따라 엔진 인스턴스의 enableDeepLearningDenoise 메서드를 호출합니다. 그리고 상태를 표시하기 위해 이미지 아이콘을 추가합니다.
이것이 커스텀 기능을 추가하기 위해 필요한 모든 작업입니다. 동일한 방식으로 이벤트 리스너를 추가하여 엔진 이벤트에 접근하고 커스텀 작업을 수행할 수 있습니다.
결론
아고라 UIKit for React Native에 많은 사용자가 혜택을 받을 수 있는 기능을 추가하고 싶다면, 리포지토리를 포크하고 pull request를 제출해 주세요. 또는 리포지토리에 기능 요청을 포함한 이슈를 열어 주세요. 모든 기여는 환영합니다!
기타 리소스
아고라 SDK를 사용한 애플리케이션 개발에 대한 자세한 내용은 Agora Video Call Quickstart Guide 및 Agora API Reference를 참고하세요. UIKit의 GitHub Repo, API Reference, 및 Wiki도 확인해 보세요.
또한 Agora Developer Slack 커뮤니티에 참여해 주시기를 초대합니다. UIKit에 대한 질문은 #react-native-help-me 채널에서 자유롭게 문의해 주세요.
