快途物流完成1亿元B轮融资，中为资本、碧桂园创投等参与，
06-18
受疫情影响，今年学生从线下涌向线上，在线教育互动课迎来大爆发。不过，自己开发互动课堂的门槛还是相当高的。
本文主要介绍利用腾讯云实时音视频TRTC+即时通讯IM能力快速搭建在线教育互动课堂。效果展示 您可以下载安装我们的demo，体验实时互动课堂的能力和效果，包括语音、视频、屏幕共享等多种教学方式。
它还封装了教师开始问答、学生举手、教师邀请学生上台回答、结束回答等相关功能。 。
如果老师和学生需要快速实现实时互动课堂功能，可以直接根据我们提供的demo进行修改和适配，也可以使用我们提供的trtc-电子教育组件，实现自定义的UI界面。复用Demo的UI界面第一步：新建一个应用，登录实时音视频控制台，选择【开发协助】>【快速运行Demo】。
单击【立即开始】，输入应用程序名称，例如TestEduDemo，然后单击【创建应用程序】。注：该功能使用两项基础PAAS服务，即腾讯云实时音视频TRTC和即时通讯IM。
开通实时音视频后，即时通讯IM服务将同时开通。第二步：下载SDK和Demo源码。
点击【Github】跳转到Github并下载相关SDK及配套Demo源码。下载完成后，返回实时音视频控制台，点击【我已下载，下一步】即可查看SDKAppID及关键信息。
步骤3：配置Demo工程文件，解压步骤2中下载的源码包，找到并打开TRTCEducation/app/debug/GenerateTestUserSig.js文件。在GenerateTestUserSig.js文件中设置相关参数SDKAPPID：默认为0，请设置为实际的SDKAppID。
SECRETKEY：默认为空字符串，请设置为实际的密钥信息。返回实时音视频控制台，点击【粘贴完成，下一步】。
单击【关闭向导并进入控制台管理应用程序】。注意：本文提到的生成UserSig的解决方案是在客户端代码中配置SECRETKEY。
通过这种方法，SECRETKEY可以很容易被反编译和反向破解。一旦你的密钥泄露，攻击者就可以窃取你的腾讯云流量，所以这种方法只适合本地跑通Demo和功能调试。
正确的发放UserSig的方法是将UserSig计算代码集成到你的服务器中，并提供面向App的接口。当需要UserSig时，您的App向业务服务器发起请求，获取动态UserSig。
有关更多详细信息，请参阅在服务器端生成 userSig。第四步：运行Demo代码语言：txt copy // 安装yarn，demo基于yarn管理 $ npm install yarn -g // 安装需要的依赖 $yarn install // 开发调试 $yarndev// 打包 $yarnpackage 注意：安装如果在依赖过程中遇到Electron下载缓慢甚至卡住的情况，可以参考Electron FAQ文档来解决问题。
只能用mac电脑打包mac包，用windows电脑打包windows包。第五步：修改Demo源码。
Demo 中使用的框架技术如下： 代码语言：txt copy* typescript* React & React hooks* electro & electro-react-boilerplate* element-ui 下表列出了各个文件及其对应的 UI 界面，方便您了解进行二次调整： 文件功能说明 app /containers/HomePage.tsx 输入课堂 UI 的实现代码 app/containers/ClassRoomPage.tsx 课堂 UI 的实现代码 app/components/TeacherClass.tsx 课堂教师 UI app 的实现代码/components/StudentClass.tsx 课堂-学生端UI实现代码 app/components/Chat.tsx 课堂-聊天室UI实现代码 app/components/UserList.tsx 课堂-成员列表UI实现代码 实现自定义UI界面 如果你觉得我们在 Demo 中默认实现的 UI 如果不能满足您的要求，您可以考虑实现自己的用户界面，并且只使用我们封装的 trtc-electron-education 组件提供的音频和视频功能。步骤一：集成sdk代码语言：txt copy // 以yarn方式引入 $yarn add trtc-electron-education // 以npm方式引入 $ npm i trtc-electron-education --save 步骤二：初始化组件 组件参数：Parameter type default 值说明 sdkAppIdnumber - 必填参数，激活腾讯云实时音视频 TRTC 和腾讯云即时通讯 IM 服务创建应用后分配的 sdkAppIdnumber userIDstring - 必填参数，用户 ID，可由您的账户系统指定 userSigstring -必填参数，身份签名（即相当于登录密码），根据用户ID计算得出。
初始化示例： 代码语言：txt copy import TrtcElectronEducation from 'trtc-electron-education'; const rtcClient = new TrtcElectronEducation({ sdkAppId: ***, userID: '' userSig: 'eJwtzM9****-reWMQw_' });第三步：实现老师端开课，创建教室。老师端调用组件createRoom方法创建教室代码语言： txt copy const params = { classId, // 教室ID nickName // 昵称}rtcClient.createRoom(params).then(((( ) => {//教室创建成功}) 老师开始上课。
老师调用组件的enterRoom方法开始上课。 代码语言：txt copy rtcClient.enterRoom({ role: 'teacher', // role classId // 教室ID} ) 老师打开摄像头。
老师调用组件的openCamera方法打开自己的摄像头。 代码语言：txt copy const domEle = document.getElementById('test');rtcClient.openCamera(domEle)。
老师可以分享自己的屏幕供学生观看，比如播放PPT、课件等。您需要首先调用组件的 getScreenShareList 方法来获取窗口列表。
代码语言：txt copy const screenList = rtcClient.getScreenShareList() 然后调用组件的startScreenCapture开始推送屏幕共享流。代码语言：txt copy rtcClient.startScreenCapture({ type, // 采集源 Type sourceId, // 采集源ID。
对于windows，该字段表示窗口句柄；对于屏幕，该字段表示屏幕ID。 sourceName // 采集源name,UTF8编码}) 老师开启问答时间。
上课时，如果老师想与学生互动，可以调用组件的startQuestionTime方法来开始问答时间。收到指示后，学生可以举手申请回答问题。
代码语言：txt copy rtcClient.startQuestionTime(classId) // classId为教室ID。老师邀请学生上台回答问题。
学生举手后，老师可以调用组件的inviteToPlatform方法邀请学生上台发言，被邀请的学生会自动打开麦克风。代码语言：txt copy rtcClient.inviteToPlatform(userID) // 邀请学生上台的教师userID禁用学生麦克风。
教师端可以调用组件的 finishAnswering 方法来禁用学生的麦克风。代码语言：txt copy rtcClient.finishAnswering(userID)//台上残疾学生的UserID。
第四步：实现学生端听课并进入课堂。学生端调用组件的enterRoom方法进入教室，准备听课。
代码语言：txt copy rtcClient.enterRoom({ role: 'student', // role classId // 教室ID }) 学生举手，老师打开问答环节后，学生可以调用的raiseHand方法应用于说话的组件。代码语言：txt copy rtcClient.raiseHand() 第五步：实现聊天室功能。
老师和学生可以使用聊天室互相发送一些短信。
版权声明：本文内容由互联网用户自发贡献，本站不拥有所有权，不承担相关法律责任。如果发现本站有涉嫌抄袭的内容，欢迎发送邮件 举报，并提供相关证据，一经查实，本站将立刻删除涉嫌侵权内容。
标签：
相关文章
06-18
06-17
06-18
06-18
06-17
06-18
06-06
最新文章
【玩转GPU】ControlNet初学者生存指南
【实战】获取小程序中用户的城市信息（附源码）
包雪雪简单介绍Vue.js：开学
Go进阶：使用Gin框架简单实现服务端渲染
线程池介绍及实际案例分享
JMeter 注释 18 - JMeter 常用配置组件介绍
基于Sentry的大数据权限解决方案
【云+社区年度征文集】GPE监控介绍及使用