다음을 위해 설계됨: FLUTTER

Flutter 라이브 스트리밍 UI Kit

Tencent RTC의 Flutter Live Streaming UI Kit으로 크리에이터와 시청자를 연결하세요. Flutter 앱에 TUILiveKit 위젯을 추가하여 방송하고 시청하며 방을 탐색할 수 있습니다.

빌드 시작 Live 데모 살펴보기

개발자 리소스

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

컴포넌트 참고 자료

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

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

통합 가이드

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

Flutter 통합 빠른 시작

예제 및 소스

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

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

Flutter에서 라이브 상품 시연

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

라이브 쇼핑 살펴보기

Flutter에서 라이브 이벤트 시청

프레젠테이션과 시청자를 Flutter 앱으로 가져오세요. 시청 화면을 방에 연결하여 라이브 이벤트를 따라갈 수 있게 하세요.

이벤트 스트리밍 살펴보기

FLUTTER LIVE 기능

Flutter 라이브 스트리밍 기능

라이브 시작

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

사람들을 하나로 연결

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

내 것으로 만들기

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

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

호스트 화면, 시청자 화면 및 라이브 룸 목록을 애플리케이션 내비게이션에 연결하세요.

호스트 미리보기

크리에이터가 시작할 공간 제공

크리에이터가 방송 전에 카메라를 미리 볼 수 있도록 Flutter 호스트 준비 화면을 추가하세요. 이 화면을 인증된 호스트 계정에 연결하세요.

문서 읽기

import 'package:tencent_live_uikit/tencent_live_uikit.dart';

Navigator.push(context, MaterialPageRoute(
  builder: (_) => TUILiveRoomAnchorOverlay(roomId: liveID),
));

시청자 화면

시청 경험을 앱의 일부로 만드세요

선택한 라이브 룸으로 Flutter 시청자 화면을 여세요. 방 입장 및 퇴장을 앱 탐색에 연결하세요.

문서 읽기

Navigator.push(context, MaterialPageRoute(
  builder: (_) => TUILiveRoomAudienceOverlay(
    roomId: liveID,
    liveInfo: LiveInfo(liveID: liveID),
  ),
));

라이브 방 목록

라이브 콘텐츠 탐색의 문을 여세요

탐색 가능한 목록을 추가하고 시청 흐름에 연결하세요.

문서 읽기

LiveListWidget(
  style: LiveListViewStyle.doubleColumn,
);

커스터마이징

Flutter Live UI Kit 맞춤 설정

Flutter 앱의 라이브 경험을 중심으로 비디오, 시청자 상호작용, 탐색 기능을 구성하세요.

브랜드 시각 아이덴티티

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

문서 읽기

시작하기

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

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

Flutter Live UI Kit

flutter pub add tencent_live_uikit

import 'package:atomic_x_core/atomicxcore.dart';

await LoginStore.shared.login(
  sdkAppID: SDKAppID, userID: userID, userSig: userSig,
);

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

Flutter Live UI Kit으로 무엇을 구축할 수 있나요?

Flutter Live Streaming UI Kit에는 호스트, 시청자 및 라이브 룸 목록 인터페이스가 포함되어 있습니다. 이러한 TUILiveKit 컴포넌트를 사용자 계정 및 Flutter 내비게이션에 연결해 완전한 시청 흐름을 구축하세요.

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

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

Flutter 라이브 스트리밍 SDK

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

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

Flutter 시청자 통합 가이드

Flutter 라이브 스트리밍 UI Kit 사용자를 어떻게 인증하나요?

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

인증 가이드 보기

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

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

Live 요금 보기

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

문서에 명시된 Flutter 패키지를 설치하고 각 대상의 네이티브 프로젝트 설정을 완료하세요. 기반 iOS와 Android 동작과 함께 위젯 수명 주기를 테스트하세요.

플랫폼 가이드 읽기

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

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

플랫폼 가이드 읽기

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

지속적으로 관리하는 소스 사본에서 호스트 페이지의 PNG 에셋과 ARB 로컬라이제이션 파일을 맞춤 설정하세요. 예를 들어 livekit_en.arb의 문구를 변경하고 flutter gen-l10n을 실행해 현지화 코드를 다시 생성할 수 있습니다. ComponentTheme과 LiveKit 탐색 옵저버는 연결된 상태로 유지하세요. TUILiveRoomAnchorOverlay는 자체 오버레이와 플로팅 창 동작을 관리하므로 Container나 Stack 안에 중첩하지 말고 독립된 라우트로 열어야 합니다.

맞춤 설정 가이드 보기

Flutter Live 통합 지원

통합 관련 질문

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

개발자 문서 보기

애플리케이션 상담

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

판매원에게 연락하기

Flutter 앱에 라이브 스트리밍 도입

Flutter 라이브 스트리밍 UI Kit와 플랫폼 가이드로 크리에이터와 시청자를 연결하세요.

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

Flutter 라이브 스트리밍 UI Kit

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

컴포넌트 참고 자료

통합 가이드

예제 및 소스

Flutter에서 라이브 상품 시연

Flutter에서 라이브 이벤트 시청

Flutter 라이브 스트리밍 기능

라이브 시작

사람들을 하나로 연결

내 것으로 만들기

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

크리에이터가 시작할 공간 제공

시청 경험을 앱의 일부로 만드세요

라이브 콘텐츠 탐색의 문을 여세요

Flutter Live UI Kit 맞춤 설정

브랜드 시각 아이덴티티

댓글 및 콘텐츠

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

앱 만들기

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

첫 번째 룸에 연결

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

Flutter Live UI Kit으로 무엇을 구축할 수 있나요?

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

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

Flutter 라이브 스트리밍 UI Kit 사용자를 어떻게 인증하나요?

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

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

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

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

Flutter Live 통합 지원

통합 관련 질문

애플리케이션 상담

Flutter 앱에 라이브 스트리밍 도입