汇报人:王竟择
汇报日期:5月19日
一、工作背景与目标
在当前数字化会议场景下,安全合规与用户体验同样重要。因为单靠传统的账号密码或昵称机制很容易被冒用身份,无法满足实际会议的“本人到场”刚性需求,所以本周核心目标是把人脸识别融入会议注册与签到的全流程,确保只有经过真实人脸验证的本人才能进入会议。
虽然系统允许用户在页面手动关闭摄像头,但由于人脸识别属于“强验证”环节,所以每次进入会议时,系统都会自动临时开启摄像头,抓取并处理一帧人脸图像,然后立即关闭摄像头并销毁流对象,最大程度减少对用户隐私和体验的影响。所有采集到的人脸数据和图片只在本地浏览器与后端服务点对点传输,后台数据库只存储人脸特征,不保存原始照片或视频,保障个人信息安全。


二、主要工作与技术细节
-
人脸注册功能(Registration.vue 实现)
首先,因为需要保证员工身份的唯一性和数据安全,所以我在“员工管理”页面开发了独立的人脸注册模块。用户访问注册页时,系统自动通过navigator.mediaDevices.getUserMedia向浏览器请求摄像头权限,一旦授权,摄像头画面在<video>组件中实时显示。
用户填写姓名后,点击“拍摄照片”,前端会用 Canvas 离屏捕获一帧图像,将其编码为 JPEG 格式的 base64 数据URL。此图片仅在前端和模型后端之间传输,不在任何第三方存储或前端日志中保留。
注册时,Axios 将用户姓名与 base64 图片一同 POST 到/register,后端 Flask 服务用 MTCNN 检测、裁剪人脸,用 fine-tuned FaceNet 网络提取 512 维 L2 特征向量,并用 MongoDB 唯一索引保证“同名唯一”。如果已存在同名员工,前端能即时收到反馈,提示用户更换姓名或联系管理员核查。
由于后端只存储 L2 归一化后的人脸特征,即使发生数据泄露也无法复原原始面部图像,从而保护用户的生物隐私。
-
人脸识别签到功能(FaceRecognition.vue 实现)
签到流程类似,但更强调高实时性和鲁棒性。用户在签到页输入姓名后,点击“开始签到”,摄像头流被激活并动态显示在页面。系统每隔 1 秒自动捕获一帧并发送到后端/recognize,后端用同样的神经网络计算特征并与注册库所有人脸比对余弦相似度。
如果比对分数最高的名字和用户输入一致且相似度超过阈值,则判定为“本人与注册人脸一致”,前端弹窗显示“签到成功”,否则给出详细的失败原因(如“未识别到注册用户”或“识别到的姓名与输入不符”)。
因为模型推理和数据库查询均为异步操作,为防止用户长时间等待,我为识别流程加上了10秒超时机制,一旦超时则自动中断摄像头流并给出提示,确保不会因个别硬件兼容性或网络抖动拖垮体验。用户任何时候点击“停止”按钮,都能立即断开摄像头,提升安全感。 -
前端摄像头自动控制与用户隐私保护
虽然很多用户担心摄像头“被后台长期占用”,但本系统实现方式是:只有在“注册”或“签到”这两个步骤时,才会短暂打开摄像头抓拍,拍摄完成后马上通过 JavaScript 停止流、回收对象,保证不会有后台进程持续访问摄像头。实际代码层面,所有<video ref="video">的流对象都只在用户操作的 3–10 秒内存在,页面其余时间不会产生任何拍摄或采集。关闭物理摄像头:无法识别,关闭前端摄像头:隐秘识别

-
更重要的是,所有面部特征信息和图像数据仅在浏览器和服务器之间加密传输,不会被其他参会者、页面脚本或第三方应用访问。即使在会议过程中,其他人也无法看到你的头像、摄像头画面或任何原始数据,只有经过模型处理的数字向量在数据库内部用于身份比对。
-
系统健壮性与用户体验优化
虽然主要功能点已经打通,但为了应对实际部署中的多样性和高并发,我还实现了如下细节优化:
-
前端所有与摄像头、识别接口相关的操作都加入了 try/catch 容错处理,保证即使部分设备或浏览器不支持,也能优雅降级提示,不影响会议主流程;
-
消息浮层与提示采用逐步淡出机制(3–5秒后自动消失),保证页面整洁美观,重要提示不会被刷屏覆盖;
-
后端接口响应中所有错误(如未检测到人脸、网络中断、注册冲突)都被前端分级反馈,帮助用户或管理员及时定位问题源头。
三、成效与影响
通过上述一整套流程,系统实现了真正意义上的“本人验证”准入:
-
只有通过人脸识别验证的用户才被允许进入会议,有效杜绝冒名顶替和盗用账号风险;
-
无论用户手动关闭与否,系统都能自动、短时唤醒摄像头完成验证,整个流程快至1–2秒,并且不会干扰会议中的任何成员;
-
采集到的图像和特征数据全程加密、不可逆存储,并且不被其他成员看到,既保护了隐私也提升了合规性。
本周工作打通了“注册–验证–签到–隐私保护”全链路流程,不仅为会议场景下的高安全性和极致体验打下基础,也为后续扩展到考勤、门禁等多场景提供了可靠的技术方案和代码模板。
四、后续计划
结合人脸识别功能完成自动的入会签到。

被折叠的 条评论
为什么被折叠?



