다음을 위해 설계됨: REACT NATIVE

React Native 라이브 스트리밍 SDK

Tencent RTC의 React Native Live Streaming SDK로 모바일 방송을 구축하세요. 네이티브 영상 뷰와 방 상태를 React Native 화면 및 플랫폼 설정과 결합하세요.

빌드 시작 Live 데모 살펴보기

개발자 리소스

React Native 라이브 스트리밍 SDK 문서 및 예제

API 레퍼런스

React Native 라이브 스트리밍 SDK API를 살펴보세요.

API 살펴보기 사용자 인증

통합 가이드

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

React Native 통합 빠른 시작

예제 및 소스

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

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

React Native 기반 라이브 제품 데모

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

라이브 쇼핑 살펴보기

React Native에서 라이브 이벤트 시청

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

이벤트 스트리밍 살펴보기

REACT NATIVE LIVE 기능

React Native 라이브 스트리밍 기능

라이브 시작

호스트 및 시청자 역할
방 수명 주기 관리

사람들을 하나로 연결

라이브 영상 재생
시청자 참여

내 것으로 만들기

유연한 애플리케이션 레이아웃
플랫폼별 구성 요소

React Native 라이브 스트리밍 API 살펴보기

AtomicXCore 비디오 뷰와 룸 상태를 React Native 호스트 및 시청자 인터페이스에 연결하세요.

비디오 캔버스

React Native 라이브 비디오 뷰 추가

AtomicXCore 비디오 뷰를 React Native 레이아웃에 배치하세요. 룸 상태에 바인딩하고 주변 제어 기능과 내비게이션은 애플리케이션에서 제공하세요.

문서 읽기

import { LiveCoreView } from
  'react-native-tuikit-atomic-x/lib/module/components/LiveCoreView';

<LiveCoreView
  liveId={liveID}
  coreViewType="pushView"
  style={{ flex: 1 }}
/>

라이브 시작

React Native에서 라이브 스트리밍 시작하기

호스트를 인증하고 로컬 오디오와 비디오를 준비한 후 라이브 방을 만드세요. 미디어 화면과 방 수명 주기에 동일한 방 ID를 사용하세요.

문서 읽기

const { createLive } = useLiveListState();

createLive({
  liveInfo: {
    liveID, liveName: 'Studio sessions',
    seatLayoutTemplateID: 600, keepOwnerOnSeat: true,
  },
  onSuccess: handleStarted, onError: handleError,
});

방에 참여하기

시청자를 현장 속으로

동일한 방 ID를 사용해 시청자를 연결하세요.

문서 읽기

const { joinLive } = useLiveListState();

joinLive({
  liveID,
  onSuccess: handleJoined, onError: handleError,
});

커스터마이징

React Native 라이브 인터페이스 맞춤 설정

React Native 앱에서 라이브 경험을 중심으로 동영상, 시청자 참여 및 탐색 기능을 구성하세요.

레이아웃

핵심 비디오 캔버스와 룸 상태를 중심으로 인터페이스를 구축하세요.

문서 읽기

시작하기

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

01
앱 만들기
애플리케이션과 테스트 사용자를 위해 Live을 활성화하세요.
Live 콘솔 열기
02
React Native 라이브 스트리밍 SDK 추가
플랫폼 가이드에 따라 프로젝트를 연결하세요.
통합 가이드 따르기
03
첫 번째 룸에 연결
한 계정으로 방송하고 다른 계정으로 시청하세요.
인증 설정

React Native Live SDK

npx expo install react-native-tuikit-atomic-x \
  expo-dev-client expo-build-properties

import { useLoginState } from
  'react-native-tuikit-atomic-x';

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

React Native 라이브 스트리밍 SDK 자주 묻는 질문

React Native 라이브 스트리밍 SDK에 비디오 뷰가 포함되어 있나요?

React Native Live Streaming SDK에는 AtomicXCore 영상 뷰와 방 상태 API가 포함되어 있습니다. 앱에서 이러한 뷰를 사용하는 호스트 및 시청자 인터페이스를 구성하며, 완성형 화면이 필요하다면 TUILiveKit을 선택하세요.

이 SDK는 UI Kit과 어떻게 연동되나요?

SDK API를 사용해 자체 인터페이스를 구축하세요. 바로 사용할 수 있는 화면과 컨트롤이 필요하면 UI Kit을 선택하세요.

React Native 라이브 스트리밍 UI Kit

Expo Go에서 SDK를 실행할 수 있나요?

SDK에는 네이티브 모듈이 포함되어 있습니다. Expo development client와 같은 네이티브 개발 빌드를 사용하고 가이드에 따라 iOS 및 Android 구성을 완료하세요.

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

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

인증 가이드 보기

React Native Live Streaming SDK는 무료로 사용할 수 있나요?

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

Live 요금 보기

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

문서화된 패키지와 네이티브 의존성을 설치한 뒤 네이티브 앱을 다시 빌드하세요. JavaScript만으로 실행된다고 가정하지 말고 권한, 수명 주기와 네이티브 콜백을 확인하세요.

플랫폼 가이드 읽기

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

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

플랫폼 가이드 읽기

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

지원 호스트·시청자 API로 자체 인터페이스를 만드세요. 커머스, 티켓이나 재생 권리 흐름은 앱이 관리합니다.

플랫폼 가이드 읽기

React Native Live 통합 지원

통합 관련 질문

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

개발자 문서 보기

애플리케이션 상담

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

판매원에게 연락하기

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

React Native Live Streaming SDK와 플랫폼 가이드를 사용해 크리에이터와 시청자를 연결하세요.

무료로 시작하기 SDK 가이드 보기

React Native 라이브 스트리밍 SDK

React Native 라이브 스트리밍 SDK 문서 및 예제

API 레퍼런스

통합 가이드

예제 및 소스

React Native 기반 라이브 제품 데모

React Native에서 라이브 이벤트 시청

React Native 라이브 스트리밍 기능

라이브 시작

사람들을 하나로 연결

내 것으로 만들기

React Native 라이브 스트리밍 API 살펴보기

React Native 라이브 비디오 뷰 추가

React Native에서 라이브 스트리밍 시작하기

시청자를 현장 속으로

React Native 라이브 인터페이스 맞춤 설정

레이아웃

시청자 상호작용

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

앱 만들기

React Native 라이브 스트리밍 SDK 추가

첫 번째 룸에 연결

React Native 라이브 스트리밍 SDK 자주 묻는 질문

React Native 라이브 스트리밍 SDK에 비디오 뷰가 포함되어 있나요?

이 SDK는 UI Kit과 어떻게 연동되나요?

Expo Go에서 SDK를 실행할 수 있나요?

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

React Native Live Streaming SDK는 무료로 사용할 수 있나요?

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

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

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

React Native Live 통합 지원

통합 관련 질문

애플리케이션 상담

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