全栈工程师带你开发 ,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>

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

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

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

巴特西

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

最新文章

热门文章