TSCINBUNY ESP32 WROVER with camera board を Webカメラとして動かす

## きっかけ
　Aliexpressで、カメラが付いたArduino Uno互換機の様なものを買ってみた。
カメラ付きでこの価格（送料込み2千円程度）は安いと思った。
色々試行錯誤はしたが、Webカメラとして動かすことができたので、備忘録を兼ねて、動作させる方法を記録しておく。
なお、私は Mac mini (M2) で使用している。
### 購入したもの
購入したのは、
TSCINBUNY ESP32 PLUS WIFI Development Board with OV2640 Camera for Arduino IDE/MicroPython/ESR-IDE Programming ESP32-WROVER Kit
[Aliexpress のサイトへリンク](https://ja.aliexpress.com/item/1005006307805822.html?spm=a2g0o.order_list.order_list_main.4.71e21802bFrupM&gatewayAdapt=glo2jpn)

![IMG_9990.jpeg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/16491/01a2ba66-948b-b299-a2dd-8f3fbbb1aed4.jpeg)
カメラ部のアップ
![IMG_9991.jpeg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/16491/59b0ce22-016c-3469-9c3a-b13d25a7db0b.jpeg)

製品のサイトには、次の注意事項が書いているので、購入時は参考に。
> 注意：TSCINBUNY ESP32 PLUSをカメラで使用する場合は、ピンを確認してください。
 SCL, SDA, 18, 19, 23, 5, 25, 26, 27, 4, 34, 35, 36, 39 ピンはカメラ機能で使用されます、これら以外の機能を使用する場合は、これらのピンの使用を避けてください。***

## 開発環境の構築
### Arduino IDE のダウンロード・インストール
　すでにインストール済みの場合は次項へ。
　Aruduino IDE を
 https://www.arduino.cc/en/software
 からダウンロードして、インストールする。
 ### ESP32 のボード情報をインストール
 　ESP32系をインストール済みの場合は次項へ。
  Arduino IDEを起動して、メニュの "Arduino IDE" をクリックし、"基本設定"を選択する。
次に、"追加のボードマネージャのURL: "の記入欄の右にあるボタンをクリックする。
"追加のURLを1行ずつ入力" の欄の最後の行に次のURLを入力（コピペ）する。
`https://raw.githubusercontent.com/espressif/arduino-esp32/gh-pages/package_esp32_index.json`
"OK(O)"をクリックし、"基本設定 "ウィンドウに戻り、再度 "OK(O)"をクリックします。
### ESP32系のボード情報等のインストール
　すでにインストール済みの場合は次項へ。
  メニューの "ツール"をクリックし、"ボード：...."を選択して右に表示されるサブメニューの一番上の"ボードマネージャ"をクリックする。
ボードマネージャの検索窓に "ESP32 "と入力し、Enterキーを押す。
"Arduino ESP32" の"インストール"をクリックしてインストールする。

## プログラム(スケッチ）の作成
### ボードとポートを指定する。
　このボードをUSBポートに接続する。
 　メニューの"ツール"をクリックし、"ボード:"→"ESP32"、を選択し"ESP32 Wrover Module"を選択する。
  メニューの"ツール"をクリックし、"ポート:"を選択しシリアルポートの"/dev/cu.usbserial-230"（機種によって違うので接続されているポート）を選択する。
### Webカメラアプリ用に設定を調整
　使用するスケッチ例はメモリーサイズが大きいことと、アップロードスピードが合わないので、次のように変更する。
　メニューの"ツール"をクリックし、"Pertition Scheme"を選択し、サブメニューから"Partition Scheme: "Huge APP (3MB No OTA/1MB SPIFFS)"をクリックする。
 メニューの"ツール"をクリックし、"Upload Speed:"を選択し、サブメニューから"115200"を選択する。
 変更後はこうなっている。
 ![ToolSetting.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/16491/0ebff7a3-7934-6427-e599-6595f87aaaca.png)
## スケッチを作成する
### スケッチ例を開く
　メニューの"スケッチ例"、「ESP32"、"Camera"、"CameraWebServer"を選択して、該当のスケッチ例を開く。
 ![MenuSelection.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/16491/25d2161a-a123-7059-b31a-47d881102594.png)
 開いた"CameraWebServer"のスケッチを適当な名前をつけて保存する。
### ソースコードの修正（1）ボード情報の修正
　このスケッチ例は、色々なボードで使用できるようになっていて、ディフォルトではこのボードに合わないので、このボード用に修正する。
　スケッチ例のソースコードの次の箇所を修正する。
 16行目17行目を次のように16行をコメントアウトを外し、17行目をコメントアウトする。
```
16  //#define CAMERA_MODEL_WROVER_KIT // Has PSRAM
17  #define CAMERA_MODEL_ESP_EYE // Has PSRAM
```
修正後は
```
16  #define CAMERA_MODEL_WROVER_KIT // Has PSRAM
17  //#define CAMERA_MODEL_ESP_EYE // Has PSRAM
```
![BoadSelected.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/16491/35084564-542e-160f-8aff-6fc226cd6cc3.png)
こうなる。
### ソースコードの修正（2）Wi-Fiの設定
　38行目と39行目の ******* に使用するWi-FiのSSIDとパスワードを設定。
 （5GHz帯は使用できないので注意）
```
38  const char* ssid = "**********";
39  const char* password = "**********";
```
## コンパイル・実行
　修正したソースを保存してコンパイル、実行させるとシリアルモニターに動作しているIPアドレスが表示される。
　ブラウザを立ち上げて、このIPアドレスを見ると画面左側にコントロールパネルが表示されている。
　下にスクロールして「Start Stream」という赤いボタンを押すと、右側の上部に画像が表示されているはず。
左上から2番目の Resolution を好きなサイズにして利用する。
### 表示例
![WebScreen.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/16491/392cabbc-264c-762a-97dd-aada4e56b007.png)
　画像はプリンターのフロントパネルが表示されている様子。

 ## まとめ
 　とりあえず、動作するし、画像もまぁまぁだ。
  届いた時点では本体のみで、サンプルスケッチ、説明書も無かった。
  販売サイトの説明（画像）をみて、ネット情報を頼りにここまできた。
  購入したものの、使用方法がわからず、困っている人の一助になればと思う。
### ご指摘、ご意見は大歓迎です。
　ツッコミなどありがたく勉強させていただきますので、よろしくお願いします。