快速入门

开发环境准备

在开发的过程中请满足如下环境要求。

SDK快速集成

由于浏览器安全策略限制，仅支持通过https://域名的方式访问，或者直接在本地搭建服务器，通过localhost:端口访问，否则无法获取摄像头及麦克风的权限。

1. 引入Web SDK方式。
   • 如果您通过<script>方式引入华为云会议Web SDK，则通过HWMeeting的CDN路径获取：

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

   前提：该引入方式需要把Web SDK所依赖的第三方库引入：

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

   • 如果您通过npm模块化的方式引入华为云会议Web SDK，首先要安装HWMeeting模块，安装命令（版本号按实际替换）

   // 如安装1.0.16版本，每个版本的npm包地址，请参考"Web SDK下载"章节
   npm install https://esdk.obs.cn-north-1.myhuaweicloud.com/huaweimeeting/hwmeeting-1.0.16.tgz
   // 或者直接访问地址下载到包 hwmeeting-1.0.16.tgz 后，如放在项目目录的 lib文件夹下
   npm install ./lib/hwmeeting-1.0.16.tgz

   用npm安装第三方库：

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

   在文件中使用：

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

2. 检测浏览器是否兼容SDK。

   通过步骤1，已经将HWMeeting对象导入，通过调用checkSystemRequirements接口，可以检查当前浏览器是否满足要求：

   const result = HWMeeting.checkSystemRequirements().then((result) => {
         // 调用成功
         console.log(JSON.stringify(result));
       }).catch((e) => {
         // 调用失败
         console.log(e.retCode, e.retMsg);
       })

3. 添加下列页面元素用于会议视频界面创建。

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

4. 创建事件监听。
   入会成功，会议状态变化，离会等事件，都可以通过事件监听通道捕获到，具体事件ID请参见事件通知参考。

   // 创建监听对象：
   let listener = HWMeeting.createEventListener();
   // 监听具体的事件：
   HWMeeting.getEventList().forEach(event => {
         listener.on(event, (eventData) => {
           console.log(event, JSON.stringify(eventData));
         });
       });  

   创建事件监听

5. 创建一个会议/网络研讨会
   • 方式一：登录华为云会议管理平台创建一个会议/网络研讨会

   会议：在左侧菜单栏中点击：会议->创建会议，根据提示创建完成后，即可获取会议ID、密码等信息。

   网络研讨会：在左侧菜单栏中点击：网络研讨会->创建网络研讨会，根据提示创建完成后，即可获取会议ID、密码等信息。

   图1 创建会议
   
   图2 创建网络研讨会
   
   • 方式二：通过调用服务端接口创建一个会议/网络研讨会：

   会议：会议创建接口

   网络研讨会：网络研讨会创建接口

   

   其中，会议角色包含：主持人，嘉宾；

   网络研讨会角色包含：主持人，嘉宾，观众。

6. 匿名入会（即未登录状态下加入会议）。
   • confId ：会议ID。
   • pwd ：创建会议/网络研讨会后，根据角色选择对应的密码。
   • nickName ：入会的昵称。

   let confId = '982433459';
   let pwd = 'xxxxxx'; 
   let nickName = 'user'; 
   // 匿名入会：
   HWMeeting.joinConf({confId, pwd, nickName}).then(() => {
           // 接口调用成功
           ...
         }).catch((e) => {
           // 接口调用失败
           ...
         })

7. 实名入会（即先登录再加入会议）。
   • token ：使用华为云会议实名用户token。
   

   华为云会议实名用户token获取，请参见：鉴权接口说明。

   let confId = '982433459';
   let pwd = 'xxxxxx'; 
   let nickName = 'user'; 
   let token = 'xxxxxx'; 
   // 实名入会：
   HWMeeting.joinConf({confId, pwd, nickName, token}).then(() => {
           // 接口调用成功
           ...
         }).catch((e) => {
           // 接口调用失败
           ...
         })

8. 离开会议。

   HWMeeting.leaveConf().then(() => {
         // 接口调用成功
         ...
       }).catch((e) => {
         // 接口调用失败
         ...
       })

   至此，华为云会议Web SDK的基本流程已经成功跑通。