平常面试的时候，相信大家都用过在线笔试系统，那么有了解过它们究竟是如何防作弊的吗？有时明明感觉答得还可以，但最终还是被刷了，大家了解过背后的原因吗？
也许你的分数还可以，但行为记录有问题，这也是会影响面试结果的。也许有些行为是你的无心之过，但还是被莫名其妙的记录了。今天就和大家聊一聊在线笔试的各种监控行为，跟着笔者一起来揭秘在线笔试防作弊黑科技，并手把手教你如何从头打造一个强大的在线考试系统。
一、系统架构设计
我们都知道，笔试结果 = 笔试分数 + 行为记录。
因此，在设计在线笔试系统时，需要综合考虑这两方面的因素，一个基本的笔试流程如下：
基本架构可以分为以下几个模块：
前端应用：负责呈现考试界面，处理用户交互，并收集用户行为数据。
后端服务：处理考试逻辑、题目管理、用户认证、作弊行为检测等。
数据库：用于存储用户信息、考试题目、考试结果和监控数据。
视频监控服务：用于实时监控考生行为，包括视频流采集、存储。
视频分析服务：用于分析考生行为，包括视频流分析和异常检测。
用人单位后台：出题和查看结果，根据考试分数和考生行为，给出综合考试结果。
二、实现在线笔试系统的基本功能
在实现防作弊机制之前，首先需要构建一个最基本的在线笔试系统。
1. 用户认证
登录和注册：实现用户注册和登录功能，支持双因素认证（2FA）以加强安全性。
身份验证：使用摄像头进行面部识别，确保考试者是本人。
2. 考试界面
题目展示：从数据库中获取考试题目并动态渲染到页面上，支持多种题型（选择题、填空题、编程题等）。
答题计时：实现倒计时功能，确保考试在规定时间内完成。
自动保存：在答题过程中定时自动保存答题进度，防止数据丢失。
3. 考试提交和结果评估
答题提交：用户完成考试后，将答案提交到服务器进行保存和评估。
结果评估：后端根据题型自动评估考试分数，同时结合 AI 智能分析用户监控录像和用户考试行为，给出各项检测结果，并将它们保存到数据库中，用人单位可在后台查看考试结果。
先来看一下我们的效果图，如下：
项目地址：https://github.com/ctq123/online-exam-system
欢迎大家点赞和扩展更多有趣的功能。
三、防作弊技术揭秘
首先需要特别说明一下，本文所介绍的是利用前端技术手段监听和防作弊，不包括网络屏蔽、流量分析等外部监控手段。
下面笔者将一一剖析在线笔试的各种防作弊技术。
1. 实时视频监控
从开始流程说起，首先第一个是防止枪手，因此第一个防作弊手段就是登录人脸识别和用户认证，其次考试过程中需要进行实时的视频监控。
视频采集：首先需要打开用户摄像头：
视频采集上传到数据库的方式有两种，一种是实时上传，另一种是先在本地保存数据，在合适的时机在手动上传。
视频实时采集：使用 WebRTC 实时采集用户摄像头数据：
async function startVideoCapture() {
const stream = await navigator.mediaDevices.getUserMedia({
video: true });
const videoElement = document.querySelector('#video-preview');
videoElement.srcObject = stream;
// 将视频流发送到服务器
sendVideoStream(stream);
}
function sendVideoStream(stream) {
// WebSocket 或其他实时传输方式将视频流发送到服务器
const socket = new WebSocket('ws://your-server-url');
socket.onopen = () => {
// 将视频流发送到服务器进行实时分析
};
}
startVideoCapture();
实时上传的好处是不用担心中断考试，数据丢失的问题，但缺点是要建立一个websoket连接，对服务有一定的压力；
而手动上传则没有这样的缺陷，先将收集到的数据保存在本地，在合适的时机再利用普通的http上传到服务端，由于我们设计的是轻服务，我们这里采用手动上传的方案。
2. 全屏检测
有了监控，还需要一个十分必要的手段，那就是全屏模式，考试的防作弊检测基本是以此作为基础的，因为非全屏的话，用户会有很多操作空间。
因此绝大多数防作弊在线笔试系统，都会从一开始就让用户强制进入全屏模式，只要考生退出全屏，考试就会中断。
如何强制全屏模式？
你可以通过 Fullscreen API 将当前页面设置为全屏，而不仅仅是最大化窗口：
function openFullscreen() {
if (document.documentElement.requestFullscreen) {
document.documentElement.requestFullscreen();
} else if (document.documentElement.mozRequestFullScreen) {
// Firefox
document.documentElement.mozRequestFullScreen()