全棧工程師帶你開發 ,node開發人臉識別門禁系統

時間 2019-11-12

標籤工程師開發 node 識別門禁系統简体版

原文原文鏈接

效果圖：javascript

知識點: 人臉識別SKD部署, webRTC視頻流處理,URL構建blob對象,Canvas映射截圖,ajax數據交互,Node圖像處理,跨域與413處理,base64解碼,post響應,JavaScript開發經驗分享等css

人臉識別系統的源碼項目和視頻文末有領取地址html

人臉識別系統開發的部分源碼示意圖：前端

<!doctype html>
<html lang="en">
<head>
    <!--聲明當前頁面的編碼格式 國際編碼 UTF-8 中文編碼 GBK-->
    <meta charset="UTF-8">
    <!--聲明當前頁面的三要素-->
    <meta name="Keywords" content="">
    <meta name="Description" content="">
    <title>please enter your title</title>
    <!--樣式css 修飾 衣服 化妝品-->
	<style>
		*{
			margin:0;
			padding:0;
		}
		body{
			background:#aaa;
		}
		#video{
			width:610px;
			height:450px;
			border-radius:10px;
			margin:50px auto;
			background:#fff;
			overflow:hidden;
		}
		.video_top{
			height:50px;
			line-height:50px;
		}
		.video_top a{
			text-decoration:none;
			float:left;
			color:#000;
		}
		.video_top p{
			float:left;
			margin-left:200px;
		}
		.video_con{
			width:610px;
			height:350px;
			background:#787878;
		}
		.video_footer{
			height:50px;
			line-height:50px;
		}
		.video_footer a{
			color:#000;
			text-decoration:none;
		}
		#canvas{
			display:block;
			margin:auto;
			border:2px solid red;
		}
	</style>
</head>
<body>
	<div id="video">
		<div class="video_top">
			<a href="javascript:;" onclick ="getPhoto()">截圖</a>
			<p>在線直播系統開發</p>
		</div>
		<div class="video_con">
			<video id="myVideo" width="610" height="350" autoplay></video>
		</div>
		<div class="video_footer">
			<a href='javascript:;' onclick="getMedia()">打開攝像頭</a>
		</div>
	</div>
	<canvas id="canvas" width="610" height="350"></canvas>
	<script>
		var myVideo = document.getElementById("myVideo");
		var canvas = document.getElementById("canvas"); 
		var ctx = canvas.getContext("2d");
		//getUseMedia兼容處理
		navigator.getUserMedia = navigator.getUserMedia || navigator.webkitGetUserMedia || navigator.mozGetUserMedia || navigator.msGetUserMedia;
		function getMedia(){
			//判斷瀏覽器是否支持攝像頭功能
			if (navigator.getUserMedia)
			{
				navigator.getUserMedia({
					'video' : true,//打開視頻
					'audio' : true //打開音頻
				},sucessFn,errorFn);//獲取攝像頭成功就執行sucessFn方法，獲取失敗的話就執行errorFn
			}else{
				alert("您當前的瀏覽器不支持攝像頭功能！！");
			}
		}
		//獲取攝像頭裏面的視頻流給video的src路徑
		//解析視頻流路徑
		window.URL = window.URL || window.webkitURL || window.mozURL || window.msURL;
		function sucessFn(stream){
			//若果是火狐瀏覽器
			//myVideo.mozSrcObject 視頻標籤video的src路徑對象
			if (myVideo.mozSrcObject !== undefined)
			{
				myVideo.mozSrcObject = stream;
			}else{
				myVideo.src = window.URL && window.URL.createObjectURL(stream)||stream;
				/*if (window.URL)
				{
					myVideo.src = window.URL.createObjectURL(stream)||stream;
				}*/
			}
		}
		function errorFn(ev){
			alert("出錯了"+ev);
		}

		//截圖功能
		function getPhoto(){
			ctx.drawImage(myVideo,0,0,467,350);
		}
	</script>
</body>
</html>