Chat Salon (Android)

Last updated: 2021-09-30 12:02:33

    Demonstration

    You can download and install the app we provide to try out TRTC features in the chat salon scenario, including audio chat, mic on/off, low-latency audio interaction, etc.

    To quickly enable the chat salon feature, you can modify the app we provide and adapt it to your needs. You can also use the TRTCChatSalon component and customize your own UI.

    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 the application name such as TestChatSalon 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 TUIChatSalon source code.

    Step 3. Configure app project files

    1. In the Modify Configuration step, select the development platform in line with the source package downloaded.
    2. Find and open Android/Debug/src/main/java/com/tencent/liteav/debug/GenerateTestUserSig.java.
    3. Set parameters in GenerateTestUserSig.java 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 disclosed, attackers can steal your Tencent Cloud traffic. Therefore, this method is suitable only for the local execution and debugging of the demo app.
    • 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. Run the demo app

    Open the source code project TUIChatSalon with Android Studio (version 3.5 or above) and click Run.

    Step 5. Modify the demo app’s source code

    The Source 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 Room creation page.
    room The main room views for room owner and listener
    widget Common controls

    Tryout

    Note:

    You need at least two devices to try out the demo app.

    User A

    1. Enter a username (which must be unique) and log in.
    2. Tap Create Room.
    3. Enter the room subject and click Start Chat.

    User B

    1. Enter a username (which must be unique) and log in.
    2. Enter the room ID created by user A and click Enter Room.
    Note:

    You can find the room ID at the top of user A’s room view.

    Customizing Your Own UI

    The Source folder in the source code contains two subfolders: ui and model. The model folder contains the reusable open-source component TRTCChatSalon. You can find the component’s API functions in TRTCChatSalon.java and use them to customize your own UI.

    Step 1. Integrate the SDK

    The chat salon component Source depends on the TRTC SDK and IM SDK. Follow the steps below to integrate them into your project.

    Method 1: adding dependencies via Maven

    1. Add the TRTC SDK and IM SDK dependencies to dependencies.
      dependencies {
      complie "com.tencent.liteav:LiteAVSDK_TRTC:latest.release"
      complie 'com.tencent.imsdk:imsdk:latest.release'
      compile 'com.google.code.gson:gson:2.3.1'
      }
      >?You can view the latest version numbers of the two SDKs by visiting their GitHub pages at [TRTC](https://github.com/tencentyun/TRTCSDK) and [IM](https://github.com/tencentyun/TIMSDK).
    2. In defaultConfig, specify the CPU architecture to be used by your application.
      defaultConfig {
      ndk {
      abiFilters "armeabi-v7a"
      }
      }
    3. Click Sync Now to automatically download the SDKs and integrate them into your project.

    Method 2: adding dependencies through local AAR**

    If your access to the Maven repository is slow, you can download the ZIP files of the SDKs and manually integrate them into your project as instructed in the documents below.

    SDKDownload PageIntegration Guide
    TRTC SDK DOWNLOAD Integration document
    IM SDK DOWNLOAD Integration document

    Step 2. Configure permission requests and obfuscation rules

    Configure permission requests for your app in AndroidManifest.xml. The SDKs need the following permissions (on Android 6.0 and above, the read storage permissions must be requested at runtime):

    <uses-permission android:name="android.permission.INTERNET">
    <uses-permission android:name="android.permission.ACCESS_NETWORK_STATE">
    <uses-permission android:name="android.permission.ACCESS_WIFI_STATE">
    <uses-permission android:name="android.permission.WRITE_EXTERNAL_STORAGE">
    <uses-permission android:name="android.permission.READ_EXTERNAL_STORAGE">
    <uses-permission android:name="android.permission.RECORD_AUDIO">
    <uses-permission android:name="android.permission.MODIFY_AUDIO_SETTINGS">
    <uses-permission android:name="android.permission.BLUETOOTH">
    <uses-permission android:name="android.permission.READ_PHONE_STATE">

    In the proguard-rules.pro file, add the SDK classes to the "do not obfuscate" list.

    -keep class com.tencent.** { *; }

    Step 3. Import the TRTCChatSalon component

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

    Source/src/main/java/com/tencent/liteav/trtcchatsalon/model

    Step 4. Create an instance and log in

    1. Call the sharedInstance API to create an instance of the TRTCChatSalon component.
    2. Call the setDelegate 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.
      ParameterDescription
      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.
      callback Login callback. The code is 0 if login is successful.
      TRTCChatSalon mTRTCChatSalon = TRTCChatSalon.sharedInstance(this);
      mTRTCChatSalon.setDelegate(this);
      mTRTCChatSalon.login(SDKAPPID, userId, userSig, new TRTCChatSalonCallback.ActionCallback() {
      @Override
      public void onCallback(int code, String msg) {
      if (code == 0)
      {
      // Logged in
      }
      }
      });

    Step 5. Create a room and become a speaker

    1. After performing step 4 to log in, call setSelfProfile to set your nickname and profile photo.
    2. Call createRoom to create a chat salon, passing in room-related parameters such as room ID, whether your consent is required for listeners to speak, and the room type.
    3. You will receive an onAnchorEnterSeat notification that someone becomes a speaker, and mic capturing will be enabled automatically.

    // 1. Set your nickname and profile photo
    mTRTCChatSalon.setSelfProfile("my_name", "my_face_url", null);

    // 2. Call `createRoom` to create a room
    final TRTCChatSalonDef.RoomParam roomParam = new TRTCChatSalonDef.RoomParam();
    roomParam.roomName = "Room name";
    roomParam.needRequest = true; // Whether your consent is required for listeners to speak
    roomParam.coverUrl = "URL of room cover image";
    mTRTCChatSalon.createRoom(mRoomId, roomParam, new TRTCChatSalonCallback.ActionCallback() {
    @Override
    public void onCallback(int code, String msg) {
    if (code == 0)
    {
    // 3. Become a speaker
    mTRTCChatSalon.enterSeat(new TRTCChatSalonCallback.ActionCallback() {
    @Override
    public void onCallback(int code, String msg) {
    if (code == 0)
    {
    }
    }
    });
    }
    }
    });

    // 4. You receive an `onAnchorEnterSeat` notification after becoming a speaker
    @Override
    public void onAnchorEnterSeat(TRTCChatSalonDef.UserInfo userInfo) {
    }

    Step 6. Enter a room as a listener

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

      The chat salon list in the application is for demonstration only. The business logic of the chat salon list varies significantly. Tencent Cloud does not provide list management services for the time being. Please manage the list by yourself.

    3. Call getRoomInfoList to get short descriptions of the rooms, which are provided by room owners when they call createRoom to create the rooms.
      Note:

      If your chat salon list already contains enough room information, you can skip the step of calling getRoomInfoList.

    4. Select a chat salon, and call enterRoom with the room ID passed in to enter.
    5. After entering the room, the user receives an onRoomInfoChange notification about room attribute change from the component. The attributes can be recorded, and corresponding changes can be made to the UI, including room name, whether room owner’s consent is required for listeners to speak, etc.
    6. The user will also receive an onAnchorEnterSeat notification that someone became a speaker.

    // 1. Set your nickname and profile photo
    mTRTCChatSalon.setSelfProfile("my_name", "my_face_url", null);

    // 2. Assume that you get the room list `roomList` from the business backend
    List<integer> roomList = GetRoomList();

    // 3. Call `getRoomInfoList` to get details of the rooms
    mTRTCChatSalon.getRoomInfoList(roomList, new TRTCChatSalonCallback.RoomInfoCallback() {

    @Override
    public void onCallback(int code, String msg, List<trtcchatsalondef.roominfo> list) {
    if (code == 0)
    {
    // Refresh the room list on your UI
    }
    }

    });

    // 4. Pass in `roomid` to enter the room
    mTRTCChatSalon.enterRoom(roomId, new TRTCChatSalonCallback.ActionCallback() {
    @Override
    public void onCallback(int code, String msg) {
    if (code == 0)
    {
    // Entered room successfully
    }
    }
    });

    // 5. After entering the room, you receive an `onRoomInfoChange` notification
    @Override
    public void onRoomInfoChange(TRTCChatSalonDef.RoomInfo roomInfo) {
    mNeedRequest = roomInfo.needRequest;
    mRoomName = roomInfo.roomName;
    // The UI can display the title and other information
    }

    // 6. You receive an `onAnchorEnterSeat` notification
    @Override
    public void onAnchorEnterSeat(TRTCChatSalonDef.UserInfo userInfo) {
    }

    Step 7. Mic on/off

    1. A room owner can invite a listener to speak by passing in the userId of the listener to pickSeat. All members in the room will receive an onAnchorEnterSeat notification.
    2. A room owner can remove a speaker by passing in the speaker’s userId to kickSeat. All members in the room will receive an onAnchorLeaveSeat notification.


    After a speaker list operation, the order in which different notifications are sent is: callbacks > independent events such as onAnchorEnterSeat.

    // 1. The room owner invites a listener to speak
    mTRTCChatSalon.pickSeat("123", new TRTCChatSalonCallback.ActionCallback() {
    @Override
    public void onCallback(int code, String msg) {
    // 2. A callback is returned
    if (code == 0) {
    }
    }
    });

    // 3. The room owner receives a notification that someone became a speaker, and can determine whether it is the listener he or she invited
    public void onAnchorEnterSeat(TRTCChatSalonDef.UserInfo user) {
    }

    Step 8. Use signaling for invitations

    If you want listeners and room owners to obtain each other’s consent before performing the above actions in your app, you can use signaling for invitation sending.

    1. A listener calls sendInvitation, passing in information including the room owner’s userId and custom command words. The API will return an inviteId, which should be recorded.
    2. The room owner receives an onReceiveNewInvitation notification, and a window pops up on the UI asking the room owner whether to accept the request.
    3. The room owner calls acceptInvitation with the inviteId passed in to accept the request.
    4. The listener receives an onInviteeAccepted notification and calls enterSeat to become a speaker.

    // Listener
    // 1. Call sendInvitation to request to speak
    String inviteId = mTRTCChatSalon.sendInvitation("ENTER_SEAT", ownerUserId, "123", null);

    // 2. Put the user in the seat when the invitation is accepted by the listener
    @Override
    public void onInviteeAccepted(String id, String invitee) {
    if(id.equals(inviteId))
    {
    mTRTCChatSalon.enterSeat(null);
    }
    }

    // Room owner
    // 1. Receive the request
    @Override
    public void onReceiveNewInvitation(final String id, String inviter, String cmd, final String content) {
    if (cmd.equals("ENTER_SEAT"))
    {
    // 2. Accept the request
    mTRTCChatSalon.acceptInvitation(id, null);
    }
    }

    Step 9. Enable text chat and on-screen comments

    • Call sendRoomTextMsg to send common text messages. All users in the room will receive an 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
      mTRTCChatSalon.sendRoomTextMsg("Hello Word!", null);
      // Recipient: listen for text messages
      mTRTCChatSalon.setDelegate(new TRTCChatSalonDelegate() {
      @Override
      public void onRecvRoomTextMsg(String message, TRTCChatSalonDef.UserInfo userInfo) {
      Log.d(TAG, "Received a message from" + userInfo.userName + ": " + message);
      }
      });
    • 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.
      // Sender: customize CMD to distinguish between on-screen comments and likes
      // For example, use "CMD_DANMU" to indicate on-screen comments and "CMD_LIKE" to indicate likes
      mTRTCChatSalon.sendRoomCustomMsg("CMD_DANMU", "Hello world", null);
      mTRTCChatSalon.sendRoomCustomMsg("CMD_LIKE", "", null);
      // Recipient: listen for custom messages
      mTRTCChatSalon.setDelegate(new TRTCChatSalonDelegate() {
      @Override
      public void onRecvRoomCustomMsg(String cmd, String message, TRTCChatSalonDef.UserInfo userInfo) {
      if ("CMD_DANMU".equals(cmd))
      {
      // Receive an on-screen comment
      Log.d(TAG, "Received an on-screen comment from" + userInfo.userName + ": " + message);
      } else if ("CMD_LIKE".equals(cmd)) {
      // Receive a like
      Log.d(TAG, userInfo.userName + "liked you.");
      }
      }
      });