다음을 위해 설계됨: REACT

React 영상 통화 UI Kit

Tencent RTC의 React Video Calling UI Kit으로 앱 내 통화를 추가하세요. TUICallKit을 삽입하고 사용자를 연결한 후 통화 화면과 플로팅 창을 React 앱에 맞게 조정할 수 있습니다.

빌드 시작 Call 데모 체험

개발자 리소스

React 영상 통화 UI Kit 문서 및 예제

컴포넌트 참고 자료

React 영상 통화 UI Kit 컴포넌트를 살펴보세요.

컴포넌트 살펴보기 사용자 인증

통합 가이드

React 영상 통화 UI Kit를 설치하고 사용자를 연결하세요.

React 통합 빠른 시작

예제 및 소스

제품이 실제로 작동하는 모습을 확인하고 구현 방식을 살펴보세요.

Call 데모 체험 React 소스 코드 보기

React 일대일 영상 통화

개인적인 교류나 상담을 위한 대면 대화를 React 앱에 도입하고, 영상 및 통화 제어 기능을 하나의 환경에서 제공하세요.

영상 상담 살펴보기

React 그룹 영상 통화

React 통화 컴포넌트에서 여러 참가자를 연결하세요. 플랫폼 가이드에 따라 통화 흐름과 지원되는 그룹 레이아웃을 구성하세요.

그룹 통화 살펴보기

REACT CALL 기능

React 영상 통화 기능

사람들을 연결하세요

음성 및 영상 통화
수신 통화 처리

통화 경험을 직접 제어

카메라 및 마이크 컨트롤
통화 수명 주기 이벤트

내 것으로 만들기

애플리케이션 흐름
플랫폼별 통합

React 영상 통화 컴포넌트 살펴보기

TUICallKit을 컴포넌트 레이아웃에 연결한 후 앱 내 작업을 통해 통화를 시작하세요.

통화 인터페이스

React 통화 인터페이스 삽입

컴포넌트 레이아웃에 TUICallKit를 마운트하고 인증된 사용자로 초기화하세요. 이 컴포넌트는 통화 인터페이스와 컨트롤을 제공합니다.

문서 읽기

import { TUICallKit } from '@trtc/calls-uikit-react';

export function CallView() {
  return <TUICallKit />;
}

통화 시작

React에서 영상 통화 시작

애플리케이션에서 통화 API로 수신자 ID를 전달하세요. 이 작업을 React 인터페이스의 연락처, 대화 또는 통화 버튼에 연결하세요.

문서 읽기

import { TUICallKitAPI, CallMediaType } from
  '@trtc/calls-uikit-react';

await TUICallKitAPI.calls({
  userIDList: [recipientID],
  type: CallMediaType.VIDEO,
});

플로팅 창

사용자가 앱 내에서 이동해도 대화가 계속 표시되게 하세요.

문서 읽기

TUICallKitAPI.enableFloatWindow(true);

커스터마이징

React Call UI Kit 맞춤 설정

React 통화 컴포넌트, 컨트롤 및 수신 통화 흐름을 제품에 맞게 조정하세요.

레이아웃 및 제어

플랫폼 가이드의 맞춤 설정 옵션을 사용해 통화 환경을 조정하세요.

문서 읽기

시작하기

React 앱에 화상 통화 추가

01
앱 만들기
애플리케이션과 테스트 사용자를 위해 Call을 활성화하세요.
Call 콘솔 열기
02
React 영상 통화 UI Kit 추가
플랫폼 가이드에 따라 프로젝트를 연결하세요.
통합 가이드 따르기
03
첫 통화 시작
두 테스트 사용자로 로그인한 다음 전화를 걸고 받으세요.
인증 설정

React Call UI Kit

npm install @trtc/calls-uikit-react

import { TUICallKitAPI } from '@trtc/calls-uikit-react';

await TUICallKitAPI.init({ SDKAppID, userID, userSig });

React 영상 통화 UI Kit 자주 묻는 질문

React Video Calling UI Kit에는 무엇이 포함되어 있나요?

React Video Calling UI Kit은 TUICallKit 화면과 통화 컨트롤을 제공합니다. 사용자 ID 및 컴포넌트 레이아웃에 연결하면 Call 서비스가 참가자를 연결합니다.

React 통화 SDK와 UI Kit 중 무엇을 사용해야 하나요?

UI Kit은 기반 서비스 위에 인터페이스 컴포넌트를 제공합니다. 애플리케이션 UI를 더 세밀하게 제어해야 한다면 SDK를 선택하세요.

Web 영상 통화 SDK

브라우저에서 React 영상 통화를 사용하려면 무엇이 필요한가요?

Call 서비스가 활성화된 인증 사용자에 대해 TUICallKit을 초기화하세요. HTTPS 또는 localhost를 사용하고 카메라, 마이크 및 브라우저 재생 권한을 처리합니다.

React 통화 통합 가이드

React 영상 통화 UI Kit 사용자를 인증하려면 어떻게 해야 하나요?

서버에서 UserSig를 생성하고 자체 로그인 흐름을 완료한 후 클라이언트에 전달하세요. 애플리케이션 시크릿은 항상 서버에 보관하세요.

인증 가이드 보기

React 영상 통화 UI Kit을 무료로 사용할 수 있나요?

인터페이스와 호스팅형 Call 서비스는 서로 다른 역할을 합니다. 애플리케이션에서 서비스를 활성화하고 현재 요금제, 기능 제공 여부 및 사용 요금을 확인하세요.

Call 요금 보기

React 프로젝트에 React 영상 통화 UI Kit를 통합하려면 어떻게 해야 하나요?

문서화된 provider를 초기화하고 연결된 컴포넌트를 구성하세요. 구독과 정리를 React 수명 주기에 맞추고 실제 앱에서 탐색과 반복 마운트를 테스트하세요.

플랫폼 가이드 읽기

앱 출시 전에 React 영상 통화 UI Kit를 어떻게 테스트하나요?

서로 다른 사용자 간의 초대, 수락, 거절, 통화 종료 상태를 테스트하고 권한 거부 상황도 포함하세요.

플랫폼 가이드 읽기

React 영상 통화 UI Kit의 인터페이스를 어떻게 맞춤 설정하나요?

지원되는 컨트롤 변경에는 @trtc/calls-uikit-react의 TUICallKitAPI를 사용하세요. 예를 들어 hideFeatureButton(FeatureButton.Camera)는 카메라 버튼을 숨기고, setLayoutMode(LayoutMode.LocalInLargeView)는 로컬 영상을 큰 화면에 배치합니다. 이 레이아웃 설정은 일대일 영상 통화에만 적용됩니다. 완전히 다른 인터페이스가 필요하다면 TUICallEngine을 기반으로 구현하세요. 모든 내부 뷰에 교체용 React prop이 제공된다고 가정해서는 안 됩니다.

맞춤 설정 가이드 보기

React Call 통합 지원

통합 관련 질문

React 영상 통화 UI Kit 설정에 대한 도움을 받으세요.

개발자 문서 보기

애플리케이션 상담

제품, 예상 사용량 및 통합 요구 사항을 상담하세요.

판매원에게 연락하기

React 앱에 영상 통화 도입

React Video Calling UI Kit으로 시작해 두 명의 테스트 사용자를 연결하고 첫 통화를 구축하세요.

무료로 시작하기 UI Kit 가이드 보기

React 영상 통화 UI Kit

React 영상 통화 UI Kit 문서 및 예제

컴포넌트 참고 자료

통합 가이드

예제 및 소스

React 일대일 영상 통화

React 그룹 영상 통화

React 영상 통화 기능

사람들을 연결하세요

통화 경험을 직접 제어

내 것으로 만들기

React 영상 통화 컴포넌트 살펴보기

React 통화 인터페이스 삽입

React에서 영상 통화 시작

플로팅 창

React Call UI Kit 맞춤 설정

레이아웃 및 제어

벨소리 및 발신자 정보

React 앱에 화상 통화 추가

앱 만들기

React 영상 통화 UI Kit 추가

첫 통화 시작

React 영상 통화 UI Kit 자주 묻는 질문

React Video Calling UI Kit에는 무엇이 포함되어 있나요?

React 통화 SDK와 UI Kit 중 무엇을 사용해야 하나요?

브라우저에서 React 영상 통화를 사용하려면 무엇이 필요한가요?

React 영상 통화 UI Kit 사용자를 인증하려면 어떻게 해야 하나요?

React 영상 통화 UI Kit을 무료로 사용할 수 있나요?

React 프로젝트에 React 영상 통화 UI Kit를 통합하려면 어떻게 해야 하나요?

앱 출시 전에 React 영상 통화 UI Kit를 어떻게 테스트하나요?

React 영상 통화 UI Kit의 인터페이스를 어떻게 맞춤 설정하나요?

React Call 통합 지원

통합 관련 질문

애플리케이션 상담

React 앱에 영상 통화 도입