效果图:
![](http://upload-images.jianshu.io/upload_images/7004485-acd9ca7596632842.gif?imageMogr2/auto-orient/strip)
![](http://upload-images.jianshu.io/upload_images/7004485-f389fa4379010abc.gif?imageMogr2/auto-orient/strip)
知识点: 人脸识别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>
![](http://upload-images.jianshu.io/upload_images/7004485-96275d4f98c7eebf.gif?imageMogr2/auto-orient/strip)
![](http://upload-images.jianshu.io/upload_images/7004485-51755dcb153687bd.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
这个项目的讲解也有视频,需要项目源码和视频练练手的可以加群:733581373
这个项目需要node坏境下才能开发,更重要的是原生javascript能力!希望大家能重视原生。
如果想看到更加系统的文章和学习方法经验可以关注的微信号:‘web前端技术圈’或者‘webxh6’关注后回复‘2018’可以领取一套完整的学习视频