Start Broadcasting and Listen

적용 시나리오

우리의 앵커 라이브 방송 시작시청자 시청 기능은 주로 음성 채팅룸의 핵심 컨트롤(SeatGridView)에 의존합니다. 이 핵심 컨트롤은 음성 채팅룸 열기/닫기, 채팅룸 내 시트 관리(발언권 신청, 발언 요청, 시트 이동, 발언권 강제회수) 등과 같은 다양한 API를 제공합니다.
빠른 통합을 통해 음성 채팅룸 UIKit을 통합한 후, UI 스타일이 원하는 스타일이 아닌 경우, 핵심 컨트롤을 사용하여 30분 내에 음성 채팅룸의 주요 프로세스를 빠르게 구축할 수 있습니다. 그 다음, 그 위에 자체의 비즈니스 UI 뷰를 추가할 수 있습니다.

개발 환경 요구사항

Android 5.0(SDK API Level 21) 및 그 이상 버전.
Gradle 7.0 및 그 이상 버전.
Android 5.0 및 그 이상 버전의 모바일 장치.
환경 구성 또는 컴파일 중 문제가 발생하면 자주 묻는 질문을 참조하십시오.

단계 1: 서비스 활성화

서비스 활성화(TUILiveKit)를 참조하여 체험판을 수령하거나 유료판을 활성화하십시오.

단계 2: 프로젝트 구성

1. app 디렉토리에서 build.gradle.kts(또는 build.gradle) 파일을 찾고 다음 코드를 추가하여 SeatGridView 컴포넌트에 대한 의존성을 추가하십시오:
build.gradle.kts
build.gradle
api("io.trtc.uikit:voice-room-core:latest.release")
api 'io.trtc.uikit:voice-room-core:latest.release'
2. SDK 내부에서 Java의 리플렉션 특성을 사용하기 때문에 SDK 내 일부 클래스는 난독화 목록에서 제외해야 합니다. 따라서 proguard-rules.pro 파일에 다음 코드를 추가하십시오:
-keep class com.tencent.** { *; }
-keep class com.trtc.uikit.livekit.voiceroomcore.** { *; }
3. app 디렉토리에서 AndroidManifest.xml 파일을 찾고, application 노드에 tools:replace="android:allowBackup" 및 android:allowBackup="false"를 추가하여 컴포넌트 내 설정을 덮어쓰고 자체의 설정을 사용합니다.
// app/src/main/AndroidManifest.xml
<application
...
// 아래 설정을 추가하여 의존하는 sdk 내 구성 덮어쓰기
android:allowBackup="false"
tools:replace="android:allowBackup">

단계 3: 로그인

프로젝트에 다음 코드를 추가하십시오. 이 코드는 TUICore의 관련 인터페이스를 호출하여 TUI 컴포넌트의 로그인을 완료하는 역할을 합니다. 이 단계는 매우 중요합니다. 성공적으로 로그인해야만 SeatGridView가 제공하는 다양한 기능을 정상적으로 사용할 수 있습니다.
Kotlin
Java
//로그인
TUILogin.login(applicationContext,
1400000001, // 단계 1에서 얻은 SDKAppID로 교체하세요
"denny", // 본인의 UserID로 교체하세요
"xxxxxxxxxxx", // 콘솔에서 UserSig를 계산하여 이 위치에 입력하세요
object : TUICallback() {
override fun onSuccess() {
Log.i(TAG, "login success")
}

override fun onError(errorCode: Int, errorMessage: String) {
Log.e(TAG, "login failed, errorCode: $errorCode msg:$errorMessage")
}
})
//로그인
TUILogin.login(context,
1400000001, // 단계 1에서 얻은 SDKAppID로 교체하세요
"denny", // 본인의 UserID로 교체하세요
"xxxxxxxxxxx", // 콘솔에서 UserSig를 계산하여 이 위치에 입력하세요
new TUICallback() {
@Override
public void onSuccess() {
Log.i(TAG, "login success");
}

@Override
public void onError(int errorCode, String errorMessage) {
Log.e(TAG, "login failed, errorCode: " + errorCode + " msg:" + errorMessage);
}
});
매개변수 설명
여기에는 login 함수에서 필요한 몇 가지 중요한 매개변수를 자세히 설명합니다:
매개변수
유형
설명
SDKAppID
int
단계 1의 마지막 단계에서 이미 획득되었으므로 여기서는 자세히 설명하지 않습니다.
UserID
String
현재 사용자의 ID, 문자열 유형은 영문자(a-z 및 A-Z), 숫자(0-9), 하이픈 및 밑줄만 포함할 수 있습니다.
userSig
String
단계 1의 3번째 단계에서 획득한 SecretKey를 사용하여 SDKAppID, UserID 등의 정보를 암호화하면 UserSig를 얻을 수 있습니다. 이것은 Tencent Cloud가 현재 사용자의 TRTC 서비스 이용 가능 여부를 확인하기 위한 인증용 티켓입니다. 콘솔의 을 통해 임시로 사용할 수 있는 UserSig를 생성할 수 있습니다. 자세한 정보는 UserSig 계산 및 사용 방법을 참조하십시오.
설명:
개발 환경: 로컬 개발 디버깅 단계에서는 로컬 GenerateTestUserSig.genTestSig 함수로 userSig를 생성할 수 있습니다. 이 방법에서는 SDKSecretKey가 쉽게 디컴파일을 통해 역방향으로 해독될 위험이 있습니다. 암호키가 유출되면 공격자는 당신의 Tencent Cloud 트래픽을 도용할 수 있습니다.
운영 환경: 프로젝트를 배포 및 출시하려면 서버 측 UserSig 생성 방식을 채택하십시오.

단계 4: 핵심 컨트롤을 사용하여 라이브 방송 기능 구현

핵심 컨트롤 생성

핵심 컨트롤 생성: Activity에서 Java 코드 또는 XML 방식을 통해 핵심 컨트롤을 로드할 수 있습니다. 여기서 코드 방식의 예시는 다음과 같습니다(XML 방식도 유사합니다):
kotlin
java
val seatGridView = SeatGridView(this)
SeatGridView seatGridView = new SeatGridView(this);

앵커 라이브룸 열기 및 시청자 라이브룸 입장

앵커 라이브룸 열기: 라이브룸을 열고 로컬 마이크 캡쳐를 켭니다.
kotlin
java
val roomInfo = TUIRoomDefine.RoomInfo()
roomInfo.roomId = "roomId_123456"
seatGridView.startVoiceRoom(roomInfo, null)

seatGridView.startMicrophone(null)
TUIRoomDefine.RoomInfo roomInfo = new TUIRoomDefine.RoomInfo();
roomInfo.roomId = "roomId_123456";
seatGridView.startVoiceRoom(roomInfo, null);

seatGridView.startMicrophone(null);
시청자 라이브룸 입장.
kotlin
java
seatGridView.joinVoiceRoom("roomId_123456", null)
seatGridView.joinVoiceRoom("roomId_123456", null);
앵커가 라이브룸을 열고 라이브 방송 시작
시청자가 라이브룸에 입장하여 방송 시청








시트 관리

시트 관리 기능을 구현하려면, 시트 관리 문서를 참조하세요.

시트 목록 레이아웃 설정

다음 방법을 통해 시트 목록 레이아웃을 빠르게 설정할 수 있습니다.
kotlin
java
// 그리드 레이아웃 설정
seatGirdView.setLayoutMode(VoiceRoomDefine.LayoutMode.GRID, null)

// 요소 레이아웃 설정
seatGirdView.setLayoutMode(VoiceRoomDefine.LayoutMode.FOCUS, null)

// 수직 레이아웃 설정
seatGirdView.setLayoutMode(VoiceRoomDefine.LayoutMode.VERTICAL, null)

// 사용자 정의 레이아웃 설정
val layoutConfig = VoiceRoomDefine.SeatViewLayoutConfig().apply {
rowConfigs = ArrayList()
rowSpacing = dp2px(10); // 행 간 거리
}
// 제1행 구성
val rowConfig1 = VoiceRoomDefine.SeatViewLayoutRowConfig().apply {
count = 3 // 첫 번째에 표시되는 수량
seatSize = VoiceRoomDefine.Size(dp2px(50), dp2px(50)) // 제1행에 표시되는 각 시트 뷰 크기
seatSpacing = dp2px(10) // 제1행의 각 시트 간의 수평 거리
alignment = VoiceRoomDefine.SeatViewLayoutRowAlignment.CENTER // 제1행 시트의 정렬 방식
}
layoutConfig.rowConfigs.add(rowConfig1)
// 제2행 구성
val rowConfig2 = VoiceRoomDefine.SeatViewLayoutRowConfig().apply {
count = 3 // 제2행에 표시되는 수량
seatSize = VoiceRoomDefine.Size(dp2px(50), dp2px(50)) // 제2행에 표시되는 각 시트 크기
seatSpacing = dp2px(10) // 제2행의 각 시트 간 수평 거리
alignment = VoiceRoomDefine.SeatViewLayoutRowAlignment.SPACE_AROUND // 제2행 시트의 정렬 방식
}
layoutConfig.rowConfigs.add(rowConfig2)
seatGirdView.setLayoutMode(VoiceRoomDefine.LayoutMode.FREE, layoutConfig)
// 그리드 레이아웃 설정
seatGirdView.setLayoutMode(VoiceRoomDefine.LayoutMode.GRID, null)

// 요소 레이아웃 설정
seatGirdView.setLayoutMode(VoiceRoomDefine.LayoutMode.FOCUS, null)

// 수직 레이아웃 설정
seatGirdView.setLayoutMode(VoiceRoomDefine.LayoutMode.VERTICAL, null)

// 자유 레이아웃 설정
VoiceRoomDefine.SeatViewLayoutConfig layoutConfig = new VoiceRoomDefine.SeatViewLayoutConfig();
layoutConfig.rowConfigs = new ArrayList<>();
layoutConfig.rowSpacing = dp2px(10); // 각 행 간 거리
// 제1행 구성
VoiceRoomDefine.SeatViewLayoutRowConfig rowConfig1 = new VoiceRoomDefine.SeatViewLayoutRowConfig();
rowConfig1.count = 3; // 제1행에 표시되는 수량
rowConfig1.seatSize = new VoiceRoomDefine.Size(dp2px(50),dp2px(50)); // 제1행에 표시되는 각 시트 뷰 크기
rowConfig1.seatSpacing = dp2px(10); // 제1행의 각 시트 간 수평 거리
rowConfig1.alignment = VoiceRoomDefine.SeatViewLayoutRowAlignment.CENTER; // 제1행 시트의 정렬 방식
layoutConfig.rowConfigs.add(rowConfig1);
// 제2행 구성
VoiceRoomDefine.SeatViewLayoutRowConfig rowConfig2 = new VoiceRoomDefine.SeatViewLayoutRowConfig();
rowConfig2.count = 3; // 제2행에 표시되는 수량
rowConfig2.seatSize = new VoiceRoomDefine.Size(dp2px(50),dp2px(50)); // 제2행에 표시되는 각 시트 뷰 크기
rowConfig1.seatSpacing = dp2px(10); // 제2행의 각 시트 간 수평 거리
rowConfig2.alignment = VoiceRoomDefine.SeatViewLayoutRowAlignment.SPACE_AROUND; // 제2행 시트의 정렬 방식
layoutConfig.rowConfigs.add(rowConfig2);
seatGirdView.setLayoutMode(VoiceRoomDefine.LayoutMode.FREE, layoutConfig);
설명:
사용자 정의 레이아웃의 매개변수 설정은 SeatViewLayoutRowConfig에서 확인할 수 있으며, 그 중 정렬 방식 alignment는 SeatViewLayoutRowAlignment에서 설명된 내용을 참조하면 됩니다. 정렬 방식 효과는 사용자 정의 레이아웃 정렬 방식 개략도에서 확인할 수 있습니다.
그리드 레이아웃
요소 레이아웃
수직 레이아웃
사용자 정의 레이아웃

















사용자 정의 레이아웃 정렬 방식 개략도:



사용자 정의 시트 뷰

만약 기본 UI가 만족스럽지 않아 사용자 정의 UI를 원하신다면, 아래 방법을 통해 시트 레이아웃을 빠르게 설정하고, 시트 뷰 UI를 완전히 사용자 정의할 수 있습니다.
kotlin
java
val adapter = object : VoiceRoomDefine.SeatViewAdapter {
override fun createSeatView(seatGridView: SeatGridView, seatInfo: TUIRoomDefine.SeatInfo): View {
return TestSeatInfoView(context, seatGridView, seatInfo)
}

override fun updateSeatView(seatGridView: SeatGridView,seatInfo: TUIRoomDefine.SeatInfo, seatView: View) {
(seatView as TestSeatInfoView).updateSeatView(seatGridView, seatInfo)
}

override fun updateUserVolume(seatGridView: SeatGridView, volume: Int, customSeatView: View) {
(customSeatView as TestSeatInfoView).updateUserVolume(seatGridView, volume)
}
}

seatGridView.setSeatViewAdapter(adapter)

class TestSeatInfoView constructor(context: Context, seatGridView: SeatGridView, seatInfo: TUIRoomDefine.SeatInfo) : FrameLayout(context) {
init {
initView() //view 초기화
}

fun updateSeatView(seatGridView: SeatGridView, seatInfo: TUIRoomDefine.SeatInfo) {
updateView(seatInfo) //사용자 정의 시트 뷰 UI 업데이트
}

fun updateUserVolume(seatGridView: SeatGridView, volume: Int) {
updateUserVolume(volume) //볼륨 변화 UI 업데이트
}
}
VoiceRoomDefine.SeatViewAdapter adapter = new VoiceRoomDefine.SeatViewAdapter() {
@Override
public View createSeatView(SeatGridView seatGridView, TUIRoomDefine.SeatInfo seatInfo) {
return new TestSeatInfoView(getApplicationContext(), seatGridView, seatInfo);
}

@Override
public void updateSeatView(SeatGridView seatGridView, TUIRoomDefine.SeatInfo seatInfo,
View customSeatView) {
((TestSeatInfoView) customSeatView).updateSeatView(seatGridView, seatInfo);
}

@Override
public void updateUserVolume(SeatGridView seatGridView, int volume, View customSeatView) {
((TestSeatInfoView) customSeatView).updateUserVolume(seatGridView, volume);
}
};
seatGridView.setSeatViewAdapter(adapter);

public class TestSeatInfoView extends FrameLayout {

public TestSeatInfoView(@NonNull Context context, SeatGridView seatGridView, TUIRoomDefine.SeatInfo seatInfo) {
super(context);
initView();
}

public void updateSeatView(SeatGridView seatGridView, TUIRoomDefine.SeatInfo seatInfo) {
updateView(seatInfo);
}

public void updateUserVolume(SeatGridView seatGridView, int volume) {
updateUserVolume(volume);
}
}
기본 시트 뷰
사용자 정의 시트 뷰 예시