组件trtc-electron-education(electron)
组件trtc-electron-education是针对实时互动课堂场景中使用实时音视频TRTC和即时通信IM能力的二次封装，在封装基本的音视频聊天、屏幕分享能力的同时，针对实时互动课堂场景封装了老师开始问答、学生举手、老师邀请学生上台回答、结束回答等相关能力。
trtc-electron-education是一个开源的npm组件，依赖腾讯云的两个闭源 SDK，具体实现过程请参见 在线互动课堂(electron)
组件接入
// yarn方式引入
yarn add trtc-electron-education
// npm方式引入
npm i trtc-electron-education --save
组件参数
| 参数 | 类型 | 默认值 | 说明 |
|---|---|---|---|
| sdkAppId | number | - | 必填参数，开通腾讯云实时音视频TRTC和腾讯云即时通信IM服务创建应用后分配的 sdkAppId |
| userID | string | - | 必填参数，用户 ID，可以由您的帐号体系指定 |
| userSig | string | - | 必填参数，身份签名（即相当于登录密码），由 userID 计算得出，具体计算方法请参见 如何计算 UserSig |
初始化示例
import TrtcElectronEducation from 'trtc-electron-education';
const rtcClient = new TrtcElectronEducation({
sdkAppId: 1400***803,
userID: '123'
userSig: 'eJwtzM9****-reWMQw_'
});组件概览
基础函数
on(EventCode, handler, context)
说明：用于监听组件派发的事件，详细事件请参考文档下面组件事件。
参数：
| 参数名 | 类型 | 默认值 | 说明 |
|---|---|---|---|
| EventCode | String | - | 事件码 |
| handler | Function | - | 监听函数 |
| context | Object | - | 当前执行上下文 |
示例：
const EVENT = rtcClient.EVENT
rtcClient.on(EVENT.MESSAGE_RECEIVED, onMessageReceived);off(EventCode, handler)
说明：取消事件监听。
参数：
| 参数名 | 类型 | 默认值 | 说明 |
|---|---|---|---|
| EventCode | String | - | 事件码 |
| handler | Function | - | 需要取消的具名监听函数 |
示例：
const EVENT = rtcClient.EVENT
rtcClient.off(EVENT.MESSAGE_RECEIVED, onMessageReceived);createRoom(params: CreateRoomParams)
说明：老师创建教室
参数：
| 参数名 | 类型 | 默认值 | 说明 |
|---|---|---|---|
| classId | number | - | 教室id |
| nickName | string | - | 昵称 |
| avatar | string | - | 头像地址，可以不填 |
| timType | string | - | 群组类型，可以不填，默认为临时会议群 |
示例：
interface CreateRoomParams {
classId: number; // 教室id
nickName: string; // 昵称
avatar?:string; // 头像地址
}
rtcClient.createRoom(params).then(() => {
})destroyRoom(classId: number)
说明：老师退出教室，销毁房间
参数：
| 参数名 | 类型 | 默认值 | 说明 |
|---|---|---|---|
| classId | number | - | 教室id |
示例：
rtcClient.destroyRoom(classId)enterRoom(params: EnterRoomParams)
说明：老师开始上课；学生进入教室，准备听课
参数：
| 参数名 | 类型 | 默认值 | 说明 |
|---|---|---|---|
| classId | number | - | 教室id |
| nickName | string | - | 昵称 |
| role | string | - | 角色，老师-teacher，学生-student |
| avatar | string | - | 头像地址，可以不填 |
示例：
interface EnterRoomParams {
role: string; // 角色
classId: number; // 教室id
nickName?: string; // 昵称
avatar?:string; // 头像地址
}
rtcClient.enterRoom(params).then(() => {
})exitRoom(role:string, classId: number)
说明：老师下课；学生退出课堂
参数：
| 参数名 | 类型 | 默认值 | 说明 |
|---|---|---|---|
| classId | number | - | 教室id |
| role | string | - | 角色，老师-teacher，学生-student |
示例：
rtcClient.exitRoom(role, classId);举手操作环节函数
startQuestionTime(classId: number)
说明：老师开始问答时间
逻辑：老师端广播通知，学生收到开始问答事件， 开启举手功能
参数：
| 参数名 | 类型 | 默认值 | 说明 |
|---|---|---|---|
| classId | number | - | 教室id |
示例：
rtcClient.startQuestionTime(classId)raiseHand()
说明：学生举手
逻辑：学生发送举手通知，老师端收到学生举手通知
参数：无
示例：
rtcClient.raiseHand()inviteToPlatform(userID: string)
说明：老师邀请学生上台回答
逻辑：选择举手列表里的学生 userID ，发送邀请通知，学生端收到邀请上台回答事件，受邀请的学生开麦；如果没有学生举手，老师直接点名回答，学生端收到邀请上台回答事件，被点名的学生开麦
参数：
| 参数名 | 类型 | 默认值 | 说明 |
|---|---|---|---|
| userID | string | - | 用户id |
示例：
rtcClient.inviteToPlatform(userID).then(() => {
})finishAnswering(userID: string)
说明：结束回答
逻辑：老师结束学生回答，学生收到结束回答的通知，指定的学生停止连麦
参数：
| 参数名 | 类型 | 默认值 | 说明 |
|---|---|---|---|
| userID | string | - | 用户id |
示例：
rtcClient.finishAnswering(userID).then(() => {
})stopQuestionTime(classId: number)
说明：停止问答时间
逻辑：老师停止问答时间，学生端收到停止回答时间的通知，已连麦的学生要停止连麦，关闭举手功能
参数：
| 参数名 | 类型 | 默认值 | 说明 |
|---|---|---|---|
| classId | number | - | 教室id |
示例：
rtcClient.stopQuestionTime(classId)推拉流操作相关函数
getScreenShareList()
说明：获取屏幕分享窗口列表
参数：无
示例：
rtcClient.getScreenShareList();startScreenCapture(source: SourceParam)
说明：选择分享屏幕，开始推流
参数：
| 参数名 | 类型 | 默认值 | 说明 |
|---|---|---|---|
| type | number | - | 采集源类型 |
| sourceId | string | - | 采集源ID，对于窗口，该字段指示窗口句柄；对于屏幕，该字段指示屏幕ID |
| sourceName | string | - | 采集源名称，UTF8编码 |
示例：
interface SourceParam {
type: number; // 采集源类型
sourceId: string; // 采集源ID
sourceName: string; // 采集源名称，UTF8编码
}
rtcClient.startScreenCapture({
type,
sourceId,
sourceName
})startRemoteView(params: RemoteParams)
说明：开始显示远端视频画面或屏幕分享画面
参数：
| 参数名 | 类型 | 默认值 | 说明 |
|---|---|---|---|
| userID | string | - | 用户id |
| streamType | number | - | 画面类型,1-大画面，2-小画面，3-屏幕分享 |
| view | HTMLElement | - | 承载显示画面的 DOM |
示例：
interface RemoteParams {
userID: string; // 用户id
streamType: number; // 画面类型,1-大画面，2-小画面，3-屏幕分享
view: HTMLElement; //承载显示画面的 DOM
}
const view = document.getElementById('localVideo');
rtcClient.startRemoteView({
userID: userID,
streamType: 1,//1-大画面，2-小画面，3-屏幕分享
view: view
});stopRemoteView(params: StopRemoteParams)
说明：停止显示远端视频画面或屏幕分享画面，同时不再拉取该远端用户的数据流
参数：
| 参数名 | 类型 | 默认值 | 说明 |
|---|---|---|---|
| userID | string | - | 用户id |
| streamType | number | - | 画面类型,1-大画面，2-小画面，3-屏幕分享 |
示例：
interface StopRemoteParams {
userID: string; // 用户id
streamType: number; // 画面类型,1-大画面，2-小画面，3-屏幕分享
}
rtcClient.stopRemoteView({
userID: userID,
streamType: 1 //1-大画面，2-小画面，3-屏幕分享
});消息收发相关函数
sendTextMessage(params: MessageParams)
说明：发送聊天室消息
参数：
| 参数名 | 类型 | 默认值 | 说明 |
|---|---|---|---|
| classId | number | - | 教室id |
| message | string | - | 消息文本 |
示例：
interface MessageParams {
classId: number; // 教室id
message: string; // 消息文本
}
rtcClient.sendTextMessage(params).then(() => {
})sendCustomMessage(userID: string, data: string)
说明：发送自定义C2C消息
参数：
| 参数名 | 类型 | 默认值 | 说明 |
|---|---|---|---|
| userID | string | - | 用户id |
| data | string | - | 自定义消息 |
示例：
rtcClient.sendCustomMessage(userID, JSON.stringify(params)sendGroupCustomMessage(classId: number, data: string)
说明：发送自定义群组消息
参数：
| 参数名 | 类型 | 默认值 | 说明 |
|---|---|---|---|
| classId | number | - | 教室id |
| data | string | - | 自定义消息 |
示例：
rtcClient.sendGroupCustomMessage(classId, JSON.stringify(params))设备操作相关函数
openCamera(view: HTMLElement)
说明：打开摄像头
参数：
| 参数名 | 类型 | 默认值 | 说明 |
|---|---|---|---|
| view | HTMLElement | - | 承载显示画面的 DOM |
示例：
const domEle = document.getElementById('localVideo');
rtcClient.openCamera(domEle);closeCamera()
说明：关闭摄像头
参数：无
示例：
rtcClient.closeCamera();getCameraList()
说明：获取摄像头列表
参数：无
示例：
rtcClient.getCameraList()setCurrentCamera(deviceId:string)
说明：设置摄像头，参数是从 getCameraDevicesList 中得到的设备 ID
参数：
| 参数名 | 类型 | 默认值 | 说明 |
|---|---|---|---|
| deviceId | string | - | 设备ID |
示例：
rtcClient.setCurrentCamera(deviceId)openMicrophone()
说明：打开麦克风
参数：无
示例：
rtcClient.openMicrophone();closeMicrophone()
说明：关闭麦克风
参数：无
示例：
rtcClient.closeMicrophone();getMicrophoneList()
说明：获取麦克风设备列表
参数：无
示例：
rtcClient.getMicrophoneList()setCurrentMicDevice(micId:string)
说明：设置麦克风，参数是从 getMicDevicesList 中得到的设备 ID
参数：
| 参数名 | 类型 | 默认值 | 说明 |
|---|---|---|---|
| micId | string | - | 设备ID |
示例：
rtcClient.setCurrentMicDevice(micId)setBeautyStyle(params: BeautyParams)
说明：设置美颜、美白、红润效果级别
参数：
| 参数名 | 类型 | 默认值 | 说明 |
|---|---|---|---|
| beautyStyle | number | - | 1表示光滑，适用于美女秀场，效果比较明显，2表示自然，磨皮算法更多地保留了面部细节，主观感受上会更加自然 |
| beauty | number | - | 美颜级别，取值范围0 - 9，0表示关闭，1 - 9值越大，效果越明显 |
| white | number | - | 美白级别，取值范围0 - 9，0表示关闭，1 - 9值越大，效果越明显 |
| ruddiness | number | - | 红润级别，取值范围0 - 9，0表示关闭，1 - 9值越大，效果越明显，该参数 windows 平台暂未生效 |
示例：
interface BeautyParams {
beautyStyle: number;//光滑、自然
beauty: number; //美颜级别
white: number; //美白级别
ruddiness: number; //红润级
}
rtcClient.setBeautyStyle({
beautyStyle: 1,
beauty: 5,
white: 5,
ruddiness: 5
})组件事件
示例
const EVENT = rtcClient.EVENT
rtcClient.on(EVENT.STUDENT_RAISE_HAND, () => {
//学生举手
})详细事件
| CODE | 说明 |
|---|---|
| ENTER_ROOM_SUCCESS | 成功进入房间 |
| LEAVE_ROOM_SUCCESS | 成功离开房间 |
| TEACHER_ENTER | 老师进入房间 |
| TEACHER_LEAVE | 老师离开房间 |
| STUDENT_ENTER | 学生加入房间 |
| STUDENT_LEAVE | 学生离开房间 |
| SCREEN_SHARE_ADD | 老师开启屏幕分享 |
| SCREEN_SHARE_REMOVE | 老师关闭屏幕分享 |
| REMOTE_VIDEO_ADD | 远端视频流添加事件，当远端用户发布视频流后会收到该通知 |
| REMOTE_VIDEO_REMOVE | 远端视频流移出事件，当远端用户取消发布视频流后会收到该通知 |
| REMOTE_AUDIO_ADD | 远端音频流添加事件 |
| REMOTE_AUDIO_REMOVE | 远端音频流移除事件 |
| ROOM_DESTROYED | 房间被销毁 |
| QUESTION_TIME_STARTED | 开始问答时间 |
| QUESTION_TIME_STOPPED | 结束问答时间 |
| STUDENT_RAISE_HAND | 学生举手 |
| BE_INVITED_TO_PLATFORM | 被邀请回答问题、点名 |
| ANSWERING_FINISHED | 结束回答，禁音 |
| MESSAGE_RECEIVED | 收到消息 |
| KICKED_OUT | 同一账户在其他地方登录，被踢下线 |
| ERROR | 异常 |
| WARNING | 警告 |