基于TrackingJS庫+百度云人臉識別課程簽到系統設計與實現

關鍵詞：簽到系統;課程簽到;人臉識別;TrackingJS;百度云人臉識別API

0 引言（Introduction）

人工智能技術發展為教育領域帶來新的發展機遇，其中課

程智能簽到系統[1]作為智慧教育的一個研究方向，旨在高效、低成本地解決學生課堂簽到問題，并確保簽到的可靠性和防作弊性。課程簽到與公司的上、下班簽到不同，公司簽到通常都有固定時間，通過指紋識別[2]打卡機或人臉識別[3]打卡機就能實現打卡功能。然而，學校課程簽到方式更為復雜，涉及不同的時間段、教室地點、教師和班級等。由于影響簽到因素眾多，若在每間教室都安裝簽到機，將導致高昂成本和復雜系統設計。簽到分為線上和線下兩種方式。線上簽到適用于慕課、云課堂、視頻會議等網絡課程，無特定地點要求;線下簽到則需在實體場所如教室、會場進行，以確認參與者親自到場。本文聚焦于線下簽到功能，利用前端的TrackingJS人臉識別跟蹤技術高效抓取完整的人臉圖像，結合百度云人臉識別接口完成人臉識別認證，同時設計了一個基于教師端的手機攝像頭拍照功能，以綜合解決方案應對學生課程簽到的各種挑戰。

1 線下簽到技術分析（Study of off-line attendancetechnologies）

1.1 基于考勤機器的簽到

在智能手機普及之前，企事業單位通常采用考勤機進行員工簽到，由于上班時間統一，所以一兩臺考勤機就能滿足中小企事業單位的簽到要求。

（1）射頻識別技術（RFID）和近場通信（NFC）刷卡機簽到

刷卡機簽到方式在企事業單位得到廣泛應用，員工使用卡片刷卡完成考勤，但是這種方式存在作弊風險，員工可能代刷。RFID簽到則要求員工人手一張卡和一個專用讀卡器。有學者提出通過手機NFC技術實現課堂智能簽到[4]，或是在客戶端通過RFID模塊采集學生的校園一卡通卡號，再通過無線網絡將考勤信息傳輸到服務器端[5]。

（2）指紋機和人臉識別機簽到

利用人工智能的圖像識別技術，通過指紋機和人臉識別機進行人員考勤，主要用于企事業單位。這種方式避免了作弊行為，但是如果在每個教室安裝一個簽到機，成本比較高，無法大范圍推廣，例如項新建等[2]設計了一款課堂指紋簽到智能管理系統。

（3）聲紋識別機和虹膜識別機簽到

聲紋識別機和虹膜識別機成本比較高，因此通常只用在特殊行業，如銀行等對安全級別要求很高的單位使用。

1.2 基于智能手機App簽到

隨著智能手機技術的快速發展，攝像頭、Wi-Fi、GPS技術已經成為手機的基本配置，通過這些硬件可以實現手機App簽到。

（1）基于Wi-Fi和地理位置簽到

植入地理位置識別功能的簽到App要求簽到者在指定地點簽到，可以防止簽到作弊行為。但是，在高樓或建筑群中，GPS信號可能受影響，降低了簽到可靠性。Wi-Fi簽到則要求用戶連接特定的Wi-Fi，使用不便。例如，ZHANG等[6]通過位置服務+ 人臉識別技術解決簽到作弊問題，耿申[7]基于WLAN室內定位+二維碼技術開發了一款簽到系統。

（2）二維碼簽到

例如，釘釘App允許用戶創建線下會議，填寫相關信息后會生成簽到二維碼，參會者需在會場通過釘釘App掃描此二維碼進行簽到。然而，簽到作弊行為依然可能發生，參會者可能會拍照并將二維碼分享給他人進行遠程簽到，而非在會場現場簽到。周歡等[8]提出基于主動式二維碼+LBS技術的學生考勤管理系統應用研究，杜絕“代簽到”現象。包蕾[9]設計并實現了一款基于二維碼的代簽規避系統。

（3）人臉識別簽到

隨著人工智能技術的快速發展，人臉識別已經成為簽到設計的主要技術，由于智能手機基本都配備了攝像頭及基于云技術的人臉識別技術，所以降低了開發簽到App的復雜性，降低了使用成本，使其成為簽到系統的基本功能。例如，DUAN設計了一款人臉識別課程簽到系統[10]。

2 系統設計（System design）

人臉識別技術已普遍應用于簽到功能，百度云、阿里云、騰訊云等云服務商均提供了人臉識別接口，使系統開發者能更專注于簽到流程的優化，解決系統成本高、可靠性不足、無法完全避免作弊行為等問題。設計思路主要從以下幾個方面考慮。

2.1 前端人臉跟蹤

TrackingJS[11]是基于瀏覽器端的人臉檢測庫，用于實時追蹤來自相機捕獲的圖像。追蹤的數據對象可以是顏色或人的圖像。若追蹤的數據對象為人臉圖像時，還可以設置具體的追蹤檢測目標為人臉圖像中的眼睛、鼻子、嘴巴，當檢測到目標移動或者出現時，就會觸發JavaScript事件，最終根據JavaScript的回調函數完成完整的動態人臉圖像抓取。

2.2 基于百度云人臉識別接口

通過百度云人臉識別API（接口）[12]，將前端捕獲的人臉圖像與已注冊的人臉庫中的圖片進行相似度比對，并返回相似度分值。本系統設置相似度分值大于80為識別匹配。

2.3 基于教師端課程簽到

學生端簽到方式適用于線上網課，教師可以發送簽到碼或二維碼，學生則在學生端通過人臉識別完成簽到;線下課程簽到方式如果設計為學生端人臉識別簽到，還要考慮添加GPS或Wi-Fi定位功能，防止學生作弊。陳維華等[13]設計了一款基于網絡攝像頭設備的簽到系統，需要在每個教室都布置網絡攝像頭，并且系統需要處理每個教室攝像頭發出的請求，成本較高，系統設計復雜度高。賀一粒[14]設計了一款基于深度學習框架Keras和Tensor Flow的教師端人臉識別系統，需要對人臉識別模型進行訓練，增大了系統開發工作量。本系統采用教師手機端人臉識別簽到方式，簽到流程為教師手機發起簽到，開啟攝像頭并放講臺上，學生主動掃臉簽到。此方案能有效防止代簽，簡單易行、成本低且可靠，學生無手機或手機沒電時也能完成課程簽到。

2.4 課程簽到設計

課程簽到方式主要分為線下課簽到、線上課簽到、公開課簽到3種方式。發起課程簽到狀態圖如圖1所示。

2.5 功能模塊設計

本系統的用戶角色分為管理員、教師、學生3種。

（1）管理員。管理員用戶的系統權限主要包括用戶登錄、系統管理、用戶管理、課程管理和系統監控，其中系統管理又包含7個子模塊，主要為菜單管理、角色管理、部門管理、職務管理、通知公告、字段管理、日志管理;系統監控包含在線用戶子模塊。管理員用例圖如圖2所示。

（2）教師。教師用戶的系統權限主要包括用戶注冊登錄和課程管理。教師用例圖如圖3所示。

（3）學生。學生用戶的系統權限主要包括用戶登錄、查看首頁通知、課程學習和簽到記錄。學生用例圖如圖4所示。

3 架構設計（Architecture design）

依據智慧教育生態系統分層架構的設計思想[15]，進一步改進和優化本系統架構方案。本系統的后端開發采用Java語言，基于Spring Boot框架，部署于TOMCAT服務器，前端采用VueJS框架，部署在Nginx服務器，并做負載均衡器。數據接口采用Redis數據庫作為緩存，持久化層采用MySQL數據庫。采用MyBatis框架實現Java對象與數據庫表的ORM 關系映射，完成數據持久化。

該架構要求前端項目和后端項目分別部署于兩個不同的服務器上，并且需要獨立進行部署。由于前端和后端是兩個不同的工程，因此它們有著不同的代碼庫。同時，前端通過Ajax技術調用后端的Restful API，后端再通過跨域訪問百度云人臉識別接口，從而實現真正的解耦。前后端分離MVC架構模式（圖5）。這種架構設計主要解決了全校上萬學生同一簽到時間的阻塞問題。

4 核心功能實現（Implementation of core functions）

4.1 人臉識別模塊

人臉識別模塊主要是為了支持課程簽到服務而開發的模塊，包含人臉信息注冊和人臉識別認證兩個子功能，確保學生進行課程簽到打卡時能通過人臉識別進行身份認證。人臉信息注冊功能主要為了將用戶人臉畫像進行保存，在用戶使用人臉識別認證功能時，可以將用戶注冊的人臉畫像進行比對，從而判斷是否為用戶本人進行操作;人臉識別認證功能主要為了在簽到打卡時確保是學生本人的操作，從而預防作弊行為。

4.2 人臉信息注冊

人臉信息注冊主要基于人臉檢測技術TrackingJS完成人臉的檢測追蹤操作，TrackingJS檢測到人臉后，前端服務自動捕獲人臉畫像，并將人臉畫像轉換為BASE64編碼格式，最終使用Axios異步請求后端人臉信息注冊接口，由后端完成人臉信息本地數據庫保存操作和百度人臉可視化庫人臉注冊操作，并將人臉信息注冊結果返回前端進行渲染后展示給用戶。

4.3 人臉識別認證

人臉識別認證功能主要輔助簽到功能，主要判別學生簽到時是否為學生本人;人臉識別認證功能分為兩種使用場景：一種是單次人臉識別認證，在調用人臉識別組件時將autoClose屬性設置為true，主要在云課程簽到中使用，學生用戶在簽到時進行單次人臉識別，識別完成后系統自動關閉人臉識別彈窗;另一種是連續人臉識別認證，在調用人臉識別組件時將autoClose屬性設置為1，主要在線下課簽到中使用，教師創建完課程簽到后學生可依次進行人臉識別認證簽到，教師可手動關閉人臉識別彈窗，同時系統也支持簽到時間結束后自動關閉人臉識別彈窗。人臉識別認證活動圖如圖6所示。

（1）代碼分析

前端通過TrackingJS抓取人臉代碼如下，tracker.on（）函數監聽攝像頭抓取到包含眼睛和嘴巴的完整人臉圖像，觸發回調函數處理人臉圖像。

人臉識別百度云接口調用代碼如下，aipFace.search（）發起百度云接口調用，返回的數據包存放到responseBody JSON對象中，若錯誤碼為“0”且返回的圖片相似度分值≥80，則返回識別成功的用戶ID。

4.4 線下課簽到模塊

在線下課簽到場景下，授課教師發起線下課簽到后，教師端攝像頭自動開啟，在教室內上課的學生逐一進行刷臉簽到。該簽到方式的應用場景類似于學校門禁刷臉系統。線下課簽到活動圖如圖8所示。

線下課（課堂）簽到具體實現步驟如下。

（1）教師點擊“線下課”發起簽到（圖9）。

（2）教師填寫簽到信息，包括主題、簽到活動時長、教室。然后選擇“教師端簽到”，點擊“開始簽到”（圖10）。

（3）教師打開簽到攝像頭和簽到進度窗口，如果學生簽到成功，就會在簽到進度窗顯示學生頭像圖標和姓名（圖11）。

5 未來改進方法（Improving the approach inthe future）

未來的主要開發工作將圍繞提升用戶體驗和性能兩個方面進行。

（1）采用PWA（漸進式Web應用）技術

由于必須在手機上打開瀏覽器輸入URL地址才能啟動Web應用，導致用戶體驗感不好，因此采用PWA技術讓系統更接近原生應用，實現在桌面直接啟動應用系統，或者開發前端微信小程序，提高用戶的體驗感。

（2）人臉識別驗證性能優化

采用消息隊列的方式進行人臉識別簽到，將現階段的同步請求百度的人臉識別API接口改為異步的方式，提高系統的響應速度。

（3）配置Nginx服務器負載均衡機制

根據日志監測流量，充分利用Nginx服務器負載均衡機制，反向代理機制將動態請求轉發給后臺Tomcat應用服務器進行優化處理，或者將Web服務器遷移到百度云，由云計算動態調整負載均衡機制。

（4）優化Redis數據緩存

進一步優化和調整Redis緩存數據結構，提高簽到查詢效率，避免對數據庫造成過大的壓力，通過日志監測機制，將數據訪問量減少至一個閾值，及時同步持久化數據。

（5）課堂紀律監控

基于多人臉識別抓取和肢體識別技術，教師可以通過手機攝像頭實時監控課堂，統計學生抬頭聽課與低頭睡覺或玩手機等課堂行為，以維護課堂紀律。

6 結論（Conclusion）

通過人臉識別技術，設計并實現了一種教師端課堂人臉識別簽到系統。完成了基于人臉識別技術的簽到系統的界面和數據庫設計，系統通過教師端手機，開啟簽到攝像頭，通過TrackingJS人臉追蹤技術動態抓取完整的人臉圖片，通過百度云人臉識別接口完成人臉驗證，并記錄和統計學生的簽到信息，導出簽到記錄。通過測試，系統具備較高的識別精度和可靠性，滿足了對學生簽到管理的實際需求。系統設計中，把課程簽到分為線下課簽到和線上課簽到及公開課簽到3種方式，保證了線下課簽到的可靠性，還能防止學生出現異地簽到和虛假簽到等情況，系統設計思路簡潔明了，具有較高的實用性、安全性和可維護性。