tencent cloud

Feedback

Last updated: 2024-12-05 17:38:07

    Applicable Scenario

    Our broadcasters' streaming and viewers watching feature mainly depend on our core widget of the voice chat room (SeatGridView), which provides a rich array of APIs for managing voice chat rooms, such as opening and closing them, managing seats within the live room, like applying for a seat, inviting to a seat, moving seats, kicking users off the seat, and more.
    After you've integrated the voice chat room UIKit through Quick Access, if there's a discrepancy between the UI style and your ideal UI style, you can use our core widgets to quickly build the main process of the voice chat room within half an hour. Then, add your own business UI views on top of it.

    Environment preparations

    Xcode 15 or later.
    iOS 13.0 or later.
    CocoaPods environment setup, Click to view.
    If you encounter any problems with access and use, please refer to FAQs.

    Step 1. Activate the service

    Please refer to Activating Services (TUILiveKit) to receive the trial version or activate the paid version.

    Step 2: Import the SeatGridView component

    Use CocoaPods to import the component. If you encounter any issues, please refer to Environment Preparation first. Detailed steps for importing the component are as follows:
    1. Add the pod 'SeatGridView' dependency to your Podfile file.
    Swift
    target 'xxxx' do
    ...
    ...
    pod 'SeatGridView'
    end
    If you don't have a Podfile file, first cd in Terminal into the xxxx.xcodeproj directory, then create one using the following command:
    pod init
    2. In Terminal, first cd into the Podfile directory and then run the following command to install components.
    pod install
    If you can't install the latest version of SeatGridView, delete Podfile.lock and Pods first. Then run the following command to update the local CocoaPods repository list.
    pod repo update
    Then, run the following command to update the Pod version of the component library.
    pod update
    3. You can start by compiling and running the code. If you encounter any issues, please refer to FAQ. If the problem remains unresolved, consider running our Example project. We welcome any feedback on issues you encounter during integration and use.

    Step 3. Log in

    Add the following code to your project, which completes the login of TUI Components by calling the relevant interfaces in TUICore. This step is critical; you can only use the features provided by SeatGridView after successful login.
    swift
    //
    // AppDelegate.swift
    //
    
    import TUICore
    func application(_ application: UIApplication, didFinishLaunchingWithOptions launchOptions: [UIApplication.LaunchOptionsKey: Any]?) -> Bool {
    TUILogin.login(1400000001, // Please replace with the SDKAppID obtained in Step 1
    userID: "denny", // Please replace with your UserID
    userSig: "xxxxxxxxxxx") { // You can calculate a UserSig in the console and fill it here
    print("login success")
    } fail: { (code, message) in
    print("login failed, code: \\(code), error: \\(message ?? "nil")")
    }
    return true
    }
    Parameter Description
    Here we detail the key parameters required in the login function:
    Parameter
    Type
    Description
    SDKAppID
    int
    You have already obtained it in the last step of Step 1, so it will not be elaborated here.
    UserID
    String
    The ID of the current user, in string format, only allows letters (a-z and A-Z), digits (0-9), hyphens, and underscores.
    userSig
    String
    Use the SecretKey obtained in step 3 of Step One to encrypt information such as SDKAppID and UserID to generate a UserSig. It's a credential used for authentication purposes, allowing Tencent Cloud to identify if the current user is authorized to use the TRTC service. You can generate a temporary UserSig through the Auxiliary Tools in the console. For more information, please refer to How to Calculate and Use UserSig.
    Note:
    Development Environment: If you are in the local development and debugging stage, you can use the local GenerateTestUserSig.genTestSig function to generate userSig. In this method, the SDKSecretKey is vulnerable to decompilation and reverse engineering, and once your key is leaked, attackers can steal your Tencent Cloud traffic.
    Production Environment: If your project is going to be launched, please adopt the method of Server-side Generation of UserSig.

    Step 4: Use core controls to implement the live streaming feature

    Create core controls and enable preview

    Create Core Controls: In the Activity where you implement streaming, you can load our core controls using Java code or XML. An example of the code method is as follows (the XML method is similar):
    swift
    let seatGridView = SeatGridView(this)

    The anchor starts the live streaming room and the audience joins the live streaming room

    Anchor opens the live room: Opens a live streaming room and streams data collected from the local microphone.
    swift
    let roomInfo = TUIRoomInfo()
    roomInfo.roomId = "123456"
    seatGridView.startVoiceRoom(roomInfo) { roomInfo in
    } onError: { code, message in
    }
    
    seatGridView.startMicrophone() {
    } onError: { code,message in
    }
    Audience joins the live streaming room.
    swift
    seatGridView.joinVoiceRoom("roomId_123456") { roomInfo in
    } onError: { code, message in
    }
    Anchor starts the live streaming room and begins the live stream
    Audience joins the live streaming room to watch the live stream
    
    
    

    
    
    

    Microphone Position Management

    If you need to implement the Seat Management feature, refer to the Seat Management documentation.

    Set layout arrangement for the seat list

    You can quickly set up your seat list layout in the following ways.
    swift
    // Set grid layout
    seatGridView.setLayoutMode(layoutMode: .grid)
    
    // Set element layout
    seatGridView.setLayoutMode(layoutMode: .focus)
    
    // Set vertical layout
    seatGridView.setLayoutMode(layoutMode: .vertical)
    
    // Set custom layout
    // First row configuration
    let rowConfig1 = SGSeatViewLayoutRowConfig(count: 3, //Number of seats displayed in the first row
    seatSpacing: 10, //Horizontal spacing between each seat in the first row
    seatSize: CGSize(width: 50, height: 50), //Size of each seat view displayed in the first row
    alignment: .center) //Alignment of seats in the first row
    // Second row configuration
    let rowConfig1 = SGSeatViewLayoutRowConfig(count: 3, //Number of seats displayed in the second row
    seatSpacing: 10, //Horizontal spacing between each seat in the second row
    seatSize: CGSize(width: 50, height: 50), //Size of each seat view displayed in the second row
    alignment: .spaceAround) //Alignment of seats in the second row
    let layoutConfig = SGSeatViewLayoutConfig(rowConfigs: [rowConfig1, rowConfig2],
    rowSpacing: 10)
    
    seatGirdView.setLayoutMode(.free, layoutConfig)
    Note:
    For the parameter settings of the custom layout, refer to the parameter descriptions in SGSeatViewLayoutRowConfig. The alignment method alignment can be found in SGSeatViewLayoutRowAlignment. See the Schematic diagram for the alignment effect.
    Grid Layout
    Element Layout
    Vertical Layout
    Custom Layout

    
    
    

    
    
    

    
    
    

    
    
    

    Custom Layout Alignment Illustration:

    
    
    

    Custom Seat View

    If you think our default UI does not meet your needs and you want to customize your own seat UI, you can quickly set up your seat layout in the following way.
    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() //Initialize view
    }
    
    func updateSeatView(seatGirdView: SeatGridView, seatInfo: TUISeatInfo) {
    updateView(seatInfo) //Update custom seat view UI
    }
    
    func updateUserVolume(seatGirdView: SeatGridView, volume: Int) {
    updateUserVolume(volume) //Update volume change UI
    }
    }
    
    Before customizing the seat layout
    After customizing the seat layout
    
    
    

    
    
    

    
    
    
    Contact Us

    Contact our sales team or business advisors to help your business.

    Technical Support

    Open a ticket if you're looking for further assistance. Our Ticket is 7x24 avaliable.

    7x24 Phone Support