REACT ROOM 기능
앱을 위한 룸
룸 수명 주기
- 룸 생성 및 참여
- 퇴장 및 종료 처리
실시간 대화
- 참가자 영상 연결
- 카메라 및 마이크 제어
참가자 경험
- 룸 구성원 표시
- 룸 상태 변경 반영
앱 신원
- 자체 사용자 ID 연결
- 서버 발급 UserSig로 인증
플랫폼 통합
- 브라우저 워크스페이스
- 네이티브 또는 브라우저 권한 준수
제품 흐름
- 룸을 탐색에 연결
- 비즈니스 데이터를 앱에서 관리
React 회의 컴포넌트 살펴보기
룸 경험과 그 기반 코드를 살펴보세요.
모두를 위한 자리
React 화상 회의 UI Kit로 회의 화면을 마운트하세요. 앱이 인증된 사용자와 룸 ID를 제공합니다.
import { UIKitProvider } from '@tencentcloud/uikit-base-component-react';
import { ConferenceMainView } from '@tencentcloud/roomkit-web-react';
export default function App() {
return (
<UIKitProvider theme="light" language="en-US">
<ConferenceMainView />
</UIKitProvider>
);
}시작하기
첫 룸 구현하기
- 01
- 02
- 03
npm install @tencentcloud/roomkit-web-react tuikit-atomicx-react @tencentcloud/uikit-base-component-react @tencentcloud/universal-apiimport { UIKitProvider } from '@tencentcloud/uikit-base-component-react';
import { ConferenceMainView } from '@tencentcloud/roomkit-web-react';
export default function App() {
return (
<UIKitProvider theme="light" language="en-US">
<ConferenceMainView />
</UIKitProvider>
);
}React 화상 회의 UI Kit 자주 묻는 질문
React 화상 회의 UI Kit에는 무엇이 포함되나요?
React 화상 회의 UI Kit는 입장, 영상 화면과 참가자 제어가 포함된 회의 인터페이스를 제공합니다. 앱이 신원과 비즈니스 흐름을 제공합니다.
React 화상 회의 UI Kit는 어떻게 통합하나요?
React 화상 회의 UI Kit에서 사용자는 어떻게 로그인하나요?
SDKAppID, 사용자 ID와 서버에서 생성한 UserSig를 사용하세요. 앱 비밀 키를 브라우저나 모바일 코드에 넣지 말고 입장 전에 인증 실패를 처리하세요.
회의 경험을 맞춤 설정할 수 있나요?
문서화된 컴포넌트와 구성을 제품에 맞추세요. 네이티브 UI Kit 소스는 룸 화면과 툴바를 제공합니다. 지원 옵션은 플랫폼 가이드를 확인하세요.
기존 강좌나 워크스페이스 시스템을 대체하나요?
강좌 콘텐츠, 워크스페이스 권한, 결제와 비즈니스 기록은 앱이 계속 관리합니다. 회의 컴포넌트가 실시간 통신을 추가합니다.
React로 React 화상 회의 UI Kit를 어떻게 통합하나요?
React 화상 회의 UI Kit 인터페이스를 어떻게 맞춤 설정하나요?
@tencentcloud/uikit-base-component-react의 UIKitProvider에서 theme과 language를 설정하세요. 영상 배치를 변경하려면 tuikit-atomicx-react/room에서 RoomLayoutTemplate을 가져와 conference.setFeatureConfig({ layoutTemplate: RoomLayoutTemplate.SidebarLayout })를 호출하세요. 이는 지원되는 레이아웃을 선택하는 설정이며 모든 룸 컴포넌트를 임의로 교체하는 기능은 아닙니다. 기본 초대 대상 선택기는 IM 친구 관계를 사용합니다. 업무용 연락처가 필요하면 문서에 나온 서버 API로 동기화하세요.