tencent cloud

To quickly enable the interactive live video streaming feature, you can modify the demo we provide and adapt it to your needs. You can also use the TRTCLiveRoom component and customize your own UI.

Using the Demo UI

Step 1. Create an application

1. Log in to the TRTC console and select Development Assistance > Demo Quick Run.
2. Enter an application name such as TestLive and click Create.

Note：

This feature uses two basic PaaS services of Tencent Cloud, namely TRTC and IM. When you activate TRTC, IM will be activated automatically. IM is a value-added service. See Value-added Service Pricing for its billing details.

Step 2. Download the SDK and demo source code

1. Download the SDK and demo source code for your platform.
2. Click Next.
   

Step 3. Configure the demo project file

1. In the Modify Configuration step, select your platform.

2. Find and open /example/lib/debug/GenerateTestUserSig.dart.

3. Set parameters in GenerateTestUserSig.dart as follows.

   • SDKAPPID: a placeholder by default. Set it to the actual `SDKAppID`.
   • SECRETKEY: a placeholder by default. Set it to the actual key.
   

4. Click Next to complete the creation.

5. After compilation, click Return to Overview Page.

Note：

• The method for generating UserSig described in this document involves configuring SECRETKEY in client code. In this method, SECRETKEY may be easily decompiled and reversed, and if your key is leaked, attackers can steal your Tencent Cloud traffic. Therefore, this method is only suitable for the local execution and debugging of the demo.
• 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 send a request to the business server for a dynamic UserSig. For more information, see How do I calculate UserSig on the server?.

Step 4. Compile and run

Note：

An Android project must be run on a real device rather than a simulator.

1. Run flutter pub get.
2. Compile, run, and test the project.
   • Android
   • iOS

   1. Run flutter run.
   2. Open the demo project with Android Studio (3.5 or above), and click Run.

   1. Open \ios project in the source code directory with Xcode (11.0 or above).
   2. Compile and run the demo project.

Step 5. Modify the demo source code

The TRTCLiveRoom folder in the source code contains two subfolders: ui and model. The ui subfolder contains UI code. The table below lists the files (folders) and the UI views they represent. You can refer to it when making UI changes.

Customizing UI

The TRTCLiveRoom folder in the source code contains two subfolders: ui and model. The model subfolder contains the reusable open-source component TRTCLiveRoom. You can find the component's APIs in TRTCLiveRoom.dart and use them to customize your own UI.

Step 1. Integrate the SDKs

The interactive live streaming component TRTCLiveRoom depends on the TRTC SDK and IM SDK. You can configure pubspec.yaml to download their updates automatically.

Add the following dependencies to pubspec.yaml of your project.

dependencies:
 tencent_trtc_cloud: latest version number
 tencent_im_sdk_plugin: latest version number

Step 2. Configure permission requests and obfuscation rules

<key>NSMicrophoneUsageDescription</key>
<string>Audio calls are possible only with mic access.</string>

Step 3. Import the TRTCLiveRoom component

Copy all the files in the directory below to your project:

lib/TRTCLiveRoom/model/

Step 4. Create an instance and log in

1. Call the sharedInstance API to create an instance of the TRTCLiveRoom component.
2. Call the registerListener function to register event callbacks of the component.
3. Call the login API to log in to the component, and set the key parameters as described below.

   Parameter	Description
   SDKAppID	You can view `SDKAppID` in the TRTC console.
   userId	ID of the current user, which is a string that can contain letters (a-z and A-Z), digits (0-9), hyphens (-), and underscores (_). We recommend you set it based on your business account system.
   userSig	Tencent Cloud's proprietary security signature. To obtain one, see UserSig.
   useCDNFirst	Specifies the way audience watch live streams. `true` means that audience watch live streams over CDNs, which is cost-efficient but has high latency. `false` means that audience watch live streams in the low latency mode, the cost of which is between that of CDN live streaming and co-anchoring, but the latency is within 1 second.
   CDNPlayDomain	Specifies the domain name for CDN live streaming, which takes effect only if `useCDNFirst` is set to `true`. You can set it in CSS console > Domain Management.

Step 5. Create a room and push streams

1. After performing step 4 to log in, call setSelfProfile to set your nickname and profile photo.
2. Before streaming, you can call startCameraPreview to enable camera preview, add beauty filter buttons to the UI, and set beauty filters through getBeautyManager.

   Note：

   Only the Enterprise Edition SDK supports face changing and stickers.

3. After setting beauty filters, call createRoom to create a live streaming room.
4. Call startPublish to start streaming. To enable CDN live streaming, specify useCDNFirst and CDNPlayDomain in the TRTCLiveRoomConfig parameter, which is passed in during login, and specify streamID for playback when calling startPublish.

Step 6. Play back streams

1. After performing step 4 to log in, you can call setSelfProfile to set your nickname and profile photo.
2. Get the latest room list from the backend.

   Note：

   The room list in the demo is for demonstration only. The business logic of live streaming room lists vary significantly. Tencent Cloud does not provide list management services for the time being. Please manage the list by yourself.

3. Call getRoomInfos to get short descriptions of the rooms, which are provided by anchors when they call createRoom to create the rooms.

   Note：

   If your room list already displays enough information, you can skip the step of calling getRoomInfos.

4. Select a room, call enterRoom, with the room ID passed in to enter the room.
5. Call startPlay, with the anchor’s userId passed in to start playback.

• If the room list displays the userId of the anchor, you can call startPlay, passing in the anchor’s userId to start playback.
• If you do not know the anchor's userId, you can find it in the onAnchorEnter event callback, which you will receive after entering the room. You can then call startPlay to start playback.

Step 7. Co-anchor

1. Audience calls requestJoinAnchor to send a co-anchoring request to the anchor.
2. The anchor receives a notification (TRTCLiveRoomDelegate#onRequestJoinAnchor) about the co-anchoring request.
3. The anchor calls responseJoinAnchor to accept or decline the co-anchoring request.
4. The audience receives the onAnchorAccepted event notification, which carries the anchor's response.
5. If the anchor accepts the co-anchoring request, the audience can call startCameraPreview to turn the local camera on and then startPublish to push streams.
6. The anchor receives a notification (TRTCLiveRoomDelegate#onAnchorEnter) that a new stream is available, which carries the audience’s userId.
7. The anchor calls startPlay to play the audience’s video.

Step 8. Compete across rooms

1. Anchor A calls requestRoomPK to send a competition request to anchor B.
2. Anchor B receives the TRTCLiveRoomDelegate onRequestRoomPK notification.
3. Anchor B calls responseRoomPK to accept or decline the competition request.
4. Anchor B accepts the request and, after receiving the TRTCLiveRoomDelegate onAnchorEnter notification, calls startPlay to play anchor A's video.
5. Anchor A receives the onRoomPKAccepted notification, which specifies whether the competition request is accepted.
6. The request is accepted, and after receiving the TRTCLiveRoomDelegate onAnchorEnter notification, anchor A calls startPlay to play anchor B's video.

Step 9. Enable text chat and on-screen comments

• Call sendRoomTextMsg to send common text messages. All users in the room will receive the onRecvRoomTextMsg callback.
  IM has its default content moderation rules. Text messages that contain restricted terms will not be forwarded by the cloud.
  // Sender: send text messages
  trtcLiveCloud.sendRoomTextMsg("Hello Word!");
    
  
  // Recipient: listen for text messages
  onListenerFunc(type, params) async {
    switch (type) {
      case TRTCLiveRoomDelegate.onRecvRoomTextMsg:
            // Group text messages are received. This feature can be used to enable text chat rooms.
        break;
    }
  }

• Call sendRoomCustomMsg to send custom (signaling) messages. All users in the room will receive an onRecvRoomCustomMsg callback.
  Custom messages are often used to transfer custom signals, e.g., to give and broadcast likes.