문서 개요/
Live/
UIKit/
Flutter/
Get Started/
Video Live Integration/

Video Live Integration

환경 준비

플랫폼
버전
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 Style을 Non-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 의 룸 리스트 화면에서 원하는 룸을 클릭하면 자동으로 라이브룸에 들어갑니다.

비디오 라이브룸


비디오 라이브룸

교류 및 피드백
WebRTC Trtc Logo
Copyright © 2013-2025 Tencent RTC. All Rights Reserved.
  1. 개인정보 처리방침
  3. 법적
  5. 쿠키 정책
  7. Tencent Cloud