“双减政策”下|教育行业如何实现TRTC互动课堂aPAAS解决方案？

原创

TCS-F

修改于 2021-12-08 13:19:46

2.4K0

修改于 2021-12-08 13:19:46

导语 | 随着7月“双减政策”的落地，在线教育行业进入深度变革期，在学科辅导承压的同时，政策也给予了教育转型明确的建议，在教育部明确提出的7类转型建议中，素质教育、职业教育、教育出海最受到资本热捧，据相关机构测算，素质教育市场规模在2023年有望突破7000亿，职业教育有望突破5000亿，各大培训机构纷纷布局转型。推荐教培易产品解决方案

TRTC推出互动课堂aPaaS解决方案

腾讯云实时音视频TRTC团队基于21年来雄厚的实时音视频技术积累，基于“双减”后快速崛起的素质教育、职业教育，推出互动课堂低代码解决方案，方便客户低门槛快速上线属于自己的互动课堂，并于第80届中国成都教育装备展成功展示，受到广泛关注。

团队在开发的过程中，考虑到接入门槛的问题，首先打造了electron框架下的PC端互动课堂。在技术实现上，经过大量调研发现，市面上的大多数 App 使用传统的类组件模式，没有使用最新的use hook模式，而我们则大量使用最新的 use hook 模式，这个模式优点是代码量更少、也更容易复用，对开发者更友好。

在软件的架构上，以 Clean Architecture洋葱架构作为指导原则，进行分层设计。

教育场景化的 SDK 和互动白板 SDK 与 UI 层接解耦，支持UI层灵活切换，例如不修改 SDK 层，将 UI 层从 React 技术栈切换到 Vue 技术栈。极大地方便了开发者通过UI层面的改头换面，快速上线属于自己的互动课堂。

页面和区块是有状态的UI组件，即可以访问全局应用状态（store）、会调用 SDK API。基础 UI 组件和业务组件不可以访问 store 和 SDK 接口，数据通过父子组件通信和传参实现。

在教育场景化SDK的封装上，组合使用了TRTC+IM来进行数据管理，不断完善统一对外接口，力求满足各场景下不同业务的诉求。

整体的技术架构图如下所示。

团队在诸多的技术问题中，创造性的提供了很多新方法，比如在遇到的第一个问题，基于 Create-React-App 创建的 Web 应用都是单页面应用，无法多窗口展示不同内容，提供了面向对象 + 继承方式的解决方案，每个窗口一个类，类中会记录父窗口和子窗口，监听自己需要关注的 IPC 事件通知。基类负责窗口创建和销毁清理，管理通用数据。

又比如在跨窗口通信与状态管理的问题上，采用IPC接口实现，分页面内和跨窗口2个维度进行状态（数据）管理，下图即为白板和共享屏幕窗口的协作图示

其次，针对不同开发者的诉求，利用TRTC+IM的能力，同步开发了接入门槛较高的QT框架下的PC端互动课堂。

在程序结构上做到了UI模块与Module模块分离，Module模块提供能力，UI层使用开放的接口实现上层的应用，开发者可以很容易的进行界面的替换和美化。

在Module层，教师通过发送IM消息，通过信令实现对于课堂的管理，学生同样通过信令实现上下麦，完成与教师的互动。

对于细分场景的客户，TRTC团队会不断做出针对性的调整和支持，比如在素质教育中的在线音乐教学场景下，作为客户之一的VIP 陪练。有如下定制化解决方案。

音乐场景专属降噪算法，保证音乐不失真
48kHz采样率，192kbps码率还原高音质效果
支持教学白板和曲谱标注
支持鱼眼镜头畸变矫正

又比如针对一起交作业的场景，我们推出单房间多辅流的解决方案，无论是降本或是增效角度，都是开发者的不二选择。

在即将上线的版本中，将支持虚拟背景、多屏幕共享、伴生录制、虚拟人等更多功能，此外，团队注意到沉浸式教学的趋势，比如下图所示的海外在线教育产品Koala，打造的亮点即为沉浸式教学空间，上线之后便俘获了大批海外学生和家长的芳心。由此，TRTC团队更进一步，探索空间音频&Unity的沉浸式互动教学方案，让线上教育更加饱满鲜活。

在接入环节，基于快速实现实时互动课堂的目标，开发者可以直接基于我们提供的 Demo 进行修改适配直接上线，也可以使用我们提供的组件实现自定义 UI 界面。

官网文档：https://cloud.tencent.com/document/product/647/45465

----

以electron的互动课堂为例，对需要复用演示Demo的UI界面开发者，可以首先在实时音视频控制台创建新的应用，选择【开发辅助】>【快速跑通Demo】，然后输入应用名称，例如

TestEduDemo

随后根据业务下载SDK和Demo源码，包含Github、Gitee和Zip用户。

完成后，进行Demo工程文件的配置，分为以下三步：

进入修改配置页，根据您下载的源码包，选择相应的开发环境。
找到并打开

Electron/js/GenerateTestUserSig.js

设置如下文件中的相关参数

GenerateTestUserSig.js

文件中的相关参数：SDKAPPID：默认为0 ，请设置为实际的 SDKAppID。
SECRETKEY：默认为空字符串，请设置为实际的密钥信息。

随后便可以运行Demo。此外，考虑到部分开发者需要对UI进行微调，对不同功能部分的代码分别打包文件，方便开发者进行二次调整。

如果想实现UI界面的自定义，也只需要3个步骤便可使用我们封装好的组件所提供的音视频能力。首先是集成SDK，这里我们提供了yarn和npm两种引入方式。

// yarn 方式引入yarn add trtc-electron-education// npm 方式引入npm i trtc-electron-education --save

随后填入sdkappid、userID、usersig这几个关键参数完成组件的初始化。

import TrtcElectronEducation from 'trtc-electron-education';const rtcClient = new TrtcElectronEducation({ sdkAppId: 1400***803, userID: '123' userSig: 'eJwtzM9****-reWMQw_'});

最后就可以通过调用我们各种组件的不同方法实现老师端开课、学生端听课、聊天室、屏幕共享等完成课堂的搭建。

const params = {  classId, // 教室 ID  nickName // 昵称}rtcClient.createRoom(params).then(() => {//成功创建教室})

rtcClient.enterRoom({  role: 'teacher', // 角色  classId // 教室 ID})

更详细的步骤请参看官网文档：https://cloud.tencent.com/document/product/647/45465

同时，团队正在逐步对等iOS、Android、Windows、Mac、Web、小程序的功能组件，满足多端的快速接入需求，真正实现互动课堂一站式低代码解决方案，3行代码20分钟，快速上线属于客户自己的互动课堂。

在线教育从大力扶持走向规范整顿，在成熟化和规范化的过程中，素质教育、职业教育、财商教育、老年人教育等成为教培机构转型的热门赛道，飞速发展的实时音视频技术催生出各细分赛道创新的教育场景和模式，各场景又反过来启发了实时音视频技术朝着更加具有沉浸感的课堂体验方向发展。但无论线上教育衍生出的何种场景，实时互动、音视频质量始终是教学质量的核心。

TRTC雄厚的音视频能力积累

TRTC 源自 QQ 音视频团队，是基于 QQ 21年来的音视频技术积累，继承了腾讯强大的技术积累和时间，轻松实现超低延时音视频互动。多年来，TRTC致力于帮助广大企业和个人开发者快速实现全球跨平台、超高品质的音视频互动场景。

在具体实践上，TRTC 支撑了腾讯会议、微信群直播、微信视频号直播、企业微信直播、腾讯课堂、全民K歌等业务，是腾讯集团丰富的音视频场景的最佳实践输出。

TRTC打磨基础能力的同时，不断探索新能力、新场景，在国内用户口碑蒸蒸日上的同时，出海业务也不断取得新的突破，我们有理由相信腾讯云TRTC就是您的不二选择。