아고라 SDK는 비디오 통화 중 비디오 배경에 색상, 이미지 또는 블러 효과를 적용할 수 있는 가상 배경 확장 기능을 도입했습니다. 이 블로그 게시물에서는 이 확장 기능을 아고라 Web UIKit과 함께 사용하는 방법을 살펴보겠습니다.
이 게시물의 마지막 부분에 UIKit 없이 확장 기능을 사용할 수 있는 코드 스니펫이 있습니다.
필수 조건
- 아고라 개발자 계정 (무료입니다, 여기에서 가입하세요!)
- Node.js LTS
- React에 대한 기본적인 이해
설정
예제 코드는 GitHub에서 다운로드할 수 있으며, 또는 자체 React 프로젝트를 생성할 수 있습니다. 터미널을 열고 다음 명령어를 실행합니다:
npx create-react-app demo --template typescriptcd demo
아고라 React UIKit 및 Virtual Background 확장 프로그램을 설치합니다:
npm i agora-react-uikit agora-extension-virtual-background
참고: 이 문서 작성 시점 기준, 현재 agora-react-uikit 릴리스 버전은 v1.1.0입니다.
설정이 완료되었습니다. 이제 npm start를 실행하여 로컬 호스트에서 웹 서버를 시작할 수 있습니다.
라이브 스트림 구축
UIKit은 <AgoraUIKit>라는 고수준 컴포넌스에 접근할 수 있도록 제공합니다. 이 컴포넌트는 전체 비디오 통화 또는 라이브 스트림을 렌더링하는 데 사용할 수 있습니다. 자세한 내용은 여기에서 확인하세요. 모듈형 컴포넌트를 사용하여 비디오 통화를 구성하고 가상 배경 기능을 추가할 것입니다.App.tsx
파일을 비워 새 시작점을 만듭니다:
우리는 videocall이라는 상태 변수를 생성합니다. 이 변수가 true일 때 videocall을 렌더링하고, false일 때 애플리케이션 상태를 토글하고 스트림을 시작하는 버튼을 렌더링합니다.
videocall을 구현하기 위해 모든 요소를 PropsContext 컴포넌트로 감싸서 UIKit에 사용자 프로퍼티를 전달합니다. rtcProps에 Agora 앱 ID, 채널 이름 및 토큰을 추가합니다. 사용자가 종료 버튼을 클릭하면 videocall 상태를 false로 토글합니다.
참고: 생산 환경에서 실행되는 모든 RTE 앱에는 토큰 인증이 권장됩니다. Agora 플랫폼에서의 토큰 기반 인증에 대한 자세한 내용은 다음 가이드를 참조하세요: https://docs.agora.io/en/Video/token?platform=All%20Platforms.
우리는 UIKit의 내장 컴포넌트로 애플리케이션을 감싸겠습니다. 이 컴포넌트들은 UIKit 데이터에 접근할 수 있게 해주며, 비디오 통화 로직의 많은 부분을 처리해줍니다. 우리는 TrackConfigure: 로컬 트랙에 접근할 수 있게 해줍니다, RtcConfigure: 통화 로직을 처리합니다, LocalUserContext: 로컬 사용자 상태를 처리합니다, 그리고 RtmConfigure: 신호 로직을 처리합니다.
이 컴포넌트들은 UIKit에서 렌더링됩니다 — RemoteMutePopup: 음소거 요청 팝업을 표시합니다, GridVideo: 사용자의 비디오를 그리드 형식으로 렌더링하고 LocalControls: 로컬 트랙의 음소거/음소거 해제 컨트롤을 렌더링합니다. 새로운 VirtualBackground 컴포넌트를 정의할 것입니다!
아고라 가상 배경 확장 기능 사용
가상 배경을 효율적으로 실행하기 위해 아고라는 WebAssembly (WASM) 모듈을 사용합니다. WASM 파일을 호스팅해야 합니다 — CDN을 통해 별도로 호스팅하거나 웹사이트와 함께 번들링할 수 있습니다. VirtualBackground 구성 요소를 생성해 보겠습니다:
가상 배경을 활성화/비활성화하기 위해 상태 변수 extensionActive를 생성합니다. TracksContext에서 localVideoTrack에 접근할 수 있습니다. VirtualBackgroundExtension의 인스턴스를 생성하고 이를 ext라고 명명하며, 배경 프로세서를 저장하기 위해 참조를 생성합니다.
useEffect 내부에 확장 기능을 초기화하기 위해 확장 기능 인스턴스를 전달하여 registerExtensions 메서드를 호출합니다. 확장 기능의 createProcessor 메서드를 호출하고 결과를 processor ref에 할당합니다. 그런 다음 확장 기능의 init 메서드를 호출하며, 이 메서드에는 WASM 파일의 경로를 전달합니다. 이 경로는 절대 경로 또는 상대 경로일 수 있습니다.
우리는 enableBackground를 생성할 것입니다. 이 함수에서는 localVideoTrack를 processor로 파이프링한 후, 이 프로세서는 다시 트랙의 processorDestination로 파이프링됩니다. setOptions 메서드를 사용하여 가상 배경을 정의할 수 있습니다. 이 예제에서는 분홍색을 사용하지만, 블러 효과나 이미지를 사용할 수도 있습니다. 프로세서를 활성화하고 상태를 업데이트합니다.
disableBackground 함수에서는 로컬 트랙의 파이프를 해제하고 프로세서를 비활성화한 후 상태를 업데이트합니다.
UI를 위해 상태에 따라 효과를 토글하는 올바른 메서드를 호출하는 div 요소를 렌더링합니다.
UIKit을 사용하지 않는 경우 다음 스니펫을 사용할 수 있습니다:
결론
이것이 아고라 Web UIKit을 사용하여 WebAssembly 기반 Agora Extension을 가상 배경에 적용하는 방법입니다. UIKit의 디자인과 기능을 맞춤 설정하는 방법(예: 라이브 스트리밍에 사용하기)에 대한 자세한 내용은 이 블로그 게시물을 참고하세요.
이 프로젝트나 Agora 웹 UIKit을 사용하면서 질문이 있다면, 아고라 개발자 Slack 커뮤니티에 참여해 주시기 바랍니다. #web-help-me 채널에서 질문을 남기실 수 있습니다.기능 요청이나 버그 보고는 UIKit 리포지토리 또는 프로젝트 리포지토리에 이슈를 생성해 주시기 바랍니다.
