Getting Started

Preparations

During the development, ensure that the following environment requirements are met:

SDK Integration

Due to the security policy restrictions of browsers, you can access the SDK only using a domain name starting with https://. Alternatively, you can set up a local server and access the SDK through localhost:port. Otherwise, you cannot obtain the camera and microphone permissions.

1. Introduce the web SDK.
   • If you use <script> to introduce Huawei Cloud Meeting web SDK, obtain it from the CDN path of HWMeeting.

   1	<script src='./HWMeeting.js'></script>

   Prerequisite: Third-party libraries on which the web SDK depends must be imported.

   1 2	<script src="./react.development.js" crossorigin></script> <script src="./react-dom.development.js" crossorigin></script>

   • If you introduce Huawei Cloud Meeting web SDK in npm module mode, run the following commands to install the HWMeeting module first. (Replace the version number with the actual one.)

   // For details about the npm package address of each version, see section "Downloading the Web SDK." This example uses the 1.0.18 version.
   npm install https://esdk.obs.cn-north-1.myhuaweicloud.com/huaweimeeting/hwmeeting-1.0.18.tgz
   // Alternatively, visit the download address to download the hwmeeting-1.0.18.tgz package to a folder, for example, the lib folder in the project directory.
   npm install ./lib/hwmeeting-1.0.18.tgz

   Use npm to install third-party libraries:

   npm install react@^17.0.2
   npm install react-dom@^17.0.2

   Use the SDK in your file:

   import * as HWMeeting from 'hwmeeting';
   ...
   console.log(HWMeeting.getVersion())

2. Check whether the browser is compatible with the SDK.

   The HWMeeting object has been imported in step 1. You can call the checkSystemRequirements API to check whether the current browser meets the requirements.

   const result = HWMeeting.checkSystemRequirements().then((result) => {
         // API called.
         console.log(JSON.stringify(result));
       }).catch((e) => {
         // API calling failed.
         console.log(e.retCode, e.retMsg);
       })

3. Add the following page elements for creating the meeting video page:

   <div id="root" style="position: absolute; width: 1600px; height: 900px; margin: 2% 5%">
   </div>
   <div id="stream-pools" style="display: none"></div>

4. Set the meeting server address.

   // Set the meeting server address.
     HWMeeting.setServerConfig({
       host: 'intl.meeting.huaweicloud.com',
       port: '443'
     });

5. Create an event listener.
   Events such as meeting joining success, meeting status change, and meeting leaving can be captured through the event listening stream. For details about the event IDs, see Event Notification Reference.

   // Create a listener.
   let listener = HWMeeting.createEventListener();
   // Listen to a specific event.
   HWMeeting.getEventList().forEach(event => {
         listener.on(event, (eventData) => {
           console.log(event, JSON.stringify(eventData));
         });
       });  

6. Create a meeting.
   • Method 1: Log in to Huawei Cloud Meeting Management Platform to create a meeting.

   Meeting: In the navigation pane, choose Meetings > Create Meeting. After the meeting is created, obtain the meeting ID and password.

   Figure 1 Creating a meeting
   
   • Method 2: Call a server API to create a meeting.

   API for creating a meeting

   

   Meeting roles include host and guest.

7. Join the meeting anonymously (that is, join a meeting without login).
   • confId: meeting ID.
   • pwd: After a meeting is created, select a password based on the role.
   • nickName: display name used in the meeting.

   let confId = '982433459';
   let pwd = 'xxxxxx'; 
   let nickName = 'user'; 
   // Anonymously join the meeting.
   HWMeeting.joinConf({confId, pwd, nickName}).then(() => {
           // API called.
           ...
         }).catch((e) => {
           // API calling failed.
           ...
         })

8. Join the meeting after authentication.
   • token: token of a Huawei Cloud Meeting authenticated user.
   

   For details about how to obtain the token, see the Authenticating an App ID.

   let confId = '982433459';
   let pwd = 'xxxxxx'; 
   let nickName = 'user'; 
   let token = 'xxxxxx'; 
   // Join the meeting after login.
   HWMeeting.joinConf({confId, pwd, nickName, token}).then(() => {
           // API called.
           ...
         }).catch((e) => {
           // API calling failed.
           ...
         })

9. Leave the meeting.

   HWMeeting.leaveConf().then(() => {
         // API called.
         ...
       }).catch((e) => {
         // API calling failed.
         ...
       })

   The basic process of Huawei Cloud Meeting web SDK is complete.