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 位)
下载代码
- 打开 终端(Terminal) ,使用 git clone 下载本次使用到的项目代码。
git clone https://github.com/AgoraIO-Usecase/eEducation.git
打开 education_web
- 开启 Visual Studio Code,选择 文件 - 打开。
- 找到 education_web文件夹,选择 打开。
编辑 education_web
以下为必填项目,不包含录制功能的设置
-
将
.env.example
重命名为.env.local
。 -
将
REACT_APP_AGORA_APP_ID
设置为在声网控制台获取的项目 App ID。 该 App ID 的鉴权方式需要是 App ID + App 证书 + Token 。
-
设置开启前端日志。
REACT_APP_AGORA_LOG=true
-
设置本机访问的URL。
ELECTRON_START_URL=http://localhost:300
-
设置
REACT_APP_AGORA_RESTFULL_TOKEN
。
-
点击控制台右上角的用户名,在列表中打开 RESTful API 页面,并找到 客户ID(Customer ID) 和 客户证书(Customer Certificate) 。
-
通过 https://tool.oschina.net/encrypt?type=3 实现在线编解码,来生成一个 RESTful Token。填写 客户ID:客户证书 后点击 BASE64编码 即可。
- 教育与白板部分采用默认 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 云服务
-
可访问 Netless ,在控制台中获取 Token
-
打开 声网控制台 ,在 编辑项目 中填入你的 白板token 。
运行 education_web
- 在 Visual Studio Code 中,选择 终端 - 新建终端。
- 输入
npm install
。
- 执行完成后。
- 输入
npm run dev
开启服务器。
验证测试
-
使用 Chrome 访问
http://localhost:3000
网址。
-
输入房间名、昵称,选择房间类型,加入房间即可。
网页画面