JSON Description for UI Configuration

Some in-meeting UI elements are customized through the config API. UI elements that can be customized are as follows:

• Meeting window name (only for the Windows platform).

After a meeting starts, a meeting icon is generated on the task bar of the Windows. When you point to the icon, a thumbnail window is displayed. You can customize the name of the window.

Figure 1 Meeting window name

• Meeting details copied after the copy button is clicked on the meeting details screen

The default domain name prefix of the meeting link (for example, https://bmeeting.huaweicloud.com/#/j/982989574) is https://bmeeting.huaweicloud.com/. If the portal for joining a meeting is developed by you, customize the meeting details copied after a user clicks the copy button on the meeting details screen.

Figure 2 Meeting details

• Meeting control buttons

1. Delete or modify meeting control buttons provided by the SDK. For details about buttons that can be deleted and modified, see Table 10.
2. Add custom buttons. For details, see Customizing Meeting Control Buttons.

Parameter description of the config API

According to the preceding definition, the complete configuration items in JSON format of the customizable UI elements are as follows:

{
  "frame": {
    "name": "demo",
    "confMenu": {
      "titleBar": {
        "confDetail": {
          "button": [
            {
              "buttonId": "copy_conf_info",
              "isCustomizedClick": true
            }
          ]
        }
      },
      "statusBar": {
          "button": [
              {
                 "buttonId": "record",
                 "showAsAction": "never"
               }
           ]
       },
      "toolBar": {
        "customButton": [
          {
            "buttonId": "customMenu",
            "title": "Custom button"
            "buttonPos": 1,
            "buttonImg": "imagePath",
            "subMenu": ""
          },
          {
            "buttonId": "customMore",
            "title" " Custom more",
            "buttonPos": 0,
            "buttonImg": "imagePath"
          },
          {
            "buttonId": "customShare",
            "title": " Custom sharing",
            "buttonPos": 2,
            "buttonImg": "imagePath"
          }
        ],
        "button": [
          {
            "buttonId": "microphone",
            "showAsAction": "never"
          },
          {
            "buttonId": "speaker",
            "showAsAction": "never"
          },
          {
            "buttonId": "camera",
            "showAsAction": "never"
          },
          {
            "buttonId": "invite",
            "showAsAction": "never",
            "isCustomizedClick": true
          },
          {
            "buttonId": "leave",
            "showAsAction": "never",
            "isCustomizedClick": true
          },
          {
            "buttonId": "attendee",
            "showAsAction": "never",
            "isCustomizedClick": true,
            "dialogPos": "center"
          },
          {
            "buttonId": "share",
            "showAsAction": "never",
            "isCustomizedClick": true
          },
          {
            "buttonId": "chat",
            "showAsAction": "never",
            "isCustomizedClick": true,
            "dialogPos": "center"
          },
          {
            "buttonId": "annotation",
            "showAsAction": "never"
          },
          {
            "buttonId": "stop_share",
            "showAsAction": "never"
          },
          {
            "buttonId": "feedback",
            "showAsAction": "ifRoom",
            "isCustomizedClick": true
          },
          {
            "buttonId": "dual_screen",
            "showAsAction": "never"
          },
          {
            "buttonId": "remote_control",
            "showAsAction": "never"
          },
          {
            "buttonId": "record",
            "showAsAction": "never"
          },
          {
            "buttonId": "subtitle",
            "showAsAction": "never"
          },
          {
            "buttonId": "security",
            "showAsAction": "never"
          },
          {
            "buttonId": "network_detection",
            "showAsAction": "never"
          },
          {
            "buttonId": "vote",
            "showAsAction": "never"
          }
        ]
      }
    }
  }
}

The uiConfig of the config function is of the string type. Therefore, you need to convert the preceding JSON string into a character string. For details, see the following sample code.

Sample Code

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24

/**
* UI configurations
*/
async setInvite(){
    let param = {
        "frame": {
            "confMenu": {
                "toolBar": {
                    "button": [{
                        "buttonId": "invite",
                        "showAsAction": "ifRoom",
                        "isCustomizedClick": true
                    }]
                }
            }
        }
    }
    const apiService = new ApiService();
    // Convert JSON into a string and pass the string.
    let setResult = await apiService.config(JSON.stringify(param));
    if(setResult.ret != 0){
        window.electron.ipcRenderer.send("show-error-alert", "config error = " + setResult.ret);
    }
}