This article will introduce how to complete the integration of the TUIRoomKit Component in the shortest time. By following this document, you will complete the following key steps within an hour and ultimately obtain an audio/video conference function with a complete UI interface.
First, please Create an application in the TRTC Console and record the SDKAppID and SecretKey parameters. These parameters will be used in the subsequent integration process. The location of the application creation and parameters is shown in the following figure:
Step 2: Integrate the TUIRoomKit Component
Use CocoaPods to import the Component, with the specific steps as follows:
1. Add the following dependencies to your Podfile file.
pod 'TUIRoomKit'
pod 'TUIVideoSeat'# Video Widget View
2. Execute the following command to install the Component.
pod install
If you cannot install the latest version of TUIRoomKit, execute the following command to update the local CocoaPods repository list.
pod repo update
Step 3: Complete Project Configuration
To use the audio and video functions, you need to authorize the use of the mic and camera. Add the following two items to the Info.plist of the App, which correspond to the prompt messages of the mic and camera when the system pops up the authorization dialog box.
<key>NSCameraUsageDescription</key>
<string>TUIRoom needs access to your Camera permission</string>
<key>NSMicrophoneUsageDescription</key>
<string>TUIRoom needs access to your Mic permission</string>
<key>NSPhotoLibraryUsageDescription</key>
<string>TUIRoom needs access to your Photo Library</string>
Step 4: Initialize TUIRoomKit Component
Add the following code to your project, which initializes the component by calling the related interfaces in TUIRoomKit. This step is crucial because only after initialization can you use the various functions of TUIRoomKit. Please be patient and check if the relevant parameters are configured correctly:
TUIRoomKit.sharedInstance.login(sdkAppId:1400000001,// Please replace with the SDKAppID obtained in step 1
userId:"xxxxxxxxxx",// Please replace with your UserID
userSig:"998")// You can calculate a UserSig in the Console and fill it in this position
Parameter Description
Here is a detailed introduction to the key parameters used in the login function:
SDKAppID：You have already obtained it in Step 1, so it will not be repeated here.
UserID：The ID of the current user, string type, only allows to contain English letters (a-z and A-Z), numbers (0-9), hyphens (-), and underscores (_).
UserSig：Encrypt the SDKAppID, UserID, etc. with the Secret Key obtained in Step 1 to get the UserSig, which is a ticket for authorization and is used for Tencent Cloud to recognize whether the current user can use the TRTC service. You can create a temporary usable UserSig through the UserSig generation function at the top of the Console overview page.
This step is also the step with the most feedback from developers we have received so far. Common problems are as follows:
SDKAppID is set incorrectly. Please use the SDKAppID of the international site correctly, otherwise, you will not be able to access it.
UserSig is misconfigured as an encryption key (SecretKey). UserSig is obtained by encrypting the SDKAppID, UserID, and expiration time with the SecretKey, not by directly configuring the SecretKey as UserSig.
UserID is set to simple strings like "1", "123", "111", etc. Since TRTC does not support multi-terminal login with the same UserID, simple UserIDs like "1", "123", "111" are easily occupied by your colleagues, causing login failure. Therefore, we recommend that you set some UserIDs with high identifiability when debugging.
The sample code in Github uses the genTestUserSig function to calculate UserSig locally to quickly get you through the current access process. However, this solution exposes your SecretKey in the App code, which is not conducive to your subsequent upgrades and protection of your SecretKey. Therefore, we strongly recommend that you put the calculation logic of UserSig on the server side and have the app request the real-time calculated UserSig from your server every time it uses the TUIRoomKit Component.
Step 5: Use TUIRoomKit
Set User Information
You can set the user's username and avatar by calling TUIRoomKit's setSelfInfo.
You can create a room by calling TUIRoomKit's createRoom function and specifying the room type as TUIRoomKit.RoomScene.meeting.
Parameter Description for Joining the Meeting:
publicenumRoomScene{
case meeting
case live
}
publicclassRoomInfo{
publicvar ownerId:String// Host ID
publicvar name:String// Room name, can only be set by the host
publicvar roomId:String// Room ID
publicvar isOpenCamera:Bool// Whether to open the Camera when joining the meeting
publicvar isOpenMicrophone:Bool// Whether to open the Mic when joining the meeting
publicvar isUseSpeaker:Bool// Whether to use the Speaker when joining the meeting
publicvar isCameraDisableForAllUser:Bool=false// Whether to disable the Camera for all users during the session, can only be set by the host, not disabled by default, can be modified during the session
publicvar isMicrophoneDisableForAllUser:Bool=false// Whether to disable the Mic for all users during the session, can only be set by the host, not disabled by default, can be modified during the session
publicvar isMessageDisableForAllUser:Bool=false// Whether to disable sending messages for all users during the session, can only be set by the host, not disabled by default, can be modified during the session
publicvar speechMode:TUISpeechMode// Room Speech Mode, can only be set by the host
}
Sample Code:
let roomInfo =RoomInfo()
roomInfo.name ="xx";// Please set the room name as needed
roomInfo.roomId ="998"// Please set the room ID as needed
roomInfo.isOpenCamera =true// Please set according to your business needs
roomInfo.isOpenMicrophone =true// Please set according to your business needs
roomInfo.isUseSpeaker =true// Please set according to your business needs
roomInfo.speechMode =.freeToSpeak // Please set according to your business needs
When joining a room, the RoomInfo parameter only needs to pay attention to the roomId, isOpenCamera, isUseSpeaker, isOpenMicrophone four fields, and other fields do not need to be set.
Step 6: More Features
UI Widget Access
Import the beauty widget using CocoaPods, with the following specific steps:
1. Add the following dependencies to your Podfile file.
pod 'TUIBeauty'# [Optional] Beauty Widget
2. Execute the following command to install the component.
pod install
Common Problems
If you choose to integrate both RoomKit and CallKit, you can refer to the following integration methods, and we will optimize the integration between multiple components as soon as possible.
# CallKit
pod 'TUICallKit','~> 1.4.0.256'# When integrating both RoomKit and CallKit, it is recommended to use TUICallKit 1.4.0.256 and above
# RoomKit
pod 'TUIRoomKit','~> 1.0.1'# When integrating both RoomKit and CallKit, it is recommended to use TUIRoomKit 1.0.1 and above
# Kingfisher(Swift Network Image Cache Library) version number setting reference: https://github.com/onevcat/Kingfisher
