tencent cloud

Tencent Real-Time Communication

소식 및 공지 사항
제품 업데이트
Tencent Cloud 오디오/비디오 단말 SDK 재생 업그레이드 및 권한 부여 인증 추가
TRTC 월간 구독 패키지 출시 관련 안내
제품 소개
제품 개요
기본 개념
제품 기능
제품 장점
응용 시나리오
성능 데이터
구매 가이드
Billing Overview
무료 시간 안내
Monthly subscription
Pay-as-you-go
TRTC Overdue and Suspension Policy
과금 FAQ
Refund Instructions
신규 사용자 가이드
Demo 체험
Call
개요(TUICallKit)
Activate the Service
Run Demo
빠른 통합(TUICallKit)
오프라인 푸시
Conversational Chat
온클라우드 녹화(TUICallKit)
AI Noise Reduction
UI 사용자 정의
Calls integration to Chat
Additional Features
No UI Integration
Server APIs
Client APIs
Solution
ErrorCode
릴리스 노트
FAQs
라이브 스트리밍
Billing of Video Live Component
Overview
Activating the Service (TUILiveKit)
Demo 실행
No UI Integration
UI Customization
Live Broadcast Monitoring
Video Live Streaming
Voice Chat Room
Advanced Features
Client APIs
Server APIs
Error Codes
Release Notes
FAQs
RTC Engine
Activate Service
SDK 다운로드
API 코드 예시
Usage Guidelines
API 클라이언트 API
고급 기능
RTC RESTFUL API
History
Introduction
API Category
Room Management APIs
Stream mixing and relay APIs
On-cloud recording APIs
Data Monitoring APIs
Pull stream Relay Related interface
Web Record APIs
AI Service APIs
Cloud Slicing APIs
Cloud Moderation APIs
Making API Requests
Call Quality Monitoring APIs
Usage Statistics APIs
Data Types
Appendix
Error Codes
콘솔 가이드
애플리케이션 관리
사용량 통계
모니터링 대시보드
개발 보조
Solution
Real-Time Chorus
FAQs
과금 개요
기능 관련
UserSig 관련
방화벽 제한 처리
설치 패키지 용량 축소 관련 질문
Andriod 및 iOS 관련
Web 관련
Flutter 관련
Electron 관련
TRTCCalling Web 관련
멀티미디어 품질 관련
기타 질문
Protocols and Policies
컴플라이언스 인증
보안 백서
정보 보안에 관한 참고 사항
Service Level Agreement
Apple Privacy Policy: PrivacyInfo.xcprivacy
TRTC 정책
개인 정보 보호 정책
데이터 처리 및 보안 계약
용어집

Flutter

PDF
포커스 모드
폰트 크기
마지막 업데이트 시간: 2025-05-12 11:26:38

환경 준비

플랫폼
버전
Flutter
Flutter 3.22.0 및 그 이상 버전.
Dart 3.4.0 또는 그 이상 버전.
Android
Android Studio 3.5 및 그 이상 버전.
Android 5.0 및 그 이상 버전의 Android 장치.
iOS
Xcode 13.0 및 그 이상 버전.
프로젝트에 유효한 개발자 서명이 설정되어 있는지 확인하십시오.

단계 1: 서비스 활성화

Tencent Cloud에서 제공하는 오디오/비디오 서비스를 사용하기 전에 콘솔로 이동하여 애플리케이션에 대한 오디오/비디오 서비스를 활성화해야 합니다. 구체적인 절차는 서비스 활성화(TUILiveKit)를 참조하세요.

단계 2: TUILiveKit 컴포넌트 가져오기

프로젝트의 루트 디렉토리에서, 명령어를 사용하여 다음 명령어를 실행하여 tencent_live_uikit 플러그인을 설치하십시오.
flutter pub add tencent_live_uikit

단계 3: 프로젝트 구성 완료

Android
iOS
1. 만약 Android 플랫폼에서 컴파일 및 실행을 해야 한다면, SDK 내부에서 Java의 리플렉션 특성을 사용하기 때문에 SDK의 일부 클래스를 난독화 목록에서 제외해야 합니다.
먼저, android/app/build.gradle 파일에서 구성하고 난독화 규칙을 활성화해야 합니다:
android {
......
buildTypes {
release {
......
minifyEnabled true
proguardFiles getDefaultProguardFile('proguard-android.txt'), 'proguard-rules.pro'
}
}
}
프로젝트의 android/app 디렉토리 아래에 proguard-rules.pro 파일을 생성하고, proguard-rules.pro 파일에 다음 코드를 추가합니다:
-keep class com.tencent.** { *; }
2. 프로젝트의 android/app/build.gradle 파일에서 Multidex 지원을 구성하고 활성화합니다.
android {
......
defaultConfig {
...... multiDexEnabled true }
}
1. Xcode을 사용하여 프로젝트를 열고, 프로젝트 > Building Settings > Deployment을 선택한 후, Strip StyleNon-Global Symbols로 설정하여 필요한 전역 심볼 정보를 보존합니다.
2. 선택 사항 iOS 시뮬레이터에서 디버깅이 필요하고 사용하는 Mac 컴퓨터가 Intel 칩을 사용하는 경우, 프로젝트의 ios/Podfile 파일에 다음 코드를 추가해야 합니다:
target 'xxxx' do
......
end
......

post_install do |installer|
installer.pods_project.targets.each do |target|
flutter_additional_ios_build_settings(target)
target.build_configurations.each do |config|
config.build_settings['VALID_ARCHS'] = 'arm64 arm64e x86_64'
config.build_settings['VALID_ARCHS[sdk=iphonesimulator*]'] = 'x86_64'
end
end
end
3. TUILiveKit이 iOS의 오디오 및 비디오 기능을 사용하기 때문에 마이크와 카메라 사용 권한을 부여해야 합니다.
권한 부여 방법: iOS 프로젝트의 Info.plist의 최상위 <dict> 디렉토리 아래에 다음 두 항목을 추가하여, 각각 마이크와 카메라 권한 요청 시 시스템 팝업 대화상자의 메시지를 설정하십시오.
<key>NSCameraUsageDescription</key>
<string>CallingApp이 카메라 권한을 필요로 합니다. 허용하면 녹화된 영상에 화면이 표시됩니다.</string>
<key>NSMicrophoneUsageDescription</key>
<string>CallingApp이 마이크 권한을 필요로 합니다. 허용하면 녹화된 영상에 소리가 포함됩니다.</string>
위 항목을 추가한 후, ios/Podfile에서 다음 전처리 정의를 추가하여 카메라 및 마이크 권한을 활성화하십시오.
post_install do |installer|
installer.pods_project.targets.each do |target|
flutter_additional_ios_build_settings(target)
target.build_configurations.each do |config|
config.build_settings['GCC_PREPROCESSOR_DEFINITIONS'] ||= [
'$(inherited)',
'PERMISSION_MICROPHONE=1',
'PERMISSION_CAMERA=1',
]
end
end
end

단계 4: navigatorObservers와 localizationsDelegates 설정

Flutter 애플리케이션 프레임워크의 navigatorObservers에 TUICallKit.navigatorObserver를 추가하고, localizationsDelegates에 LiveKitLocalizations.localizationsDelegates를 추가합니다. MateriaApp 프레임워크를 예로 들어, 코드는 다음과 같습니다:
import 'package:tencent_live_uikit/tencent_live_uikit.dart';

......

class XXX extends StatelessWidget {
const XXX({super.key});

@override
Widget build(BuildContext context) {
return MaterialApp(
navigatorObservers: [TUILiveKitNavigatorObserver.instance],
localizationsDelegates: [...LiveKitLocalizations.localizationsDelegates],
......
);
}
}

단계 5: TUILiveKit 컴포넌트 로그인

TUILiveKit 컴포넌트의 각 기능을 호출하기 전에, 먼저 TUI 컴포넌트 로그인을 수행해야 합니다. 프로젝트에서, 비즈니스 로그인 시나리오 또는 App의 첫 시작 Activity에 아래 로그인 코드를 추가하는 것을 권장합니다. 이 코드는 TUICore의 관련 인터페이스를 호출하여 TUI 컴포넌트 로그인을 완료하는 데 사용됩니다. 이 단계는 매우 중요합니다. 로그인 성공 후에만 TUILiveKit의 각 기능을 정상적으로 사용할 수 있으므로, 관련 매개변수가 올바르게 구성되었는지 꼼꼼히 확인해 주십시오:
import 'package:tencent_cloud_uikit_core/tencent_cloud_uikit_core.dart';
......

login() async { await TUILogin.instance.login( 1400000001, // 단계 1에서 획득한 SDKAppID로 교체하세요
"denny", // 사용자의 UserID로 교체하세요
"xxxxxxxxxxx", // 콘솔에서 UserSig를 계산하여 이 위치에 입력할 수 있습니다 TUICallback( onError: (code, message) { print("TUILogin login fail, {code:$code, message:$message}"); }, onSuccess: () async { print("TUILogin login success"); }, ), ); }
매개변수 설명 여기서는 login 함수에 필요하는 몇 가지 주요 매개변수에 대해 자세하게 설명합니다:
SDKAppID: 서비스 활성화에서 이미 획득한 내용으로 여기서는 자세히 설명하지 않습니다.
UserID: 현재 사용자의 ID, 문자열 형식으로 영문자(a-z 및 A-Z), 숫자(0-9), 하이픈(-) 및 밑줄(_)만 포함할 수 있습니다.
UserSig: 서비스 활성화에서 획득한 SDKSecretKey를 사용하여 SDKAppID, UserID 등의 정보를 암호화하여 UserSig를 얻을 수 있습니다. 이것은 Tencent Cloud가 현재 사용자의 TRTC 서비스 이용 가능 여부를 확인하기 위한 인증용 티켓입니다. 콘솔 왼쪽 프로젝트 메뉴의 UserSig 툴을 통해 임시로 사용할 수 있는 UserSig를 생성할 수 있습니다.



더 많은 정보는 UserSig 계산 및 사용 방법을 참조하십시오.
주의:
이 단계는 현재 가장 많은 개발자 피드백이 가장 많은 단계로, 일반적인 문제는 다음과 같습니다:
SDKAppID 설정 오류.
userSig가 암호키(Secretkey)로 잘못 구성되었습니다. userSig는 SecretKey를 사용하여 SDKAppID, userID 및 만료 시간 등의 정보를 암호화하여 얻은 것으로, SecretKey를 직접 userSig로 구성하는 것이 아닙니다.
userSig가 "1", "123", "111" 등 간단한 문자열로 설정되었습니다. TRTC는 동일한 UserID의 다중 로그인을 지원하지 않으므로, 여러 사람이 협업할 때 이와 같은 userID는 동료에 의해 쉽게 사용되어 로그인 실패를 유발할 수 있습니다. 따라서 디버깅 시 인식이 용이한 userID를 설정하는 것을 권장합니다.
Github의 예제 코드에서 genTestUserSig 함수를 사용해 로컬에서 userSig를 계산하는 것은 현재의 통합 과정을 빠르게 진행하기 위한 것입니다. 하지만 이 방법은 SecretKey를 앱의 코드에 노출시키게 되어 향후 업그레이드 및 SecretKey 보호에 불리합니다. 따라서 userSig 계산 로직을 서버 측에 배치하고, App이 매번 TUILiveKit 컴포넌트를 사용할 때마다 서버에 실시간으로 계산된 userSig를 요청할 것을 강력히 권장합니다.

단계 6: 라이브 방송 미리보기 화면으로 이동

주의:
반드시 단계 5를 완료하여 로그인 상태여야 합니다. TUILogin.login에 성공해야만 정상적으로 라이브 방송 미리보기 화면으로 진입할 수 있습니다.
라이브 방송을 시작해야 하는 부분(특정 비즈니스에 따라 결정됨, 해당 버튼의 클릭 이벤트 내에서 실행)에서 아래와 같은 작업을 수행하여 호스트 방송 페이지를 호출합니다:
import 'package:tencent_live_uikit/tencent_live_uikit.dart';
......

Navigator.push(context, MaterialPageRoute( builder: (context) { return TUILiveRoomAnchorWidget( roomId: LiveIdentityGenerator.instance.generateId(AppStore.userId, RoomType.live)); }, ));


비디오 라이브 방송 미리보기 화면


바디오 라이브 방송 중 화면

단계 7: 룸 리스트 불러오기

주의:
반드시 단계 5를 완료하여 로그인 상태여야 합니다. TUILogin.login에 성공해야만 정상적으로 라이브 방송 미리보기 화면으로 진입할 수 있습니다.
귀하의 widget에서 TUILiveKit의 LiveListWidget 컴포넌트를 로드하여 룸 리스트를 표시할 수 있습니다.
Java
import 'package:tencent_live_uikit/tencent_live_uikit.dart';
......


return Scaffold( body: SizedBox( width: _screenWidth, height: double.infinity, child: LiveListWidget(), // 자신의 widget 트리에 TUILiveKit의 룸 리스트 컴포넌트인 LiveListWidget 추가 ), );



단계 8: 시청자가 라이브룸에 들어가기

단계 7 의 룸 리스트 화면에서 원하는 룸을 클릭하면 자동으로 라이브룸에 들어갑니다.

비디오 라이브룸


비디오 라이브룸

교류 및 피드백

도움말 및 지원

문제 해결에 도움이 되었나요?

피드백