<kbd id="5sdj3"></kbd>
<th id="5sdj3"></th>

  • <dd id="5sdj3"><form id="5sdj3"></form></dd>
    <td id="5sdj3"><form id="5sdj3"><big id="5sdj3"></big></form></td><del id="5sdj3"></del>

  • <dd id="5sdj3"></dd>
    <dfn id="5sdj3"></dfn>
  • <th id="5sdj3"></th>
    <tfoot id="5sdj3"><menuitem id="5sdj3"></menuitem></tfoot>

  • <td id="5sdj3"><form id="5sdj3"><menu id="5sdj3"></menu></form></td>
  • <kbd id="5sdj3"><form id="5sdj3"></form></kbd>

    SpringBoot實(shí)現(xiàn)人臉識別功能

    共 5903字,需瀏覽 12分鐘

     ·

    2022-05-27 04:49

    來源:blog.csdn.net/lw1124052197/article/details/106077837/


    1

    前言


    去年在公司參與了一個(gè)某某機(jī)場建設(shè)智能機(jī)場的一個(gè)項(xiàng)目,人臉登機(jī)是其中的一個(gè)功能模塊,當(dāng)時(shí)只是寫了后臺的接口,調(diào)用人臉識別設(shè)備的api,給閘機(jī)回傳數(shù)據(jù)信號,以保障該功能的正常使用。當(dāng)時(shí)因?yàn)轫?xiàng)目進(jìn)度緊張,手里還有其他項(xiàng)目趕進(jìn)度,也就沒時(shí)間去分享這個(gè)功能的實(shí)現(xiàn)。前幾天刷臉進(jìn)公司大樓的時(shí)候,突然想起來應(yīng)該寫一個(gè)功能類似的demo分享個(gè)人的一些小小的經(jīng)驗(yàn)。在當(dāng)時(shí)項(xiàng)目中刷臉的設(shè)備終端是采購某某AI公司,當(dāng)然咱們在demo里面也不可能買一臺那東西來瞎搞,于是乎就拿系統(tǒng)刷臉登錄來練練手,人臉識別解決方案就用百度云的吧,當(dāng)然騰訊、阿里這方面也很牛逼的。


    ?

    2

    需求分析


    一、人臉注冊


    • step1:人像采集。在注冊頁面上用html中video組件和js調(diào)用筆記本攝像頭,并抓取人像圖片。沒有攝像頭的筆記本、臺式機(jī)的童鞋告辭吧,走好不送。。。

    • step2:人像上傳至項(xiàng)目文件夾。將在頁面采集到的人像數(shù)據(jù)轉(zhuǎn)換成bash64字符傳輸?shù)絯eb后臺,在后臺將bash64轉(zhuǎn)換成圖片上傳至項(xiàng)目文件夾。

    • step3:將用戶的注冊信息寫入數(shù)據(jù)庫,用戶的照片使用路徑存儲。

    • step4:將采集到的人像信息(bash64)上傳至百度云的人臉識別云端服務(wù)器。ps這塊實(shí)現(xiàn)也可離線私有化處理方案,有興趣的童鞋可自行研究。


    二、人臉登錄


    • step1:人像采集。在登錄頁面上用html中video組件和js調(diào)用筆記本攝像頭,并抓取人像圖片。

    • step2:人像數(shù)據(jù)傳輸。抓取的人臉圖片信息回傳至web后臺。

    • step3:人像比對。在web后臺實(shí)例化并調(diào)用百度云人臉識別的sdk,將登錄頁面采集到的圖像數(shù)據(jù)和注冊的圖像信息相比對(這塊是百度云人臉識別解決方案實(shí)現(xiàn)的,也是最牛B的地方),返回的比分大于95分即可實(shí)現(xiàn)登錄。


    ?

    3

    具體實(shí)現(xiàn)


    好了,前言和需求分析也嗶嗶了這么久了,接下來是實(shí)現(xiàn)和上代碼了。


    一、人臉注冊


    前端頁面代碼



    <html>
    <head>
    <meta?charset="UTF-8">
    <title>Insert title heretitle>

    ??<style?type="text/css">
    ?????/**解決瀏覽器兼容性問題**/
    ????*{margin:?0;padding:?0;}
    ????html,body{width:?100%;height:?100%;}/**/
    ????body{background:?url(img/bg03.jpg) no-repeat center;}
    ????h1{color:?#fff;text-align: center;line-height:?80px;}
    ????.media{width:?534px;height:?400px;margin:?40px?auto?0;
    ????????}
    ????#register{width:?200px;height:50px;background-color:?#2196f3;?margin:?60px?auto?0;
    ????text-align: center;line-height:?50px;color:?#fff;border-radius:?10px;}
    ????#canvas{display: none;}
    ????#shuru{width:?200px;height:50px;background-color:?#2196f3;?margin:?20px?auto?0;}
    ??style>
    head>
    <body>
    ??<h1>百度云人臉注冊h1>
    ??<div?id="shuru">
    ??用戶名:
    ??<input?type="text"?name="username"?id="username"/>
    ??div>
    ??
    ??<div?class="media">
    ????<video?id="video"?width="450"?height="300"?src=""?autoplay>video>
    ????<canvas?id="canvas"?width="450"?height="300">canvas>
    ????
    ??div>
    ??<button?id="register"?>確定注冊button>
    ??<script?type="text/javascript"?src="js/jquery-3.3.1.js">script>
    ??<script?type="text/javascript">
    ??/**調(diào)用攝像頭,獲取媒體視頻流**/
    ??var?video =?document.getElementById('video');
    ??//返回畫布二維畫圖環(huán)境
    ??var?userContext = canvas.getContext("2d");
    ??var?getUserMedia =
    ????//瀏覽器兼容,表示在火狐、Google、IE等瀏覽器都可正常支持
    ????(navigator.getUserMedia || navigator.webkitGetUserMedia || navigator.mozGetUserMedia || navigator.msGetUserMedia)
    ????//getUserMedia.call(要調(diào)用的對象,約束條件,調(diào)用成功的函數(shù),調(diào)用失敗的函數(shù))
    ????getUserMedia.call(navigator,{video:?true,audio:?false},function(localMediaStream){
    ??????//獲取攝像頭捕捉的視頻流
    ??????video.srcObject=localMediaStream;
    ????},function(e){
    ??????console.log("獲取攝像頭失?。?!")
    ????});
    ??//點(diǎn)擊按鈕注冊事件
    ???var?btn =?document.getElementById("register");
    ??
    ??btn.onclick =?function?()?{
    ????var?username = $("#username").val();
    ????alert($("#username").val());
    ??????if(username !=?null){
    ????????//點(diǎn)擊按鈕時(shí)拿到登陸者面部信息
    ???????????????userContext.drawImage(video,0,0,450,300);
    ???????????????var?userImgSrc =?document.getElementById("canvas").toDataURL("img/png");
    ???????????????//拿到bash64格式的照片信息
    ???????????????var?faceBase = userImgSrc.split(",")[1];
    ???????????????
    ???????????????//ajax異步請求
    ???????????????$.ajax({
    ?????????????????url:?"register",
    ?????????????????type:?"post",
    ?????????????????data: {"faceBase": faceBase,
    ???????????????????"userName": username
    ?????????????????},
    ?????????????????success:?function(result){
    ???????????????????if(result ===?'1'){
    ?????????????????????alert("注冊成功??!,點(diǎn)擊確認(rèn)跳轉(zhuǎn)至登錄頁面");
    ?????????????????????window.location.href="toLogin";
    ???????????????????}else?if(result ===?'2'){
    ?????????????????????alert("您已經(jīng)注冊過啦!!");
    ???????????????????}else{
    ?????????????????????alert("系統(tǒng)錯(cuò)誤??!");
    ???????????????????}
    ???????????????????
    ?????????????????}
    ???????????????})
    ??????}else{
    ????????alert("用戶名不能為空");
    ??????}
    ???????}
    ??script>
    body>
    html>


    頁面截圖,本人太帥,先行打碼,嘿嘿



    后臺具體代碼如下:


    private?static?final?String?APP_ID =?"****";
    private?static?final?String?API_KEY =?"*******";
    private?static?final?String?SECRET_KEY =?"*******";
    ??
    @Autowired
    private?IUserService userService;
    ??
    ??
    ??@RequestMapping(value =?"register",method = RequestMethod.POST)
    ??public?String?register(String?userName,String?faceBase) throws IOException {
    ????if(!StringUtils.isEmpty(userName) && !StringUtils.isEmpty(faceBase)) {
    ???????//文件上傳的地址
    ??????????String?upPath = ResourceUtils.getURL("classpath:").getPath()+"static\\photo";
    ??????????//用于查看路徑是否正確
    ??????????System.out.println(upPath);
    ??????????// 圖片名稱
    ??????????String?fileName = userName+System.currentTimeMillis() +?".png";
    ??????????System.out.println(upPath+"\\"+fileName);
    ??????????File file =?new?File(upPath+"\\"+fileName);
    ??????//初始化百度云的AipFace
    ??????AipFace client =?new?AipFace(APP_ID, API_KEY, SECRET_KEY);
    ??????
    ??????//往自己demo數(shù)據(jù)庫里插入一條用戶數(shù)據(jù)
    ??????Users user =?new?Users();
    ??????user.setUserName(userName);
    ??????user.setUserPhoto(upPath+"\\"+fileName);
    ??????Users exitUser = userService.selectUserByName(user);
    ??????if(exitUser !=?null) {
    ????????return?"2";
    ??????}
    ??????userService.addUsers(user);
    ??????
    ??????
    ??????// 往自己demo服務(wù)器里面上傳攝像頭捕獲的圖片
    ??????GenerateImage(faceBase, file);
    ??????//向百度云人臉庫插入一張人臉
    ??????facesetAddUser(client,faceBase,userName);
    ????}
    ????return?"1";
    ????
    ??}


    APP_ID 、API_KEY、SECRET_KEY三個(gè)參數(shù)分別為百度云人臉識別上面的三個(gè)數(shù)據(jù)項(xiàng),如下圖




    點(diǎn)擊完注冊按鈕后,就會發(fā)現(xiàn)。。。





    到這就算一個(gè)用戶注冊成功了,個(gè)人這張大帥臉也算是錄進(jìn)去了,下面就是刷臉登錄了。


    二、刷臉登錄


    當(dāng)我注冊完周后就會進(jìn)入登錄頁面



    這時(shí)我點(diǎn)擊登錄按鈕,js觸發(fā)后臺方法,具體入下:


    @RequestMapping(value =?"login",method = RequestMethod.POST)
    ??public?String?login(String?faceBase) {
    ????String?faceData = faceBase;
    ????//進(jìn)行人像數(shù)據(jù)對比
    ????AipFace client =?new?AipFace(APP_ID,API_KEY,SECRET_KEY);
    ????Double num = verifyUser(faceData,client);
    ????if(num>95) {
    ??????return?"1";
    ????}else?{
    ??????return?"2";
    ????}
    ????
    ??}
    ??
    ??/**
    ???* 人臉比對
    ???* @param imgBash64 照片轉(zhuǎn)bash64格式
    ???* @param imgType 類型
    ???* @param groupList 百度云人臉識別用戶組
    ???* @return
    ???*/

    ??public?Double verifyUser(String?imgBash64,AipFace client) {
    ????// 傳入可選參數(shù)調(diào)用接口
    ??????HashMap<String,?String> options =?new?HashMap<String,?String>();
    ??????
    ??????JSONObject res = client.search(imgBash64,?"BASE64",?"user_01", options);
    ??????
    ??????System.out.println(res.toString(2));
    ??????System.out.println(res.getJSONObject("result"));
    ??????System.out.println(res.getJSONObject("result").getJSONArray("user_list"));
    ??????JSONObject user = (JSONObject) res.getJSONObject("result").getJSONArray("user_list").get(0);
    ??????Double score = (Double) user.get("score");
    ??????
    ????return?score;
    ??}

    接著我正面面對攝像頭,點(diǎn)擊登錄按鈕,就進(jìn)入了一個(gè)大大的success頁面


    我側(cè)臉或者拿照片試一下,不好意思,您老只能是404了


    以上就是整個(gè)實(shí)現(xiàn)的思路和一些步驟了,demo涉及的類和頁面比較多,不方便一一截圖,隨后我把資源上傳到本站。如有需要可自行下載。


    綜合而言實(shí)現(xiàn)還是比較簡單的,牛逼的地方都在人家百度云那邊呢,咱們只是根據(jù)需求合理利用人家的解決方案罷了。其實(shí)如果不是很牛逼的專項(xiàng)技術(shù)研發(fā)公司,做項(xiàng)目能合理利用別人的產(chǎn)品是最有效率的,項(xiàng)目建設(shè)最重要的還是投入產(chǎn)出比嘛。與其自己團(tuán)隊(duì)苦苦研究,花點(diǎn)成本買人家的成品直接用它不香嗎?

    瀏覽 43
    點(diǎn)贊
    評論
    收藏
    分享

    手機(jī)掃一掃分享

    分享
    舉報(bào)
    評論
    圖片
    表情
    推薦
    點(diǎn)贊
    評論
    收藏
    分享

    手機(jī)掃一掃分享

    分享
    舉報(bào)

    <kbd id="5sdj3"></kbd>
    <th id="5sdj3"></th>

  • <dd id="5sdj3"><form id="5sdj3"></form></dd>
    <td id="5sdj3"><form id="5sdj3"><big id="5sdj3"></big></form></td><del id="5sdj3"></del>

  • <dd id="5sdj3"></dd>
    <dfn id="5sdj3"></dfn>
  • <th id="5sdj3"></th>
    <tfoot id="5sdj3"><menuitem id="5sdj3"></menuitem></tfoot>

  • <td id="5sdj3"><form id="5sdj3"><menu id="5sdj3"></menu></form></td>
  • <kbd id="5sdj3"><form id="5sdj3"></form></kbd>
    久久久久久黄色 | 亚洲无码视频在线观看高清 | 黄色免费一级电影 | 青青草香蕉网 | 欧美A欧美A |