TRTCLiveRoom
component and customize your own UI.TestLive
and click Create./example/lib/debug/GenerateTestUserSig.dart
.GenerateTestUserSig.dart
as follows.UserSig
is to configure the secret key in the client code. In this method, the secret key is vulnerable to decompilation and reverse engineering. Once your secret key is leaked, attackers can steal your Tencent Cloud traffic. Therefore, this method is only suitable for locally running a demo project and debugging.UserSig
into your server and provide an application-oriented API. When UserSig
is needed, your application can send a request to your server for a dynamic UserSig
. For more information, see How do I calculate UserSig
during production?.flutter pub get
.flutter run
.\\ios project
in the source code directory with Xcode (11.0 or above).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.File or Folder | Description |
base | Basic classes used by the UI |
list | The list and room creation views |
room | Main room views for anchors and audience members |
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.TRTCLiveRoom
depends on the TRTC SDK and Chat SDK. You can configure pubspec.yaml
to download their updates automatically.pubspec.yaml
of your project.dependencies:tencent_trtc_cloud: latest version numbertencent_im_sdk_plugin: latest version number
Info.plist
:<key>NSMicrophoneUsageDescription</key><string>Audio calls are possible only with mic access.</string>
/android/app/src/main/AndroidManifest.xml
.xmlns:tools="http://schemas.android.com/tools"
to manifest
.tools:replace="android:label"
to application
.TRTCLiveRoom
componentlib/TRTCLiveRoom/model/
sharedInstance
API to create an instance of the TRTCLiveRoom
component.registerListener
function to register event callbacks of the component.login
API to log in to the component, and set the key parameters as described below.Parameter | Description |
SDKAppID | |
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 | |
useCDNFirst | Specifies the way the audience watches live streams. `true` means that the audience watches live streams over CDNs, which is cost-efficient but has high latency. `false` means that the audience watches 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. |
setSelfProfile
to set your nickname and profile photo.startCameraPreview
to enable camera preview, add beauty filter buttons to the UI, and set beauty filters through getBeautyManager
.createRoom
to create a live streaming room.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
.setSelfProfile
to set your nickname and profile photo.getRoomInfos
to get short descriptions of the rooms, which are provided by anchors when they call createRoom
to create the rooms.getRoomInfos
.enterRoom
, with the room ID passed in to enter the room.startPlay
, with the anchor’s userId
passed in to start playback.userId
of the anchor, you can call startPlay
, passing in the anchor’s userId
to start playback.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.requestJoinAnchor
to send a co-anchoring request to the anchor.TRTCLiveRoomDelegate#onRequestJoinAnchor
) about the co-anchoring request.responseJoinAnchor
to accept or decline the co-anchoring request.onAnchorAccepted
event notification, which carries the anchor's response.startCameraPreview
to turn the local camera on and then startPublish
to push streams.TRTCLiveRoomDelegate#onAnchorEnter
) that a new stream is available, which carries the audience member’s userId
.startPlay
to play the audience member's video.requestRoomPK
to send a cross-room communication request to anchor B.TRTCLiveRoomDelegate onRequestRoomPK
notification.responseRoomPK
to accept or decline the cross-room communication request.TRTCLiveRoomDelegate onAnchorEnter
notification, calls startPlay
to play anchor A's video.onRoomPKAccepted
notification, which specifies whether the cross-room communication request is accepted.TRTCLiveRoomDelegate onAnchorEnter
notification, anchor A calls startPlay
to play anchor B's video.sendRoomTextMsg
to send common text chat messages. All users in the room will receive the onRecvRoomTextMsg
callback.
Chat has its default content moderation rules. Text chat messages that contain restricted words will not be forwarded by the cloud.// Sender: Sends text chat messagestrtcLiveCloud.sendRoomTextMsg("Hello Word!");// Receiver: Listens for text chat messagesonListenerFunc(type, params) async {switch (type) {case TRTCLiveRoomDelegate.onRecvRoomTextMsg:// Group text chat messages are received. This feature can be used to enable text chat rooms.break;}}
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.
Was this page helpful?