Web端接入

前提条件

• 已接入、运行、部署开源的Appserver服务。具体操作，请参见服务端集成。

开发框架

本项目使用UmiJS框架开发，技术栈为React + TypeScript ，详细请了解UmiJS 官方文档。

集成流程

准备环境

安装Node环境，详细信息请参见UmiJS 快速上手教程。

配置

请在.umirc.ts文件中的CONFIG对象中配置项目所需参数。

配置Appserver

1. 下载Web端源码并解压。

2. 在CONFIG.appServer 中配置AppServer所需的参数。

   appServer: {
    // 配置 APPServer 服务域名，结尾字符请勿是 /，服务端需要开启可跨域设置
    origin: 'https://xxx.xxx.xxx',
    // 配置api接口路径前缀
    apiPrefixPath: '/api/v1/class/',
   }

   说明

   如果有些业务上的定制，可以直接修改src/services/base.ts文件中ServicesOrigin、ApiPrefixPath等变量。

配置SLS日志

若您需要上报课堂项目的SLS日志，可以在CONFIG.reporter中配置相关参数，更多说明请参见 SLS日志服务 。

reporter: {
 enable: true, // true: 开启日志上报，false: 关闭
 host: '', // 所在地域的服务入口，如：cn-hangzhou.log.aliyuncs.com
 projectName: '', // sls 的工程名称
 logstore: '', // sls 的 logstore
},

互动白板

目前该场景集成了 网易云信互动白板 服务，您需要开通其服务，且实现AppServer中白板相关的接口才能跑通整个流程。相关的 API 文档可以查看其官方文档以及typings/netease文件夹下的定义文件。

本地运行

1. 配置完接口域名后，打开终端，进入工程文件夹，执行下方指令，即可在本地运行起来。

   // 安装 npm 包（安装速度慢）
   npm install
   // 若已安装 cnpm 、pnpm、tnpm 等工具，请选择使用以下某个指令安装
   cnpm install
   pnpm install
   tnpm install
   
   // 安装完成后，执行 dev 指令，运行成功后根据提示使用浏览器访问即可
   npm run dev

构建配置

// 运行 build 指令即可构建最终产物至 ./dist 目录下
npm run build

构建的文件主要为index.html 、umi.js、umi.css ，其余的是按需加载的资源文件。 请根据您部署生产环境、加载资源的情况配置.umirc.ts的publicPath ：

• 若您最终访问的页面是单独加载生成的js、css 资源，无需配置publicPath。

• 若您直接使用index.html请参考如下示例，根据您的实际情况进行配置。

  展开查看示例代码

  import fs from 'fs';
  import path from 'path';
  
  const packagejson = fs.readFileSync(path.resolve('./package.json'));
  const json = JSON.parse(packagejson.toString());
  const publicPath = process.env.NODE_ENV === 'production'
    ? `/publicPath/${json.name}/${json.version}/`
    : '/';
  
  export default {
    // 省略其他配置参数
    
    // 生成的 index.html 里使用的 umi.js 、umi.css 地址的公共路径的默认值是 /
    // 若 index.html 部署的地址是 http://xxxcdn.com/publicPath/amaui-web-classroom/0.0.1/index.html
    // 若不配置 publicPath 直接访问测试、线上环境 index.html，所加载的 umi.js 将会是 http://xxxcdn.com/umi.js
    // 显然不是跟 index.html 目录下了，所以请根据您实际情况配置
    // 例子中使用了项目的 name 、version 在部署目录中，请根据您实际情况配置
    publicPath: publicPath,
  
    // 同时还需要修改自定义的 PUBLIC_PATH 字段值
    define: {
      PUBLIC_PATH: publicPath,
    },
  }

功能说明

本项目主要实现了课堂页面以及配套用于DEMO体验的登录页面。src/pages文件夹下的 index.tsx 、classroom.tsx 为登录页和课堂页的入口文件，对应的主要功能逻辑写在 src/components 下的 Login 、ClassRoom 文件夹中。

本项目同时支持教师端和学生端。老师身份目前仅支持在 PC 端进入课堂；学生身份可以通过 PC 或移动端进入课堂。

教师端

请在Windows、macOS等桌面设备的浏览器中访问。

登录

• 课堂角色：

  • 教师

  • 学生

• 课堂类型：

  • 公开课：学生端支持观看、聊天等功能。

  • 大班课：可连麦互动，学生端支持连麦、观看、聊天等功能。

• 教室号：

  • 课堂角色为教师时非必填：支持填入已创建的教室号，不填则新建教室。

  • 课堂角色为学生时必填：填入已创建的教室号。

• 用户名称：必填。

教室

• 上课与下课

• 设备开关与选择

• 白板涂鸦与文档分享

• 共享屏幕

• 多媒体插播（目前仅支持视频播放）

• 聊天互动与管理

  • 全员禁言（或解除）

• 成员管理

  • 展示教室中成员及状态（在教室中/已离开/被移除/连麦状态）

  • 将学生移除出教室

• 连麦互动与管理（仅大班课支持）

  • 全局设置

    • 允许连麦（或禁止）

    • 全员静音（关闭所有学生的麦克风）

  • 连麦操作

    • 邀请学生连麦（或取消邀请）

    • 同意或拒绝学生连麦申请

    • 开启或关闭学生的摄像头或麦克风

    • 结束连麦

学生端

请您在Windows、macOS等桌面设备，或Android、iOS等移动设备的浏览器中访问。

登录

课堂

进入课堂后，会根据班型展示不同 UI。

• 公开课

  

  • 课堂直播：教师端摄像头画面+白板/屏幕共享/多媒体插播

  • 聊天

  • 课堂简介

• 大班课

  

  • 课堂直播：

    • 双画面展示：拆分展示教师端摄像头画面和白板/屏幕共享/多媒体插播，可单击切换按钮更新主画面。

    • 拉流策略：

      • 多画面播放：客户端使用WebRTC协议（RTS1.0）拉流，保证流间低时差，若浏览器环境不支持WebRTC或出现RTS降级，则使用公开课的布局方式，直播内容为教师端摄像头画面+白板/屏幕共享/多媒体插播。

      • 连麦学生（仅支持学生通过 PC 端连麦）：

        • 主画面：教师端白板/屏幕共享/多媒体插播。

        • 右上角（主讲）：教师端摄像头画面。

        • 演讲者视图：麦上学生摄像头画面。

      • 非连麦学生：

        • 教师端白板/屏幕共享/多媒体插播。

        • 麦上所有人的摄像头混流画面。

  • 连麦互动：

    • 申请连麦（或取消申请）。

    • 同意或拒绝老师的连麦邀请，

    • 设备开关与选择

  • 聊天。

  • 课堂简介。

由您实现

本项目着重课堂模块的开发，其余配套的模块还需要您自行完善才能真正对外服务C端用户。

登录

当前项目中的登录模块为示例代码，Appserver服务提供了以明文发送用户名及密码的login接口来获取身份token，这部分逻辑仅仅只能作为本地开发、体验使用，请勿在实际生产环境中使用，请自行接入SSO单点登录、OAuth2等方案。

当前项目中的进入课堂页面时会先校验是否已登录，若未登录会先重定向到登录页，该部分逻辑位于 src/wrappers/auth/index.tsx中，请您自行按实际情况进行修改。

课堂管理

当前项目中并不包含课堂管理模块，如果您需要更丰富的课堂管理功能，例如：

• 展示历史课堂信息：课堂成员，在课堂中的时间统计、连麦时长、发言数等。

• 对已经创建过的课堂进行管理，比如重启课堂、永久关闭、导出课堂数据等。

以上能力，需要您自行实现相关的业务。

成员管理

当前项目实现了成员列表、移除成员、禁言等功能，若您需要更丰富的成员管理功能，需要您自行实现相关的业务。

连麦管理

当前项目使用状态机模式结合IM通信实现了简单的连麦管理，在老师端和学生端之间进行连麦信令交换，例如：

• 老师邀请学生连麦及取消邀请。

• 学生申请连麦及取消申请。

• 老师/学生结束连麦。

• 老师控制学生的设备开关状态。

• 老师允许连麦或禁止连麦。

若您需要更丰富、更贴合业务的连麦管理功能，需要您自行实现相关业务。

依赖服务及三方包

本项目通过npm包以及在plugin.ts中引入前端方式使用了多个三方包及服务，下面将介绍重点项。

VConsole

plugin.ts中引入VConsole SDK ，用于在移动端测试，目前默认不会开启，当URL中包含vconsole=1的参数时才会开启。

AliPlayer

plugin.ts中引入AliPlayer SDK，用于在直播间中播放直播流，详细内容请参见Web播放器简介 。

aliyun-interaction-sdk

plugin.ts中引入了aliyun-interaction-sdk用于直播间互动消息的收发，Appserver所提供的 token接口会返回互动sdk认证所需的token ，详细内容请参见Web端集成。

alivc-live-push

plugin.ts中引入了alivc-live-push.js用于推流，详细内容请参见 Web连麦互动SDK集成。

白板

当前public/script中的文件为网易云信白板SDK，您首先需要开通网易云信白板的服务，并且实现 AppServer中相关的接口。

axios

开源的HTTP请求npm包，用于调用Appserver接口，详细文档至官网了解。