三步上线自己的在线监考系统

技术干货
2021年3月12日

在线学习的过程中，如何监测学习效果？成为了许多学校和教培机构头疼的问题。

通过成绩直观体现学习效果，是各学校和教培机构的主要手段。受疫情影响，线下聚集考试风险大，但阶段性学习效果又不得不进行评估和考核。所以，将线下考试转移到线上，成为了众多机构的最佳选择。这一过程中，如何做好在线监考工作，保证成绩真实有效，成为一大难题。这里从技术角度，以 Web 端为例，简要介绍如何通过实时音视频技术实现在线监考。

01 在线监考系统主要功能RONGCLOUD

在整个监考系统中，主要包含两部分，分别是学生端和教师端。学生端提供学生考试全程画面；教师端可进行在线监考，发现学生出现可疑动作，教师可以进入单个学生房间连麦发出警告，也可以对有疑问的学生进行 1V1 答疑。

一名学生两个视图（摄像头采集，屏幕共享），可通过后台转码合图后推到 CDN。

•老师同时订阅并播放多个学生考试答题的直播画面，还可以查看学生端采集视频的截图或调阅考试录像；

•当老师发现某位学生需要警告或者答疑，可以进入单个学生所在房间，与学生进行连麦沟通。

02 学生端实现方法RONGCLOUD

1.学生端此时的角色是“主播”，考试一般在 PC 端进行。PC 端创建并加入考试房间，加入考试房间后，进行音视频推流，这里可以根据情况选择是否关闭麦克风，学生对考试房间效果调试完毕后便可以开始考试。

加入考试房间

学生端考试前需要先创建一个考试房间（直播类型房间），然后加入考试房间开始考试

核心代码展现

room.join({id: ‘请填写用户 ID’,}).then(() => {
console.log(‘join successfully’);
}, error => {
console.log(error);
});

发布学生端考试房间环境

发布学生端考试房间环境，确保学生端考试房间画面可以被教师端查看。

核心代码展现

stream.get().then(function ({ mediaStream }) {
let user = {
id: ‘请填写用户 ID’,
stream: {
tag: ‘RongCloudRTC’,
type: StreamType.AUDIO_AND_VIDEO,
mediaStream: mediaStream
}
}
stream.publish(user).then((result) => {
//result 数据格式：{“configUrl”:”XXX”,”liveUrl”:”XXXX”} 此处可获得到 liveUrl
console.log(‘发布成功’,result);
}, error => { console.log(error);
});
}, error => {
console.error(error);
});

2.学生端通过 PC 浏览器登录考试系统；

3.登录后电脑摄像头采集学生正面实时图像，并开始屏幕共享；

4.如果需要借助图像识别功能协助辨别学生是否作弊，可以直接从学生端调用截图接口随时截图；

5.在整个监考的过程中，从学生端上传的学生面部头像、屏幕共享图像，会在服务器上合成一路流。

03 教师端实现方法RONGCLOUD

1.教师端此时的角色是“观众”，可以订阅观看所有学生的考试画面；

监考画面

教师端订阅直接调用学生端的考试房间地址，就可以直接看到监考画面，教师身份可以多次调用接口，比如先观看学生 A 的画面，调用此接口，再观看学生 B 的画面。学生端考试房间地址也可以直接存储到服务器，教师从服务器就可以拿到学生端考试房间地址。

核心代码展现

2.如果教师发现个别学生考试行为不规范，可以查看该学生前几分钟的考试画面进行验证（考试前需要开通实时录制）。

3.教师如果需要警告或者答疑，可以选择进入单个学生所在房间，通过语音与学生进行实时互动。

教师连麦学生进行干预或解答

监考时教师仅能观看学生考试画面，选择加入学生考试房间后便可进行对话，对学生进行警告或者答疑。

核心代码展现

rongRTC.changeLiveRole(RongRTC.ROLE.ANCHOR).then(function () {
//需要按主播连接方式进行加入房间，并发布资源，请参考主播模块集成文档
});

加入单个学生考试房间

核心代码展现

room.join({id: ‘请填写用户 ID’,}).then(() => {
console.log(‘join successfully’);}, error => {
console.log(error);});

教师加入学生房间进行对话

核心代码展现

stream.publish(user).then((result) => {
//result 数据格式：{“configUrl”:”XXX”,”liveUrl”:”XXXX”} 此处可获得到 liveUrl
console.log(‘发布成功’,result); }, error => {
console.log(error);
});

教师下麦

教师下麦后便退出房间

核心代码展现

room.leave().then(() => {
console.log(‘leave successfully’);
}, error => {
console.log(error);
});

重新进入监考画面

核心代码展现

stream.subscribe({liveUrl:liveUrl}).then((res) => {
let { mediaStream} = res;
let node = document.createElement(‘video’);
node.autoplay = true;
node.srcObject = mediaStream;
document.body.appendChild(node);
});