###### tags: `FM611A` `MQTT` # MQTT 版 Lab 07 刷臉智慧門鎖實作教學 本實驗與〈[MQTT 版 Lab 06 語音聲控電源插座實作教學](/IsNCFSBqQMOlppZIx4r31g)〉相似, 請先閱讀以瞭解 MQTT 基本架構。 ## 實驗架構 本實驗以臉部辨識網頁為發佈端, Adafruit IO(簡稱 AIO) 為中介伺服器, D1 mini 控制板為訂閱端, 利用 MQTT 傳輸語音辨識結果: ```graphviz digraph hierarchy { nodesep=1.0 // increases the separation between nodes node [color=Red,fontname=Courier,shape=box] //All nodes will this shape and colour edge [color=Blue, style=dashed] //All the lines look like this p[label="臉部辨識網頁"] m[label="AIO 中介伺服器"] s[label="D1 mini 控制板"] p->m [label="發佈"] m->s [label="轉送"] s->m [label="訂閱"] {rank=same;p m s} // Put them on the same level } ``` 每當辨識出已知的臉孔, 就要傳送 "100" 到中介伺服器的 face 主題上, D1 mini 則是要向中介伺服器訂閱 face 主題, 並在收到 "100" 時控制伺服馬達做出開門的動作。 我們已經將臉部辨識網頁準備好放在 https://flagtech.github.io/FM611A/face_recog_mqtt.html, 只要使用瀏覽器連上就可以使用: ![](https://i.imgur.com/Nf11ypn.png) 如果你還沒有申請微軟 Face API 服務, 請參考〈[微軟 Face API 服務申請 (需信用卡認證身份)](/8Bm3ywUgTa2PZC-glpaXJQ)〉教學文章, 否則無法繼續後續的實驗。 ## 申請 AIO 帳號 如果你還沒有依據〈[MQTT 版 Lab 06 語音聲控電源插座實作教學](https://hackmd.io/IsNCFSBqQMOlppZIx4r31g#%E7%94%B3%E8%AB%8B-AIO-%E5%B8%B3%E8%99%9F)〉文中教學申請 AIO 帳號, 請先完成**註冊帳號並建立名稱為 face 的 feed**, 才能利用 AIO 的 MQTT 中介伺服器在網頁與 D1 mini 之間傳送資料。 ## 使用臉部辨識網頁測試 AIO 以下我們先測試臉部辨識網頁功能正確性: 1. 請使用 Chrome 瀏覽器連線至 https://flagtech.github.io/FM611A/face_recog_mqtt.html: ![](https://i.imgur.com/GBykJdr.png) 請按**允許**使用攝影機。 1. 後往下捲到最後, 並填入 AIO 使用者名稱與密碼、微軟 Face API 的端點與金鑰: ![](https://i.imgur.com/cXsUuHB.png) 1. 按一下**載入人臉資料**, 確認看到以下兩個訊息出現 (順序不一定): ![](https://i.imgur.com/NXEAwCf.png) ![](https://i.imgur.com/IM3zxfs.png) 1. 填入要辨識的人臉人名後按**新增人名**: ![](https://i.imgur.com/v5lpjK0.png) 確認如上圖在右上方看到『已經新增』訊息後, 選取剛剛新增的人名, 對著鏡頭按**拍照提升準確度**: ![](https://i.imgur.com/QjM9MRT.png) 拍至少 3~4 張後按**訓練**針對剛剛新增照片訓練模型, 確認如下看到『訓練完成』訊息: ![](https://i.imgur.com/k0S5eDr.png) 不用擔心拍照數不夠, 若是後續發現辨識效果不佳, 可以重複這裡選取人名、拍照、訓練的步驟提升效果。 1. 接著就可以對著鏡頭按**辨識身份**, 它會使用語音及訊息告訴你使用當前畫面進行辨識: ![](https://i.imgur.com/HqIzHQG.png) 如果辨識成功, 就會用語音唸出歡迎訊息, 並且將辨識結果送至 AIO 上, 若看到成功上傳訊息, 就表示成功: ![](https://i.imgur.com/huXNk21.png) 1. 回到 AIO 頁面, 切換到 **IO/Feeds** 頁次, 點選剛剛建立的 face 主題: ![](https://i.imgur.com/nwOU6B0.png) 1. 往下捲就會看到資料清單, 你會看到剛剛人臉辨識網頁辨識成功後送果來的 100: ![](https://i.imgur.com/GB1sBzN.png) 這樣就表示人臉辨識網頁與 AIO 之間的 MQTT 傳輸正常。如果無法看到資料, 請回頭檢查網頁上輸入的使用者名稱與金鑰是否正確? :::info 有關臉部辨識網頁的內容, 有興趣的人可以自行檢視原始碼, 我們並不會詳細說明。 ::: ## FlagsBlock 程式 這個程式與〈[MQTT 版 Lab 06 語音聲控電源插座實作教學](/IsNCFSBqQMOlppZIx4r31g)〉類似, 我們就不詳細說明, 請依照以下步驟從 FM611A_MQTT_Lab06.xml 檔修改: :::info 你可以在這裡[下載程式檔](https://github.com/FlagTech/FM611A_Extra/archive/8be273da9fc6abe8b30ccc43bc2a7d57ecba2d94.zip) ::: 1. 加入**馬達/啟用伺服馬達**以及**馬達/將伺服馬達轉到**積木: ![](https://i.imgur.com/l8DbXho.png) 請記得修改腳位以及無線網路的名稱與密碼。 1. 主程式要將訂閱主題原本的 "voice" 改成 "face": ![](https://i.imgur.com/v5MKA5B.png) 請記得修改成你的 AIO 使用者名稱與金鑰。 1. **取得遠端指令**函式修改如下: ![](https://i.imgur.com/9Pi8XfV.png) 如此即可在收到 AIO MQTT 伺服器傳來的資料實用伺服馬達開門, 10 秒後關門。 1. 上傳程式後, 就可以利用臉部辨識網頁辨識人臉, 只要辨識成功, 就會控制伺服馬達開門了。