跑通Web SDK Demo

本小节描述如何快速编译并运行Web SDK的Demo。

环境要求

在Web SDK Demo的编译运行过程中请满足如下环境要求。

表1 环境要求
环境和工具名称	版本要求	说明
操作系统	Windows 10专业版	硬件要求： CPU：i5-2400四核 3.1GHz及以上内存：4GB及以上
Visual Studio Code	NA	NA
Node.js	14.x	NA
http-server	0.12.3	NA
测试资源及App ID申请	NA	请参见“开发前准备”。

操作步骤

下载SDK和Demo源码
1. 按照“SDK下载”章节，下载SDK的ZIP包。
2. 解压ZIP包，得到如下文件及目录。
  图1 SDK包的目录结构
下载Web SDK Demo依赖的第三方库

由于Web SDK Demo中引入了4个第三方库文件，请提前下载，并放在与HWMeeting.js同一目录下。如下图所示：

图2 下载依赖的第三方库文件
- 这4个文件的建议下载地址如下：
  https://cdnjs.cloudflare.com/ajax/libs/react/17.0.2/umd/react.development.js
  
  https://cdnjs.cloudflare.com/ajax/libs/react-dom/17.0.2/umd/react-dom.development.js
  
  https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.29.3/moment.min.js
  
  https://cdnjs.cloudflare.com/ajax/libs/bulma/0.9.3/css/bulma.min.css
- 如果由于某些原因，上述地址无法访问，请自行搜索下载。
使用Visual Studio Code打开文件

图3 打开文件夹
指定端口启动本地调试
1. 此步骤前提是已经安装Node.js
2. 在命令行上执行如下命令安装http-server
  1
  
  npm install http-server -g
3. 命令行进入meeting-demo.html所在路径，指定端口号启动http-server
  1
  
  http-server . -p 8000
  图4 启动成功
4. 在Google Chrome浏览器中打开
   访问地址：http://localhost:8000/meeting-demo.html
  
  注意：此处访问使用localhost作为域名，而没有使用编译器中的IP，原因是Chrome 47以后，getUserMedia API只能允许来自“安全可信”的客户端的视频音频请求，如https和本地的localhost。如果页面的脚本从一个非安全源加载，Chrome会抛出错误。
使用Demo入会

浏览器Demo展示如下图：

图5 Web Demo启动后界面

使用华为云会议创建一个会议/网络研讨会后，
1. 可以使用会议ID和密码，匿名入会；
2. 也可以通过“执行App ID鉴权”，一键获取token，然后实名入会。
图6 Web Demo会中界面