全栈工程师带你开发 ,node开发人脸识别门禁系统

Posted 2020-10-07 悟空前端

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了全栈工程师带你开发 ,node开发人脸识别门禁系统相关的知识，希望对你有一定的参考价值。

效果图：

知识点: 人脸识别SKD部署, webRTC视频流处理,URL构建blob对象,Canvas映射截图,ajax数据交互,Node图像处理,跨域与413处理,base64解码,post响应,javascript开发经验分享等

人脸识别系统的源码项目和视频文末有领取地址

人脸识别系统开发的部分源码示意图：

<!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>

源码领取地址html5+js学习群：250777811

这个项目的讲解也有视频，需要项目源码和视频练练手的可以加群：250777811

这个项目需要node坏境下才能开发，更重要的是原生javascript能力！希望大家能重视原生。

如果想看到更加系统的文章和学习方法经验可以关注的微信号：‘web前端EDU’或者‘webxh5’关注后回复‘2017’可以领取一套完整的学习视频

以上是关于全栈工程师带你开发 ,node开发人脸识别门禁系统的主要内容，如果未能解决你的问题，请参考以下文章

『Python开发实战菜鸟教程』实战篇：一文带你了解人脸识别应用原理及手把手教学实现自己的人脸识别项目

基于NodeJS+Express+mongoDB+Bootstrap的全栈式工程化开发前后端分离博客系统实战

结合工程实践选题调研分析同类软件产品