无卡ATM机模拟系统：人脸识别与密码验证-优快云博客

本文介绍了一个基于人脸识别的无卡ATM机模拟系统项目，包括手机APP模拟ATM操作和PC端数据库服务器。系统实现人脸识别、密码认证、账户查询和取款等功能。开发者分享了从零开始学习人脸识别的过程，提供了相关工具类的下载链接，并展示了前端代码示例。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

项目：基于人脸识别的无卡ATM机模拟系统
主要实现内容：
包括实现AMT机模拟人脸识别和密码输入、PC端模拟实现储户数据库服务器系统。

ATM模拟端实现采用手机APP模拟实现：摄像头拍照、密码输入、取款操作流程的模拟；
ATM机端把人脸信息和密码信息等通过网络传输到PC服务器端进行人脸识别、密码认证以及取款操作；
PC服务器实现人脸识别、利用数据库信息进行人脸比对、密码认证、账户信息查询和取款等操作。
储户开户时，需要提供人脸采集信息和初始密码录入，并保存到PC数据库服务器。
UI设计：模拟ATM机取款操作过程简单明了。
PC服务端功能菜单齐全。

对于小白我来说，这ATM还好，可是人脸识别没有使用过啊，这就尴尬了，但是我们不能屈服啊，不能为了他花钱外包把（其实把，我穷，穷。。。），所以自己从头开始把。
第一天既然是人脸识别，那我就百度把，边实践边学习。先弄个人脸检测咯。
第一步下载相关文档，

重要提示代码中所需工具类
FileUtil,Base64Util,HttpUtil,GsonUtils请从
https://ai.baidu.com/file/658A35ABAB2D404FBF903F64D47C1F72
https://ai.baidu.com/file/C8D81F3301E24D2892968F09AE1AD6E2
https://ai.baidu.com/file/544D677F5D4E4F17B4122FBD60DB82B3
https://ai.baidu.com/file/470B3ACCA3FE43788B5A963BF0B625F3
下载

jQury文件
jquery.min.js

第二步开始写前端代码，略丑

html部分

<style> 
.div-a{ float:left;width:49%;height:49%;border:1px solid #F00} 
.div-b{ float:right;width:49%;height:49%;border:1px solid #000;} 
#img{
	width: 100%;
	height: 100%;
	display: none;
}
span{ font-size:25px }
</style> 
</head> 
<body> 
	<!-- 左边区域 -->
	<div class="div-a" id="contentHolder">
		<video id="video" width="100%" height="100%" autoplay></video>
		<canvas style="" hidden="hidden"  id="canvas" width="520" height="250"></canvas>
		<img id='img' src=''>
	</div> 
	<!-- 右边区域 -->
	<div class="div-b" >
			<!-- 测试按钮 -->
		<input type="button" id="snap" style="width:100px;height:35px;" value="拍 照" />
		<input type="button" id="btnres" style="width:100px;height:35px;" value="重新拍照" />
		<input type="button" onclick="CatchCode();" style="width:100px;height:35px;" value="上传服务器" />
		
		<h1>人脸检测实时数据</h1>
		<span>年龄：</span><span id="age"></span><br/>
		<span>颜值：</span><span id="beauty" ></span><br/>
		<span>性别：</span><span id="sex"></span><br/>
		<span>是否戴眼镜:</span><span id="glasses"></span><br/>
		<span>表情：</span><span id="expression"></span><br/>
	</div> 
</body>

js部分

//判断浏览器是否支持HTML5 Canvas
	window.onload = function () {
		try {
		//动态创建一个canvas元 ，并获取他2Dcontext。如果出现异常则表示不支持 document.createElement("canvas").getContext("2d");
		 //document.getElementById("support").innerHTML = "浏览器支持HTML5 CANVAS";
		}
		catch (e) {
		// document.getElementByIdx("support").innerHTML = "浏览器不支持HTML5 CANVAS";
		}
	}; 
	var mediaStreamTrack,video,videoObj,errBack;
	/*

人脸识别系统_人脸检测