이 가이드는 React JS를 사용하여 기존 Twilio Video를 구현한 개발자가 Agora Video React JS SDK로 마이그레이션하는 데 도움을 주기 위한 것입니다. 새 프로젝트를 시작하는 경우 아고라 Video React JS SDK 설명서를 참조하세요.
React JS를 사용한 아고라의 빠른 시작 데모는 Github(빠른 시작 데모)에서 확인할 수 있습니다. 추가 데모는 여기에서 확인할 수 있습니다: 더 많은 데모.
전체 React JS SDK 문서를 보려면 api-ref.agora.io를 확인하세요.
1단계: 아고라 비디오 SDK 키 얻기
아고라 서비스에 액세스하여 프로젝트에 통합하려면 다음 단계에 따라 아고라 콘솔에서 필요한 정보를 얻으세요:
- App ID
— 아고라 콘솔에 로그인하고 프로젝트로 이동합니다.
— 앱에 고유하게 무작위로 생성된 문자열인 '앱 ID'를 찾습니다. 이 ID는 아고라 내에서 애플리케이션을 식별하는 데 매우 중요합니다. - 임시 토큰
— 앱의 클라이언트가 채널에 참여할 때 인증을 위해 토큰이 필요합니다.
— 아고라 콘솔에서 24시간의 유효기간을 가진 임시 토큰을 생성합니다. 이 토큰은 채널에 참여하는 사용자를 인증하는 데 사용됩니다. - 채널명:
— 고유한 문자열을 '채널 이름'으로 정의하여 채널을 식별하고 라벨을 지정합니다.
2단계: 아고라 비디오 SDK 설치
npm, pnpm 또는 yarn 사용
# with npm
npm i agora-rtc-react
# or with pnpm
pnpm add agora-rtc-react
# or with yarn
yarn add agora-rtc-react프로젝트에서 Twilio SDK를 제거합니다:
npm uninstall twilio-video`3단계: 클라이언트 및 RTC 공급자 만들기
아고라 React SDK는 후크와 컴포넌트를 사용하여 아고라의 비디오 기능을 React 웹 앱에 통합하는 작업을 간소화합니다. 후크와 컴포넌트가 동일한 클라이언트를 사용하도록 하기 위해, useRTCClient로 클라이언트를 생성하고 AgoraRTCProvider에 전달합니다.
import AgoraRTC { useRTCClient } from "agora-rtc-react"
// Initialize Agora Client
const client = = useRTCClient(
AgoraRTC.createClient({
codec: “vp8”,
mode: “rtc”
})
);
return () => {
<AgoraRTCProvider client={client}>
{/* Video Call Components that use the common client context */}
</AgoraRTCProvider>
}useRTCClient 훅은 AgoraRTCProvider 컨텍스트에서 클라이언트 객체를 검색하는 데 사용할 수 있습니다.
const client = = useRTCClient()4단계: 세션 시작 및 참여
Twilio
import { useJoin } from "agora-rtc-react"
// Join the channel
useJoin(
{
appid: 'AppID',
channel: 'ChannelName'!,
token: 'TOKEN',
uid: 0
},
);Agora
useJoin 훅을 사용하면 컴포넌트가 준비되면 사용자가 채널에 자동으로 가입하고 컴포넌트가 마운트 해제되면 채널에서 자동으로 탈퇴할 수 있습니다.
import { useJoin } from "agora-rtc-react"
// Join the channel
useJoin(
{
appid: 'AppID',
channel: 'ChannelName'!,
token: 'TOKEN',
uid: 0
},
);5단계: 로컬 오디오/비디오 트랙 만들기 및 게시하기
Twilio
<div class="video-container-div" width="1920" height="1080"></div><span class="hljs-comment">// video
let localVideoTrack = await twilioVideo.createLocalVideoTrack({
height: { ideal: 720, min: 480, max: 1080 },
width: { ideal: 1280, min: 640, max: 1920 },
aspectRatio: 16/9,
})
twilioRoom.localParticipant.publishTrack(localVideoTrack)
const localMediaContainer = document.getElementById('video-container-div')
localMediaContainer!.appendChild(localVideoTrack.attach())
// audio
let localAudioTrack = await twilioVideo.createLocalAudioTrack()
twilioRoom.localParticipant.publishTrack(localAudioTrack);
const audioElement = localAudioTrack.attach();
document.body.appendChild(audioElement);Agora
- useLocalMicrophoneTrack：이 후크를 사용하면 로컬 카메라 비디오 트랙을 만들 수 있습니다.
- useLocalCameraTrack：로컬 카메라로 캡처한 비디오를 사용하여 로컬 비디오 트랙을 만듭니다.
- usePublish: 이 훅은 컴포넌트가 준비되면 로컬 트랙을 자동으로 게시하고 컴포넌트가 마운트 해제되면 게시를 취소합니다.
- LocalVideoTrack: 이 컴포넌트는 로컬 사용자의 카메라 비디오 트랙과 마이크 오디오 트랙을 재생합니다.
- LocalUser 이 컴포넌트는 로컬 비디오 트랙을 재생합니다.
import {
useLocalMicrophoneTrack,
useLocalCameraTrack,
usePublish,
LocalVideoTrack,
LocalUser
} from "agora-rtc-react"
// get local microphone and camera
const { localMicrophoneTrack } = useLocalMicrophoneTrack();
const { localCameraTrack } = useLocalCameraTrack();
// Publish local microphone and camera
usePublish([localMicrophoneTrack, localCameraTrack]);
// Play local video using components
return () => {
// Option 1: <LocalVideoTrack />
<LocalVideoTrack track={localCameraTrack} play />
// Option 2: <LocalUser />
<LocalUser
audioTrack={localMicrophoneTrack}
videoTrack={localCameraTrack}
cameraOn={true}
micOn={true}
playAudio={false}
playVideo={true}
/>
}6단계: 트랙 게시 취소 및 삭제Twilio
Twilio Video/Audio is track-based, requiring looping through each video/audio track to unpublish the video/audio
twilioRoom.localParticipant.videoTracks.forEach((publication) => {
publication.unpublish();
publication.track.stop();
var selfTwilioVideo = document.getElementById('video-container-div')
selfTwilioVideo?.querySelector('video')?.remove()
})
twilioRoom.localParticipant.audioTracks.forEach((publication) => {
publicaAgora
Twilio의 비디오/오디오와 마찬가지로 아고라의 비디오/오디오도 트랙 기반입니다. 트랙이 사용Publish로 게시된 후에는 두 가지 방법으로 트랙을 게시 취소할 수 있습니다. 사용Publish를 사용하는 컴포넌트가 마운트 해제될 때 자동으로 또는 컴포넌트를 마운트 해제할 필요 없이 수동으로 트랙의 게시를 취소할 수 있습니다.
await client.unpublish(); // Unpublish all tracks at once
await client.unpublish(localCameraTrack); // Unpublish 1 track
await client.unpublish([localAudioTrack, localCameraTrack]); // Unpublish specific set of tracks
// Track destruction:
localAudioTrack.close();
localVideoTrack.close();unpublish에 대한 참고 사항:
이 메서드는 여러 번 호출할 수 있습니다. publish` 및 `unpublish`를 사용하여 특정 로컬 트랙의 게시 및 게시 취소를 관리할 수 있습니다.
이 메서드는 비동기식이며 '약속' 또는 '비동기/대기'와 함께 사용해야 합니다.
8단계: 원격 사용자 비디오 렌더링
Twilio
Twilio에서는 participantConnected and trackSubscribed 이벤트 리스너를 사용했을 수 있습니다.
<div class="remote-video-container" width="1920" height="1080"></div> twilioRoom.on('participantConnected', (participant) => {
participant.on('trackSubscribed', (track) => {
// a user turned on their video, render it
document.getElementById('remote-video-container-div').appendChild(track.attach());
});
participant.on('trackUnsubscribed', (track) => {
// a user turned off their video, stop rendering it
var selfTwilioVideo = document.getElementById('remote-video-container')
selfTwilioVideo.querySelector('video').remove()
})Agora
원격 사용자가 오디오/비디오 트랙을 성공적으로 게시하면 SDK는 해당 원격 사용자를 원격 사용자 목록에 추가합니다. useRemoteUsers 훅으로 원격 사용자 목록을 검색하고 RemoteUser 컴포넌트를 사용하여 원격 사용자의 오디오 및 비디오 트랙을 구독하고 재생합니다.
twilioRoom.on('participantConnected', (participant) => {
participant.on('trackSubscribed', (track) => {
// a user turned on their video, render it
document.getElementById('remote-video-container-div').appendChild(track.attach());
});
participant.on('trackUnsubscribed', (track) => {
// a user turned off their video, stop rendering it
var selfTwilioVideo = document.getElementById('remote-video-container')
selfTwilioVideo.querySelector('video').remove()
})또는 useRemoteAudioTracks를 사용하여 원격 사용자의 오디오 및 비디오 트랙을 각각 자동으로 구독하고 검색할 수 있습니다. 컴포넌트가 마운트 해제되면 후크는 지정된 사용자의 비디오 트랙에 대한 구독을 중지합니다.
//remote users
const remoteUsers = useRemoteUsers();
const { audiotracks } = useRemoteAudioTracks(remoteUsers)
const { videotracks } = useRemoteVideoTracks(remoteUsers)
return (
<></>
)useRemoteUserTrack을 사용하여 특정 사용자의 원격 트랙을 선택적으로 검색할 수 있습니다.
//remote users
const remoteUsers = useRemoteUsers();
const audiotrack = useRemoteUserTrack(remoteUsers[0], 'audio')
const videotracks = useRemoteUserTrack(remoteUsers[0], 'video')
return (
<></>
) 9단계: 세션 나가기 및 종료
Twilio
twilioRoom.disconnect()Agora
아고라 React SDK를 사용하면 채널을 매우 간단하게 탈퇴할 수 있습니다. useJoin을 호출하는 컴포넌트가 마운트를 해제하면 아고라 클라이언트는 자동으로 채널에서 탈퇴합니다.
client.leave()를 사용하여 채널을 수동으로 탈퇴하면 SDK는 구독된 원격 사용자 개체, 원격 트랙 개체, 연결 상태를 기록하는 개체 등 현재 채널과 관련된 개체를 즉시 삭제합니다. 채널에 다시 참여하려면 leave를 호출한 후 join를 호출하세요.
await client.leave();추가 아고라 비디오 SDK 기능
아고라 비디오 리액트 SDK는 화상 회의 애플리케이션을 향상시킬 수 있는 다양한 기능을 제공합니다. 다음은 고려해야 할 몇 가지 주요 기능 및 정보입니다:
- 플랫폼 지원: 아고라 동영상 SDK는 Android, iOS, 웹, Linux, macOS, Windows 등 다양한 플랫폼을 지원합니다. 또한 Flutter 및 React Native와 같은 인기 프레임워크용 래퍼도 제공합니다.
- 클라우드 녹화: 아고라는 비디오 SDK에 클라우드 녹화 기능을 제공하여 나중에 재생하거나 보관할 목적으로 세션을 캡처하고 저장할 수 있습니다. 이 기능을 구현하는 방법에 대한 자세한 내용은 아고라 동영상 SDK 설명서를 참조하세요.
- 화면 공유: 아고라의 화면 공유 기능을 사용하여 애플리케이션에서 화면 공유를 구현하세요. 이 기능은 공동 작업 및 프레젠테이션에 유용합니다.
- 플러그인 아키텍처: 아고라의 플러그인 지원은 동영상 애플리케이션의 확장성을 향상시킵니다. 아고라의 플러그인 아키텍처를 활용하여 추가 기능을 원활하게 통합하거나 기능을 사용자 지정할 수 있습니다.
- 트리 쉐이킹: 아고라의 React용 동영상 SDK는 트리 쉐이킹을 지원하므로 빌드 과정에서 사용하지 않는 코드를 제거하여 애플리케이션의 번들 크기를 최적화할 수 있습니다. 이를 통해 애플리케이션의 경량화와 효율적인 성능을 보장합니다.
- 안전한 커뮤니케이션: 아고라의 엔드투엔드 암호화는 세션 내 사용자 간의 커뮤니케이션이 매우 안전하게 이루어지도록 보장합니다. 이 기능은 개인정보 보호를 강화하고 화상 회의 중에 교환되는 민감한 정보를 보호합니다.
아고라 비디오 리액트 SDK 기능 및 구현 방법에 대한 자세한 내용은 아고라 비디오 리액트 SDK 설명서를 참조하세요.
강력하고 풍부한 기능을 갖춘 화상 회의 환경을 구축할 수 있는 아고라 비디오 리액트 SDK의 모든 잠재력을 살펴보세요. 특정 기능에 대한 요구 사항이 있는 경우 구현에 대한 지침은 설명서를 참조하세요.
