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.
- 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.
- 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 10.
- Add custom buttons. For details, see Customizing Meeting Control Buttons.
Parameter description of the config API
Parameter |
Mandatory |
Type |
Description |
---|---|---|---|
uiConfig |
Yes |
string |
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 detailed rules, see Table 2, 3, 4, and 5. |
Key |
Type |
Description |
---|---|---|
name |
string |
Meeting window name, for example, MyApp shown in Figure 1. |
confMenu |
object |
Button objects in the meeting window, as shown in Figure 3 and Figure 4. |
Key |
Type |
Description |
---|---|---|
toolBar |
object |
Button objects in the meeting window, as shown in Figure 3 and Figure 4. |
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 5. |
Key |
Type |
Description |
---|---|---|
button |
object[] |
Button objects in the meeting window, for example, buttons and menus shown in Figure 3 and Figure 4. |
customButton |
object[] |
Configuration object of the third-party custom buttons in the meeting window, for example, 2 and 3 shown in Figure 3 and 1 and 2 shown in Figure 4. |
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 5. |
Key |
Type |
Description |
---|---|---|
confDetail |
object[] |
for example, the meeting details shown in Figure 2. |
Key |
Type |
Description |
---|---|---|
button |
object[] |
Button objects in the meeting details window. |
Key |
Type |
Description |
---|---|---|
buttonId |
string |
Unique ID of a button. For details about the mapping between buttonId and buttons, see Table 10. |
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. |
Key |
Type |
Description |
---|---|---|
buttonId |
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. |
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. |
Feedback |
"feedback" |
Can be hidden and injected. |
Annotation |
"annotation" |
Can be hidden (valid only for the Windows platform). |
Give control |
"remote_control" |
Can be hidden (valid only for the Windows platform). |
Stop sharing |
"stop_share" |
Can be hidden. |
Chat |
"chat" |
Can be hidden and injected. |
Live captions (enabling live captions and caption translation) |
"subtitle" |
Can be hidden. |
Security |
"security" |
Can be hidden. |
Network detection |
"network_detection" |
Can be hidden. |
Allow unmute |
"allow_unmute" |
Can be hidden (valid only for the Windows platform). |
Dual screen |
"dual_screen" |
Can be hidden (valid only for the Windows platform). |
Recording |
"record" |
Can be hidden. |
Polls |
"vote" |
Can be hidden. |
Copy meeting info |
"copy_conf_info" |
Can be injected. |
Participant details |
"participant_detail" |
Can be injected. (The macOS SDK does not require injection.) |
Copy attendee link |
"copy_audience_conf_info" |
Can be injected. |
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); } } |
Feedback
Was this page helpful?
Provide feedbackThank you very much for your feedback. We will continue working to improve the documentation.See the reply and handling status in My Cloud VOC.
For any further questions, feel free to contact us through the chatbot.
Chatbot