ESP32-CAM講義1091211

泰山高中電子科 ESP32- CAM 智慧影像辨識與應用講義

By:陳致中

109/12/11 1. 由於 ESP32CAM 需與電腦在相同網域方可控制，所以桌機需要先安裝無線網路環境，首先插上小小 顆的無線網卡，點擊驅動程式資料夾Autorun.exe自動執行，點選網卡圖示安裝，但筆電則不需要。 2. 左下角放大鏡輸入『控』，點選『控制台』→右上檢視方式選『類別』→『檢視網路狀態及工作』 3. 左側『變更介面卡設定』→點選無線『Wi-Fi』，乙太網路是指有線的網路。 4. 選擇無線網路 SSID，輸入密碼之後，若右下角可看到 圖示表示連線成功。由於桌機的無線網卡 與 ESP32 CAM 都要無線上網，若全班都同時使用學校無線 AP，當多人同時使用，極易發生網路塞 車，所以建議學生自行用手機當作無線基地台分享給自己，若真無網路吃到飽，學校 SSID 為 E3-7， 密碼為 520…521，但網路頻寬有限，敬請進行網路的分流。

5. 由於 ESP32-CAM 並無燒錄介面，需要準備一個『USB 轉 TTL』工具，連接方式是兩邊的 TxD 與

RxD 互接，先插上該裝置，在桌面『本機』圖示按右鍵，選擇『內容』→『裝置管理員』→在 FT232R

USB UART 裝置按右鍵，選擇『更新驅動程式』→『瀏覽電腦上的驅動程式軟體』→選擇 USB 轉 TTL 驅動程式資料夾→確定→下一步，但需要重複做 2 次才會成功。

6. 當在連接埠(COM 和 LPT)可看到新增的『USB Serial Port(COM?)』，即表示驅動程式安裝成功。

安可信 ESP32-CAM 規格介紹

ESP32-CAM 內建 Wi-Fi，並結合 OV2640 影像感測器模組（解析度 1632 x 1232）、PSRAM 記憶體、 MicroSD 記憶卡槽(存照片，最大 32G)，ESP32-CAM 常見應用：縮時攝影、PIR 防盜監視器、一般監視 器、人臉辨識門禁系統、視訊遙控車、影像辨識自走車、做為網路攝影機應用、其他各式影像辨識應用 使其適合，同時與過往 ESP8266 一樣相容於 Arduino。

重要的是，只要透過 Arduino 的一個內建範例程式 CameraWebServer，將該程式透過 PC 燒寫到 ESP32 CAM ，就可以在 ESP32 CAM 上建立一個網頁伺服器（Web Server），而後只要用瀏覽器瀏覽 192.168.x.x 內部網址，就可以看到攝影機角度影像內容，進一步也可以作一些影像辨識應用，如人臉位 置標記等，這等於也是一個 WoT（Web of Things）， ESP32 CAM 的GPIO4 已經接閃光燈(超亮，持續 點亮太久會冒煙)、GPIO0 是燒錄用(燒錄接 GND，平時不可接 GND)、GPIO1 是當 TxD、GPIO3 是當 RxD，Vcc 不是外接電源而是提供電源(POUT)，外接電源(POW)標示 5V，外觀與腳位如下。

1. 請至 https://www.arduino.cc/en/Main/Software 網站下載最新開發套件（註：ESP32 CAM 需要最新的 核心程式，建議下載 1.8.12 以上版本，選擇 Windows 版本→JUST DOWNLOAD只是下載）。 2. 點擊桌面『新版Arduino IDE』捷徑後，選擇『檔案/偏好設定』，出現偏好設定視窗，在『額外的開 發板管理員網址』輸入『https://dl.espressif.com/dl/package_esp32_index.json』，按『確定』。 右下開關往右是 Burn 燒錄，往左是 執行模式，左上則是外接電源開關 PIR 人體感測 GPIO15 GPIO2 GPIO13 GPIO12 GPIO14

3. 在『工具→開發板→開發板管理員』中輸入『ESP32』關鍵字，經過一段時間找到 ESP32 套件，按 『安裝』1.0.4 最新版，否則編譯會出現錯誤，若無法找到是因為 Arduino 版本太舊，請更新最新版。

(※檔案較大，請使用有線網路安裝)

4. 最後點選『工具→開發板』，選擇『ESP32 Arduino → ESP32 Wrover Module』板子。由於程式包含 串流 stream server 及臉部辨識，因此檔案較大，需將燒錄區域方案 Partition Scheme 改成『Huge APP(3MB No OTA/1MB SPIFFS)』，否則編譯會出現錯誤。

5. 如果在上傳程式時出現類似 "找不到序列埠訊息..."，建議您更換一個好一點的 USB to TTL 模組。 6. 因為 ESP32 CAM 開發板需要較穩定的電壓和較多的電流，如果您發現板子出現不穩定的狀態，或

出現brownout的錯誤時，代表需更換較粗(好)的電源線線材或者 USB 接口（建議 USB3.0）。 7. 可以上傳程式不表示 ESP32 CAM 開發板沒有問題，因為有些板子會出現無法連接到 IP 分享器的

安可信 ESP32 CAM 實作篇 (※底下超實用範例均為高雄法蘭斯老師提供)

實作 01：利用官方 CameraWebServer 範例，進行影像追蹤與辨識

1. 依序按『檔案 → 範例 → ESP32 → Camera 相機 → CameraWebServer 相機網頁伺服器』，若找不 到該範例，那是因為還未選擇『ESP32 Wrover Module』板。

2. 將第 10 行變註解，取消第 14 行註解，因為本開發版是 THINKER，並修改第 18 與 19 行帳號密碼。

3. 當燒錄時要將 GPIO0 與 GND 連接，燒錄完成後，將 GPIO0 與 GND 分開，則在界面上一直持續出

現Connecting...時候，此時需立即按一下 RESET 重置按鈕，閃光燈會亮一下，然後就會開始燒錄，

若沒看到錯誤提示，則千萬不要按 RESET，若燒錄時看到『A fatal error occurred: Failed to connect to ESP32: Timed out waiting for packet header』錯誤訊息，表示要再用一次。

4. 燒錄過程會依序出 現 1% 到 100% 進 度，若較大程式， 時間大約要一分鐘， 當燒錄成功上方標 題會出現『上傳完 畢』，如右圖所示。 5. Wi-Fi 基地台請先開啟，右下開關往左撥，切到執行模式，按下 Reset 按鈕重新啟動開機或拔除再插 入電源，然後按右上方 監視視窗，速度改115200bps，因為 ，

若成功連接 Wi-Fi 網路會看到分配給 ESP32 CAM 的位置如 http://192.168.X.X，複製該位置到 Chrome 瀏覽器，按最下方的『Start Stream開始串流』即可看到動態影片，『Get Still』是取得靜態 照片，同時觀察 Arduino 監視視窗。 (註：電腦需跟 ESP32 CAM 同網域方可，鏡頭方向並無統一)

6. 若有連線但看不到影像，按瀏覽器右上『 』→更多工具→開發人員工具，以便觀察錯誤訊息。 7. 動 態 分 配 給 ESP32 CAM 的位置，若一直沒 看到，表示尚未連接到 WiFi，有可能是因為電 流供應不穩定，如桌機

8. 開啟最下方『Face Recognition 臉部辨識』，則上方『Face Detection 臉部檢測追蹤』自動開啟，此時 『Enroll Face 註冊人臉』才可使用，若解析度調太高會出現右下圖的錯誤，請降低解析度，然後程 式就會自動追蹤臉部，每出現方框就自動拍照，上方顯示 ID[0]是表示第 1 位，而 Sample[4]是表示 已經取樣第 5 張照片(編號是從 0 開始)，若看到 ID[1] Sample[5] 是表示第 2 位的第 1 張照片，依 此類推，其實當抓完五張照片就可以自動開始辨識，接著可關閉 Face Recognition 臉部辨識，只要 剛剛人物出現，就會自動出現人名，若欲修改顯示的名稱，請切換修改『app_httpd.cpp』檔案的第 191 行內容，若網路速度太慢，會出現右下圖錯誤訊息，提醒選擇更低的解析度(lower resolution)。 9. 影像辨識若在光線不足或背光條件時，辨識效果會很差，應盡量避免發生。 ※ ESP32-CAM 網路學習資源推薦  Randomnerdtutorials https://randomnerdtutorials.com/esp32-cam-troubleshooting-guide/  Youtube https://www.youtube.com/results?search_query=esp32-cam

 Github (fustyles) https://github.com/fustyles/Arduino  Github https://github.com/search?q=esp32-cam

實作 02：ESP32-CAM_http.ino 與 ESP32-CAM_https.ino 1. 整合實作 01 的四個檔案，增加透過網頁的各式控制，可參考程式碼前面註解 1-36 行說明，若瀏覽 器畫面當掉，可依序按右上『 』→更多工具→清除瀏覽資料→清除資料。 2. ESP32-CAM_http.ino 模組可串流，無法使用 HTTPS，所謂 HTTPS 全名超文本傳輸安全協定，S 就 是 Secure 安全的意思；HTTPS 一樣透過 HTTP 進行通訊，但通訊過程使用 SSL/TLS 進行加密，當 要將影片上傳到雲端就不行，所以必須使用 ESP32-CAM_https.ino，利用『偽串流』來使用 HTTPS， 所謂偽串流又稱為『張流』，即將多張照片持續上傳，但缺點是會造成延遲看起來較嚴重。 3. 第 43 行自訂 ESP32-CAM 的 AP 熱點 名稱，末兩碼建議每人用座號代替，方 便觀察分配到的動態位置，不然全班都 長得一樣，怎知自己是哪片板子?但若 是使用自己網路則不用變更第 43 行。 4. 若桌機與 ESP32-CAM 是同個區段網 路，則用 192.168.43.89 位置控制，若 無對外的網路吃到飽，則將桌機連到第 43 行設定的熱點，即使 ESP32-CAM 沒有設定連上區域網路，也可以利用 當 電 源 不 穩 定 或 電 流 太 小 ， 易 有 條 紋 波 干 擾，不妨外加 5V 電源 ESP32-CAM_https.ino

 所 謂 STA(Station) 模 式 是 指 將 ESP32 CAM 與電腦都同時連到 一個現有的區域網路 TSSH，但 動態分配的位置都不一定，如 192.168.43.89，每人都不同  AP(Access Point) 模 式 是 指 將 ESP32 CAM 當成臨時 AP 分享 器，電腦可直接連到 ESP32CAM 的 AP 名 稱 ， 位 置 固 定 為 192.168.4.1，可離線使用，但不 可對外，如 Telegram 不可使用 『數位 Digital』是指 0 與 1 或亮與不亮兩種 狀態，屬於『不連續型』。而『類比 Analog』 是指 0~255，屬於『連續型』 ▲善用複製修改第 36 行以前之註解

analogwrite 則值介於 0~255。LED 發光二極體長腳為正，接左邊 GPIO2，短腳為負，接右邊 GND， 如左下圖，當瀏覽器輸入http://192.168.43.89?digitalwrite=2;1，即可透過網址控制 LED 亮滅；複製 修改第 26 行『http://192.168.xxx.xxx?flash=value』，value 介於 0~255，即可控制閃光燈不同亮度。 7. 若沒用到 Telegram 或 GoogleDrive、Linenotify，建議用法蘭斯改寫 官方的ESP32-CAM_http.ino，Stream 串流畫面較流暢，而且參數可 以直接輸入再按『Send 送出』，不用輸入網址就可控制，管理超方 便，如上面中間與右邊的圖片所示，但若要用網址控制當然也可以， 只是 ESP32-CAM_http.ino 網址的問號前面需多 control 命令，因為 這是官方函式庫規定，若不外接 LED，可利用內建的閃光燈 GPIO4， 建議閃光燈不要開太久，怕燒掉。將 LED 移除，改接 SERVO 伺服 馬達，橙色接 GPIO2，紅色接中間 5V，棕色接 GND，中間透過長

排針連接，複製 ESP32-CAM_http.ino 第 41 行『http://192.168.xxx.xxx/control?servo=pin;value』，value 數值介於 1700(0 度) ~ 8000(180 度) ，改為『http://192.168.43.89/control?servo=2;4850』，則 SERVO 會轉到 90 度中間位置，或將 P2 改為 4850。

8. 複製修改 ESP32-CAM_http.ino 第 16 行『http://192.168.xxx.xxx:81/stream』，其中 :81 是指利用 PORT 埠 81 的位置來傳遞視訊的資料，如下圖。 9. 上述步驟成功再利用記事本編輯網頁，例如『<img src=http://192.168.43.89:81/stream』，這是指插 入圖片或視訊的 HTML 語法，存檔類型為『所有檔案』，即可製作簡單監視捷徑，若有四個或多個 ESP32 CAM ， 就 可 同 時 監 視 多 個 監 視 畫 面 ， CP 值 超 高 。 關 於 HTML 語 法 教 學 參 閱 ← P2 代表第 2 個參 數，數位是 0 與 1，類 比是 0~255，SERVO 則 是 1700~8000 的數值 GPIO2 GPIO13 GPIO12 GPIO14 ESP32-CAM_http.ino 按下 Start Stream 才會看 到影像，以節省網路流量

http://www.dlps.tc.edu.tw/html_teach/#t9，利用表格同時監看，左下圖是單一視窗，右下是點擊 2x2 監視.htm 執行畫面，若要修改檔案按『右鍵→開啟檔案→記事本』，再自行修改所有 IP 位置，因為 IP 是 DHCP 動態分配，可按CTRL+H取代最新的 IP，單一畫面沒問題再試多個。

10. 若使用 3x3 監視.htm，可利用wnetwatcher軟體查出同區段多個 IP 位置，2A 變壓器約只能同時並接 7 片 ESP32 CAM，若用電腦 USB 會因為電流過大，而出現『暴衝』提示訊息，其中左上畫面不同， 那是因為鏡頭方向沒有統一，不同製造商出貨不一定相同。

11. 若要變更監視畫質請修改第 244 行程式，第 247-248 行是設定 GPIO4 閃光燈使用第 4 通道，意謂將 來其他 GPIO 若使用類比 PWM 控制，不可重複使用第 4 通道，同時 GPIO4 跟拍照電路有關，所以 只要拍照完畢，一定要強制關閉閃光燈的腳位。

開機時，當連上網路，閃光燈快速閃爍，未連上慢速閃爍，藉此容易判斷是否無線網路連線中。 註：若發現閃光燈每隔一段時間會自動閃爍點亮，應是電源不穩定，造成反覆重新啟動所造成。 12. 學習自訂指令，請複製貼上下圖選取的位置，增加控制閃光燈或其他指令，此步驟較有挑戰性，請 自行斟酌實際修改程式看看！ 13. ESP32-CAM_http.ino 透過網址就可以同時控制四個伺服馬達，第 1 個數字是腳位編號，第 2 個腳位 角度，例如 http://192.168.xxx.xxx/control?servo=12;1700;13;4850;14;8000;15;4850

14. ESP32 CAM 的 SERVO 跟 Arduino 使用方式不同，原本角度是介於 1700~8000 之間，如底下程式， 但可以利用 angle*6300/180+1700這就可以將 0-180 轉換成 1700~8000。

15. 伺服馬達 SERVO 分成兩種，外觀非常相似，「不連續型」伺服馬達可控制旋轉角度 0~180 度之間， 如機器人關節或門禁開關門動作；而「連續型」伺服馬達旋轉角度 360 度，無法控制旋轉角度，但 可以控制正轉(0 度)或反轉(180 度)以及轉速，可應用於車子前進或後退，90 度則為停止。

實作 03：ESP32-CAM_PIR_Telegram.ino 當有人經過，自動將擷取照片上傳到免費 Telegram

1. 若使用Line Notify 接受照片，一小時只能接收50 張影像的限制，使用 Telegram 傳送影像則無限制， 進階的 Line bot 機器人建立需要用 node.js 或 google script 架設，但 telegram bot 只需要在 telegram 上操作就可以建立了，所以若玩 ESP32 CAM 就少用 Line Notify 與 Line bot，改用 Telegram，申請 會用到手機當場認證，相關影片請參閱 https://www.youtube.com/results?search_query=telegram+bot

2. 先用手機安裝 Telegram APP，安裝後按右上角的放大鏡，搜尋『botfather機器人之父』，點選第一

個建立 Bot 機器人，出現對話頁面後，按下最下方『RESTART重新開始啟用』。

3. 接著按右上角的放大鏡，搜尋『chatid聊天室』好友，選擇下圖『Chat ID Echo』，點選後可看到一 組密碼，將來須使用於程式碼中。

4. 桌機網址 https://web.telegram.org/ 官網，第一次登入須先輸入手機號碼認證，但第一個數字 0 不用 輸入，按 OK，查看手機 Telegram 的通知(※要稍等)，輸入密碼後方可登入，然後按『允許』。

5. 點選左側 Botfather，Write a message 寫入一個訊息可用鍵盤輸入『/start』開始，對話視窗會列出所 有功能，然後選擇『/newbot 新機器人』。

6. 輸入獨一無二的機器人名稱，不可跟別人相同，接著輸入剛剛相同的名稱，但後面多加『_bot』，不 可輸入錯誤，若成功會收到恭喜建立成功與 API token 授權碼的通知，未來想查看，可利用『/mybots』 我的機器人即可列出所有機器人清單，點選該機器人名稱，選擇 API token，最後步驟最重要，很容 易忽略，就是點擊右下圖的『@XXXXXX_bot』機器人，然後按 啟用，很重要3_。

8. 將步驟 6 一長串內容貼到 ESP32-CAM_PIR_Telegram.ino 第 13 行，步驟 7 內容貼到第 14 行， PIR 腳位是在 GPIO15，然後燒錄上傳測試看看，但請勿使用於非法的偷拍行為喔！。 9. 手機與桌機的瀏覽器顯示結果如下，若看不到有可能是步驟 6 未啟動『@XXXXXX_bot』機器人。 ↑電腦版畫面 ←手機版畫面

10. 第 158 行是每隔 10 秒才去判斷 PIR，否則圖片太多佔頻寬。若欲用文字通知，節省頻寬，可將傳圖 片的第 154 行變成註解，在下面插入『sendMessage2Telegram(token, chat_id, “Alert!”));』

11. PIR 當人體經過會產生電位的變化，預設是接到 GPIO15，若有使用到 SD 卡，建議改用 GPIO13。

實作 04：ESP32-CAM_Telegram_getUpdates.ino Telegram 機器人下達指令控制 GPIO 或擷取照片。

1. 依照下面步驟安裝ArduinoJson-6.x.zip程式庫，並修改 Telegram 的token與chat_id再燒錄。

2. 自行修改第 239 行『sendMessage2Telegram("/help Command list\n/capture Take a photo\n/open Open the door\n/close Close the door\n/restart Restart the board\n/ON FLASH ON\n/OFF FLASH OFF");』，開機時 主動通知列出所有指令，點選項目即可執行，如 SERVO 接 GPIO2，當機器人輸入『/open』則會開 門，可自行再增加指令，如複製貼上第 244-249 行再修改，其中『\n』是指換行。

實作 05：ESP32-CAM_SD_PIR.ino當有人經過將照片上傳到 SD 卡，但 SD 限 FAT32 格式，大小限 16GB 以下，同時建議開啟監視視窗，以觀察存檔的內容，命名方式是 0~255.jpg。

1. 由於 ESP32 CAM 使用數個 GPIO 腳位控制 Micro SD 記憶卡，而因為原有 PIR 是接 GPIO15，有 時會造成無法正確使用 SD，建議改用杜邦線將 PIR 接到GPIO13。

2. 每次拍照，可觀察閃光燈會自動亮一下。

3. 修改第 145 行『s->set_framesize(s, FRAMESIZE_CIF);』可以變更預設的畫質。

 Google Tensorflow.js(tfjs)介紹 https://www.tensorflow.org/js/ ，可按最下方查看所有相關範例。 ←成功 Success

實作 06：ESP32-CAM_face-api_FaceDetection.ino

1. 利用 Google 建立好的 Tensorflow 訓練模型，辨識人臉目前的表情、性別、年齡，由於資料庫模型 是用西方臉孔建立，所以我們實測會較年輕…

2. 辨識人臉目前的表情是利用第 483~506 行找出各式表情(情緒)的最大值 max，如 sad 傷心、angry 憤 怒、fearful 可怕、disguested 噁心的。

3. 第 509~512 行是判斷表情感到快樂時，才會傳送圖片與文字傳到 Telegram，但表情要誇張一點才會 變 happy 喔！其實智慧相機也有捕捉到笑臉自動拍照的功能，大家用力地笑吧….

4. 若 不 透 過 ESP32 CAM 的 鏡 頭 ， 亦 可 直 接 利 用 網 頁 版 執 行 ， 網 址 為 『https://fustyles.github.io/webduino/TensorFlow/Face-api/Face-api_FaceDetection_video.html』， 需用手機或筆電，因為要有攝影機鏡頭方能辨識，下方出現『Please wait for loading model.』表示還在載入模型中，或用手機掃描右上 QR code，建議使 用 Chrome 瀏覽器，前後鏡頭可切換，用手機要橫擺。

實作 07：ESP32-CAM_face-api_FaceRecognition.ino 1. 實作 06 Detection 是偵測，本實作 Recognition 是指辨識，由於需要和網站的指定圖片做比對，但各 位應該都無個人網站，所以請先申請 Github 免費帳號 https://github.com/join?source=login，無限量 的免費私人儲存庫，姓名不可重複，密碼需要至少 8 個字元，並包括英文大小寫與數字，驗證是怕 有駭客用機器人申請，都成功後按下最下方 建立帳號按鈕。 2. 第一次進入會詢問申請者身分、寫程式的經驗、任選 3 個申請目的、興趣，最後按 。

3. 到電子郵件認證，按下 即可進入 Github

4. 按下首頁左側 建立資料庫，填入資料庫名稱，其餘都不改，再按 。

6. 在桌面先建立『teacher』的資料夾，裡面至少放 2 張以上的大頭照，可用小畫家調整大小並選取剪 裁，背景不要有其他人，背景越單純越好，然後利用拖曳方式將整個資料夾『拖曳』到底下的方框

內，再按 提交改變，然後才會開始上傳。

7. 按右上圖『ESP32CAM』資料庫名稱，然後選擇最右邊的『Settings設定』。

8. 拉到最下面，將 None 改為『main 主要』，然後按『Save 儲存』。

9. 測試上傳的圖片是否已經成功，網址為『https://chenlung88.github.io/ESP32CAM/teacher/1.jpg』，其 中 chenlung88 是帳號名稱，ESP32CAM 是資料庫名稱，teacher 是第 1 位人名資料夾。

10. 自訂指令，當偵測到認識的人，會透過 Telegram 傳回姓名文字與照片(有可能只是相似的人)，然後 利用 SERVO 開門(數值介於 1700~8000 之間)

拖曳檔案至你的資料庫 或選擇你的檔案

11. 第 396 行需改為自己存放雲端的絕對位置，請將步驟 9 的內容取代，不含最後人名資料夾與圖檔名 稱，例如『https://chenlung88.github.io/ESP32CAM/』，第 397 行是該資料夾裡面的子資料夾名稱也要 修改，每個名稱代表人名，雲端與程式碼名稱與數量均需一致，第 398 行代表每個人名的資料夾需 辨識的照片數量，至少 2 張，裡面一定是流水號檔名，如 1.jpg、2.jpg、3.jpg，照片以大頭照為主， 像素不可太高，節省判斷的時間，但也不可以很小，第 399 行是判斷的臨界值，低於預設 0.4，表 示很接近預設圖片，則會顯示該人名，若高於 0.4 表示誤差很大，表示是陌生人。 12. 當辨識到某人正確時，則會自動開門(SERVO 接 GPIO2)，請務必修改第 513 行的人名，第 514 行 『servo=2;4850;9』的 2 是指用腳位 GPIO2，4850=(1700+8000)/2，約 90 度，最後 9 代表通道。 13. 若辨識搭配自動追蹤容易跟深度學習一樣吃記憶體，持續辨識久了就當了， 所以設計需按 按鈕才辨識，第一次辨識會稍微久一點，因為第 一次辨識需先載入比對照片，辨識第二次就較快，若辨識成功，底下會出 現『[{"_label":"teacher","_distance":0.38921821866264056}]』，distance 距 離值小於第 399 行預設 0.4，此時 SERVO 會將門打開，若是陌生人則底部 會出現『[{"_label":"unknown","_distance":0.604569397201771}]』，因為該 值大於 0.4，代表差很多，此時才會將照片傳到 Telegram，所以 Telegram 授權碼與 ID 一定要修改，不然照片就會被我看光光。 (※辨識成功不會傳到 Telegram，僅直接開門) 實作 08：ESP32-CAM_QRCode_Recognition(離線版，無顯示視窗)

1. 利用 ESP32 CAM 當作二維 QR Code 掃描鏡頭，當辨識成功會將網址傳到 Telegram 或 Line Notify。 2. 編譯前須外加ESPIno32CAM-master.zip程式庫，建議同時開啟監視視窗觀察，程式每隔一段時間自

動判斷，若看到『Error: not a valid qrcode』，表示不是有效的 QR Code，監視視窗如右下圖。

←Failed 失敗

←successful 成功就傳網址到 Telgram 可修改程式，順便輛閃光燈以便通知

實作 09：ESP32-CAM_PIR_GoogleDrive_Linenotify.ino當有人經過將照片上傳到 LINE 與雲端硬碟， 僅限建立 Script 程式碼人員可看到，當不想用 LINE，將第 29 行 token 刪掉即可，若要縮時攝影，刪除 第 173 行判斷或改用 ESP32-CAM_SD_Manager_PAG.ino，該程式還可存照片到 SD，但限 FAT32 格式。 建議 PIR 初值把延遲 時 間 (Delay) 先逆 時 針調到最底，也就是 最低值，太久會持續 被偵測拍照，敏感度 (Sensitivity)先順時針 調到底，也就是最高 值，若莫名其妙自動 拍照，就是靈敏度太 高，若是反覆自動拍 照，應是延遲太久。 欲修改解析度，請改第 158 行，但解析度太高可能出錯 s->set_framesize(s, FRAMESIZE_VGA);

補充：取得 Line Notify Token 步驟如下 (註：Notify 是通知、Token 是權杖的意思) 1. 進入https://notify-bot.Line.me/zh_TW/ 官方網站，按下右上方『登入』按鈕，輸入登入的帳號與密碼， 登入個人 Line 帳號，倘若帳密若忘記請不要問老師。 2. 右上方顯示帳號名稱，選擇名字旁邊的下拉式選單，選擇『個人頁面』。 3. 請選擇最下方『發行權杖』，第一個權杖名稱一定要填，未來在通知時，會出現【…】告知發話人是 誰或通知用途，內容最多 20 個字，第二個是選擇通知的對象可以是『1 對 1』，也可以直接選擇任意 一個群組，若要選擇群組，記得要將 Line Notify 加到該組群裡面，當兩個欄位都設定後，方可按下 底下『發行』按鈕。 4. 此時 LINE 帳號就會收到連動的通知。 5. 不同的權杖名稱，都會隨機產生一組獨一無二的通行識別碼，如左下圖，當按下『複製』按鈕會自動 將 token 紀錄起來，記得要立即貼到自訂積木裡面，因為當離開此視窗，將不再提供。如果上述 token 外流，遇到有心人士亂傳一大堆資料，只能回到首頁按『解除』，如右下圖，然後再重新建立新的 token， 程式碼也要同步更新，所以盡量注意個人隱私勿外流。

實作 10：ESP32-CAM_Tracking.js_color 顏色辨識追蹤

1. ESP32-CAM_Tracking.js_color.ino 是利用官方預設的串流，顯示較流暢穩定，若有追蹤到物件，會

顯示顏色與與位置座標(left, top, width, height)於最下方，視窗左上角座標為(0,0)，由於程式內建會 抓 magenta 洋紅色、cyan 青色、yellow 黃色 這三種顏色，與自訂範圍無關，所以一開始只找到黃 色物件，如左下圖，當勾選『Show Pixel 顯示像素』則增加一個視窗，下方視窗是『僅』顯示 RGB 範圍內的顏色，若在白紙上放一個黑色物件，選擇預設 Black 黑色是 R=0、G=0、B=0，但一定找不 到，因為那是純黑色，不可能剛剛好，請修正各顏色 min 最小值與 max 最大值即可，所有顏色的 min ≠ max，方可辨識顏色。 2. ESP32-CAM_Tracking.js_color1.ino 是使用張流，需先按下 才會顯示偵測的物件視窗

實作 11：ESP32-CAM_MultiPersonPose_ControlRelay 用肢體動作控制電燈 1. 姿態辨識程式撰寫要點： A. 若不使用鏡像，視訊前人的右手(left)對應ＡＩ 回傳的右手參數。 B. 若使用鏡像，視訊前人的右手對應ＡＩ回傳的 左手(right)參數。 C. 各部位之間的距離會因人與視訊鏡頭間的距離 而改變。可利用各部位距離間的比值關係不受 距離視訊鏡頭遠近影響來設定判定姿態的條 件。 D. 設定一變數紀錄目前開關狀態做判斷，避免視 訊偵測快速重複執行開關而使單晶片當機。 E. 可設定較高的信心度，避免產生異常的偵測意 外開關電器，若無繼電器，可控制 GPIO4 閃光 燈。

2. 姿態辨識要先學會找到 Nose 鼻子、Eye 眼睛、Ear

耳朵、Shoulder 肩膀、Elbow 手肘、Wrist 手腕、 Hip 臀部、Knee 膝蓋、Ankle 腳踝…。

3. 姿態辨識通靈動作練習：開燈：兩手腕分別靠近兩

4. 第 1322 行『/control?flash=10』是指閃光燈亮度 10(※最大 255 易燒毀)，若想設計動作，請先觀察 人體各部位相對關係，如第 1319 與 1324 行的判斷句，『&&』是而且 AND 的意思。 5. ESP32-CAM_MultiPersonPose_ControlRelay02.ino 則是控制開關動作不同，打開是『拉弓動作，右手 腕在肩膀右上，左手腕在左胸，兩手腕連線傾斜角度 20~60 度』，關閉是『兩手腕垂直高舉』，請自 行比較各種姿態判斷語法的撰寫。 實作 12：ESP32-CAM_teachablemachine.ino 機械學習 1. 影片介紹(英文版) https://www.youtube.com/watch?v=T2qQGqZxkD0 法蘭斯教學介紹 https://www.youtube.com/watch?v=Sn7AwpGFXLw 2. 官方功能介紹 https://teachablemachine.withgoogle.com/，可機器學習再辨識影像、聲音、姿態，例 如下圖 wing 翅膀姿態的機率有 43%，Metal 重金屬搖滾機率有 93%。 若要改用繼電器控制，將第 1322 行與第 1327 行改為 HIGH 與 LOW pinMode(XX, OUTPUT); digitalWrite(XX, LOW);

3. 按下 就可以線上開始訓練，Image Project 是訓練圖像、Audio 是聲音、Pose 是姿態。

4. 若電腦有視訊鏡頭方可按『Webcam』直接拍照，若沒有可到自己 FB 或其他方式找自拍照，再用

『Upload上傳』。

5. 步驟一按著『Hold to Record』不放會自動連續拍照，選擇類別 Class2 繼續，至少兩位才能比較。

←可以自訂名稱，中文亦可

6. 步驟二按下『Training』開始訓練，訓練好就自動進入步驟三，直接辨識比較誰的機率高。

7. 按 匯出模型，再按 上傳我的模型，按『Copy』複製連結。

8. 開啟瀏覽器，需先輸入上面步驟複製的網址

https://teachablemachine.withgoogle.com/models/b3BSQJla9/於 Model Path

模型路徑文字方塊內，然後按下 開始辨識，等待 模型下載好才會看到視訊，下方則會出現機率結果。 註：複製網址最後若為[…]，是因為還沒有按 上傳到我的雲端模型。 9. 所訓練的模型是一直存在雲端，只要知道最後的代碼即可。 10. 請嘗試練習『剪刀、石頭、布』或姿態動作的識別練習。 11. 可使用 ESP32-CAM 畫面截圖，先安裝實作 02：ESP32-CAM_http.ino ，用『http://192.168.xxx.xxx/capture』網址截圖，或點 get-still 按鈕 截圖，再另存新檔，訓練的照片越多越準確，然後回到步驟 4『Upload 上傳』到這網站上訓練。

實作 13：ESP32-CAM_SD_Manager_PAGE.ino

1. 按下『Start Stream』可看到鏡頭內容，手動按『Save Image』將照片儲存到 SD，限FAT32格式，

不支援 NTFS 格式，當未插入 SD 會一直重新啟動偵測。

可 直 接 將 拍 照 內 容 透 過 Line 傳 送，但畫質超過 XGA 會顯示檔案太 大無發傳送的錯誤訊息。

實作 14：ESP32-CAM 讀取 SD 卡照片註冊人臉做辨識

1. ESP32 需為 1.0.4 以上版本，否則編譯會錯，ESP32-CAM_FaceRecognition_SD_EnrollFace_PAGE.ino

為網頁版，ESP32-CAM_FaceRecognition_SD_EnrollFace.ino 為離線版。 2. 高雄法蘭斯老師範例下載網址https://github.com/fustyles/Arduino，影片教學

https://www.youtube.com/watch?v=BDQxH3KYNpc&lc=UgxyUjfuzOSulU6RA4h4AaABAg.98NZPXJlVuV98NnIoHu4yx 3. 第 34 行『#define ENROLL_CONFIRM_TIMES 5』是指人臉辨識同一人人臉註冊影像數訓練，而第

43 行『#define FACE_ID_SAVE_NUMBER 7』是指人臉辨識註冊人的臉數，所以 5*7=35，按『Get Still 取得靜態照片』(先關閉臉部偵測)，再以手動方式另存 1~35.JPG 檔案到 SD 根目錄，為 CIF 解析度 的人臉照程式會自動切割，若改了後 String filename[5]、String recognize_face_matched_name[7] 這 兩行內容也要跟著改，然後在Arduino IDE序列埠監看視窗觀看確認每張影像都能辨識到人臉！

實作 15：ESP32-CAM_coco-ssd_PeopleTracking.ino 雙雲台追蹤物件

1. COCO（Common Object in Context）Dataset 資料庫是 Microsoft 所提供的是一個完整龐大的開源影

像資料庫模型；而SSD演算法全名是 Single Shot MultiBox Detector (單一鏡頭多框偵測)。

2. 利用兩顆不連續 SERVO 做影像追蹤，SERVO 建議使用 GPIO2與 GPIO13，其中 SERVO1(水平旋轉)

接 GPIO2，SERVO2 (垂直旋轉)接 GPIO13。

3. Tensorflow 的 ImageAI 提供 Video object detection 使用模型為 RetinaNet，可偵測80

種物件類別如下，還可順便學習英語單字：

person 人、bicycle 自行車、car 汽車、motorcycle 摩托車、airplane 飛機、bus 公共汽 車、train 火車、truck 卡車、boat 船、traffic light 交通號誌、fire hydrant 消火栓、stop_sign 停止標誌、parking meter 停車收費表、bench 長凳、bird 鳥、cat 貓、dog 狗、horse 馬、sheep 羊、cow 牛、elephant 大象、bear 熊、zebra 斑馬、giraffe 長頸鹿、backpack 背包、umbrella 雨傘、handbag 手提袋、tie 領帶、suitcase 手提箱、frisbee 飛盤、skis 滑雪板、snowboard 滑雪板、sports ball 運動球、kite 風箏、baseball bat 棒球棍、baseball glove 棒球手套、skateboard 滑板、surfboard 衝浪板、tennis racket 網球拍、bottle 瓶、 wine glass 酒杯、cup 杯、fork 叉、knife 刀、spoon 勺、bowl 碗、banana 香蕉、apple 蘋果、sandwich 三明治、orange 橘子、broccoli 西蘭花、carrot 胡蘿蔔、hot dog 熱狗、 pizza 比薩、donut 甜甜圈、cake 蛋糕、chair 椅子、couch 沙發、potted plant 盆栽、 bed 床、dining table 餐桌、toilet 廁所、tv 電視、laptop 筆電、mouse 滑鼠、remote 遙控器、keyboard 鍵盤、cell phone 手機、microwave 微波爐、oven 烤箱、toaster 烤 麵包機、sink 水槽、refrigerator 冰箱、book 書、clock 時鐘、vase 花瓶、scissors 剪 刀、teddy bear 泰迪熊、hair dryer 吹風機、toothbrush 牙

刷 。 關 於 Tensorflow 物 件 (object) 辨 識 偵 測 說 明

4. 使用手機基地台分享給電腦與 ESP32-CAM，會因為 4G 連線速度慢而造成畫面嚴重延遲(跟手機資 費與電信業者有關)，優點是從手機可以快速查到 IP 位置，若是都連到家用無線 AP，要如何知道 ESP32-CAM 的 IP 位置呢？請下載『WNetWatcher』軟體，即可偵測同區段網路所有裝置資訊。

5. 當網頁開啟時，底部顯示『Please wait for loading model 載入模型請稍後』消失後，最上方才會有

即時視訊出現，預設畫質是 320x240，畫面會左右顛倒。

6. 網頁的『Object 物件』若選擇 person 人員，則建議要離鏡頭遠一點，否則佔據整個畫面，馬達移

動不明顯，可改用 cell phone 手機或其他較小物件。若人和手機同時存在，會一併偵測，但僅追蹤

Object 所選擇的物件移動鏡頭，『ScoreLimit臨界值』目的是辨識物件可能性機率，當按下『Toggle

settings 切換設定』，會有更多畫面選項，如關閉『H-Mirror 水平鏡射』顯示內容就不會左右顛倒，

再按一次 Toggle settings 就會隱藏。

7. 按下『Restart重新啟動』，兩顆 SERVO 會自動回到 90 度位置，所以建議先執行程式，再固定兩個

8. 第 217-226 行是兩顆 SERVO 初始狀態，統 一定位在 90 度，第 220 行的 angle1Value1 變數是在第 1011 行設為 4850，相當於中間 90 度，因為 SERVO 控制是在 1700-8000 之 間。 9. 由於 ESP32 CAM 無類比輸出指令，若要使 用 PWM 類比輸出控制，請詳閱下面說明。 10. 第 218 行的『ledcAttachPin(2, 5);』，第一 個參數 2 代表 GPIO2 腳位，第二個參數 5 代表通道編號，6 是 Servo2、4 是內建高亮 度 LED，通道不可重複使用。 11. 第 219 行的『ledcSetup(5, 50, 16);』，第一 個參數 5 是通道編號，第二個參數 50 是頻 率，傳輸影像不宜更新過快，第三個參數 代表解析度分為 216_等份。 12. 第 220 行相當於『ledcWrite(11, 4850);』是將值寫入對應的通道。 13. 第 221 行是轉動後延遲 1 秒，若省略，會明顯抖動。(註：建議底座加重、加大與止滑，可避免晃動) 14. 下面程式碼是用來追蹤物件，以便控制 SERVO 轉向，若垂直馬達是裝在左側，則第 1105、1107 與 1115、1117 的加減需相反，經過計算之後，然後將修正後的角度透過網頁進行控制。 15. 上 述 實 作 是 自 動 追 蹤 指 定 的 物 件 ， 而 ESP32-CAM_MultiPersonPose_FaceTracking.ino 是利用 posenet 追蹤人的鼻子座標，『追蹤人臉』位置，硬體連接方式不動， 網頁執行畫面如右圖，臉部不會出現框框，但鏡頭會跟著臉部 的鼻子移動，底部會顯示身體各特徵的位置，0 代表是第一位 人員。 16. 若用手機當 AP 基地台，亦可直接利用手機進行測試，因為都 在同區段，建議使用 Chrome 瀏覽器。

實作 16：ESP32-CAM_CAR_2pwm_coco-ssd_TrackingCar.ino 追蹤物件車 1. 利用登月小車進行物件追蹤，水平 SERVO 省略，因為可利用輪子左右轉彎，外觀與接腳電路如下： 2. 透過 10cm 公對公杜邦線將下面的硬體腳位連接，5V 與 GND 可接原本超音波的電源，原本 PIR 需先取下，將登 月小車的 pin8 連接中間 GPIO15 的腳位，啟動時要小心， 因為在網路尚未連接前，右輪會短暫的轉動，小心夾手。

ESP32 CAM BBC Micro:bit Web:bit

GPIO12 2 6 GPIO13 13 13 GPIO15 8 8 GPIO14 14 14 GPIO2 垂直 SERVER GPIO4 高亮度閃光燈 GPIO2 GPIO13 GPIO12 GPIO14 GPIO15 鋰電池盡量往下，因為電線較短

3. 如果垂直 SERVO 在左側，上述第 1237、1239、1247、1249 行的加減 符號需相反。

4. 右圖為網頁執行畫面，可以直接控制登月小車前進的方向，『Turn

Declerate 偏轉』是設定轉彎的幅度，選取『No Stop』是按下『Front 前進』就一直前進不會停止，直到按下下個按鈕動作才改變，若不選 取，則按一下只會前進一下而已。 5. 可以設定追蹤物件(Object)的種類，當追蹤到該物件，登月小車會自動 轉彎前進，但不要移動速度太快，因為鏡頭辨識速度怕會跟不上。 6. 視訊視窗會顯示 coco-ssd 所有內建的 80 種物件名稱，但是僅會根據 -30~+30 是表示若在中央區域，則保持 往前，除非偏差很大，以避免左右晃動

實作 17：ESP32-CAM_CAR_2pwm_knn-classifier.ino 利用機器學習 KNN 分類控制車子

1. Machine Learning機器學習的 kNN 分類演算法全名為「k Nearest Neighbor」，翻成中文意思就是「k 個最近的鄰居」。

2. 當網頁開啟時，底部顯示『Please wait for loading model 載入模型請稍後』消失後，才有視訊出現。

3. 與實作 16 一樣都可直接控制登月小車，實作 16 是利用追蹤物件來控制車子，而本實作 17 需先Train 訓練幾個動作，未來便可辨識這些動作圖片來控制車子。 4. 選擇 1-9 各種方向，鏡頭盡量朝下拍到地面，當背景比較單純，辨識率就會提高率較高，然後按下 訓練便會開始照相記錄，可多拍不同角度的內容，每按一次 右邊數字會遞增，建議 先訓練前進與停止兩種類別(class)，最後勾選『 開始偵測』，便可開始使用不同手 勢(剪刀、石頭、布)或自製圖片控制車子方向，若成功之後再多加幾個指令動作。 5. 訓練完畢之後，可按 儲存模型，預設檔名為『model.json』，未來可以直接匯入就可開 始辨識，不用每次使用前都要先訓練，若要清除訓練的紀錄則按 清除。 6. 最下方會顯示各個訓練模型的可能機率，取出最大值，若超過 的臨界值，車 子就會根據判斷結果動作。 ← 結果：類別 3 ← 訓練 1 模型出現的機率 ← 訓練 3 模型出現的機率 註 1：所有訓練機率的總和必為 1，所以一定要將無 照片或無手勢也當作 STOP 訓練。 註 2：辨識背景越單純，辨識內容越大越佳。

實作 18：ESP32-CAM_SD_TimeLapse_PAGE 縮時攝影 1. Time-lapse photography 縮時攝影，是一種將畫面拍攝頻率設定在遠低於一般觀看 連續畫面所需頻率的攝影技術。一些常以縮時攝影拍攝的題材包括：雲與天空的 變化、植物生長及花卉開花、水果腐敗、建築物的建造過程、城市中的人們、交 通狀況等。以此技術拍攝變化緩慢、難以察覺的題材，會產生一種流暢的視覺感 受。若用以拍攝變化快速的題材，則會呈現出猛烈變化的效果，若有興趣可參閱 https://www.youtube.com/results?search_query=%E7%B8%AE%E6%99%82%E6%94%9D%E5%BD%B1。 2. 執行時須連上網路並插入 SD，先設定拍攝畫質解析度 、 間隔時間，再開啟 便開始自動 縮時攝影，並將照片存於 SD 卡內， SD 命名則是 1.jpg → 2.jpg……， 目的則是將檔案名稱又從 1.jpg 開始，檔案名稱會顯示在網頁最下方，每次拍照閃光燈都會亮一下。 3. 縮時影片製作軟體建議使用免安裝『Startrails.exe』，可參閱https://www.kocpc.com.tw/archives/180783 ，執行後先選擇 English 語言，但沒有中文，直接按 OK，利用『File 檔案 → Open images 開啟照

實作 19：結合 Web:Bit 應用 1. 利用 Web:bit 教育版軟體模擬器，先自訂影像辨識積木，可以練習影像辨識應用的邏輯思考，將積 木程式轉換成 Javascript 語法置入 ESP32-CAM 使用或是直接搭配使用。 2. 軟體下載安裝 https://ota.webduino.io/WebBitInstaller/WebBitSetup.exe。 3. 安裝後先不要開啟軟體，需先外掛自訂積木，將資料夾 "實作 19_Webbit 教育版\外掛自訂積木 \basic-package" ，將整個資料夾內容覆蓋到 "C:\Webduino\WebBit\package.nw\blockly\custom-blocks\ basic-package"。 4. 開啟桌面 Webbit 軟體捷徑，按『系統 → 以瀏覽器開啟』，以利於自訂積木撰寫與除錯，且 AI 影 像辨識積木才可正常執行，若按下右上方 可看到基礎套件包(已經加入)，表示上述步驟 3 已 經完成。 5. 新 增 自 訂 積 木 方 法 ： 瀏 覽 器 視 窗 空 白 處 按 右 鍵 →檢 查 → Console 主 控 台 ， 新 增 積 木 『Code.customTab.$__add__(‘積木連結’);』，移除積木『Code.customTab.$__remove__(‘積木連結’);』， 若出現『Refused to get unsafe header “Location”無須理會，應該是官方的錯誤訊息，與自訂積木無關。

請 逐 一 複 製 貼 上 底 下 內 容 ， 以 安 裝 或 移 除 法 蘭 斯 自 訂 積 木 ， 所 有 自 訂 積 木 清 單 請 參 閱 https://github.com/fustyles/webduino/blob/master/CustomBlock.txt

1. 遊戲元素(舊版需手動安裝)

Code.customTab.$__add__('https://fustyles.github.io/webduino/GameElements_20190131/blockly.json'); Code.customTab.$__remove__('https://fustyles.github.io/webduino/GameElements_20190131/blockly.json');

2. ESP32-CAM(舊版需手動安裝) Code.customTab.$__add__( 'https://fustyles.github.io/webduino/ESP32-CAM_20191201/blockly.json'); Code.customTab.$__remove__('https://fustyles.github.io/webduino/ESP32-CAM_20191201/blockly.json'); 註：網站設定"不安全內容"須更改為"允許"，因為 ESP32 CAM 是走 http，會被阻擋才需要改安全性)，在 https://webbit.webduino.io/blockly 鎖頭圖示按右鍵→網站設定→不安全的內容改為允許 3. (新版) AI 積木(全) Code.customTab.$__add__('https://fustyles.github.io/webduino/EDU_addCustomBlocks/blockly.json'); 然後視窗左側會增加 → →

6. 利用『檔案 → 開啟 → 智慧開關 MQTT 控制.json → 』，同時開啟法蘭斯 MQTT 網頁 https://fustyles.github.io/webduino/webduino_mqtt.html，其中 Topic 主題名稱可自訂，但程式碼須和 網頁內容的 topic 主題一致，下達指令後需按『send 送出』，執行結果如下：

註：網路廣播就是指 MQTT，是 Message Queueing Telemetry Transport 訊息佇列遙測傳輸的意思， 許多智慧家電就是用 MQTT 訂閱同一個 Topic，便可以經由 MQTT Broker 發佈或接收訊息發佈， MQTT 不 需 要 開 發 板 實 際 連 線 ， 使 用 官 方 主 機 1 對 多 控 制 超 簡 單 ， 細 節 可 參 考 網 路 文 章 https://swf.com.tw/?p=1002。