---
# System prepended metadata

title: MQTT 版 Lab 07 刷臉智慧門鎖實作教學
tags: [MQTT, FM611A]

---

###### 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. 上傳程式後, 就可以利用臉部辨識網頁辨識人臉, 只要辨識成功, 就會控制伺服馬達開門了。