tencent cloud

Component Overview

TUIRoom is an open-source audio/video UI component. After integrating it into your project, you can add features such as screen sharing, beauty filter, and low-latency video call to your application simply by writing a few lines of code. It also supports the Android, Windows, and macOS platforms. Its basic features are as shown below:

Component Integration

Step 1. Download and import the TUIRoom component

To import the component through CocoaPods, follow the steps below:

Note：

To implement the screen sharing feature, download TXLiteAVSDK_ReplayKitExt.framework here, add it to your project, and create the "Broadcast Upload Extension" target. You can refer to the demo project for implementation.

1. Go to GitHub, clone or download the code, and copy the Resources, SDK, and Source folders and the TUIRoom.podspec file in the iOS directory to your project.
2. Add the following dependencies to your Podfile and run pod install to complete the import.

   # TXLiteAVSDK
   pod 'TXLiteAVSDK_TRTC'
   # :path => "Points to the relative path of the directory of `TXAppBasic.podspec`"
   pod 'TXAppBasic', :path => "../SDK/TXAppBasic/"
   # :path => "Points to the relative path of the directory of `TCBeautyKit.podspec`"
   pod 'TCBeautyKit', :path => "../SDK/TCBeautyKit/"
   # :path => "Points to the relative path of the directory of `TUIRoom.podspec`"
   pod 'TUIRoom', :path => "../", :subspecs => ["TRTC"]
   

Note：

The Source and Resources folders and the TUIRoom.podspec file must be in the same directory.

• TXAppBasic.podspec is in the TXAppBasic folder.
• TCBeautyKit.podspec is in the TCBeautyKit folder.

Step 2. Configure permissions

To use the audio/video features, you need to grant mic and camera permissions. Add the two items below to Info.plist of your application. Their content is what users see in the mic and camera access pop-up windows.

• Privacy - Microphone Usage Description, plus a statement specifying why mic access is needed
• Privacy - Camera Usage Description, plus a statement specifying why camera access is needed

Step 3. Create and log in to the component

1. Call TUILogin in TUICore to log in as shown below:

   TUILogin.initWithSdkAppID(Int32("Your sdkAppID"))
   TUILogin.login("Your userId", userSig: "Your userSig", succ: {
    debugPrint("login success")
   }, fail: { code, errorDes in
    debugPrint("login failed, code:\(code), error: \(errorDes ?? "nil")")
   })
   

Parameter description

• SDKAppID: TRTC application ID. If you haven't activated the TRTC service, log in to the TRTC console, create a TRTC application, and click Application Info. The SDKAppID is as shown below:
  
• Secretkey: TRTC application key, which corresponds to SDKAppID. On the Application Management page in the TRTC console, the SecretKey is as shown below:
• userId: ID of the current user, which is a string that can contain only letters (a-z and A-Z), digits (0-9), hyphens (-), and underscores (_). We recommend that you keep it consistent with your user account system.
• userSig: Security protection signature calculated based on SDKAppID, userId, and Secretkey. You can click here to directly generate a debugging userSig online or calculate it on your own by referring to the demo project. For more information, see UserSig.

Step 4. Implement group audio/video interaction

1. The room owner creates a group audio/video interaction room through TUIRoomCore#createRoom.

   let roomId = 123
   TUIRoomCore.shareInstance().createRoom("\(roomId)",speechMode: .freeSpeech,callback: { [weak self] code, message in
   if code == 0 {
      debugPrint("create room success") 
   } else {
   }
   })
   

2. Other users enter the audio/video room through TUIRoomCore#enterRoom.

   let roomId = 123
   TUIRoomCore.shareInstance().enterRoom("\(roomId)", callback: { [weak self] code, message in
   if code == 0 {
      debugPrint("enter room success") 
   } else {
   }
   })
   

3. Implement room exit.

   • The anchor calls the TUIRoomCore#destroyRoom API to dismiss the room and IM group chat and exit the TRTC room. Room members receive the onDestroyRoom callback message that notifies them of group dismissal and exit the TRTC room.
   • A member calls the TUIRoomCore#leaveRoom API to leave the room and IM group chat and exit the TRTC room. Other room members receive the onRemoteUserLeave callback message that notifies them of the room exit by the member.

     if isHomeowner {
     TUIRoomCore.shareInstance().destroyRoom { [weak self] _, _ in
      guard let self = self else { return }
      self.navigationController?.popViewController(animated: true)
     }
     } else {
     TUIRoomCore.shareInstance().leaveRoom { [weak self] _, _ in
      guard let self = self else { return }
      self.navigationController?.popViewController(animated: true)
     }
     }
     

4. Implement screen sharing through TUIRoomCore#startScreenCapture.

   • Call startScreenCapture of TUIRoomCore to share the screen.
   • Other members in the room will receive the onRemoteUserScreenVideoAvailable event notification.

     // Click the button to enable screen sharing
     if #available(iOS 12.0, *) {
     // Start screen sharing
     let params = TRTCVideoEncParam()
     params.videoResolution = TRTCVideoResolution._1280_720
     params.resMode = TRTCVideoResolutionMode.portrait
     params.videoFps = 10
     params.enableAdjustRes = false
     params.videoBitrate = 1500
     TUIRoomCore.shareInstance().startScreenCapture(params)
     TUIRoomBroadcastExtensionLauncher.launch()
     } else {
     view.window?.makeToast(.versionLowToastText)
     }    
     

FAQs

How do I install CocoaPods?

Enter the following command in a terminal window (you need to install Ruby on your Mac first):

sudo gem install cocoapods

Note：

If you have any requirements or feedback, contact colleenyu@tencent.com.