trtc-electron-education
v1.2.1
Published
实时互动课堂组件
Downloads
2
Keywords
Readme
组件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|警告|