最近對寫文章稍稍的有點小牴觸，寫的東西沒人看，有點小失落，還好在粉絲朋友的開導下，調整了下自己的心態，只要我分享的東西對大家有幫助就好，至於多少人看那就隨緣吧！有時候真不能把事兒自己鑽裡面想，越想越出不來！你們也要開開心心的哈！

話不多說先看人臉識別效果動態，馬賽克有點重哈，沒辦法長相實在是拿不出手。

實現原理

我們看一下實現人臉識別登入的大致流程，三個主要步驟：

前端登入頁開啟攝像頭，進行人臉識別，注意：只識別畫面中是不是有人臉
識別到人臉後，拍照上傳當前畫面圖片
後端接受圖片並呼叫人臉庫SDK，對人像進行比對，透過則登入成功，並將人像資訊註冊到人臉庫和本地mysql。

前端實現

上邊說過要在前端識別到人臉，所以這裡就不得不借助工具了，我使用的 tracking.js，一款輕量級的前端人臉識別框架。

前端 Vue 程式碼實現邏輯比較簡單，tracking.js 開啟攝像頭識別到人臉資訊後，對影片影像拍照，將圖片資訊上傳到後臺，等待圖片對比的結果就可以了。

data() {

        
return {

            showContainer: 
true,   
// 顯示

            tracker: 
null,

            tipFlag: 
false,         
// 提示使用者已經檢測到

            flag: 
false,            
// 判斷是否已經拍照

            context: 
null,          
// canvas上下文

            removePhotoID: 
null,    
// 停止轉換圖片

            scanTip: 
'人臉識別中...',
// 提示文字

            imgUrl: 
'',              
// base64格式圖片

            canvas: 
null

        }

    },

    mounted() {

        
this.playVideo()

    },

    methods: {



        playVideo() {

            var video = 
document.getElementById(
'video');

            
this.canvas = 
document.getElementById(
'canvas');

            
this.context = 
this.canvas.getContext(
'2d');

            
this.tracker = 
new tracking.ObjectTracker(
'face');

            
this.tracker.setInitialScale(
4);

            
this.tracker.setStepSize(
2);

            
this.tracker.setEdgesDensity(
0.1);



            tracking.track(
'#video', 
this.tracker, {camera: 
true});



            
this.tracker.
on(
'track', 
this.handleTracked);

        },



        handleTracked(event) {

                
this.context.clearRect(
0, 
0, 
this.canvas.width, 
this.canvas.height);

                
if (event.data.length === 
0) {

                    
this.scanTip = 
'未識別到人臉'

                } 
else {

                    
if (!
this.tipFlag) {

                        
this.scanTip = 
'識別成功，正在拍照，請勿亂動~'

                    }

                    
// 
1秒後拍照，僅拍一次

                    
if (!
this.flag) {

                        
this.scanTip = 
'拍照中...'

                        
this.flag = 
true

                        
this.removePhotoID = setTimeout(

() => {

                                
this.tackPhoto()

                                
this.tipFlag = 
true

                            },

                            
2000

                        )

                    }

                    event.data.forEach(
this.plot);

                }

        },



        plot(rect){

            
this.context.strokeStyle = 
'#eb652e';

            
this.context.strokeRect(rect.x, rect.y, rect.width, rect.height);

            
this.context.font = 
'11px Helvetica';

            
this.context.fillStyle = 
"#fff";

            
this.context.fillText(
'x: ' + rect.x + 
'px', rect.x + rect.width + 
5, rect.y + 
11);

            
this.context.fillText(
'y: ' + rect.y + 
'px', rect.x + rect.width + 
5, rect.y + 
22);

        },



        
// 拍照

        tackPhoto() {



            
this.context.drawImage(
this.$refs.refVideo, 
0, 
0, 
500, 
500)

            
// 儲存為base64格式

            
this.imgUrl = 
this.saveAsPNG(
this.$refs.refCanvas)

            var formData = 
new FormData();

            formData.append(
"file", 
this.imgUrl);

            
this.scanTip = 
'登入中，請稍等~'



            axios({

                method: 
'post',

                url: 
'/faceDiscern',

                data: formData,

            }).
then(function (response) {

                alert(response.data.data);

                
window.location.href=
";

            }).
catch(function (error) {

                
console.log(error);

            });



            
this.close()

        },



        
// 儲存為png,base64格式圖片

        saveAsPNG(c) {

            
return c.toDataURL(
'image/png', 
0.3)

        },



        
// 關閉並清理資源

        close() {

            
this.flag = 
false

            
this.tipFlag = 
false

            
this.showContainer = 
false

            
this.tracker && 
this.tracker.removeListener(
'track', 
this.handleTracked) && tracking.track(
'#video', 
this.tracker, {camera: 
false});

            
this.tracker = 
null

            
this.context = 
null

            
this.scanTip = 
''

            clearTimeout(
this.removePhotoID)

        }

    }

人臉識別

之前也搞過一個人臉識別案例，不過呼叫SDK的方式太過繁瑣，而且程式碼量巨大。所以這次為了簡化實現，改用了百度的人臉識別API，沒想到出乎意料的簡單。

別抬槓問我為啥不自己寫人臉識別工具，別問，問就是不會

百度雲人臉識別的API非常友好，各種操作的 demo都寫好了，拿過來簡單改改就可以。

第一步先獲取token，這是呼叫百度人臉識別API的基礎。


https:
//aip.baidubce.com/oauth/2.0/token?


grant_type=client_credentials&


client_id=【百度雲應用的AK】&


client_secret=【百度雲應用的SK】

接下來我們開始對圖片進行比對，百度雲提供了一個線上的人臉庫，使用者登入我們先在人臉庫查詢人像是否存在，存在則表示登入成功，如果不存在則註冊到人臉庫。每個圖片有一個唯一標識face_token。

百度人臉識別 API 實現比較簡單，需要特別注意引數image_type，它有三種型別

BASE64：圖片的base64值，base64編碼後的圖片資料，編碼後的圖片大小不超過2M；
URL：圖片的 URL地址( 可能由於網路等原因導致下載圖片時間過長)；
FACE_TOKEN：人臉圖片的唯一標識，呼叫人臉檢測介面時，會為每個人臉圖片賦予一個唯一的
FACE_TOKEN，同一張圖片多次檢測得到的FACE_TOKEN是同一個。

而我們這裡使用的是圖片BASE64檔案，所以image_type要設定成BASE64。

    @
Override


    
public BaiDuFaceSearchResult 
faceSearch
(String file) {



        
try {

            byte[] decode = Base64.decode(Base64Util.base64Process(file));

            String faceFile = Base64Util.encode(decode);



            Map<String, Object> 
map = 
new HashMap<>();

            
map.put(
"image", faceFile);

            
map.put(
"liveness_control", 
"NORMAL");

            
map.put(
"group_id_list", 
"user");

            
map.put(
"image_type", 
"BASE64");

            
map.put(
"quality_control", 
"LOW");

            String param = GsonUtils.toJson(
map);



            String result = HttpUtil.post(faceSearchUrl, 
this.getAccessToken(), 
"application/json", param);

            BaiDuFaceSearchResult searchResult = JSONObject.parseObject(result, BaiDuFaceSearchResult.class);

            
log.info(
" faceSearch: {}", JSON.toJSONString(searchResult));

            
return searchResult;

        } 
catch (Exception e) {

            
log.error(
"get faceSearch error {}", e.getStackTrace());

            e.getStackTrace();

        }

        
return null;

    }



    @
Override


    
public BaiDuFaceDetectResult 
faceDetect
(String file) {



        
try {

            byte[] decode = Base64.decode(Base64Util.base64Process(file));

            String faceFile = Base64Util.encode(decode);



            Map<String, Object> 
map = 
new HashMap<>();

            
map.put(
"image", faceFile);

            
map.put(
"face_field", 
"faceshape,facetype");

            
map.put(
"image_type", 
"BASE64");

            String param = GsonUtils.toJson(
map);



            String result = HttpUtil.post(faceDetectUrl, 
this.getAccessToken(), 
"application/json", param);

            BaiDuFaceDetectResult detectResult = JSONObject.parseObject(result, BaiDuFaceDetectResult.class);

            
log.info(
" detectResult: {}", JSON.toJSONString(detectResult));

            
return detectResult;

        } 
catch (Exception e) {

            
log.error(
"get faceDetect error {}", e.getStackTrace());

            e.getStackTrace();

        }

        
return null;

    }



    @
Override


    
public BaiDuFaceAddResult 
addFace
(String file, UserFaceInfo userFaceInfo) {



        
try {

            byte[] decode = Base64.decode(Base64Util.base64Process(file));

            String faceFile = Base64Util.encode(decode);



            Map<String, Object> 
map = 
new HashMap<>();

            
map.put(
"image", faceFile);

            
map.put(
"group_id", 
"user");

            
map.put(
"user_id", userFaceInfo.getUserId());

            
map.put(
"user_info", JSON.toJSONString(userFaceInfo));

            
map.put(
"liveness_control", 
"NORMAL");

            
map.put(
"image_type", 
"BASE64");

            
map.put(
"quality_control", 
"LOW");

            String param = GsonUtils.toJson(
map);



            String result = HttpUtil.post(addfaceUrl, 
this.getAccessToken(), 
"application/json", param);

            BaiDuFaceAddResult addResult = JSONObject.parseObject(result, BaiDuFaceAddResult.class);

            
log.info(
"addResult: {}", JSON.toJSONString(addResult));

            
return addResult;

        } 
catch (Exception e) {

            
log.error(
"get addFace error {}", e.getStackTrace());

            e.getStackTrace();

        }

        
return null;

    }

專案是前後端分離的，但為了大家學習方便，我把人臉識別頁面整合到了後端專案。

夥伴們有不清楚的地方，可以留言~

Java教程：PC人臉識別登入，竟然出乎意料的簡單

相關文章