效果圖：
知識點: 人臉識別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’可以領取一套完整的學習視頻