快速跑通 e-Education 教育 Demo(Web版)

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

  1. 教育与白板部分采用默认 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
  1. 输入 npm run dev 开启服务器。

验证测试

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

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


    网页画面

这个页面的截图已经更新了,建议有空的时候换成新的~

图片已更新,感谢反馈!

.env.local文件中还需要,配置如下两个字段

REACT_APP_AGORA_CUSTOMER_ID=
REACT_APP_AGORA_CUSTOMER_CERTIFICATE=

这2个字段是什么?

不太了解web开发,想问下web端是用vue搭建的还是。。

点击加入房间, 提示失败. 要求agora-token