You can download and install the app we provide to try out TRTC’s video conferencing features, including screen sharing, beauty filters, and low-latency conferencing.

Using the Demo App’s 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, e.g., TestMeetingRoom, and click Create.
3. Click Next to skip this step.

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 app source code

Clone or download the TRTCFlutterScenesDemo source code.

Step 3. Configure app files

1. In the Modify Configuration step, select the development platform in line with the source package downloaded.
2. Find and open /lib/debug/GenerateTestUserSig.dart.
3. Set parameters in GenerateTestUserSig.dart as follows.
   • SDKAPPID: it is `PLACEHOLDER` by default. Please replace it with the real `SDKAppID`.
   • SECRETKEY: it is `PLACEHOLDER` by default. Please replace it with the real key information.
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 computing code of UserSig into your server and provide an app-oriented API. When UserSig is required, your app can send a request to the business server to obtain the dynamic UserSig. For more information, please see "Generating a UserSig on the Server" in Generating UserSig.

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 debug the project.
   • iOS
   • Android

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

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

Step 5. Modify the demo source code

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.

Customizing Your Own UI

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.

Step 1. Integrate the SDK

The video conferencing component TRTCMeeting 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

Step 3. Import the TRTCMeeting component.

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

lib/TRTCMeetingDemo/model/

Step 4. Create an instance and log in

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

   Parameter	Description
   sdkAppId	You can view the `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 (_).
   userSig	Tencent Cloud's proprietary security signature. To obtain one, please 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
}

Step 5. Create a meeting as a host.

1. After performing step 4 to log in, call setSelfProfile to set your nickname and profile photo as a host.
2. Call createMeeting to create a meeting room.
3. Call startCameraPreview to capture video image and startMicrophone to capture sound.
4. To use beauty filters, you can add beauty filter buttons to the UI and set beauty filters through getBeautyManager.

   Note：

   Only the Enterprise Edition SDK supports face changing and stickers.

// 1. The host sets his or her nickname and profile photo.
trtcMeeting.setSelfProfile('my_name', 'my_avatar');

// 2. The host creates a meeting.
ActionCallback res = await trtcMeeting.createMeeting(roomId);
if (res.code == 0) {
    // Created the meeting successfully
    // 3. The host turns the camera on and enables audio capturing.
    trtcMeeting.startCameraPreview(true, TRTCCloudVideoViewId);
    trtcMeeting.startMicrophone();
    // 4. The host sets beauty filters.
    trtcMeeting.getBeautyManager().setBeautyStyle(TRTCCloudDef.TRTC_BEAUTY_STYLE_PITU);
    trtcMeeting.getBeautyManager().setBeautyLevel(6);
}

Step 6. Join a meeting as an attendee.

1. After performing step 4 to log in, call setSelfProfile to set your nickname and profile photo as an attendee.
2. Call enterMeeting and pass in the meeting room ID to enter the room.
3. Call startCameraPreview to capture video image and startMicrophone to capture sound.
4. If another attendee turns the camera on, you will receive the onUserVideoAvailable notification, and can call startRemoteView and pass in the userId to play the attendee’s video.

// 1. The attendee sets his or her nickname and profile photo.
trtcMeeting.setSelfProfile('my_name', 'my_avatar');

// 2. The attendee calls `enterMeeting` to enter the meeting room.
ActionCallback res = await trtcMeeting.enterMeeting(roomId);
if (res.code == 0) {
    // Joined the meeting successfully
    // 3. The host turns the camera on and enables audio capturing.
    trtcMeeting.startCameraPreview(true, TRTCCloudVideoViewId);
    trtcMeeting.startMicrophone();
    // 4. The host sets beauty filters.
    trtcMeeting.getBeautyManager().setBeautyStyle(TRTCCloudDef.TRTC_BEAUTY_STYLE_PITU);
    trtcMeeting.getBeautyManager().setBeautyLevel(6);
}

// 5. The attendee 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;
    }
}

Step 7. Enable screen sharing.

1. The screen sharing feature requires the floating window permission, so you need to include the permission requesting logic in your UI.
2. Call startScreenCapture, pass in the encoding parameters and floating window to start screen sharing. For more information, please see TRTC SDK.
3. Other attendees in the room will receive the 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.

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,
);

Step 8. Implement text chat and muting notifications.

• Call sendRoomTextMsg to send text messages. All attendees 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 attendees 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;
      }
  }