畢業設計之基於人臉識別的員工信息管理系統

前言：

畢業設計選了這麼一個課題，採用SSM框架+LayUi框架+百度人臉識別接口實現人臉識別功能。由於正在準備考研的複試，所以畢業設計的課題選擇得比較簡單。

作品簡介：

我的畢業設計作品所採用的技術是SSM框架+LayUi前端框架結合百度人臉識別技術進行設計，共分爲四個功能模塊分別是人臉識別登錄功能模塊、系統管理功能模塊、基礎管理功能模塊、公車租用管理功能模塊。

設計難點：

1、如何更好的管理系統後臺，使權限、角色、用戶相分離

2、註冊人臉信息問題，如何解決信息不完整導致後面人臉驗證失敗問題

3、人臉識別登錄時，如何實時獲取人臉頭像信息。

解決方案：

1、通過RBAC技術設計出了權限、角色、用戶相分離，本系統以菜單資源作爲權限，做到菜單級別的權限控制。

2、通過調用人臉識別臉部驗證的接口判斷上傳的圖片信息，解決頭像信息不完整的問題。

3、通過編寫腳本，繪製人臉頭像信息，通過定時器，定時，發送給後臺，實現動態抓取人臉頭像信息。

人臉識別的演示圖：

核心代碼：

通過瀏覽器調用攝像頭，動態獲取人臉頭像，這部分非常重要，附上源碼：

<script type="text/javascript">
		layui.use([ 'form', 'layer', 'jquery' ], function() {
			var form = layui.form,
				layer = parent.layer === undefined ? layui.layer : top.layer
			$ = layui.jquery;
	
	
			Facelogin() ;
			//訪問用戶媒體設備的兼容方法
			function getUserMedia(constraints, success, error) {
				if (navigator.mediaDevices.getUserMedia) {
					//最新的標準API
					navigator.mediaDevices.getUserMedia(constraints).then(success).catch(error);
				} else if (navigator.webkitGetUserMedia) {
					//webkit核心瀏覽器
					navigator.webkitGetUserMedia(constraints, success, error)
				} else if (navigator.mozGetUserMedia) {
					//firfox瀏覽器
					navigator.mozGetUserMedia(constraints, success, error);
				} else if (navigator.getUserMedia) {
					//舊版API
					navigator.getUserMedia(constraints, success, error);
				}
			}
	
			let video = document.getElementById('video');
			let canvas = document.getElementById('canvas');
			let context = canvas.getContext('2d');
			var mediaStreamTrack = null;
			function success(stream) {
				//兼容webkit核心瀏覽器
				//將視頻流轉化爲video的源
				mediaStreamTrack = stream;
				try {
					// video.src = CompatibleURL.createObjectURL(stream);
					video.srcObject = stream;
				} catch (e) {
					console.log("訪問用戶媒體設備失敗：", error.name, error.message);
				}
	
				video.play(); //播放視頻
			}
	
			function error(error) {
				console.log(`訪問用戶媒體設備失敗${error.name}, ${error.message}`);
			}
	
			if (navigator.mediaDevices.getUserMedia || navigator.getUserMedia || navigator.webkitGetUserMedia || navigator.mozGetUserMedia) {
				//調用用戶媒體設備, 訪問攝像頭
				getUserMedia({
					video : {
						width : 480,
						height : 320
					}
				}, success, error);
			} else {
				alert('不支持訪問用戶媒體');
			}
	
			document.getElementById('capture').addEventListener('click', function() {
				context.drawImage(video, 0, 0, 480, 320);
			})
	
	
			/*
			參考
			*/
			function openUserMedia() {
				if (navigator.mediaDevices.getUserMedia || navigator.webkitGetUserMedia || navigator.mozGetUserMedia || navigator.getUserMedia) {
					getUserMediaToPhoto({
						video : {
							width : 480,
							height : 320,
							facingMode : "user"
						}
					}, success, error);
				} else {
					alert('你的瀏覽器不支持訪問用戶媒體設備');
				}
			}
			function offUserMedia() {
				if (mediaStreamTrack != null)
					mediaStreamTrack.getTracks()[0].stop();
			}
	
			function getFace() {
				context.drawImage(video, 0, 0, 480, 320);
				this.img = canvas.toDataURL('image/jpg')
				//獲取完整的base64編碼
				this.img = img.split(',')[1];
				return this.img;
			}
			function Facelogin() {
				setTimeout(function() {
					img = getFace();
					var test = window.location.href;
					layer.msg(test);
					$.post("${ctx}/login/faceLogin.action", {
						"imgpath" : img,
						"imgType" : "BASE64"
					}
						, function(res) {
							layer.msg(res.msg);
							if (res.code >= 0) {
								window.location.href = "${ctx}/login/toIndex.action";
							} else {
								//檢測人倆失敗，重新調取圖像
								Facelogin()
							}
						}
	
					)
				}, 1000);
			}
	
	
		})
	</script>

 

畢業項目小結：

本科階段人臉識別功能通過調用百度的接口進行實踐，希望在以後的研究生的學習中，可以通過學習樸素貝葉斯算法在這方面進行繼續地深造。

學習一門語言並不難但是要真正掌握需要花費一定的時間，JAVA的學習還是挺有趣的，學會使用工廠模式。

畢業設計作品的完成，也意味着自己快要畢業的了，加油未來可期。