Help Center/ Meeting/ Client SDK Reference/ Windows SDK/ API Reference/ UI Customization/ Configuring the UI

Updated on 2024-09-13 GMT+08:00

View PDF

Configuring the UI

Config

API Description

The Windows SDK provides the UI for meetings. Some elements on the UI can be customized. UI elements that can be customized are as follows:

Meeting window name

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

You can change the icon of the meeting window by replacing the video.ico file in the HwmSdk\sdkResources\nativeimg directory.

Meeting details and meeting link prefix

By default, the domain name prefix of the meeting link (for example, https://bmeeting.huaweicloud.com/#/j/982989574) is https://bmeeting.huaweicloud.com/. If you have developed your own meeting portal, you need to customize the prefix.

You can customize whether to display or hide meeting details.

Figure 2 Meeting details

Incoming meeting window

By default, the incoming meeting window is displayed when an incoming meeting is received. You can hide the window. When an incoming meeting notification is received, the API for answering the meeting is called.

Figure 3 Incoming meeting window

Meeting control buttons

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

Figure 4 Bottom toolbar and More menu

Figure 5 Sharing toolbar and More menu

Figure 6 Custom submenu items

Custom meeting details window

Figure 7 Custom meeting details window

Figure 8 Status bar

Figure 9 Profile picture of a participant in the participant list

For details about how to customize the meeting details window, see Displaying Meeting Information Box Notification and Destroying a Meeting Information Box.

Precautions

Call this API only if you need to change the default style of the meeting screen.
This API is an asynchronous API. The return value only indicates whether the API is successfully called. The actual service processing result is returned in the corresponding callback function.

Method Definition

    
         HWM_SDK_AGENT_API hwmsdk::HwmErrCode Config(char uiConfig[HWM_MAX_CONFIG_LEN]);

The Config API cannot be called consecutively. It can be called for the second time only after the OnConfigResult function of the result of the first Config API calling is processed.

Callback Function

   
        virtual void OnConfigResult(hwmsdk::HwmErrCode ret, const char* reason) {};

Parameter Description

**Table 1** Parameter description
Parameter	Mandatory	Type	Description
uiConfig	Yes	char[]	JSON object character string "{"frame":object}". The object has format requirements. If the format does not meet the requirements, the configuration does not take effect. For details, see the following tables.

**Table 2** frame object description
Key	Type	Description
name	string	Meeting window name, for example, MyApp shown in Figure 1.
linkPrefix	string	Prefix of the meeting link copied from the meeting window, for example, from the meeting window shown in Figure 2.
confMenu	object	Button objects in the meeting window, such as the four types of buttons shown in Figure 4 and Figure 5.
isUseExternalConfInfoWnd	bool	Whether to customize the meeting details window displayed in the meeting window, such as the window shown in Figure 7. true: enabled; false: disabled. The default value is false.
isUseExternalAddressBook	bool	Whether to use profile pictures in an external address book in the meeting window. true: yes; false: no. The default value is false.
isHideConfIncomingWindow	bool	Whether to hide the incoming meeting pop-up window. true: yes. false: no. The default value is false.
defaultWindowMode	int	Meeting window mode. 0: normal; 1: maximized; 2: full screen. The default value is 0.
isCloseSideWindow	bool	Whether to close the side window. false: no; true: yes. The default value is false.
flowControlInitShowPos	int	Initial position of the sharing toolbar. 0: top; 1: bottom. By default, the tool bar is displayed on the top.
defaultWindowMonitor	int	Display on which a meeting window is created by default when a participant joins a meeting. 0: primary display; 1: secondary display. By default, it is displayed on the primary display.
isHideTransferHostBeforeLeave	bool	Whether to hide the button for specifying a new host when the original host leaves a meeting. false: no; true: yes. The default value is false.
isUploadKeyLog	bool	Whether to automatically collect logs. true: yes; false: no. The default value is true.

**Table 3** confMenu object description
Key	Type	Description
toolBar	object	Button objects in the meeting window, such as the four types of buttons shown in Figure 4 and Figure 5.
titleBar	object	Configuration object of the title bar in the meeting window, for example, the meeting details shown in Figure 2.
statusBar	object	Configuration object of the status bar in the upper left corner of the meeting window, as shown in Figure 8.

**Table 4** toolBar object description
Key	Type	Description
button	object[]	Button objects in the meeting window, such as the four types of buttons and menus shown in Figure 4 and Figure 5.
customButton	object[]	Configuration object of the third-party custom buttons in the meeting window, such as 3 and 4 shown in Figure 4 and 1 and 2 shown in Figure 5.

**Table 5** statusBar object description
key	Type	Description
button	object[]	Button configuration object of the status bar in the upper left corner of the meeting window, as shown in Figure 8.

**Table 6** button object description
Key	Type	Description
id	string	Unique ID of a button. For details about the mapping between IDs and buttons, see Table 9.
showAsAction	string	Whether to display the button. The value can be never (not displayed) or ifRoom (displayed).
isCustomizedClick	bool	Whether to inject content if the button is clicked. true: yes. When a user clicks the button, a notification is sent, and the SDK does not process the click response.

**Table 7** customButton object description
Key	Type	Description
id	string	Custom button ID, for example, customMenu.
title	string	Custom button name, for example, Custom button.
buttonImg	string	Icon path of the custom button. Use an absolute path. For example, to/path/image.svg. SVG and PNG formats are supported. UTF-8 encoding is required.
buttonPos	int	Position of the custom button. 0: More menu on the toolbar; 1: bottom toolbar; 2: sharing toolbar.
subMenu	object[]	Submenu items of the custom button. Up to three levels of submenu items can be configured.

**Table 8** subMenu object description
Key	Type	Description
id	string	Custom button ID, for example, customMenu.
title	string	Custom button name, for example, Custom button.
buttonImg	string	Icon path of the custom button. Use an absolute path. For example, to/path/image.svg. SVG and PNG formats are supported. UTF-8 encoding is required.
subMenu	object[]	Submenu items of the custom button.

**Table 9** Button IDs
Button Name	Button ID	Description
Microphone	"microphone"	Can be hidden.
Speaker	"speaker"	Can be hidden.
Camera	"camera"	Can be hidden.
Invite	"invite"	Can be hidden and injected.
Leave	"leave"	Can be hidden and injected.
Share	"share"	Can be hidden and injected.
Participants	"attendee"	Can be hidden and injected.
Call other number	"call_other_number"	Can be hidden and injected.
Feedback	"feedback"	Can be hidden and injected.
Raise up/Lower hand	"hands_up"	Can be hidden.
Apply to be host/Release host role	"change_chairman_auth"	Can be hidden.
Rename	"rename"	Can be hidden.
Lock meeting	"lock_conf"	Can be hidden.
Annotate	"annotation"	Can be hidden.
Give control	"remote_control"	Can be hidden.
Stop sharing	"stop_share"	Can be hidden.
Chat	"chat"	Can be hidden and injected.
Export participants	"export_participants"	Can be hidden.
Open to	"attendee_access_control"	Can be hidden.
Allow sharing	"lock_Share"	Can be hidden.
Live captions (enabling live captions and caption translation)	"subtitle"	Can be hidden.
Security	"security"	Can be hidden.
Invite to share/Cancel sharing	"invite_or_cancel_share"	Can be hidden.
Hide non-video participants	"hide_no_video_view"	Can be hidden.
Intelligent video sorting	"video_smart_sorting"	Can be hidden.
Virtual background	"virtual_background"	Can be hidden.
Network detection	"network_detection"	Can be hidden.
Mute all/Unmute all	"mute_all"	Can be hidden.
Allow unmute	"allow_unmute"	Can be hidden.
Dual screen	"dual_screen"	Can be hidden.
Recording	"record"	Can be hidden.
Polls	"vote"	Can be hidden.
Sharing image quality policy: Definition preferred/Fluency preferred	"share_strategy"	Can be hidden.
Hide video window during sharing	"share_hide_video"	Can be hidden.
Include computer sound during sharing	"share_audio"	Can be hidden.
Copy meeting info	"copy_conf_info"	Can be injected.
Move all to waiting room	"moveall_to_waitingroom"	Can be hidden.
Participant details	"participant_detail"	Can be injected. For details, see Figure 9.
Copy attendee link	"copy_audience_conf_info"	Can be injected.

**Table 10** titleBar object description
Key	Type	Description
confDetail	object[]	Meeting details, as shown in Figure 2. If showAsAction is set to never, meeting details are not displayed.

**Table 11** confDetail object description
Key	Type	Description
showAsAction	string	Whether to display meeting details. The value can be never (not displayed) or ifRoom (displayed).
button	object[]	Button objects in the meeting details window.

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

{
    "frame":{
        "name":"MyApp",
        "linkPrefix":"https://www.demo.com/",
        "isUseExternalConfInfoWnd":false,
        "isUseExternalAddressBook":false,
        "confMenu":{
            "titleBar":{
                 "confDetail":{
                      "showAsAction":"never",
                 "button":[
                     {
                        "id":"copy_conf_info",
                        "isCustomizedClick":false
                     }
                  ]
            },
            "statusBar": {        
                  "button": [          
                      {            
                          "id": "record",            
                          "showAsAction": "never"          
                      }       
                    ]      
             },
            "toolBar":{
                "customButton": [
                   {
		        "id": "customMenu",
			"title": "Custom button",
                        "buttonImg": "D:/demoResource/icon-whiteboard.svg",
                        "buttonPos": 1
		    }],
                "button":[
                    {
                        "id":"microphone",
                        "showAsAction":"ifRoom"
                    },
                    {
                        "id":"speaker",
                        "showAsAction":"ifRoom"
                    },
                    {
                        "id":"camera",
                        "showAsAction":"ifRoom"
                    },
                    {
                        "id":"invite",
                        "showAsAction":"ifRoom",
                        "isCustomizedClick":true
                    },
                   {
                        "id":"leave",
                        "showAsAction":"ifRoom",
                        "isCustomizedClick":true
                    },
                   {
                        "id":"share",
                        "showAsAction":"never",
                        "isCustomizedClick":true
                    },
                   {
                        "id":"attendee",
                        "showAsAction":"ifRoom",
                        "isCustomizedClick":true
                    },
                   {
                        "id":"call_other_number",
                        "showAsAction":"ifRoom",
                        "isCustomizedClick":true
                    },
                   {
                        "id":"feedback",
                        "showAsAction":"never"
                    },
                   {
                        "id":"hands_up",
                        "showAsAction":"never"
                    },
                   {
                        "id":"change_chairman_auth",
                        "showAsAction":"never",
                        "isCustomizedClick":false
                    },
                   {
                        "id":"rename",
                        "showAsAction":"never"
                    },
                   {
                        "id":"lock_conf",
                        "showAsAction":"never"
                    },
                   {
                        "id":"annotation",
                        "showAsAction":"never"
                    },
                   {
                        "id":"remote_control",
                        "showAsAction":"never"
                    },
                   {
                        "id":"stop_share",
                        "showAsAction":"never"
                    },
                   {
                        "id":"chat",
                        "showAsAction":"ifRoom",
                        "isCustomizedClick":true
                    },
                   {
                        "id":"export_participants",
                        "showAsAction":"never"
                    },
                   {
                        "id":"attendee_access_control",
                        "showAsAction":"never"
                    },
                   {
                        "id":"network_detection",
                        "showAsAction":"never"
                    },
                   {
                        "id":"mute_all",
                        "showAsAction":"never"
                    },
                   {
                        "id":"allow_unmute",
                        "showAsAction":"never"
                    },
                   {
                        "id":"dual_screen",
                        "showAsAction":"never"
                    },
                   {
                        "id":"record",
                        "showAsAction":"never"
                    },
                   {
                        "id":"vote",
                        "showAsAction":"never"
                    }
                ]
            }
        }
    }
}

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

Sample Code

   
    
      
      
        /**
* UI configurations
*/
int hwmSDKConfigUI::hwmSDKStartUIConfigTotal()
{
    CString start = "{\"frame\":{";
 
    // Meeting window name
    CString name = "\"name\":\"MyApp\"";
 
    // Meeting link prefix
    CString linkPrefix = "\"linkPrefix\":\"https://www.demo.com/\"";
    // Whether to custom the external meeting details window
    CString isUseExternalConfInfoWnd = "\"isUseExternalConfInfoWnd\":\"false\"";
    // Whether to use an external address book.
    CString isUseExternalAddressBook = "\"isUseExternalAddressBook\":\"false\"";
    CString menuStart = "\"confMenu\":{";
    // Meeting details
    CString titleBar = "\"titleBar\":{\"confDetail\":{\"showAsAction\":\"ifRoom\"}}";
    CString toolBarStart = "\"toolBar\":{";
    // Customize buttons.
    CString customMenuStart = "\"customButton\":[";
    CString customMenu1 = "{\"id\":\"customMenu1\",\"title\":\"Custom button 1\"}";
    CString customMenu2 = "{\"id\":\"customMenu2\",\"title\":\"Custom button 2\"}";
    CString customMenuEnd = "]";
 
    // Meeting control buttons
    CString buttonStart = "\"button\":[";
    CString inviateButton = "{\"id\":\"invite\",\"showAsAction\":\"ifRoom\",\"isCustomizedClick\":true}";
    CString leaveButton = "{\"id\":\"leave\",\"showAsAction\":\"ifRoom\",\"isCustomizedClick\":true}";
    CString callButton = "{\"id\":\"call_other_number\",\"showAsAction\":\"ifRoom\",\"isCustomizedClick\":true}";
    CString attendeeButton = "{\"id\":\"attendee\",\"showAsAction\":\"ifRoom\",\"isCustomizedClick\":true}";
    CString shareButton = "{\"id\":\"share\",\"showAsAction\":\"ifRoom\",\"isCustomizedClick\":true}";
    CString annotationButton = "{\"id\":\"annotation\",\"showAsAction\":\"never\"}";
    CString stopshareButton = "{\"id\":\"stop_share\",\"showAsAction\":\"never\"}";
    CString feedbackButton = "{\"id\":\"feedback\",\"showAsAction\":\"never\"}";
    CString remotecontrolButton = "{\"id\":\"remote_control\",\"showAsAction\":\"never\"}";
    CString handsupButton = "{\"id\":\"hands_up\",\"showAsAction\":\"never\"}";
    CString changechairmanButton = "{\"id\":\"change_chairman_auth\",\"showAsAction\":\"never\"}";
    CString renameButton = "{\"id\":\"rename\",\"showAsAction\":\"never\"}";
    CString lockconfButton = "{ \"id\":\"lock_conf\",\"showAsAction\":\"never\"}"
    CString chatButton = "{\"id\":\"chat\",\"showAsAction\":\"never\"}";
    CString exportButton = "{\"id\":\"export_participants\",\"showAsAction\":\"never\"}";
    CString accessButton = "{\"id\":\"attendee_access_control\",\"showAsAction\":\"never\"}";
 
    CString buttonEnd = "]";
    CString toolBarEnd = "}";
    CString menuEnd = "}";
    CString end = "}}";
 
    CString customMenu = customMenuStart + customMenu1 + "," + customMenu2 + customMenuEnd;
    CString button = buttonStart + inviateButton + "," + leaveButton + "," \
        + callButton + "," + attendeeButton + "," + shareButton + "," + annotationButton + "," + stopshareButton + ","\
        + feedbackButton + "," + remotecontrolButton + "," + handsupButton + "," + changechairmanButton + "," + renameButton + ","\
        + lockconfButton + "," + chatButton + "," + exportButton  + "," + accessButton + buttonEnd;
 
    CString menu = menuStart + "," + titleBar + toolBarStart + customMenu + "," + button + toolBarEnd + menuEnd;
    CString config = start + name + "," + linkPrefix + "," + isUseExternalConfInfoWnd + "," + isUseExternalAddressBook + "," + menu + end;
    
    // Convert to the UTF-8 format.
    string uiConfig = CTools::UNICODE2UTF(config);
    int ret = hwmsdkagent::Config(uiConfig);
    return ret;
}

       

     

   
  