다음을 위해 설계됨: FLUTTER
Flutter 화상 회의 UI Kit
Flutter 모바일 앱에 완성된 회의실을 연결하세요. Flutter 화상 회의 UI Kit로 iOS와 Android 사용자를 연결하세요.
개발자 리소스
Flutter 화상 회의 UI Kit 문서 및 예제
FLUTTER ROOM 기능
앱을 위한 룸
룸 수명 주기
- 룸 생성 및 참여
- 퇴장 및 종료 처리
실시간 대화
- 참가자 영상 연결
- 카메라 및 마이크 제어
참가자 경험
- 룸 구성원 표시
- 룸 상태 변경 반영
앱 신원
- 자체 사용자 ID 연결
- 서버 발급 UserSig로 인증
플랫폼 통합
- Flutter 모바일 앱
- 네이티브 또는 브라우저 권한 준수
제품 흐름
- 룸을 탐색에 연결
- 비즈니스 데이터를 앱에서 관리
Flutter 회의 컴포넌트 살펴보기
룸 경험과 그 기반 코드를 살펴보세요.
모두를 위한 자리
Flutter 화상 회의 UI Kit로 회의 화면을 마운트하세요. 앱이 인증된 사용자와 룸 ID를 제공합니다.
문서 읽기import 'package:flutter/material.dart';
import 'package:tencent_conference_uikit/tencent_conference_uikit.dart';
// After login, inside your widget with a BuildContext.
final behavior = RoomBehavior.create(
CreateRoomOptions(roomName: 'Workshop room'),
);
Navigator.of(context).push(MaterialPageRoute(
builder: (_) => RoomMainWidget(
roomID: roomID, behavior: behavior,
config: const ConnectConfig(
autoEnableCamera: false,
autoEnableMicrophone: false, autoEnableSpeaker: true,
),
),
));앱 신원 연결
앱 ID, 사용자 ID와 서버 발급 UserSig로 로그인한 뒤 성공하면 룸에 입장하세요.
문서 읽기import 'package:atomic_x_core/atomicxcore.dart';
final result = await LoginStore.shared.login(
sdkAppID: sdkAppID, userID: userID, userSig: userSig,
);
if (result.isSuccess) {
// Open the room after successful authentication.
}참가자 연결
기존 룸 ID로 사용자를 같은 세션에 연결하세요.
문서 읽기import 'package:flutter/material.dart';
import 'package:tencent_conference_uikit/tencent_conference_uikit.dart';
// After login, inside your widget.
Navigator.of(context).push(MaterialPageRoute(
builder: (_) => RoomMainWidget(
roomID: roomID, behavior: const RoomBehavior.enter(),
config: const ConnectConfig(
autoEnableCamera: false,
autoEnableMicrophone: false, autoEnableSpeaker: true,
),
),
));시작하기
첫 룸 구현하기
- 01
- 02
- 03
flutter pub add tencent_conference_uikitimport 'package:flutter/material.dart';
import 'package:tencent_conference_uikit/tencent_conference_uikit.dart';
// After login, inside your widget with a BuildContext.
final behavior = RoomBehavior.create(
CreateRoomOptions(roomName: 'Workshop room'),
);
Navigator.of(context).push(MaterialPageRoute(
builder: (_) => RoomMainWidget(
roomID: roomID, behavior: behavior,
config: const ConnectConfig(
autoEnableCamera: false,
autoEnableMicrophone: false, autoEnableSpeaker: true,
),
),
));Flutter 화상 회의 UI Kit 자주 묻는 질문
Flutter 화상 회의 UI Kit에는 무엇이 포함되나요?
Flutter 화상 회의 UI Kit는 입장, 영상 화면과 참가자 제어가 포함된 회의 인터페이스를 제공합니다. 앱이 신원과 비즈니스 흐름을 제공합니다.
Flutter 화상 회의 UI Kit는 어떻게 통합하나요?
iOS·Android 호스트 프로젝트와 pubspec 의존성을 구성하세요. UI Kit에는 ComponentTheme, 현지화 delegates와 RoomNavigatorObserver가 필요합니다. 이 페이지는 모바일 앱 대상입니다.
Flutter 화상 회의 UI Kit에서 사용자는 어떻게 로그인하나요?
SDKAppID, 사용자 ID와 서버에서 생성한 UserSig를 사용하세요. 앱 비밀 키를 브라우저나 모바일 코드에 넣지 말고 입장 전에 인증 실패를 처리하세요.
회의 경험을 맞춤 설정할 수 있나요?
문서화된 컴포넌트와 구성을 제품에 맞추세요. 네이티브 UI Kit 소스는 룸 화면과 툴바를 제공합니다. 지원 옵션은 플랫폼 가이드를 확인하세요.
Room 요금은 어떻게 책정되나요?
Room 패키지 기능과 오디오·비디오 사용량에 따라 비용이 결정됩니다. 포함 기능과 제한은 현재 Conference 요금 페이지를 확인하세요.
UI Kit와 SDK 중 무엇을 선택해야 하나요?
자체 룸 인터페이스와 상태 처리가 필요하면 SDK를, 통합·수정 가능한 완성된 회의 화면을 원하면 UI Kit를 선택하세요.
Dart로 Flutter 화상 회의 UI Kit를 어떻게 통합하나요?
문서에 명시된 Flutter 패키지를 설치하고 각 대상의 네이티브 프로젝트 설정을 완료하세요. 기반 iOS와 Android 동작과 함께 위젯 수명 주기를 테스트하세요.
앱 출시 전에 Flutter 화상 회의 UI Kit를 어떻게 테스트하나요?
인증된 입장, 참가자 변경과 지원되는 카메라·마이크·퇴장 제어를 테스트하세요.
Flutter 화상 회의 UI Kit 인터페이스를 어떻게 맞춤 설정하나요?
TUIKit_Flutter의 room 패키지를 fork해 RoomMainWidget과 하위 위젯을 소스 수준에서 수정하세요. 예를 들어 RoomBottomBarWidget의 버튼 순서를 조정하고 tencent_conference_uikit 의존성이 자체 fork와 브랜치를 가리키도록 설정할 수 있습니다. .pub-cache 내부의 수정은 의존성 관리 작업으로 덮어써질 수 있으므로 여기에 의존하지 마세요. 각 컨트롤의 룸 동작을 유지하고 네이티브 권한 및 룸 탐색 설정도 보존하세요.

