아고라는 애플리케이션에 고품질 오디오, 비디오 및 대화형 방송 기능을 간편하게 추가할 수 있는 강력한 실시간 커뮤니케이션 SDK를 제공합니다.
새로운 React용 비디오 SDK를 베타 버전으로 출시하게 되어 기쁩니다. 강력한 웹 SDK를 기반으로 구축되었으며, 사용하기 쉬운 훅과 컴포넌트를 내보내 React를 일류 제품으로 만들 수 있습니다.
아고라에서 계정 만들기
계정에 가입하고 아고라 콘솔에 로그인합니다.
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를 사용하겠습니다):
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 파일에서 시작하겠습니다:
` import { useState } from "react"; import { AgoraRTCProvider, useJoin, useLocalCameraTrack, useLocalMicrophoneTrack, usePublish, useRTCClient, useRemoteAudioTracks, useRemoteUsers, RemoteUser, LocalVideoTrack } from "agora-rtc-react"; import AgoraRTC from "agora-rtc-sdk-ng"; import "./App.css";
클라이언트 객체를 초기화하여 useRTCClient 훅에 전달합니다. 애플리케이션 상태를 설정해 보겠습니다:
channelName: 사용자가 서로 채팅에 참여할 수 있는 채널의 이름을 나타냅니다. 채널을 “test” 라고 부르겠습니다.
AppID: 아고라 콘솔에서 이전에 얻은 아고라 앱 ID를 보유합니다. 빈 문자열을 앱 ID로 대체합니다.
token: 토큰을 사용하는 경우 여기에 토큰을 입력할 수 있습니다. 하지만 이 데모에서는 그냥 null로 설정하겠습니다.
inCall: 사용자가 현재 영상 통화 중인지 여부를 추적하는 Boolean 상태 변수입니다.
function App() {
const client = useRTCClient(AgoraRTC.createClient({ codec: "vp8", mode: "rtc" }));
const [channelName, setChannelName] = useState("test");
const [AppID, setAppID] = useState("");
const [token, setToken] = useState(null);
const [inCall, setInCall] = useState(false);다음으로 앱 컴포넌트를 표시합니다. return 블록에서 h1 요소를 렌더링하여 제목을 표시합니다. 이제 inCall 상태 변수에 따라 사용자로부터 세부 정보(App ID, channel name, token)를 가져오거나 영상 통화를 표시하는 Form 컴포넌트를 표시합니다:
return (
<div style={styles.container}>
<h1>Agora React Videocall</h1>
{!inCall ? (
<Form
AppID={AppID}
setAppID={setAppID}
channelName={channelName}
setChannelName={setChannelName}
token={token}
setToken={setToken}
setInCall={setInCall}
/>
) : (
{/* Videocall here */}
)}
</div>
);
}영상 통화 인터페이스의 경우, 영상 통화 컴포넌트를 앞서 만든 클라이언트를 전달하는 AgoraRTCProvider 컴포넌트로 래핑합니다. 다음으로 영상 통화를 위한 비디오를 저장하기 위해 컴포넌트를 생성하겠습니다. inCall 상태를 false로 설정하여 통화를 종료하는 통화 종료 버튼을 표시하겠습니다:
return (
<div style={styles.container}>
<h1>Agora React Videocall</h1>
{!inCall ? (
<Form
AppID={AppID}
setAppID={setAppID}
channelName={channelName}
setChannelName={setChannelName}
token={token}
setToken={setToken}
setInCall={setInCall}
/>
) : (
<AgoraRTCProvider client={client}>
<Videos channelName={channelName} AppID={AppID} token={token} />
<br /><br />
<button onClick={() => setInCall(false)}>End Call</button>
</AgoraRTCProvider>
)}
</div>
);
}
export default App;비디오 컴포넌트
비디오 컴포넌트에서는 props를 분해하는 것부터 시작하겠습니다. Agora React SDK는 로컬 마이크와 카메라 트랙을 생성하고 설정하는 useLocalMicrophoneTrack 과 useLocalCameraTrack 훅을 제공합니다:
function Videos(props: { channelName: string; AppID: string; token: string }) {
const { AppID, channelName, token } = props;
const { isLoading: isLoadingMic, localMicrophoneTrack } = useLocalMicrophoneTrack();
const { isLoading: isLoadingCam, localCameraTrack } = useLocalCameraTrack();useRemoteUsers 훅을 사용하여 호출의 다른 (원격) 사용자가 포함된 배열에 액세스할 수 있습니다. 이 배열에는 통화 중인 각 원격 사용자에 대한 객체가 포함됩니다. 누군가가 채널에 들어오거나 나갈 때마다 업데이트되는 React 상태의 일부입니다:
const remoteUsers = useRemoteUsers();
usePublish([localMicrophoneTrack, localCameraTrack]);
useJoin({
appid: AppID,
channel: channelName,
token: token === "" ? null : token,
});로컬 미디어 트랙(마이크 및 카메라 트랙)을 퍼블리시하기 위해 usePublish 훅을 사용하겠습니다. 통화를 시작하려면 채널에 가입해야 합니다. 이를 위해 useJoin 훅을 호출하면 됩니다. AppID, channelName, token 을 props 으로 전달합니다.
remoteUsers 배열을 전달하여 useRemoteAudioTracks 훅으로 원격 사용자의 오디오 트랙에 액세스할 수 있습니다. 원격 사용자의 트랙을 듣기 위해 audioTracks 배열을 매핑하고 재생 메서드를 호출하면 됩니다:
const { audioTracks } = useRemoteAudioTracks(remoteUsers);
audioTracks.map((track) => track.play());마이크 또는 카메라가 로딩 중인지 확인하고 간단한 메시지를 렌더링합니다:
const deviceLoading = isLoadingMic || isLoadingCam;
if (deviceLoading) return <div style={styles.grid}>Loading devices...</div>;트랙이 준비되면 채널에 있는 모든 사용자의 비디오가 포함된 그리드를 렌더링합니다. SDK의 LocalVideoTrack 컴포넌트를 사용하여 사용자 고유의 (로컬) 비디오 트랙을 렌더링하고 track prop으로 localCameraTrack 을 전달할 수 있습니다:
return (
<div style={{ ...styles.grid, ...returnGrid(remoteUsers) }}>
<LocalVideoTrack track={localCameraTrack} play={true} style={styles.gridCell} />
{/* Remote videos here */}
</div>
);
}RemoteUser 컴포넌트를 사용해 원격 사용자의 비디오 트랙을 표시할 수 있습니다. 각 user 를 prop으로 전달하면서 remoteUsers 배열을 반복할 것입니다:
return (
<div style={{ ...styles.grid, ...returnGrid(remoteUsers) }}>
<LocalVideoTrack track={localCameraTrack} play={true} style={styles.gridCell} />
{remoteUsers.map((user) => (
<RemoteUser user={user} style={styles.gridCell} />
))}
</div>
);
}Form 및 Styling
완성도를 높이기 위해 Form 컴포넌트의 모습은 다음과 같습니다:
function Form(props) {
const { AppID, setAppID, channelName, setChannelName, token, setToken, setInCall } = props;
return (
<div>
<p>Please enter your Agora AppID and Channel Name</p>
<label htmlFor="appid">Agora App ID: </label>
<input id="appid" type="text" value={AppID} onChange={(e) => setAppID(e.target.value)} placeholder="required"/>
<br /><br />
<label htmlFor="channel">Channel Name: </label>
<input id="channel" type="text" value={channelName} onChange={(e) => setChannelName(e.target.value)} placeholder="required" />
<br /><br />
<label htmlFor="token">Channel Token: </label>
<input id="token" type="text" value={token} onChange={(e) => setToken(e.target.value)} placeholder="optional" />
<br /><br />
<button onClick={() => AppID && channelName ? setInCall(true) : alert("Please enter Agora App ID and Channel Name")}>
Join
</button>
</div>
);
}또한 간단한 동영상 그리드를 렌더링하는 유틸리티를 만들었습니다. 이 기능은 다음과 같습니다:
/* Style Utils */
const returnGrid = (remoteUsers) => {
return {
gridTemplateColumns:
remoteUsers.length > 8
? unit.repeat(4)
: remoteUsers.length > 3
? unit.repeat(3)
: remoteUsers.length > 0
? unit.repeat(2)
: unit,
};
};
const unit = "minmax(0, 1fr) ";
const styles = {
grid: {
width: "100%",
height: "100%",
display: "grid",
},
gridCell: { height: "100%", width: "100%" },
container: {
display: "flex",
flexDirection: "column",
flex: 1,
justifyContent: "center",
},
};결론
Agora React SDK로 고품질 화상 회의 앱을 만드는 데 필요한 모든 것을 알아봤습니다. 자세한 내용은 문서와 API를 참조하세요.
[출처] https://www.agora.io/kr/blog/agora-react-sdk-build-a-video-conferencing-app-in-minutes/
