Skip to content
아고라 리액트 SDK: 몇 분 만에 화상 회의 앱 구축하기 featured
← Back to Blog

아고라 리액트 SDK: 몇 분 만에 화상 회의 앱 구축하기

By Ekaansh Arora In 개발자

=Agora는 애플리케이션에 고품질 오디오, 비디오 및 대화형 방송 기능을 간편하게 추가할 수 있는 강력한 실시간 커뮤니케이션 SDK를 제공합니다.

=새로운 React용 비디오 SDK를 베타 버전으로 출시하게 되어 기쁩니다. 강력한 웹 SDK를 기반으로 구축되었으며, 사용하기 쉬운 훅과 컴포넌트를 내보내 React를 일류 제품으로 만들 수 있습니다.

아고라에서 계정 만들기

계정에 가입하고 아고라 콘솔에 로그인합니다.

Agora React SDK: Build a video conferencing app in minutes - Signup
아고라 웹사이트의 프로젝트 관리 탭

Project Management 탭 아래의 Project List 탭으로 이동하여 파란색 Create 버튼을 클릭하여 프로젝트를 생성합니다. (App ID + 인증서를 사용하라는 메시지가 표시되면 App ID 만 선택합니다.) 애플리케이션을 개발하는 동안 요청을 승인하는 데 사용되는 App ID 를 검색합니다.

참고: 이 가이드에서는 프로덕션 환경에서 실행되는 모든 RTE 앱에 권장되는 토큰 인증을 구현하지 않습니다. Agora 플랫폼의 토큰 기반 인증에 대한 자세한 내용은 이 가이드(https://docs.agora.io/en/Video/token?platform=All%20Platforms)를 참조하세요. 

시작하기

이 프로젝트의 소스는 GitHub에서 사용할 수 있으며, 라이브 데모를 사용해 볼 수도 있습니다. 따라 하려면 React 프로젝트를 생성합니다(여기서는 Vite를 사용하겠습니다):

  1. Node.js LTS와 NPM을 설치했는지 확인합니다.
  2. 터미널을 열고 다음 명령어를 실행합니다. npm create vite@latest agora-videocall — — template react-ts
  3. 그러면 agora-videocall 이라는 폴더가 생성됩니다.
  4. 프로젝트로 이동: cd agora-videocall
  5. 의존성을 설치합니다: npm i agora-rtc-react agora-rtc-sdk-ng
  6. 코드 에디터를 엽니다. 다음 명령어를 실행하여 개발자 서버를 시작할 수 있습니다: npm run dev

코드를 작성해 봅시다

애플리케이션에서 사용할 종속성을 가져올 App.tsx 파일에서 시작하겠습니다:

클라이언트 객체를 초기화하여 useRTCClient 훅에 전달합니다. 애플리케이션 상태를 설정해 보겠습니다:

  • channelName: 사용자가 서로 채팅에 참여할 수 있는 채널의 이름을 나타냅니다. 채널을 “test” 라고 부르겠습니다.
  • AppID: 아고라 콘솔에서 이전에 얻은 아고라 앱 ID를 보유합니다. 빈 문자열을 앱 ID로 대체합니다.
  • token: 토큰을 사용하는 경우 여기에 토큰을 입력할 수 있습니다. 하지만 이 데모에서는 그냥 null로 설정하겠습니다.
  • inCall: 사용자가 현재 영상 통화 중인지 여부를 추적하는 Boolean 상태 변수입니다.

다음으로 앱 컴포넌트를 표시합니다. return 블록에서 h1 요소를 렌더링하여 제목을 표시합니다. 이제 inCall 상태 변수에 따라 사용자로부터 세부 정보(App ID, channel name, token)를 가져오거나 영상 통화를 표시하는 Form 컴포넌트를 표시합니다:

영상 통화 인터페이스의 경우, 영상 통화 컴포넌트를 앞서 만든 클라이언트를 전달하는 AgoraRTCProvider 컴포넌트로 래핑합니다. 다음으로 영상 통화를 위한 비디오를 저장하기 위해 <Videos> 컴포넌트를 생성하겠습니다. inCall 상태를 false로 설정하여 통화를 종료하는 통화 종료 버튼을 표시하겠습니다:

비디오 컴포넌트

비디오 컴포넌트에서는 props를 분해하는 것부터 시작하겠습니다. Agora React SDK는 로컬 마이크와 카메라 트랙을 생성하고 설정하는 useLocalMicrophoneTrack 과 useLocalCameraTrack 훅을 제공합니다:

useRemoteUsers 훅을 사용하여 호출의 다른 (원격) 사용자가 포함된 배열에 액세스할 수 있습니다. 이 배열에는 통화 중인 각 원격 사용자에 대한 객체가 포함됩니다. 누군가가 채널에 들어오거나 나갈 때마다 업데이트되는 React 상태의 일부입니다:

로컬 미디어 트랙(마이크 및 카메라 트랙)을 퍼블리시하기 위해 usePublish 훅을 사용하겠습니다. 통화를 시작하려면 채널에 가입해야 합니다. 이를 위해 useJoin 훅을 호출하면 됩니다. AppID, channelName, token 을 props 으로 전달합니다. 

remoteUsers 배열을 전달하여 useRemoteAudioTracks 훅으로 원격 사용자의 오디오 트랙에 액세스할 수 있습니다. 원격 사용자의 트랙을 듣기 위해 audioTracks 배열을 매핑하고 재생 메서드를 호출하면 됩니다: 

마이크 또는 카메라가 로딩 중인지 확인하고 간단한 메시지를 렌더링합니다:

트랙이 준비되면 채널에 있는 모든 사용자의 비디오가 포함된 그리드를 렌더링합니다. SDK의 LocalVideoTrack 컴포넌트를 사용하여 사용자 고유의 (로컬) 비디오 트랙을 렌더링하고 track prop으로 localCameraTrack 을 전달할 수 있습니다: 

RemoteUser 컴포넌트를 사용해 원격 사용자의 비디오 트랙을 표시할 수 있습니다. 각 user 를 prop으로 전달하면서 remoteUsers 배열을 반복할 것입니다:

Form 및 Styling

완성도를 높이기 위해 Form 컴포넌트의 모습은 다음과 같습니다:

또한 간단한 동영상 그리드를 렌더링하는 유틸리티를 만들었습니다. 이 기능은 다음과 같습니다:

결론

이 정도로 아고라 리액트 SDK로 고품질 화상 회의 앱을 만드는 데 필요한 모든 것을 알아봤습니다. 여기까지가 가능한 기능의 전부입니다. 자세한 내용은 문서와 API 참조를 참조하세요.

이번 베타 기간 동안 SDK를 개선할 수 있는 방법에 대한 피드백을 찾고 있습니다. GitHub 리포지토리에 이슈를 개설하고 PR을 제출하여 참여해 주세요. 

Blog Cta
Blog Cta mobile