Effect Demo

To quickly implement the video call feature, you can directly modify the demo provided by TRTC for adaptation or use the provided TRTCCalling component and implement your custom UI.

Note：

Previously we offered TRTCVideoCall component, which was moved to the Component Repository. We now provide TRTCCalling component which uses IM signaling API and is not compatible with the previous version.

Reusing Demo UI

Step 1. Create an application

1. Log in to the TRTC Console and select Development Assistance > Demo Quick Run.
2. Click Start Now, enter the application name such as TestVideoCall, and click Create Application.

Note：

This feature uses two basic PaaS services of Tencent Cloud, namely, TRTC and IM. When TRTC is activated, IM will be activated automatically.IM is a value-added service at the prices as detailed in Pricing.

Step 2. Download the SDK and demo source code

1. Mouse over the corresponding block, click GitHub to enter GitHub (or click ZIP), and download the relevant SDK and supporting demo source code.
   
2. After the download is completed, return to the TRTC Console and click Downloaded and Next. Then, you can see the SDKAppID and key information.

Step 3. Configure demo project files

1. Decompress the source package downloaded in step 2.
2. Find and open the iOS/TRTCScenesDemo/TXLiteAVDemo/Debug/GenerateTestUserSig.h file.
3. Set the parameters in the GenerateTestUserSig.h file:
   • SDKAPPID: it is 0 by default. Please replace it with the real SDKAppID.
   • SECRETKEY: it is an empty string by default. Please replace it with the real key information.
     
4. Return to the TRTC Console and click Pasted and Next.
5. Click Close Guide and Log in to the Console to Manage the Application.

Note：

• In this document, the SECRETKEY is configured in the client code to obtain UserSig. The SECRETKEY is easily decompiled and reverse cracked. If the SECRETKEY is leaked, hackers can steal your Tencent Cloud traffic. Therefore, this method only applies to locally running a demo project and commissioning features.
• The correct UserSig distribution method is to integrate the calculation code of UserSig into your server and provide an application-oriented API. When UserSig is needed, your application can make a request to the business server for dynamic UserSig. For more information, please see How to Calculate UserSig.

Step 4. Run the demo

Use Xcode (v11.0 or above) to open the iOS/TRTCScenesDemo/TXLiteAVDemo.xcworkspace source code project and click Run to debug the demo.

Step 5. Modify the demo source code

The source code folder TRTCCallingDemo contains two subfolders: ui and model. The ui folder contains the UI code:

File or Folder	Description
TRTCCallingVideoViewController.swift	Video call homepage where calls can be answered or rejected.
TRTCCallingAudioViewController.swift	Audio call homepage where calls can be answered or rejected.
TRTCCallingContactViewController.swift	It is used to show the interface for searching for contacts.

Implementing Custom UI

The TRTCCallingDemo folder in the [source code] contains two subfolders: ui and model. The model folder contains the reusable open-source component TRTCCalling. You can find the API functions provided by this component in the TRTCCalling.h file.

You can use the open-source component TRTCCalling to implement your own UI, i.e., only reusing the model to implement your custom UI.

Step 1. Integrate the SDK

The call component TRTCCalling depends on the TRTC SDK and IM SDK. You can integrate the two SDKs into your project in the following steps:

• Method 1. Implement dependency through the CocoaPods repository

  pod 'TXIMSDK_iOS'
  pod 'TXLiteAVSDK_TRTC'
  

  Note：

  You can get the latest version numbers of the two SDKs on the TRTC and IM homepages on GitHub.

• Method 2. Implement dependency through local files
  If the access to the CocoaPods repository is slow in your development environment, you can download the ZIP packages and manually integrate the SDKs into your project as instructed in the integration document.

  SDK	Download Page	Integration Guide
  TRTC SDK	DOWNLOAD	Integration Documentation
  IM SDK	DOWNLOAD	Integration Documentation

Step 2. Configure permissions

Apply for the camera and mic permissions by adding Privacy - Camera Usage Description and Privacy - Microphone Usage Description in the info.plist file.

Step 3. Import the TRTCCalling component

Copy all files in the following directory to your project:

iOS/TRTCSceneDemo/TXLiteAVDemo/TRTCCallingDemo/model 

Step 4. Initialize and log in to the component

1. Set push information.

   [TRTCCalling shareInstance].imBusinessID = your business ID;
   [TRTCCalling shareInstance].deviceToken =  deviceToken;
   

2. Call login(sdkAppID: UInt32, user: String, userSig: String, success: @escaping (() -> Void), failed: @escaping ((_ code: Int, _ message: String) -> Void)) to log in to the component. Enter key parameters as shown below:

   Parameter Name	Description
   sdkAppID	You can view the `SDKAPPID` in the TRTC Console.
   user	ID of current user, which is a string that can contain only letters (a–z and A–Z), digits (0–9), hyphens (-), and underscores (_).
   userSig	How to Calculate UserSig.

   // Login
   [[TRTCCalling shareInstance] login:SDKAPPID user:userID userSig:userSig success:^{
        NSLog(@"Video call login success.");
   } fail:^(int code, NSString *msg) {
        NSLog(@"Video call login failed.");
   }];
   

Step 5. Implement one-to-one calls

1. Caller: call the call(userId, callType) method in TRTCCalling and pass in the user ID as userId and CallType_Video as callType to initiate a video call request.
2. Callee: if already logged in, the callee will receive the onInvited() callback. The caller can use the parameter callType to set the call type and the callee can use this parameter to initiate the call interface. If you want the callee to receive call requests even when logged out, please see Offline Answering.
3. Callee: the callee can call the accept() function to answer the call and also call the openCamera() function to enable the local camera if this is a video call. And the callee can call reject() to reject the call.
4. After the audio/video channel between the caller and callee is established, they will receive the onUserVideoAvailable() callback, which indicates that they have received each other's image. At this point, they can call startRemoteView() to display the remote video image, and the remote audio will be played back by default.

// 1. Listen on callback
[[TRTCCalling shareInstance] addDelegate:delegate];
// Answer/reject the call
// At this point, if user B also logs in to the IM system, user B will receive the `onInvited(A, null, false)` callback
// Call the TRTCCalling `accept` method/`reject()` method to accept/reject the call
-(void)onInvited:(NSString *)sponsor
       userIds:(NSArray<NSString *> *)userIdsv
   isFromGroup:(BOOL)isFromGroup
      callType:(CallType)callType {
  [[TRTCCalling shareInstance] accept];
}
// 2. View each other's image
// As user A enables the camera, user B will receive the `onUserVideoAvailable(A, true)` callback after answering the call
- (void)onUserVideoAvailable:(NSString *)uid available:(BOOL)available {
if (available) {
  UIView* renderView =[[UIView alloc] init];
  [[TRTCCalling shareInstance] startRemoteView:uid view:renderView]; // They can see each other's image
} else {
  [[TRTCCalling shareInstance] stopRemoteView:uid]; // Stops rendering the image
}
}
// 3. Call the component’s other functions to initiate or hang up a call or to use other features
// Note: you can only call functions after login
// Initiate a video call
[[TRTCCalling shareInstance] call:@"Target user" type:CallType_Video];
// Hang up
[[TRTCCalling shareInstance] hangup];
// Reject
[[TRTCCalling shareInstance] reject];

Step 6. Make a group call

1. Caller: to make a group video/audio call, the caller needs to call groupCall() function in TRTCCalling, pass in userIdList (user list, required) and groupId (IM group ID, optional) parameters. The callType is CallType_Video.
   Callee: a callee can receive the request via the onInvited() callback. The parameter list is entered by the caller and the parameter callType is used to set the call type. Callee can use this parameter to initiate the call interface.
2. Callee: a callee can call the accept() method to answer the call or call the reject() method to reject the call after receiving the callback.
3. If a callee does not respond to the call for a certain period of time (30 seconds by default), this callee will receive the onCallingTimeOut() callback, and the caller will receive the onNoResp() callback. If multiple callees do not answer the call, the caller can call hangup (), and each callee will receive the onCallingCancel() callback.
4. A user can call thehangup() method to leave the current group call.
5. If there is a user joining or leaving the call, other users will receive the onUserEnter() or onUserLeave() callback.

Note：

The groupID parameter in the groupCall:type:groupID: API is the group ID in the IM SDK. If this parameter is set, the call request will be sent through the group message system, which is simple and reliable. If this parameter is left empty, the TRTCalling component will send the message to users one by one.

// Omitted content...
// Splice the list of users to be called
NSArray *callList = @[];
[callList addObject:@"b"];
[callList addObject:@"c"];
[callList addObject:@"d"];
// If the call is not initiated in an IM group, an empty string can be passed in for `groupId`;
[[TRTCCalling shareInstance] groupCall:callList type:CallType_Video groupID:@""];
// Enable local camera
[[TRTCCalling shareInstance] openCamera:true view:renderView];

Step 7. Answer a call offline

Note：

If your business is online customer service or any other service that does not require the offline answering feature, you only need to complete step 1 to step 6 for integration. If your business is used for social networking, you are recommended to implement offline answering.

The IM SDK supports offline push, but you need to complete the corresponding settings to meet its availability standard.

1. For details on how to apply for an Apple push notification service certificate, please see Applying for an Apple Push Certificate.
2. Configure offline push on the backend and client. For detailed directions, please see Offline Push (iOS).
3. Set param.busiId in the login function to the corresponding certificate ID.

Component APIs

Below is the list of TRTCCalling component APIs:

API Fuction	Description
addDelegate	Sets the callback proxy of TRTCVideoCallDelegate, which provides status notification for users
login	Logs in to IM. All other features can be used only after login
logout	Logs out of IM. Calls cannot be made after logout
call	Customized apps can integrate with the MLVB SDK provided by Tencent Cloud to implement the push function.
groupCall	Invites users to IM group call. The invited users will receive the onInvited callback
accept	Answers the call as a callee
reject	Rejects the call as a callee
hangup	Hangs up the call
startRemoteView	Renders the camera data of remote user in the specified UIView
stopRemoteView	Stops rendering the camera data for a remote user
openCamera	Enables camera and renders data in the specified TXCloudVideoView
closeCamera	Disables the camera
switchCamera	Switches between front and rear cameras
setMicMute	Specifies whether to mute the mic
setHandsFree	Specifies whether to enable the hands-free mode