아고라는 강력한 실시간 통신 SDK를 제공하여 애플리케이션에 고품질 오디오, 비디오 및 상호작용형 방송 기능을 쉽게 추가할 수 있도록 합니다.
React용 새로운 Video SDK를 베타 버전으로 출시하게 되어 기쁘게 생각합니다. 이 SDK는 강력한 Web SDK를 기반으로 구축되었으며, React를 첫 번째 선택지로 만들기 위해 사용하기 쉬운 훅과 컴포넌트를 제공합니다.
아고라 계정 생성
가입하여 계정을 생성하고 Agora 콘솔에 로그인하세요.
프로젝트 관리 탭 아래의 프로젝트 목록 탭으로 이동한 후, 파란색 생성 버튼을 클릭하여 프로젝트를 생성합니다. (App ID + 인증서 사용을 요청할 경우, App ID만 선택합니다.) 앱 개발 중에 요청을 인증하는 데 사용될 App ID를 가져옵니다.
참고: 이 가이드에서는 토큰 인증을 구현하지 않습니다. 이는 생산 환경에서 실행되는 모든 RTE 앱에 권장됩니다. Agora 플랫폼에서의 토큰 기반 인증에 대한 자세한 내용은 다음 가이드를 참조하세요: https://docs.agora.io/en/Video/token?platform=All%20Platforms
시작하기
이 프로젝트의 소스 코드는 GitHub에서 확인할 수 있으며, 라이브 데모도 시도해 볼 수 있습니다. 따라하려면 React 프로젝트를 생성합니다(우리는 Vite를 사용할 것입니다):
- Node.js LTS와 NPM이 설치되어 있는지 확인합니다.
- 터미널을 열고 다음 명령어를 실행합니다:
npm create vite@latest agora-videocall — — template react-ts - 이 명령어는
agora-videocall이라는 폴더를 생성합니다. - 프로젝트로 이동합니다:
cd agora-videocall - 의존성 설치:
npm i agora-rtc-react agora-rtc-sdk-ng - 코드 편집기를 엽니다. 개발 서버를 실행하려면
npm run dev를 실행합니다.
코드를 작성해 보겠습니다
App.tsx파일에서 시작합니다. 이 파일에서 애플리케이션에서 사용할 의존성을 가져옵니다:
클라이언트 객체를 초기화하고 이를 useRTCClient 훅에 전달합니다. 이제 애플리케이션 상태를 설정해 보겠습니다:
channelName: 사용자가 서로 채팅할 수 있는 채널의 이름을 나타냅니다. 우리 채널을“test”라고 지정하겠습니다.AppID: Agora Console에서 이전에 획득한 Agora App ID를 저장합니다. 빈 문자열을 자신의 App ID로 대체하세요.token: 토큰을 사용하는 경우 여기에서 제공할 수 있습니다. 하지만 이 데모에서는 null로 설정하겠습니다.inCall: 사용자가 현재 비디오 통화 중인지 여부를 추적하는 부울 상태 변수입니다.
다음으로 App 컴포넌트를 표시합니다. return 블록에서 h1 요소를 렌더링하여 제목을 표시합니다. 이제 inCall 상태 변수에 따라 사용자로부터 세부 정보(앱 ID, 채널 이름, 토큰)를 수집하기 위해 Form 컴포넌트를 표시하거나 비디오 통화를 표시합니다:
비디오 통화 인터페이스를 위해, 우리는 비디오 통화 컴포넌트를 AgoraRTCProvider 컴포넌트로 감싸고, 이전에 생성한 클라이언트를 전달합니다. 다음으로 비디오 통화에 사용할 비디오를 저장하기 위해 <Videos> 컴포넌트를 생성합니다. 통화를 종료하기 위해 inCall 상태를 false로 설정하여 통화를 종료하는 ‘통화 종료’ 버튼을 표시합니다:
우리는 useRemoteUsers 훅을 사용하여 호출에 참여 중인 다른 (원격) 사용자를 포함하는 배열에 액세스할 수 있습니다. 이 배열에는 호출에 참여 중인 각 원격 사용자에 대한 객체가 포함되어 있습니다. 이는 채널에 누군가가 참여하거나退出할 때마다 업데이트되는 React 상태의 일부입니다:
우리는 usePublish 훅을 사용하여 로컬 미디어 트랙(마이크 및 카메라 트랙)을 게시합니다. 통화를 시작하려면 채널에 참여해야 합니다. 이를 위해 useJoin 훅을 호출합니다. AppID, channelName, 및 token를 프로퍼티로 전달합니다.
원격 사용자의 오디오 트랙에 액세스하려면 useRemoteAudioTracks 훅에 remoteUsers 배열을 전달합니다. 원격 사용자의 트랙을 듣기 위해 audioTracks 배열을 반복하며 play 메서드를 호출합니다:
마이크 또는 카메라 중 하나가 여전히 로딩 중인지 확인하고 간단한 메시지를 표시합니다:
트랙이 준비되면 채널 내 모든 사용자의 동영상을 포함한 그리드를 렌더링합니다. SDK의 LocalVideoTrack 컴포넌트를 사용하여 사용자의 자체(로컬) 동영상 트랙을 렌더링할 수 있으며, 이 때 localCameraTrack을 track 속성으로 전달합니다:
원격 사용자의 비디오 트랙을 RemoteUser 구성 요소를 사용하여 표시할 수 있습니다. remoteUsers 배열을 반복하며 각 user를 prop으로 전달합니다:
형식과 스타일링
완전성을 위해 Form 구성 요소가 어떻게 보이는지 보여드립니다:
또한 간단한 비디오 그리드를 렌더링하는 유틸리티를 만들었습니다. 해당 기능은 다음과 같습니다:
결론
아고라 React SDK를 사용하면 고품질 비디오 컨퍼런싱 앱을 만들 수 있습니다. 우리는 아직 가능성의 표면만을 긁어봤을 뿐입니다. 자세한 내용은 docs 및 API 참조를 방문해 주세요.
베타 기간 동안 SDK를 개선하기 위한 피드백을 기다리고 있습니다. GitHub 리포지토리에서 이슈를 열고(PR 제출 포함) 기여해 주시기 바랍니다.
