please select
RTC Engine
  • Overview
  • Web
    • Run Sample Demo
    • Integration
    • Basic Features
      • Screen Sharing
      • Live Streaming
      • Media Device
      • Audio Volume
      • Set Encoding Profile
      • Detect Network Quality
      • Detect Capabilities
    • Advance Features
      • Enable AI Denoiser
      • Enable Audio Mixer
      • Enable Watermark
      • Enable Virtual Background
      • Enable Beauty and Effects
      • Data Messages
      • Custom Capturing and Rendering
    • API List
    • Released Notes
    • Supported Platforms
    • Web FAQs
      • Optimize Multi-Person Video Calls
      • Handle Autoplay Restriction
      • Handle Firewall Restriction
      • Others
  • Android
    • Run Sample Code
    • Integration
    • Basic Features
      • Sensing Network Quality
      • Enabling Screen Sharing
      • Setting Video Quality
      • Rotating Videos
    • Advanced Features
      • Testing Newwork Quality
      • Custom Capturing and Rendering
      • Custom Audio Capturing and Playback
    • Client APIs
      • Overview
      • TRTCCloud
      • TRTCStatistics
      • TRTCCloudListener
      • TXAudioEffectManager
      • TXBeautyManager
      • TXDeviceManager
      • Type Definition
      • Deprecated Interface
      • Error Codes
    • Solution
      • Real-Time Chorus (TUIKaraoke)
        • Quick Integration
        • Implementation Steps
        • Song Synchronization
        • Lyric Synchronization
        • Vocal Synchronization
        • Mixing Stream Solution
        • TRTCKaraoke APIs
        • FAQs
    • Release Notes
  • iOS
    • Run Sample Code
    • Integration
    • Basic Features
      • Sensing Network Quality
      • Enabling Screen Sharing
      • Setting Video Quality
      • Rotating Videos
    • Advanced Features
      • Testing Network Quality
      • Custom Capturing and Rendering
      • Custom Audio Capturing and Playback
    • Client APIs
      • Overview
      • TRTCCloud
      • TRTCCloudDelegate
      • TRTCStatistics
      • TXAudioEffectManager
      • TXBeautyManager
      • TXDeviceManager
      • Type Definition
      • Deprecated Interface
      • ErrorCode
    • Solution
      • Quick Integration
      • Implementation Steps
      • Song Synchronization
      • Lyric Synchronization
      • Vocal Synchronization
      • Mixing Stream Solution
      • TRTCKaraoke APIs
      • FAQs
    • Release Notes
  • macOS
    • Run Sample Code
    • Integration
    • Basic Features
      • Sensing Network Quality
      • Enabling Screen Sharing
      • Sharing Computer Audio
      • Setting Video Quality
      • Rotating Videos
    • Advanced Features
      • Testing Hardware Devices
      • Testing Network Quality
      • Custom Capturing and Rendering
      • Custom Audio Capturing and Playback
    • Client APIs
      • Overview
      • TRTCCloud
      • TRTCCloudDelegate
      • TRTCStatistics
      • TXAudioEffectManager
      • TXBeautyManager
      • TXDeviceManager
      • Type Definition
      • Deprecated Interface
      • ErrorCode
      • Release Notes
    • Release Notes
  • Windows
    • Run Sample Code
    • Integration
    • Basic Features
      • Sensing Network Quality
      • Enabling Screen Sharing
      • Setting Video Quality
      • Rotating Videos
    • Advanced Features
      • Testing Hardware Devices
      • Testing Network Quality
      • Custom Capturing and Rendering
      • Custom Audio Capturing and Playback
    • Client APIs
      • Overview
      • ITRTCCloud
      • ITRTCStatistics
      • TRTCCloudCallback
      • ITXAudioEffectManager
      • ITXDeviceManager
      • Type Definition
      • Deprecated Interface
      • Error Codes
    • Release Notes
  • Electron
    • Integration
      • 1.API Examples
      • 2.Importing the SDK
      • 3.Entering a Room
      • 4.Subscribing to Audio/Video Streams
      • 5.Publish Audio/Video Streams
      • 6.Exiting a Room
      • 7.Sensing Network Quality
      • 8.Enabling Screen Sharing
      • 9.Sharing Computer Audio
      • 10.Setting Video Quality
      • 11.Rotating Videos
    • Client APIs
      • Overview
      • Error Codes
  • Flutter
    • Integration
      • 1.API Examples
      • 2.Importing the SDK
      • 3.Entering a Room
      • 4.Subscribing to Audio/Video Streams
      • 5.Publish Audio/Video Streams
      • 6.Exiting a Room
      • 7.Sensing Network Quality
      • 8.Enabling Screen Sharing
      • 9.Sharing Computer Audio
      • 10.Setting Video Quality
      • 11.Rotating Videos
    • Client APIs
      • Overview
      • Error Codes
  • Unity
    • Integration
      • 1.API Examples
      • 2Importing the SDK
    • Client APIs
      • Overview
      • Error Codes
  • Qt
    • Integration
      • 1.Importing the SDK
  • Overview
    • Overview
  • Concepts
  • Features
  • Performance Statistics
  • Pricing
    • Free Minutes
    • RTC-Engine Monthly Packages
    • Billing Explanation for Subscription Package Duration
    • Pay-as-you-go
      • Billing of Audio and Video Duration
      • Billing of On-Cloud Recording and Recording Delivery
      • Billing of MixTranscoding and Relay to CDN
  • FAQs
    • FAQs for Beginners
    • Migration Guide
      • Twilio Video to Tencent RTC
      • Billing
      • Features
      • UserSig
      • Firewall Restrictions
      • How to Downsize Installation Package
      • TRTCCalling for Web
      • Audio and Video Quality
      • Others
RTC Engine

Quick Integration

Overview

TUIKaraoke is an open-source audio/video UI component that you can integrate into your project to bring online karaoke, seat management, gift giving/receiving, text chat, and other TRTC features to your application. TUIKaraoke requires only a few lines of code and also supports the Android platform. Its basic features are shown below:
Note
All TUIKit components are based on two basic PaaS services of Tencent Cloud, namely TRTC and Chat. When you activate TRTC, the Chat SDK Trial Edition (which supports up to 100 DAUs) will also be activated automatically. For Chat billing details, see Pricing.




Integration

Step 1. Download and import the TUIKaraoke component

Go to GitHub, clone or download the code, copy the Source, Resources, and TXAppBasic folders and the TUIKaraoke.podspec file in the iOS directory to your project, and complete the following import operations:
Add the following import commands to your Podfile:
pod 'TUIKaraoke', :path => "./", :subspecs => ["TRTC"]
pod 'TXLiteAVSDK_TRTC'
pod 'TXAppBasic', :path => "TXAppBasic/"
Open Terminal and run the following installation command in the directory of the Podfile:
pod install

Step 2. Configure permissions

Configure permission requests for your app in the info.plist file of your project. The SDKs need the following permissions (on iOS, the mic access must be requested at runtime):
<key>NSMicrophoneUsageDescription</key>
<string>`TUIKaraoke` needs to access your mic.</string>

Step 3. Initialize and log in to the component

For more information on relevant APIs, see TRTCKaraoke (iOS).
// 1. Initialize
let karaokeRoom = TRTCKaraokeRoom.shared()
karaokeRoom.setDelegate(delegate: self)
// 2. Log in
karaokeRoom.login(SDKAppID: Int32(SDKAppID), UserId: UserId, UserSig: ProfileManager.shared.curUserSig()) { code, message in
if code == 0 {
// Logged in
}
}
Parameter description:
SDKAppID: TRTC application ID. If you haven't activated TRTC, log in to the TRTC console, create a TRTC application, click Application Info, and select the Quick Start tab to view its SDKAppID.


SecretKey: TRTC application key. Each secret key corresponds to an SDKAppID. You can view your application’s secret key on the Application Management page of the TRTC console.
userId: Current user ID, which is a custom string that can contain up to 32 bytes of letters and digits (special characters are not supported).
userSig: The security protection signature calculated based on SDKAppID, userId, and Secretkey. You can click here to directly generate a debugging userSig online. For more information, see UserSig.

Step 4. Implement the online karaoke scenario

1. The room owner creates a room through TUIKaraoke.createRoom.
int roomId = "Room ID";
let param = RoomParam.init()
param.roomName = "Room name";
param.needRequest = false; // Whether permission is required for listeners to speak.
param.seatCount = 8; // Number of seats in the room. Set it to `8`.
param.coverUrl = "URL of room cover image";

karaokeRoom.createRoom(roomID: Int32(roomInfo.roomID), roomParam: param) { [weak self] (code, message) in
guard let `self` = self else { return }
if code == 0 {
// Room created successfully
}
}
2. A listener enters the room through TUIKaraoke.enterRoom.
karaokeRoom.enterRoom(roomID: roomInfo.roomID) { [weak self] (code, message) in
guard let `self` = self else { return }
if code == 0 {
// Entered room successfully
}
}
3. A listener turns their mic on through TUIKaraoke.enterSeat.
// 1. A listener calls an API to mic on
int seatIndex = 1;
karaokeRoom.enterSeat(seatIndex: seatIndex) { [weak self] (code, message) in
guard let `self` = self else { return }
if code == 0 {
// Mic turned on successfully
}
}
// 2. The listener receives the `onSeatListChange` callback and refreshes the seat list
func onSeatListChange(seatInfoList: [SeatInfo]) {
}
Note
You can implement other seat management operations as instructed in TRTCKaraoke (iOS) or by referring to the TUIKaraoke demo project.
4. Play back songs and try out the karaoke scenario You can get the music ID and URL to play back a song. For more information, see Music Playback APIs.
// Play back the music
karaokeRoom.startPlayMusic(musicID: musicID, originalUrl: muscicLocalPath, accompanyUrl: accompanyLocalPath);
// Stop the music
karaokeRoom.stopPlayMusic();
After completing the previous steps, you can implement the basic karaoke features. If your business needs more features such as chat and gift giving, you can integrate the following capabilities:

Step 5. Add the text chat feature (optional)

If you want implement a text chat feature between speakers and listeners, implement message sending/receiving as follows: For more information on relevant APIs, see sendRoomTextMsg.
// Sender: Sends text chat messages
karaokeRoom.sendRoomTextMsg(message: message) { [weak self] (code, message) in
if code == 0 {
// Sent successfully
}
}
// Receiver: Listens for text chat messages
karaokeRoom.setDelegate(delegate: self)
func onRecvRoomTextMsg(message: String, userInfo: UserInfo) {
debugPrint("Received a message from" + userInfo.userName + ": " + message)
}

Step 6. Add the gift giving feature (optional)

You can implement gift giving, receiving, and displaying as follows:
// Sender: Customize `IMCMD_GIFT` to distinguish between gift messages
karaokeRoom.sendRoomCustomMsg(cmd: kSendGiftCmd, message: message) { code, msg in
if (code == 0) {
// Sent successfully
}
}

// Receiver: Listens for gift messages
karaokeRoom.setDelegate(delegate: self)
func onRecvRoomCustomMsg(cmd: String, message: String, userInfo: UserInfo) {
if cmd == kSendGiftCmd {
debugPrint("Received a gift from" + userInfo.userName + ": " + message)
}
}

FAQs

Does the TUIKaraoke component support sound effect features such as voice change, tone change, and reverb?

Yes. For more information, see the TUIKaraoke demo project.
Note
If you have any suggestions or feedback, please contact colleenyu@tencent.com.