实时音视频 实时互动课堂(Electron) - 场景实践

Demo 体验

效果展示

您可以下载安装我们的 Demo 体验实时互动课堂的能力效果，包括语音、视频、屏幕分享等上课方式，还封装了老师开始问答、学生举手、老师邀请学生上台回答、结束回答等相关能力。

教师端	学生端

如需快速实现实时互动课堂功能，可以直接基于我们提供的 Demo 进行修改适配，也可以使用我们提供的 trtc-electron-education 组件并实现自定义 UI 界面。

复用 Demo 的 UI 界面

步骤1：创建新的应用

1. 登录实时音视频控制台，选择【开发辅助】>【快速跑通Demo】。
2. 输入应用名称，例如 TestEduDemo，单击【创建】。

说明：

本功能同时使用了腾讯云 实时音视频 TRTC 和 即时通信 IM 两个基础 PAAS 服务，开通实时音视频后会同步开通即时通信 IM 服务。 即时通信 IM 属于增值服务，详细计费规则请参见 即时通信 IM 价格说明。

步骤2：下载 SDK 和 Demo 源码

1. 根据实际业务需求下载 SDK 及配套的 Demo 源码。
2. 下载完成后，单击【已下载，下一步】。
   

步骤3：配置 Demo 工程文件

1. 进入修改配置页，根据您下载的源码包，选择相应的开发环境。
2. 找到并打开 TRTCEducation/app/debug/GenerateTestUserSig.js 文件。
3. 设置 GenerateTestUserSig.js 文件中的相关参数：
   • SDKAPPID：默认为0，请设置为实际的 SDKAppID。
   • SECRETKEY：默认为空字符串，请设置为实际的密钥信息。
   
4. 粘贴完成后，单击【已复制粘贴，下一步】即创建成功。
5. 编译完成后，单击【回到控制台概览】即可。

注意：

本文提到的生成 UserSig 的方案是在客户端代码中配置 SECRETKEY，该方法中 SECRETKEY 很容易被反编译逆向破解，一旦您的密钥泄露，攻击者就可以盗用您的腾讯云流量，因此该方法仅适合本地跑通 Demo 和功能调试。
正确的 UserSig 签发方式是将 UserSig 的计算代码集成到您的服务端，并提供面向 App 的接口，在需要 UserSig 时由您的 App 向业务服务器发起请求获取动态 UserSig。更多详情请参见 服务端生成 UserSig。

步骤4：运行 Demo

// 安装 yarn，demo 基于 yarn 管理
npm install yarn -g
// 安装所需依赖
yarn install
// 开发调试
yarn dev
// 打包
yarn package

注意：

• 安装依赖过程中，如遇到 Electron 下载慢甚至卡住不动等问题，您可以参考 Electron 常见问题收录 文档解决。
• 只能使用 Mac 打包 Mac 包，使用 Windows 电脑打包 Windows 包。

步骤5：修改 Demo 源代码

Demo 所用框架技术如下：

• typescript
• react & react hooks
• electron & electron-react-boilerplate
• element-ui

如下表格列出了各个文件及其所对应的 UI 界面，以便于您进行二次调整：

实现自定义 UI 界面

如果 Demo 中默认实现的 UI 不符合您的预期，您可以按需实现自己的用户界面，即只使用我们封装好的 trtc-electron-education 组件所提供的音视频能力，自行实现 UI 部分。

步骤1：集成 SDK

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

步骤2：初始化组件

初始化组件，其中几个必填的关键参数介绍如下表所示。

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

步骤3：实现老师端开课

1. 老师端调用组件 createRoom 方法创建教室。

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

2. 老师端调用组件的 enterRoom 方法开始上课。

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

3. 老师端调用组件的 openCamera 方法打开自己的摄像头。

   const domEle = document.getElementById('test');
   rtcClient.openCamera(domEle)

4. 老师端可共享自己的屏幕给学生端观看，例如播放 PPT、课件等。
   a. 需要先调用组件的 getScreenShareList 方法获取窗口列表。

   const screenList = rtcClient.getScreenShareList()

   b. 调用组件的 startScreenCapture 开始推屏幕分享的流。

   rtcClient.startScreenCapture({
     type,// 采集源类型
     sourceId,// 采集源 ID，对于窗口，该字段指示窗口句柄；对于屏幕，该字段指示屏幕 ID
     sourceName // 采集源名称，UTF8 编码
   })

5. 上课过程中，老师如果想提问与学生互动，可以调用组件的 startQuestionTime 方法开启问答时间，学生端收到该指令后，可以举手申请回答问题。

   rtcClient.startQuestionTime(classId) // classId 是教室 ID

6. 学生举手后，老师端可调用组件的 inviteToPlatform 方法邀请学生上台发言，被邀请的学生自动开麦。

   rtcClient.inviteToPlatform(userID) // 邀请学生上台的 userID

7. 老师端可调用组件的 finishAnswering 方法禁学生的麦克风。

   rtcClient.finishAnswering(userID)// 禁麦学生的 userID

步骤4：实现学生端听课

1. 学生端调用组件的 enterRoom 方法进入教室，准备听课。

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

2. 老师端开放举手问答后，学生端可调用组件的 raiseHand 方法申请发言。

   rtcClient.raiseHand()

步骤5：实现聊天室功能

老师端和学生端可以使用聊天室互发一些文本消息。

const params = {
  classId: classId, // 教室 ID
  message: '您好' // 消息文本
}
rtcClient.sendTextMessage(params) // 发送聊天室消息