全栈工程师带你开发 ,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开发人脸识别门禁系统的更多相关文章
- 全栈工程师-史上最强VSCODE插件-提高开发效率
当你点进来的时候 ,你可能是被标题吸引进来的,也有可能是 偶然间,看到的,首先恭喜你,已经准备好向全栈开发工程师靠近 ,那我们不说废话,直接开始,咱们先从安装步骤开始讲起 ,因为有些人连插件在哪都不知 ...
- 《Web全栈工程师的自我修养》读书笔记（转载）
[声明] 欢迎转载,但请保留文章原始出处→_→ 生命壹号:http://www.cnblogs.com/smyhvae/ 文章来源:http://www.cnblogs.com/smyhvae/p/5 ...
- 全栈工程师眼中的HTTP
HTTP,是Web工程师每天打交道最多的一个基本协议.很多工作流程.性能优化都围绕HTTP协议来进行,但是我们对HTTP的理解是否全面呢?如果前端工程师和后台工程师坐在一起玩捉鬼游戏,他们对HTTP的 ...
- C蛮的全栈之路-序章 技术栈选择与全栈工程师
目录 C蛮的全栈之路-序章 技术栈选择与全栈工程师C蛮的全栈之路-node篇(一) 环境布置C蛮的全栈之路-node篇(二) 实战一:自动发博客 博主背景 985院校毕业,至今十年C++开发工作经验, ...
- 通往全栈工程师的捷径 —— react
腾讯Bugly特约作者: 左明 首先,我们来看看 React 在世界范围的热度趋势,下图是关键词“房价”和 “React” 在 Google Trends 上的搜索量对比,蓝色的是 React,红色的 ...
- JavaScript 全栈工程师培训教程(来自阮一峰)
来源于:https://twitter.com/ruanyf http://www.ruanyifeng.com/blog/2016/11/javascript.html 全栈工程师培训材料,帮助学习 ...
- 《web全栈工程师的自我修养》阅读笔记
在买之前以为这本书是教你怎么去做一个web全栈工程师,以及介绍需要掌握的哪些技术的书,然而看的过程中才发现,是一本方法论的书.读起来的感觉有点像红衣教主的<我的互联网方法论>,以一些自己的 ...
- JavaScript 全栈工程师培训教程 - 阮一峰
http://www.ruanyifeng.com/blog/2016/11/javascript.html https://github.com/ruanyf/jstraining 我现在的技术方向 ...
- 术语-IT术语-全栈工程师：全栈工程师
ylbtech-术语-IT术语-全栈工程师:全栈工程师 全栈工程师是指掌握多种技能,并能利用多种技能独立完成产品的人. 1.返回顶部 1. 中文名:全栈工程师 外文名:Full Stack engin ...
随机推荐
- Navicat查询哪些表有指定字段名
通常需要查询某个字段来自于哪张表,在navicat中没有直接查哪些表有指定字段名的功能,只能用sql来查. 1.(按字段名查表)查询哪些表有指定字段名(比如查字段名article_id)的SQL: S ...
- JavaWeb（五）Filter过滤器
Filter过滤器 Fileter介绍 Filter也称之为过滤器,它是Servlet技术中最实用的技术,WEB开发人员通过Filter技术,对web服务器管理的所有web资源:例如Jsp, Serv ...
- 在微信小程序的JS脚本中使用Promise来优化函数处理
在我们传统的Javascript开发函数编写中,我们习惯了回调函数的处理,不过随着回调函数的增多,以及异步处理的复杂性等原因,代码越来越难读,因此诞生了使用Promise来优化JS函数处理的需求,引入 ...
- Jquery $(this).attr和$(this).val用法示例
以下是个人心得整理,有兴趣朋友可以参考参考 $(this).attr(key); 获取节点属性名为key的值,相当于getAttribute(key)方法 $(this).attr(key,value ...
- JS字符串转换为JSON的四种方法笔记
1.jQuery插件支持的转换方式: 示例: $.parseJSON( jsonstr ); //jQuery.parseJSON(jsonstr),可以将json字符串转换成json对象 2.浏览 ...
- Eclipse中Maven的配置
Maven 的配置 1. 安装配置Maven: 1.1 从Apache网站 http://maven.apache.org/ 下载并且解压缩安装Apache Maven 1.2 配置 Maven 的c ...
- 堆排序—Java
堆排序: 一棵完全二叉树,如果父节点的值大于等于左右节点的值,则称此完全二叉树为小根堆(小顶堆):如果父节点的值小于等于左右节点的值,则次完全二叉树为大根堆(大顶堆). 堆排序是建立在大顶堆或小顶堆的 ...
- hibernate 基本配置文件及CRDU的操作和基本的HQL查询
以下所有内容保存在 E:\JavaWebSrc\firstHibernate 目录中,项目名称为firstHibernate,使用IDEA打开,项目所需jar包在 F:\常用综合\常用jar包\hi ...
- java面向对象理解
面向对象:世间一切事物均可认为是对象,用户不必了解软件内部的实现机制,可根据需要直接调用接口,生成一个正常工作的应用程序. 面向对象的特点:抽象,封装,继承,多态性, 对象:对象就是一个具有明确行为的 ...
- MongoDB-python的API手记
-------------------python调用MongoDB------------------- 1.官方文档:http://api.mongodb.org/python/current/t ...