文档概览/
Live/
UIKit/
iOS/
Voice Room Features/
Start Broadcasting and Listen/

Start Broadcasting and Listen

适用场景

我们的主播开播和观众观看功能主要依赖于我们语音聊天室的核心控件(SeatGridView)，该核心控件提供了开启语音聊天室、关闭语音聊天室，直播间内麦位管理，如申请上麦，邀请上麦，移动麦位，踢人下麦等丰富的 API。
当您通过 快速接入 接入语音聊天室 UIKit 后，如果 UI 风格和您的理想中 UI 风格有出入，您可以使用我们的核心控件半小时内快速搭建语音聊天室的主流程。然后在其之上添加您自己的业务 UI 视图。

环境准备

Xcode 15 及以上。
iOS 13.0 及以上。
CocoaPods 环境安装，点击查看。
如果您的接入和使用中遇到问题，请参见 常见问题。

步骤一：开通服务

请参见 开通服务（TUILiveKit），领取体验版或者开通付费版。

步骤二：导入 SeatGridView 组件

使用 CocoaPods 导入组件，如果您遇到问题，请先参见 环境准备。导入组件具体骤如下：
1. 请在您的 Podfile 文件中添加 pod 'SeatGridView' 依赖。
Swift
target 'xxxx' do
  ...
  ...
  pod 'SeatGridView'
end
如果您没有Podfile 文件，首先终端cd 到xxxx.xcodeproj目录，然后通过以下命令创建：
pod init
2. 在终端中，首先cd到Podfile目录下，然后执行以下命令，安装组件。
pod install
如果无法安装 SeatGridView 最新版本，可以先删除Podfile.lock和Pods。然后执行以下命令更新本地的 CocoaPods 仓库列表。
pod repo update
之后执行以下命令，更新组件库的 Pod 版本。
pod update
3. 可以先编译运行一下，如果遇到问题，请参见 常见问题。问题如果依然无法解决，可以先去跑一下我们的 Example工 程。您在接入和使用过程中遇到的任何问题，欢迎给我们 反馈。

步骤三：登录

在您的项目中添加如下代码，它的作用是通过调用 TUICore 中的相关接口完成 TUI 组件的登录。这一步骤至关重要，只有在成功登录之后，您才能正常使用 SeatGridView 提供的各项功能。
swift
//
//  AppDelegate.swift
//

import TUICore
func application(_ application: UIApplication, didFinishLaunchingWithOptions launchOptions: [UIApplication.LaunchOptionsKey: Any]?) -> Bool {
    
    TUILogin.login(1400000001,               // 请替换为步骤一取到的 SDKAppID
            userID: "denny",                 // 请替换为您的 UserID
            userSig: "xxxxxxxxxxx") {        // 您可以在控制台中计算一个 UserSig 并填在这个位置
      print("login success")
    } fail: { (code, message) in
      print("login failed, code: \(code), error: \(message ?? "nil")")
    }
    
    return true
}
参数说明
这里详细介绍一下 login 函数中所需要用到的几个关键参数：
参数
类型
说明
SDKAppID
int
在步骤一中的最后一步中您已经获取到，这里不再赘述。
UserID
String
当前用户的 ID，字符串类型，只允许包含英文字母（a-z 和 A-Z）、数字（0-9）、连词符和下划线。
userSig
String
使用 步骤一 的第3步中获取的 SecretKey 对 SDKAppID、UserID 等信息进行加密，就可以得到 UserSig，它是一个鉴权用的票据，用于腾讯云识别当前用户是否能够使用 TRTC 的服务。您可以通过控制台中的 辅助工具 生成一个临时可用的 UserSig。更多信息请参见 如何计算及使用 UserSig。
说明：
开发环境：如果您正在本地开发调试阶段，可以采用本地 GenerateTestUserSig.genTestSig函数生成 userSig。该方法中 SDKSecretKey 很容易被反编译逆向破解，一旦您的密钥泄露，攻击者就可以盗用您的腾讯云流量。
生产环境：如果您的项目要发布上线，请采用 服务端生成 UserSig 的方式。

步骤四：使用核心控件实现直播功能

创建核心控件并开启预览

创建核心控件：您可以在您实现推流的 Activity 中通过 java 代码或者 xml 方式加载我们的核心控件，其中代码方式示例如下（XML 方式也类似）：
swift
let seatGridView = SeatGridView(this)

主播开启直播间和观众加入直播间

主播开启直播间：开启一个直播间，并将本地麦克风采集的数据推流到直播间。
swift
let roomInfo = TUIRoomInfo()
roomInfo.roomId = "123456"
seatGridView.startVoiceRoom(roomInfo) { roomInfo in
} onError: { code, message in
}

seatGridView.startMicrophone() {
} onError: { code,message in
}
观众加入直播间。
swift
seatGridView.joinVoiceRoom("roomId_123456") { roomInfo in
} onError: { code, message in 
}
主播开启直播间开始直播
观众加入直播间观看直播








麦位管理

您如果需要实现麦位管理功能，可参见 麦位管理 文档。

设置麦位列表排列布局

您可以通过以下方式快速设置您的麦位列表布局。
swift
// 设置宫格布局
seatGridView.setLayoutMode(layoutMode: .grid)

// 设置元素布局
seatGridView.setLayoutMode(layoutMode: .focus)

// 设置纵向布局
seatGridView.setLayoutMode(layoutMode: .vertical)

// 设置自定义布局
// 第一行配置
let rowConfig1 = SGSeatViewLayoutRowConfig(count: 3, //第一行显示的数量
                                           seatSpacing: 10, //第一行每个麦位的水平间距
                                           seatSize: CGSize(width: 50, height: 50), //第一行显示的每个麦位视图大小
                                           alignment: .center) //第一行麦位的对齐方式
  
 // 第二行配置
let rowConfig1 = SGSeatViewLayoutRowConfig(count: 3, //第二行显示的数量
                                           seatSpacing: 10, //第二行每个麦位的水平间距
                                           seatSize: CGSize(width: 50, height: 50), //第二行显示的每个麦位视图大小
                                           alignment: .spaceAround) //第二行麦位的对齐方式 
 
let layoutConfig = SGSeatViewLayoutConfig(rowConfigs: [rowConfig1, rowConfig2],
                                          rowSpacing: 10)

seatGirdView.setLayoutMode(.free, layoutConfig)
说明：
自定义布局的参数设置可查看 SGSeatViewLayoutRowConfig 中参数说明，其中对齐方式 alignment 可参见 SGSeatViewLayoutRowAlignment 中描述对齐方式效果可参见 示意图。
宫格布局
元素布局
纵向布局
自定义布局

















自定义布局对齐方式示意图：





自定义麦位视图

如果您认为我们默认的UI不满足您的需求，你想自定义自己的麦位UI，您可以通过以下方式快速设置您的麦位布局。
swift
class TestSeatViewDelegate: SGSeatViewDelegate {
    func seatGridView(_ view: SeatGridView, createSeatView seatInfo: TUISeatInfo) -> UIView? {
        return TestSeatInfoView(seatGirdView: seatGridView, seatInfo: seatInfo)
    }

    func seatGridView(_ view: SeatGridView, updateSeatView seatInfo: TUISeatInfo, seatView: UIView) {
        if let seatView = seatView as? TestSeatInfoView {
            seatView.updateSeatView(seatGirdView: seatGridView, seatInfo: seatInfo)
        }
    }

    func seatGridView(_ view: SeatGridView, updateUserVolume volume: Int, seatView: UIView) {
        if let seatView = seatView as? TestSeatInfoView {
            seatView.updateUserVolume(seatGirdView: seatGridView, volume: volume)
        }
    }
}

seatGirdView.setSeatViewDelegate(TestSeatViewDelegate())

class TestSeatInfoView: UIView {
    init(seatGirdView: SeatGridView, seatInfo: TUISeatInfo) {
        super.init(frame: .zero)
        initView() //初始化view
    }

    func updateSeatView(seatGirdView: SeatGridView, seatInfo: TUISeatInfo) {
        updateView(seatInfo) //更新自定义麦位视图UI
    }

    func updateUserVolume(seatGirdView: SeatGridView, volume: Int) {
        updateUserVolume(volume) //更新音量变化UI
    }
}

自定义麦位布局前
自定义麦位布局后