Video Live Integration
This article will guide you through the process of quickly integrating the TUILiveKit component. By following this document, you will complete the following key steps within an hour and ultimately obtain a video or voice live streaming function with a complete UI interface.
Environment Preparations
Xcode 15 or later
iOS 13.0 or later
CocoaPods environment installation, click to view.
If you encounter problems with access and use, see Q&A。
Step 1. Activate the service
Before using the Audio and Video Services provided by Tencent Cloud, you need to go to the Console and activate the service for your application. For detailed steps, refer to Activate the service
Step 2. Import the component
Import components into CocoaPods. If problems exist, Please refer first Environment Preparation. The import components are as follows:
1. Please add the
pod 'TUILiveKit'
dependency to your Podfile
file and refer to the Example project if you run into any problems.target 'xxxx' do......pod 'TUILiveKit'end
If you don't have a
Podfile
file, first terminal cd
into the xxxx.xcodeproj
directory and then create it with the following command:pod init
2. In the terminal, first
cd
to the Podfile
directory, and then run the following command to install the component.pod install
If the latest version of
TUILiveKit
cannot be installed, You can delete Podfile.lock and Pods first。Then update the CocoaPods repository list locally by executing the following command.pod repo update
Afterwards, execute the following command to update the Pod version of the component library.
pod update
3. You can compile and run it first. If you run into problems, see Q&A. If the problem still can't be solved, you can run our Example project first. Any problems you encounter in the process of access and use, welcome to give us feedback.
Step 3. Configure the project
Your app needs mic and camera permissions to implement audio/video communication. Add the two items below to Info of your App. Their content is what users see in the mic and camera access pop-up windows.
<key>NSCameraUsageDescription</key><string>TUILiveKit needs to access your camera to capture video.</string><key>NSMicrophoneUsageDescription</key><string>TUILiveKit needs to access your mic to capture audio.</string>
Step 4. Log in
Add the following code to your project, which completes the login of the TUI component by calling the relevant interface in TUICore. This step is very important, because you can use all functions of TUILiveKit only after the login is successful. Therefore, please patiently check whether the relevant parameters are correctly configured.
//// AppDelegate.swift//import TUICorefunc application(_ application: UIApplication, didFinishLaunchingWithOptions launchOptions: [UIApplication.LaunchOptionsKey: Any]?) -> Bool {TUILogin.login(1400000001, // Replace it with the SDKAppID obtained in Step 1userID: "denny", // Please replace it with your UserIDuserSig: "xxxxxxxxxxx") { // You can calculate a UserSig in the console and fill it inprint("login success")} fail: { (code, message) inprint("login failed, code: \(code), error: \(message ?? "nil")")}return true}
//// AppDelegate.m//#import <TUICore/TUILogin.h>- (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary *)launchOptions {[TUILogin login:1400000001 // Replace it with the SDKAppID obtained in Step 1userID:@"denny" // Please replace it with your UserIDuserSig:@"xxxxxxxxxxx" // You can calculate a UserSig in the console and fill it inprint("login success")succ:^{NSLog(@"login success");} fail:^(int code, NSString * _Nullable msg) {NSLog(@"login failed, code: %d, error: %@", code, msg);}];return YES;}
Parameter description: The key parameters used by the
login
function are as detailed below:SDKAppID: Obtained in the last step in Step 1 and not detailed here.
UserID: The ID of the current user, which is a string that can contain only letters (a–z and A–Z), digits (0–9), hyphens (-), or underscores (_).
UserSig: The authentication credential used by Tencent Cloud to verify whether the current user is allowed to use the TRTC service. You can get it by using the
SDKSecretKey
to encrypt the information such as SDKAppID
and UserID
. You can generate a temporary UserSig
by clicking the UserSig Generate button in the console.
For more information, see UserSig.
Note:
Many developers have contacted us with many questions regarding this step. Below are some of the frequently encountered problems:
SDKAppID is invalid.
userSig is set to the value of Secretkey mistakenly. The userSig is generated by using the SecretKey for the purpose of encrypting information such as sdkAppId, userId, and the expiration time. But the value of the userSig that is required cannot be directly substituted with the value of the SecretKey.
userId is set to a simple string such as 1, 123, or 111, and your colleague may be using the same userId while working on a project simultaneously. In this case, login will fail as TRTC doesn't support login on multiple terminals with the same UserID. Therefore, we recommend you use some distinguishable userId values during debugging.
The sample code on GitHub uses the
genTestUserSig
function to calculate UserSig
locally, so as to help you complete the current integration process more quickly. However, this scheme exposes your SecretKey
in the application code, which makes it difficult for you to upgrade and protect your SecretKey
subsequently. Therefore, we strongly recommend you run the UserSig
calculation logic on the server and make the application request the UserSig
calculated in real time every time the application uses the TUILiveKit
component from the server.Step 5. Enter the live preview screen
Note:
It's important to make sure you've followed Step 4 to complete the login. Only after you log in to TUILogin.login can you enter the live preview screen normally.
By loading TUILiveKit TUILiveRoomAnchorViewController page, you can pull up preview screen, click on "start live" can be launched online video broadcast.
//// MainViewController.swift//import UIKitimport TUILiveKit@objc private func buttonTapped(_ sender: UIButton) {//RoomId can be customized,Recommended use LiveIdentityGenerator.shared.generateId(TUILogin.getUserID() ?? "", .live)String roomId = "123666";// Enter the live preview screenlet viewController = TUILiveRoomAnchorViewController(roomId: roomId)self.navigationController?.pushViewController(viewController, animated: true)}
//// MainViewController.m//#import <TUILiveKit/TUILiveKit-Swift.h>- (void)buttonTapped:(UIButton *)sender {//RoomId can be customized,Recommended use [LiveIdentityGenerator.shared generateId:[TUILogin getUserID] type: RoomTypeLive];NSString *roomId = @"123666";// Enter the live preview screenTUILiveRoomAnchorViewController *liveViewController = [[TUILiveRoomAnchorViewController alloc] initWithRoomId:roomId];[self.navigationController pushViewController:liveViewController animated:true];}
Video Live Preview Screen | Live video streaming with pictures |
Step 6. Pull the room list
Note:
It's important to make sure you've followed Step 4 to complete the login. Only after you log in to TUILogin.login can you enter the live preview screen normally.
//// MainViewController.swift//import UIKitimport TUILiveKit@objc private func buttonTapped(_ sender: UIButton) {// Enter room listlet liveListViewController = TUILiveListViewController()self.navigationController?.pushViewController(viewController, animated: true)}
//// MainViewController.m//#import <TUILiveKit/TUILiveKit-Swift.h>- (void)buttonTapped:(UIButton *)sender {// Enter room listTUILiveListViewController *liveListViewController = [[TUILiveListViewController alloc] init];[self.navigationController pushViewController:liveListViewController animated:true];}
Step 7. The audience enters the studio
Video Live Room | Video Live Room |
More features
Q&A
Suggestions and Feedback
If you have any suggestions or feedback, please contact info_rtc@tencent.com.