---
title: Arduino IDE for ESP32-CAM 安裝與設定
tags: AIoT 實作研習
---
# Arduino IDE for ESP32-CAM 安裝與設定
By 蓉爸 RungBa
Created: 2023-06-05
Revised: 2023-09-04

---
:::danger
- **ESP32 操作注意事項：**

- **有使用擴充版的人，一定要確認插對方向，否則接上 USB 電源時，可是會燒毀 ESP 板子的！！！**

- **由於 ESP32 需要較大電流，所以建議要接電腦的 USB 3.0 的插孔！！**

- **ESP32-CAM 所連的 Wifi 網段，必須與要瀏覽的電腦"同一個區網"，電腦才能瀏覽 ESP32-CAM 的影像串流。而且同時間 ESP32-CAM 只能給一個訪問者瀏覽。**

- **ESP32 Wifi 只支援 2.4G，且 SSID 只支援用英文命名的 Wifi！！**
:::

**Ref:**
- **[04 ESP32 CAM EasyCam擴充版講義 (by 夜市小霸王)](https://twgo.io/ezcam)**

- **[Video Streaming Server on ESP32-CAM](https://www.electronics-lab.com/project/video-streaming-server-esp32-cam/)**

---
## 一、Arduino IDE 免安裝版
### 1. Arduino IDE for MS-Win 免安裝版下載
- Arduino IDE for MS-Win 免安裝版下載
:::success
- **[Github 下載(版本更新比官網快)](https://github.com/arduino/arduino-ide/releases)**
:::
- **[官網下載](https://www.arduino.cc/en/software)**

----
### 2. Arduino IDE 免安裝版設定
- **2-1. 第一次啟動時，需要設定「允許存取」，讓 Arduino IDE 可以通過電腦的防火牆。**

- **2-2. 啟動後，先將 IDE 主題調為比較不傷眼的「暗黑背景」**
**由 Preference 進入，如下圖：**

---
**將 Theme 改為 「High Contrast」**

- **2-3. 接著設定 Additional boards manager URLs(額外的開發版管理員網址)**
:::danger
**先到 [arduino-esp32 github Releases 網頁](https://github.com/espressif/arduino-esp32/releases)，然後一下圖所示操作，取得 ESP32 套件索引檔 package_esp32_index.json 的網址。**


**目前 2.0.9 版的網址是：[(滑鼠移到這，再按滑鼠右鍵，然後選「複製鍊結網址」)](https://github.com/espressif/arduino-esp32/releases/download/2.0.9/package_esp32_index.json)**

**或是複製下方這個鍊結**

  https://github.com/espressif/arduino-esp32/releases/download/2.0.9/package_esp32_index.json

:::

---
捲到最下方的「**Additional boards manager URLs(額外的開發版管理員網址)**」，並填入 **package_esp32_index.json 的網址** ，然後按下 OK：

---
**按「允許存取」，以便通過防火牆**

---
**之後會看到下圖，輸入 esp32 如下圖，然後按下 INSTALL。**

- **2-3. 設定 Board**
**點選「Tools/Board/esp32」，如下圖：**
</br>

**滑鼠往上，選第二個的「ESP32 Wrover Module」**

- **2-4. 設定 Partition Scheme**
**選「Huge APP (3MB no OTA/1MB SPIFFS)」，如下圖：**

---
**最後完整的設定大致如下圖：**

----
### 3. 開始使用 ESP32-CAM
- **3-1. 連接 ESP32-CAM 版子，取得範例程式，步驟如下圖所示(點選「File / Examples / ESP32 / Camera / CameraWebServer」)：**

- **3-2. 接著會開啟一個新的 IDE，並會安裝一些必要軟體。**
**安裝 LLC 連結驅動**

**安裝 Arduino USB 驅動(from Arduino srl)**

**安裝 Arduino USB 驅動(from Arduino SA)**

**安裝 Genuino USB 驅動(from Arduino LLC)**

- **3-3. 調整 COM 埠。**

**用裝置管理員查看：**

**然後在 IDE 上調整設定：**

- **3-4. 開啟 Serial Monitor(序列埠監控視窗)**

**Serial Monitor(序列埠監控視窗)如下圖所示：**

**調整 baud rate 到 115200**

----
### 4. 修改範例程式
- **4-1. camera model 註解掉「CAMERA_MODEL_WROVER_KIT」，改用「CAMERA_MODEL_AI_THINKER」，如下圖：**

- **4-2. 修改 wifi 連線的 ssid 與 password**
:::info
**提醒 1：這個 wifi 必須與連 ESP32-CAM 的電腦，在同一個區網上！！！**
**提醒 2：這個 wifi SSID 只能用英文，且只支援 2.4G，不支援 5G！！！**
:::


- **4-3. 驗證程式，點選左上角打勾圖案，點下去後，就會進行程式碼檢查。**

**程式碼驗證中**

**通過驗證：**

- **4-4. 按左上的箭頭符號,開始進行燒錄。**

**燒錄過程中,會在下方視窗看到「Connecting......_____......._____......」訊息**

:::danger
**具備擴充版的產品，如下圖，會自動完成燒錄動作！**

:::

:::success
**若是不具備擴充版的產品，此時我們要拿起 ESP32-CAM，上面會有兩個按鈕:右邊為「FLASH」(暫稱為 A)，左邊為「RST」(暫稱為 B)。我們要照以下順序操作:**
**「先按住 A 不放」->「再按住 B 不放」->「放掉 B」->「放掉 A」。(此步驟要快,否則會出現錯誤訊息,就只能重來。)**
:::

- **4-5. 燒錄成功後，按 Reset 鈕，就可切換到 Serial Monitor 視窗，並將 ESP32-CAM 的 url 記錄下來，如下圖：**

- **打開瀏覽器瀏覽 ESP32-CAM 的 url，應該要能看到下圖：**


**esp32 2.0.9 版的範例程式，開啟 Face Detection，不僅會框人臉，還多了臉部五個特徵點**

---
## 二、下載與使用 ngrok
### 1. 使用 ngrok 應注意事項
:::danger
- 若是用沒註冊方式使用 ngrok，同一個區網同時只能有一個 ngrok 執行，若是同一個區網同時多個，很可能在遠端都無法使用讀取 ESP32-CAM 的影像！
- 若想要同一個區網同時多個人使用 ngrok，最好的方式就是每個人都去 ngrok 官網註冊個 free 的帳號，然後設定 Authtoken
:::

----
### 2. 下載 ngrok
- **2-1. 下載網址：https://ngrok.com/download**

- **2-2. 解壓縮**

- **2-3. 進入「ngrok-v3-stable-windows-amd64」資料夾後，就可看到 ngrok.exe 這個檔。**

- **2-4. 將 ngrok.exe 拷貝一份到 C:\User 中自己 id 的資料夾。**

----
### 3. 啟動 ngrok
- **3-1. 開啟 cmd (Win + R)**

- **3-2. 在「命令提示字元」的應用程式輸入**

  ngrok http http://192.168.14.105 



----
### 4. 使用 ngrok 的 Authtoken
- **4-1. 到 ngrok 官網註冊一個免費帳號**
可參考這一篇：[架設臨時伺服器不求人，用 ngrok 一個指令搞定！（含 Windows + MacOS 環境變數教學） (2023-02-10)](https://israynotarray.com/other/20230210/1090666501/)

- **4-2. 在自己的電腦上，設定 ngrok 的 Authtoken**

  ngrok authtoken ?????????????????????


- **4-3. 執行 ngrok**
這時可以看到 Forwarding 的網址，就會變成類似如下:
:::danger
https://f461-220-135-215-124.ngork-free.app -> http://192.168.1.112:80
:::