效果图：
知识点: 人脸识别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’可以领取一套完整的学习视频