다음을 위해 설계됨: REACT

React 라이브 스트리밍 UI Kit

Tencent RTC의 React Live Streaming UI Kit으로 라이브 비디오 시청 기능을 추가하세요. 시청자 컴포넌트, 시청자 댓글, 라이브 룸 목록을 결합해 맞춤형 시청 경험을 구축할 수 있습니다.

빌드 시작 Live 데모 살펴보기

개발자 리소스

React 라이브 스트리밍 UI Kit 문서 및 예제

컴포넌트 참고 자료

React 라이브 스트리밍 UI Kit 컴포넌트를 살펴보세요.

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

통합 가이드

React 라이브 스트리밍 UI Kit를 설치하고 사용자를 연결하세요.

React 통합 빠른 시작

예제 및 소스

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

Live 데모 살펴보기 React 소스 코드 보기

React에서 제품 데모 시청

시청자가 크리에이터의 상품 시연을 보고 대화에 참여할 수 있게 하세요. 카탈로그와 구매 경험은 애플리케이션에서 관리합니다.

라이브 쇼핑 살펴보기

React로 라이브 이벤트 시청

프레젠테이션과 시청자를 React 앱으로 가져오세요. 시청 화면을 룸에 연결하여 사람들이 라이브 이벤트를 시청할 수 있게 하세요.

이벤트 스트리밍 살펴보기

REACT LIVE 기능

React 라이브 영상 시청 기능

라이브 시청

라이브 비디오 컴포넌트
룸 입장 및 퇴장

대화에 참여하기

시청자 댓글
시청자 목록 컴포넌트

더 알아보기

라이브 룸 목록
애플리케이션 내비게이션

React 라이브 스트리밍 컴포넌트 살펴보기

React 컴포넌트 레이아웃에 영상 보기, 시청자 댓글, 방 탐색 기능을 결합하세요.

라이브 비디오

라이브 순간을 최우선으로

라이브 영상 컴포넌트를 React 레이아웃에 삽입하고 기존 방송에 연결하세요. 이 통합은 시청자를 위한 시청 경험을 제공합니다.

문서 읽기

import { LiveView } from 'tuikit-atomicx-react';

export function VideoPanel() {
  return <LiveView />;
}

실시간 댓글

시청자 참여 유도

React 라이브 비디오 화면 옆에 시청자 댓글을 배치하세요. 대화와 비디오를 동일한 라이브 룸에 연결하세요.

문서 읽기

import { BarrageList, BarrageInput } from 'tuikit-atomicx-react';

export function Comments() {
  return <><BarrageList /><BarrageInput /></>;
}

라이브 방 목록

시청자가 현재 라이브 중인 콘텐츠를 찾도록 지원

방 탐색 기능을 앱의 시청 페이지에 연결하세요.

문서 읽기

import { LiveList } from 'tuikit-atomicx-react';

<LiveList
  columnCount={3}
  onLiveRoomClick={openLiveRoom}
/>

커스터마이징

React Live UI Kit 사용자 지정

React 앱의 라이브 경험을 중심으로 영상, 시청자 인터랙션, 탐색 기능을 배치하세요.

브랜드 시각 아이덴티티

플랫폼에서 제공하는 사용자 지정 옵션으로 시각적 표현을 조정하세요.

문서 읽기

시작하기

React 앱에 라이브 스트리밍 추가

01
앱 만들기
애플리케이션과 테스트 사용자를 위해 Live을 활성화하세요.
Live 콘솔 열기
02
React 라이브 스트리밍 UI Kit 추가
플랫폼 가이드에 따라 프로젝트를 연결하세요.
통합 가이드 따르기
03
첫 번째 룸에 연결
시청자가 로그인하고 기존 호스트가 만든 룸에 입장하도록 하세요.
인증 설정

React Live UI Kit

npm install tuikit-atomicx-react \
  @tencentcloud/uikit-base-component-react

import { useLoginState } from 'tuikit-atomicx-react';

const { login } = useLoginState();
await login({ SDKAppID, userID, userSig });

React 라이브 스트리밍 UI Kit 자주 묻는 질문

React로 호스트 방송 페이지를 구축할 수 있나요?

React Live Streaming UI Kit는 현재 시청자 보기 및 라이브 방 목록을 지원합니다. React 호스트 스트리밍은 출시 예정으로 표시되어 있으므로, 현재 이용 가능한 웹 방송 인터페이스가 필요하면 Vue 호스트 구현을 사용하세요.

Vue 라이브 스트리밍 UI Kit

이 UI Kit은 SDK와 어떻게 연동되나요?

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

Web 라이브 스트리밍 SDK

React 라이브 뷰어를 방송에 연결하려면 어떻게 해야 하나요?

Live 서비스를 활성화하고 시청자를 인증한 후 호스트가 만든 방에 참여하세요. 별도 계정을 사용해 React 시청자 화면을 테스트하고 플랫폼 가이드에 따라 구성하세요.

React 시청자 통합 가이드

React Live Streaming UI Kit 사용자를 인증하려면 어떻게 해야 하나요?

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

인증 가이드 보기

React Live Streaming UI Kit을 무료로 사용할 수 있나요?

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

Live 요금 보기

React 프로젝트에 React 라이브 스트리밍 UI Kit를 통합하려면 어떻게 해야 하나요?

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

플랫폼 가이드 읽기

앱 출시 전에 React 라이브 스트리밍 UI Kit를 어떻게 테스트하나요?

호스트·시청자 역할, 지원 송출·재생 이벤트와 재연결을 테스트하세요.

플랫폼 가이드 읽기

React 라이브 스트리밍 UI Kit의 인터페이스를 어떻게 맞춤 설정하나요?

React 시청자 컴포넌트를 UIKitProvider로 감싸 밝은 테마 또는 어두운 테마를 선택하세요. 예를 들어 columnCount={5}와 시청자 라우트를 여는 onLiveRoomClick 핸들러를 지정해 LiveList를 렌더링할 수 있습니다. 핸들러는 선택한 룸을 시청 흐름에 연결해야 합니다. 목록의 열 수만 바꾼다고 스트림에 참가하지는 않습니다. 이 페이지의 React 통합은 시청자용 시청 경험을 구현하며, 방송 송출은 별도의 호스트 통합으로 처리합니다.

맞춤 설정 가이드 보기

React Live 통합 지원

통합 관련 질문

React 라이브 스트리밍 UI Kit 설정에 대한 도움을 받으세요.

개발자 문서 보기

애플리케이션 상담

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

판매원에게 연락하기

React 라이브 시청 환경 구축

시청자를 라이브 영상, 댓글, 방 탐색 기능과 연결하세요.

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

React 라이브 스트리밍 UI Kit

React 라이브 스트리밍 UI Kit 문서 및 예제

컴포넌트 참고 자료

통합 가이드

예제 및 소스

React에서 제품 데모 시청

React로 라이브 이벤트 시청

React 라이브 영상 시청 기능

라이브 시청

대화에 참여하기

더 알아보기

React 라이브 스트리밍 컴포넌트 살펴보기

라이브 순간을 최우선으로

시청자 참여 유도

시청자가 현재 라이브 중인 콘텐츠를 찾도록 지원

React Live UI Kit 사용자 지정

브랜드 시각 아이덴티티

댓글 및 콘텐츠

React 앱에 라이브 스트리밍 추가

앱 만들기

React 라이브 스트리밍 UI Kit 추가

첫 번째 룸에 연결

React 라이브 스트리밍 UI Kit 자주 묻는 질문

React로 호스트 방송 페이지를 구축할 수 있나요?

이 UI Kit은 SDK와 어떻게 연동되나요?

React 라이브 뷰어를 방송에 연결하려면 어떻게 해야 하나요?

React Live Streaming UI Kit 사용자를 인증하려면 어떻게 해야 하나요?

React Live Streaming UI Kit을 무료로 사용할 수 있나요?

React 프로젝트에 React 라이브 스트리밍 UI Kit를 통합하려면 어떻게 해야 하나요?

앱 출시 전에 React 라이브 스트리밍 UI Kit를 어떻게 테스트하나요?

React 라이브 스트리밍 UI Kit의 인터페이스를 어떻게 맞춤 설정하나요?

React Live 통합 지원

통합 관련 질문

애플리케이션 상담

React 라이브 시청 환경 구축