You can download and install the demo app we provide to try out TRTC’s group audio/video room features, including screen sharing, beauty filters, and low-latency conferencing.
TestMeetingRoom
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. For IM billing details, see Pricing.
Clone or download the TRTCFlutterScenesDemo source code.
In the Modify Configuration step, select your platform.
Find and open /lib/debug/GenerateTestUserSig.dart
.
Set parameters in GenerateTestUserSig.dart
as follows.
Click Next to complete the creation.
After compilation, click Return to Overview Page.
Note:
- The method for generating
UserSig
described in this document involves configuringSECRETKEY
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 ofUserSig
into your server and provide an application-oriented API. WhenUserSig
is needed, your application can send a request to the business server for a dynamicUserSig
. For more information, see How do I calculate UserSig on the server?.
Note:An Android project must be run on a real device rather than a simulator.
flutter pub get
.The TRTCMeetingDemo
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 |
---|---|
TRTCMeetingIndex.dart | The view for meeting creation or join |
TRTCMeetingRoom.dart | The main view for video conferencing |
TRTCMeetingMemberList.dart | The view for participant list |
TRTCMeetingSetting.dart | The view for video conferencing parameter settings |
The TRTCMeetingDemo
folder in the source code contains two subfolders: ui
and model
. The model
subfolder contains the reusable open-source component TRTCMeeting
. You can find the component's APIs in TRTCMeeting.dart
and use them to customize your own UI.
The interactive live streaming component RTCMeeting
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
Add request for mic permission in Info.plist
:
<key>NSMicrophoneUsageDescription</key>
<string>Audio calls are possible only with mic access.</string>
TRTCMeeting
component.Copy all the files in the directory below to your project:
lib/TRTCMeetingDemo/model/
sharedInstance
API to create an instance of the TRTCMeeting
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 | 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. |
TRTCMeeting trtcMeeting = TRTCMeeting.sharedInstance();
trtcMeeting.registerListener(onListener);
ActionCallback res = await trtcMeeting.login(
GenerateTestUserSig.sdkAppId,
userId,
GenerateTestUserSig.genTestSig(userId),
);
if (res.code == 0) {
// Login succeeded
}
setSelfProfile
to set your username and profile photo as an anchor.createMeeting
to create a meeting room.startCameraPreview
to capture video and artMicrophone
to capture audio.getBeautyManager
.
Note:Only the Enterprise Edition SDK supports face changing and stickers.
// 1. The anchor sets his or her nickname and profile photo.
trtcMeeting.setSelfProfile('my_name', 'my_avatar');
// 2. The anchor creates a meeting.
ActionCallback res = await trtcMeeting.createMeeting(roomId);
if (res.code == 0) {
// Created the meeting successfully
// 3. The anchor turns the camera on and enables audio capturing.
trtcMeeting.startCameraPreview(true, TRTCCloudVideoViewId);
trtcMeeting.startMicrophone();
// 4. Set the beauty filter.
trtcMeeting.getBeautyManager().setBeautyStyle(TRTCCloudDef.TRTC_BEAUTY_STYLE_PITU);
trtcMeeting.getBeautyManager().setBeautyLevel(6);
}
setSelfProfile
to set your username and profile photo as a participant.enterMeeting
, passing in the meeting room ID to enter the room.startCameraPreview
to capture video and startMicrophone
to capture audio.onUserVideoAvailable
notification, and can call startRemoteView
and pass in the userId
to play the participant’s video.// 1. Set your username and profile photo as a participant
trtcMeeting.setSelfProfile('my_name', 'my_avatar');
// 2. The participant calls `enterMeeting` to enter the meeting room.
ActionCallback res = await trtcMeeting.enterMeeting(roomId);
if (res.code == 0) {
// Joined the meeting successfully.
// 3. The anchor turns the camera on and enables audio capturing.
trtcMeeting.startCameraPreview(true, TRTCCloudVideoViewId);
trtcMeeting.startMicrophone();
// 4. Set the beauty filter.
trtcMeeting.getBeautyManager().setBeautyStyle(TRTCCloudDef.TRTC_BEAUTY_STYLE_PITU);
trtcMeeting.getBeautyManager().setBeautyLevel(6);
}
// 5. The participant receives the notification that another member enables the camera and starts playback
trtcMeeting.registerListener(onListener);
onListener(TRTCMeetingDelegate type, param) {
switch (type) {
case TRTCMeetingDelegate.onUserVideoAvailable:
if (param['available']) {
trtcMeeting.startCameraPreview(
param['userId'],
TRTCCloudDef.TRTC_VIDEO_STREAM_TYPE_BIG,
TRTCCloudVideoViewId
);
} else {
trtcMeeting.stopRemoteView(
param['userId'],
TRTCCloudDef.TRTC_VIDEO_STREAM_TYPE_BIG
);
}
break;
}
}
startScreenCapture
, passing in encoding parameters and the floating window during screen recording to start screen sharing. For more information, see TRTC SDK.onUserVideoAvailable
event notification.Note:Screen sharing and camera capturing are mutually exclusive. Before enabling screen sharing, you need to call
stopCameraPreview
to disable camera capturing. For more information, see TRTC SDK.
await trtcMeeting.stopCameraPreview();
trtcMeeting.startScreenCapture(
videoFps: 10,
videoBitrate: 1600,
videoResolution: TRTCCloudDef.TRTC_VIDEO_RESOLUTION_1280_720,
videoResolutionMode: TRTCCloudDef.TRTC_VIDEO_RESOLUTION_MODE_PORTRAIT,
appGroup: iosAppGroup,
);
Call sendRoomTextMsg
to send text messages. All participants in the meeting 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
trtcMeeting.sendRoomTextMsg('Hello Word!');
// Recipient: listen for text messages
trtcMeeting.registerListener(onListener);
onListener(TRTCMeetingDelegate type, param) {
switch (type) {
case TRTCMeetingDelegate.onRecvRoomTextMsg:
print('Received a message from' + param['userName'] + ':' + param['message']);
break;
}
}
Call sendRoomCustomMsg
to send custom (signaling) messages, and all participants in the meeting will receive the onRecvRoomCustomMsg
callback. Custom messages are often used to transfer custom signals, such as muting notifications and notifications about other meeting controls.
// Sender: customize CMD to distinguish a muting notification
// E.g., use "CMD_MUTE_AUDIO" to indicate muting notifications
trtcMeeting.sendRoomCustomMsg('CMD_MUTE_AUDIO', '1');
// Recipient: listen for custom messages
trtcMeeting.registerListener(onListener);
onListener(TRTCMeetingDelegate type, param) {
switch (type) {
case TRTCMeetingDelegate.onRecvRoomCustomMsg:
if (param['command'] == 'CMD_MUTE_AUDIO') {
// Receive a muting notification.
print('Received a muting notification from' + param['userName'] + ':' + param['message']);
trtcMeeting.muteLocalAudio(message == '1');
}
break;
}
}
Was this page helpful?