效果图：

 

 

 

知识点: 人脸识别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开发人脸识别门禁系统的更多相关文章

  1. 全栈工程师-史上最强VSCODE插件-提高开发效率

    当你点进来的时候 ,你可能是被标题吸引进来的,也有可能是 偶然间,看到的,首先恭喜你,已经准备好向全栈开发工程师靠近 ,那我们不说废话,直接开始,咱们先从安装步骤开始讲起 ,因为有些人连插件在哪都不知 ...

  2. 《Web全栈工程师的自我修养》读书笔记（转载）

    [声明] 欢迎转载,但请保留文章原始出处→_→ 生命壹号:http://www.cnblogs.com/smyhvae/ 文章来源:http://www.cnblogs.com/smyhvae/p/5 ...

  3. 全栈工程师眼中的HTTP

    HTTP,是Web工程师每天打交道最多的一个基本协议.很多工作流程.性能优化都围绕HTTP协议来进行,但是我们对HTTP的理解是否全面呢?如果前端工程师和后台工程师坐在一起玩捉鬼游戏,他们对HTTP的 ...

  4. C蛮的全栈之路-序章 技术栈选择与全栈工程师

    目录 C蛮的全栈之路-序章 技术栈选择与全栈工程师C蛮的全栈之路-node篇(一) 环境布置C蛮的全栈之路-node篇(二) 实战一:自动发博客 博主背景 985院校毕业,至今十年C++开发工作经验, ...

  5. 通往全栈工程师的捷径 —— react

    腾讯Bugly特约作者: 左明 首先,我们来看看 React 在世界范围的热度趋势,下图是关键词“房价”和 “React” 在 Google Trends 上的搜索量对比,蓝色的是 React,红色的 ...

  6. JavaScript 全栈工程师培训教程(来自阮一峰)

    来源于:https://twitter.com/ruanyf http://www.ruanyifeng.com/blog/2016/11/javascript.html 全栈工程师培训材料,帮助学习 ...

  7. 《web全栈工程师的自我修养》阅读笔记

    在买之前以为这本书是教你怎么去做一个web全栈工程师,以及介绍需要掌握的哪些技术的书,然而看的过程中才发现,是一本方法论的书.读起来的感觉有点像红衣教主的<我的互联网方法论>,以一些自己的 ...

  8. JavaScript 全栈工程师培训教程 - 阮一峰

    http://www.ruanyifeng.com/blog/2016/11/javascript.html https://github.com/ruanyf/jstraining 我现在的技术方向 ...

  9. 术语-IT术语-全栈工程师：全栈工程师

    ylbtech-术语-IT术语-全栈工程师:全栈工程师 全栈工程师是指掌握多种技能,并能利用多种技能独立完成产品的人. 1.返回顶部 1. 中文名:全栈工程师 外文名:Full Stack engin ...

随机推荐

  1. Shrio授权验证详解

    所谓授权,就是控制你是否能访问某个资源,比如说,你可以方位page文件夹下的jsp页面,但是不可以访问page文件夹下的admin文件夹下的jsp页面. 在授权中,有三个核心元素:权限,角色,用户. ...

  2. centos下搭建多项目svn服务器

    svn是多人协作开发中的利器,是一个开放源代码的版本控制系统. 相比与git,他的操作更加简单,windows下有优秀的图形界面,并且支持的文件类型比较多. 本文讲述如何在linux下搭建一个svn服 ...

  3. 关于spingMVC使用时配置自动扫描出现的路径报错

    com.lab –controller –service –dao –pojo <context:component-scan base-package=" " /> ...

  4. 短视频服务大PK，阿里云、腾讯云、又拍云、七牛云、金山云5强横向对比

    继直播后,短视频又再次爆发,在这个风口,国内的各大云厂商也都相继推出了自己的一站式短视频解决方案.上周由于公司短视频功能开发的需要,对比了阿里云.腾讯云.又拍云.七牛云.金山云5家的短视频服务. 先介 ...

  5. 锋利的jQuery幻灯片实例

    //锋利的jQuery幻灯片实例 <!DOCTYPE html> <html lang="en"> <head> <meta charse ...

  6. 数据结构学习（shell排序和归并排序）

    # coding=utf-8 # shell排序 # 参数alist:被被排序的列表 def shellsort(alist): gap = len(alist) / 2 while gap > ...

  7. Spring-boot:快速搭建微服务框架

    前言: Spring Boot是为了简化Spring应用的创建.运行.调试.部署等而出现的,使用它可以做到专注于Spring应用的开发,而无需过多关注XML的配置. 简单来说,它提供了一堆依赖打包,并 ...

  8. Python学习日志_2017/09/08

    今天早晨学习了<Head First :HTML and CSS>:学习了两个章节,感觉从基础学习特别的踏实,能看懂的同时踏踏实实的锻炼了基础的能力.我个人认为无论哪个行业,最重要的永远是 ...

  9. JAVA实用案例之验证码开发

    验证码在很多地方都会遇到,实现的方法和形式也有很多,主要的目的就是为了安全,防止一些恶意的攻击等.说实话那么多年竟然没注意过这东西,原理很简单,贴出来给大家做个参考. 1.简单介绍 一般稍微有些经验的 ...

  10. Redis集群的相关概念

    1.1 redis-cluster架构图 架构细节: (1)所有的redis节点彼此互联(PING-PONG机制),内部使用二进制协议优化传输速度和带宽. (2)节点的fail是通过集群中超过半数的节 ...