아고라 React Native SDK는 이제 가상 배경을 사용할 수 있습니다. 단색 또는 이미지를 배경으로 설정할 수 있습니다. React Native와 함께 이미지 자산을 번들링하는 방법과 사용자의 이미지를 가상 배경으로 선택하는 방법을 살펴보겠습니다.
필수 조건
- 아고라 개발자 계정 (무료! 여기에서 가입하세요)
- React Native에 대한 기본적인 이해
기본적인 비디오 통화 앱을 빠르게 시작하기 위해 이 데모를 사용하겠습니다. readme에 있는 지침을 따라 앱을 기기에서 실행할 수 있습니다. 가상 배경 사용 관련 코드를 살펴보겠습니다. 이 데모의 소스 코드는 GitHub에서 확인할 수 있습니다.
두 개의 오픈소스 라이브러리가 필요합니다: react-native-image-picker와 react-native-fs. 프로젝트에 추가하려면 다음 명령어를 실행하세요: npm i --save react-native-image-picker react-native-fs
가상 배경 사용
아고라 SDK는 정말 간편합니다: enableVirtualBackground 메서드를 engine 객체에 구성 설정과 함께 호출하면 해당 기능을 활성화할 수 있습니다. 세그멘테이션이나 배경 제거와 같은 세부 사항을 신경 쓸 필요가 없습니다.
우리는 App 클래스에 virtualSource라는 속성을 정의하여 구성 설정을 생성하고 저장할 것입니다. 비동기 코드가 실행 중일 때 시작 버튼을 비활성화하기 위해 상태에 대기 부울 값을 추가할 것입니다.
우리는 useColor라는 함수를 정의할 수 있습니다. 이 함수는 Color 클래스의 생성자를 사용하여 전달된 빨강, 녹색, 파랑 값(색상 범위는 0 — 255)을 사용하여 색상 객체를 생성합니다. 그런 다음 virtualSource 속성과 상태를 업데이트할 수 있습니다.
배경 흐림 사용
이미지를 번들링하려면 해당 이미지를 프로젝트 디렉토리에 복사한 후 필요한 구문을 사용하여 참조할 수 있습니다. RNFS로 테스트할 때 이미지의 URI를 사용하여 이미지를 다운로드할 수 있습니다. 이후 config의 소스 속성을 이미지의 절대 경로로 업데이트할 수 있습니다.
사용자 이미지를 가상 배경으로 사용하기
우리는 launchImageLibrary를 react-native-image-picker에서 사용하여 이미지 URI에 접근할 수 있습니다. OS에 따라 이미지 접근을 처리하고, 이미지 절대 경로를 config에 전달합니다.
마지막으로, 채널에 참여하기 전에 가상 배경을 활성화하기 위해 startCall 함수를 업데이트할 수 있습니다:
결론
아고라 SDK와 오픈소스 라이브러리를 사용하면 비디오 통화 및 라이브 스트림에 가상 배경을 추가하는 것이 정말 쉽습니다. API Reference에서 확인할 수 있는 다른 유용한 기능들도 있습니다. 여기에서 몇 줄의 코드로 비디오 통화 앱을 만드는 방법을 확인할 수 있습니다.
아고라 Developer Slack 커뮤니티에 가입해 주시기를 초대합니다. 프로젝트에 대한 질문은 #react-native-help-me 채널에서 자유롭게 문의해 주세요.
