1.0.0 • Published 4 years ago

trtc-education v1.0.0

Weekly downloads
-
License
ISC
Repository
-
Last release
4 years ago

##在线教育组件使用文档

该组件是针对在线教育场景中使用实时音视频TRTC和即时通信IM能力的二次封装,在封装基本的音视频聊天、屏幕分享能力的同时,针对在线教育场景封装了老师开始问答、学生举手、老师邀请学生上台回答、结束回答等相关能力。

####组件接入

npm i education-api --save

####组件参数: | 参数 |类型|默认值|说明| | ----- | ----- | ----- | ----- | |sdkAppId|number|-|必填参数,开通腾讯云实时音视频TRTC和腾讯云即时通信IM服务创建应用后分配的 sdkAppId| |userID|string|-|必填参数,用户 ID,可以由您的帐号体系指定| |userSig|string|-|必填参数,身份签名(即相当于登录密码),由 userID 计算得出,具体计算方法请参见 如何计算 UserSig|

#####初始化示例:

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

####组件方法 #####on(EventCode, handler, context) 说明:用于监听组件派发的事件,详细事件请参考文档下面组件事件。
示例:

const EVENT = rtcClient.EVENT
rtcClient.on(EVENT.MESSAGE_RECEIVED, onMessageReceived);

#####off(EventCode, handler) 说明:取消事件监听。
示例:

const EVENT = rtcClient.EVENT
rtcClient.off(EVENT.MESSAGE_RECEIVED, onMessageReceived);

#####createRoom(params: CreateRoomParams) 说明:老师创建教室
示例:

interface CreateRoomParams {
  classId: number; // 教室id
  nickName: string; // 昵称
  avatar?:string; // 头像地址
}
rtcClient.createRoom(params).then(() => {
})

#####destroyRoom(classId: number) 说明:老师退出教室,销毁房间
示例:

rtcClient.destroyRoom(classId)

#####enterRoom(params: EnterRoomParams) 说明:进入教室
逻辑:老师-进入 trtc 房间,学生-进入群组,进入 trtc 房间
示例:

interface EnterRoomParams {
  role: string; // 角色
  classId: number; // 教室id
  nickName?: string; // 昵称
  avatar?:string; // 头像地址
}
rtcClient.enterRoom(params).then(() => {
})

#####exitRoom(role:string, classId: number) 说明:退出教室
逻辑:老师-退出trtc房间,学生-退出群组、退出 trtc 房间
示例:

rtcClient.exitRoom(role, classId);

#####startQuestionTime(classId: number) 说明:老师开始问答时间
逻辑:老师端广播通知,学生收到开始问答事件, 开启举手功能
示例:

rtcClient.startQuestionTime(classId)

#####raiseHand() 说明:学生举手
逻辑:学生发送举手通知,老师端收到学生举手通知
示例:

rtcClient.raiseHand()

#####inviteToPlatform(userID: string) 说明:老师邀请学生上台回答
逻辑:选择举手列表里的学生 userID ,发送邀请通知,学生端收到邀请上台回答事件,受邀请的学生开麦;如果没有学生举手,老师直接点名回答,学生端收到邀请上台回答事件,被点名的学生开麦
示例:

rtcClient.inviteToPlatform(userID).then(() => {
})

#####finishAnswering(userID: string) 说明:结束回答
逻辑:老师结束学生回答,学生收到结束回答的通知,指定的学生停止连麦
示例:

rtcClient.finishAnswering(userID).then(() => {
})

#####stopQuestionTime(classId: number) 说明:停止问答时间
逻辑:老师停止问答时间,学生端收到停止回答时间的通知,已连麦的学生要停止连麦,关闭举手功能
示例:

rtcClient.stopQuestionTime(classId)

#####getScreenShareList() 说明:获取屏幕分享窗口列表
示例:

rtcClient.getScreenShareList();

#####startScreenCapture(source: SourceParam) 说明:选择分享屏幕,开始推流
示例:

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

#####startRemoteView(params: RemoteParams) 说明:开始显示远端视频画面或屏幕分享画面
示例:

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) 说明:停止显示远端视频画面或屏幕分享画面,同时不再拉取该远端用户的数据流
示例:

interface StopRemoteParams {
  userID: string; // 用户id
  streamType: number; // 画面类型,1-大画面,2-小画面,3-屏幕分享
}
rtcClient.stopRemoteView({
   userID: userID,
   streamType: 1 //1-大画面,2-小画面,3-屏幕分享
 });

#####sendTextMessage(params: MessageParams) 说明:发送聊天室消息
示例:

interface MessageParams {
  classId: number; // 教室id
  message: string; // 消息文本
}
rtcClient.sendTextMessage(params).then(() => {
})
sendCustomMessage(userID: string, data: string)

说明:发送自定义C2C消息
示例:

rtcClient.sendCustomMessage(userID, JSON.stringify(params)

#####sendGroupCustomMessage(classId: number, data: string) 说明:发送自定义群组消息
示例:

rtcClient.sendGroupCustomMessage(classId, JSON.stringify(params))

#####openCamera(view: HTMLElement) 说明:打开摄像头
示例:

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

#####closeCamera() 说明:关闭摄像头
示例:

rtcClient.closeCamera();

#####getCameraList() 说明:获取摄像头列表
示例:

rtcClient.getCameraList()

#####setCurrentCamera(deviceId:string) 说明:设置摄像头,参数是从 getCameraDevicesList 中得到的设备 ID
示例:

rtcClient.setCurrentCamera(deviceId)

#####openMicrophone() 说明:打开麦克风
示例:

rtcClient.openMicrophone();

#####closeMicrophone() 说明:关闭麦克风
示例:

rtcClient.closeMicrophone();

#####getMicrophoneList() 说明:获取麦克风设备列表
示例:

rtcClient.getMicrophoneList()

#####setCurrentMicDevice(micId:string) 说明:设置麦克风,参数是从 getMicDevicesList 中得到的设备 ID
示例:

rtcClient.setCurrentMicDevice(micId)

#####setBeautyStyle(params: BeautyParams) 说明:设置美颜、美白、红润效果级别
示例:

interface 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 平台暂未生效
}
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收到IM消息
KICKED_OUT同一账户在其他地方登录,被踢下线
ERROR异常
WARNING警告
1.0.0

4 years ago