Scenario 3: Customizing the View

Description

In most scenarios where the SDK is used for secondary development, there may be different requirements on views. Therefore, the SDK provides the function of displaying or hiding components such as the participant window, chat window, meeting control bar, title, and on-screen comments. The setViewConfig API can be used to perform personalized settings, and the getViewConfig API can be used to obtain real-time information.

Service Process

This process uses displaying and hiding the chat window as an example. The setViewConfig API is called and the view_config_change event is listened on.

1. Call an API.

   Call the setViewConfig API in the SDK.

2. Implement the notification function.

   Process the listened view_config_change event.

3. Call an API.

   (Optional) Call the getViewConfig API to obtain the view information.

Sample Code

 1
 2
 3
 4
 5
 6
 7
 8
 9
10

// The input parameter is the key corresponding to chats.
let params = {chatVisible: false};
HWMeeting.setViewConfig(params).then(() => {
      // API called.
      ...      
    }).catch((e) => {
      // API calling failed.
      ...
    });
}

1
2
3
4
5
6
7
8

// Event listening. Configure it before joining a meeting.
listener = HWMeeting.createEventListener();

HWMeeting.getEventList().forEach(event => {
  listener.on("view_config_change", (eventData) => {
      ...
  });
}); 

1
2
3
4
5
6
7
8

// This API is used to query the view status. Call it as required.
HWMeeting.getViewConfig("chatVisible").then((data) => {
  // Display the result.
  console.log(JSON.stringify(data));
}).catch((e) => {
  // API calling failed.
  ...  
});