快速跑通 e-Education 教育 Demo（Web版）

[ChrisSun]

Agora e-Education 是声网专为教育行业提供的示例项目，演示了如何通过 Agora Edu 云服务，并配合 Agora RTC SDK、Agora RTM SDK、Agora 云端录制和第三方 Netless 白板 SDK，快速实现基本的在线互动教学场景。

GitHub主页

https://github.com/AgoraIO-Usecase/eEducation

本地环境

MacOS Catalina 版本 10.15.4
Node： v13.11.0
Visual Studio Code： 版本 1.42.1
Chrome： 版本 81.0.4044.138（正式版本）（64 位）

下载代码

1. 打开 终端（Terminal） ，使用 git clone 下载本次使用到的项目代码。
   git clone https://github.com/AgoraIO-Usecase/eEducation.git
   
   

打开 education_web

1. 开启 Visual Studio Code，选择 文件 - 打开。
2. 找到 education_web文件夹，选择 打开。
   
   

编辑 education_web

以下为必填项目，不包含录制功能的设置

1. 将 .env.example 重命名为 .env.local 。

2. 将 REACT_APP_AGORA_APP_ID 设置为在声网控制台获取的项目 App ID。 该 App ID 的鉴权方式需要是 App ID + App 证书 + Token 。
   

   

3. 设置开启前端日志。
   REACT_APP_AGORA_LOG=true

4. 设置本机访问的URL。
   ELECTRON_START_URL=http://localhost:300

5. 设置 REACT_APP_AGORA_RESTFULL_TOKEN 。

• 点击控制台右上角的用户名，在列表中打开 RESTful API 页面，并找到 客户ID（Customer ID） 和 客户证书（Customer Certificate） 。
  

• 通过 https://tool.oschina.net/encrypt?type=3 实现在线编解码，来生成一个 RESTful Token。填写 客户ID:客户证书 后点击 BASE64编码 即可。
  

  

6. 教育与白板部分采用默认 API，不需要进行修改。

REACT_APP_AGORA_EDU_ENDPOINT_PREFIX=https://api.agora.io/edu

REACT_APP_YOUR_BACKEND_WHITEBOARD_API=https://api.agora.io/edu/v1/apps/

%app_id%/room/%room_id%/board`

获取第三方白板的 sdkToken 并注册到 Agora 云服务

1. 可访问 Netless ，在控制台中获取 Token
   

   

2. 打开 声网控制台 ，在 编辑项目 中填入你的 白板token 。
   

   

运行 education_web

1. 在 Visual Studio Code 中，选择 终端 - 新建终端。
2. 输入 npm install。
   
   

• 执行完成后。
  
  

3. 输入 npm run dev 开启服务器。
   
   

验证测试

1. 使用 Chrome 访问 http://localhost:3000 网址。
   

   

2. 输入房间名、昵称，选择房间类型，加入房间即可。
   

   
   
   网页画面