M5Cameraでスマホから操作できるWebカメラを作る（MacOS編）

# はじめに

M5Camera FishEye Version（魚眼レンズ）を入手したのでスマホで映像を確認できるようにしてみました。
（試される場合はご自身の責任でお願いします。）

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/82535/fc2c0b9c-56ed-022e-404a-15c153be93ab.png)

以下のネットショップで2千円程度で販売されています。
千石通商 https://www.sengoku.co.jp/mod/sgk_cart/detail.php?code=EEHD-5HB5
楽天 https://item.rakuten.co.jp/tsukumorobo/0405996364011/

買ってUSBケーブルを電源が取れるものにつなぐだけですぐカメラ映像をWiFi経由で見れるなかなかすごいやつです。
見るときはPCやスマホのWiFiをこのカメラ自体のアクセスポイントにつなぎます。
魚眼レンズではないものもありますが魚眼のほうが広範囲を見れて部屋の様子を外から確認するなどにはおすすめです。

必要なものはPCとM5CameraとWiFi環境だけです。スマホがあればスマホでもカメラ映像を見れます。

今回はMacOS Catlinaで作業しました。

(Windows10版の記事も用意しています。https://qiita.com/nakazawaken1/items/e067f40488c8e860a99a)

# Arudino IDEをインストール

- Arudinoのサイト https://arduino.cc に行き、SOFTWARE / DOWNLOADS のページを開く

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/82535/7542bab8-fdd9-6550-f430-c61e6d2f374c.png)

- 1.8 は Catalina で正常動作しないため(2019/10/27時点)、BETA BUILDS の Mac OX(誤字?)をクリックしてダウンロード

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/82535/378020eb-7811-e055-226f-443fc4654514.png)

- ダウンロードしたファイルを実行

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/82535/5a9bcc43-a1d6-39d9-3595-877355318264.png)

セキュリティで実行できない場合は、システム環境設定のセキュリティとプライバシーを開いてそのまま実行ボタンを押します。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/82535/13a102a6-6ed8-e29a-6bf6-02dcc2f21f77.png)
起動するとこの画面になります。

# ArudinoでM5Cameraの開発ができるように設定

- Arduino / Preferances... を開く

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/82535/d5546829-dcf3-8a69-69b1-522847b1be72.png)

- 追加のボードマネージャのURLに以下を設定
https://raw.githubusercontent.com/espressif/arduino-esp32/gh-pages/package_esp32_index.json

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/82535/6bd39273-c814-4e7b-404f-16a482ed016b.png)

(M5CameraのチップであるESP32のライブラリページ https://github.com/espressif/arduino-esp32)

- ツール / ボード / ボードマネージャ...を選択
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/82535/5f965ca6-8d1b-6254-f7f9-56b0db9a2521.png)

- 検索欄にESP32と入力し、esp32 by Espressif Systemsの最新バージョン(執筆時点では1.0.4)をインストール

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/82535/6e6ada67-4c43-096c-bc77-b16ff6323a06.png)
↓
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/82535/9e99c0b4-7d17-9797-f6d9-33c071dac014.png)

- ボードマネージャを閉じて、ツール / ボード / ESP32 Wrover Module を選択
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/82535/db3b1c6d-caac-cf32-958c-7b799c650f8b.png)

- M5CameraをUSBケーブルで接続し、ツール / シリアルポートの中の /dev/cu.SLAB_USBtoUARTを選択
 
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/82535/9e95f8a5-9347-dc4f-bec2-10e690b483a2.png)

※他のUSBを含むポートでも書き込める場合があります。うまく行かない場合は、下記ドライバ（Download for Macintosh OSX）をインストールしてみてください。
https://www.silabs.com/products/development-tools/software/usb-to-uart-bridge-vcp-drivers

- 大きなプログラムでも書き込めるように Partition SchemeをHuge APP(3MB No OTA/1MB SPIFFS)に設定
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/82535/1499abf4-c630-04d3-a8b5-dbce7bd9bad2.png)


- その他の項目は変更しなくてもいいはずだが以下のようになっていることを確認する
ボード：　ESP32 Wrover Module
Upload Speed：　921600
Flash Frequency：　80MHz
Flash Mode：　QIO
Partition Scheme：　Huge APP (3MB No OTA)
Core Debug Level：　なし
シリアルポート： /dev/cu.SLAB_USBtoUART
書込装置：　USBasp

# M5Cameraに書き込むプログラムを準備

サンプル実装が用意されているのでそれを利用します。

- ファイル / スケッチ例 / ESP32 / Camera / CameraWebServer を開く
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/82535/ecb19bb6-c837-5fa3-3820-48adf96138d6.png)

カメラの種類を切り替えるために、

```
#define CAMERA_MODEL_WROVER_KIT
```
を

```
//#define CAMERA_MODEL_WROVER_KIT
```
に、

```
//#define CAMERA_MODEL_M5STACK_PSRAM
```
を

```
#define CAMERA_MODEL_M5STACK_PSRAM
```
にする。

WiFiに接続するために、

```
const char* ssid = "********";
const char* password = "********";
```
を

```
const char* ssid = "接続先WiFiのSSID";
const char* password = "接続先WiFiのパスワード";
```
に書き換える

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/82535/66b29d50-2fe4-fc0f-f597-3ab7675c6eb0.png)
↓
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/82535/09941f22-60f8-093c-b6ff-9a2ca514a25f.png)

- ピンの設定を変更

camera_pins.h タブに切り替え、

```
#elif defined(CAMERA_MODEL_M5STACK_PSRAM)
```
の下にある

```
#define SIOD_GPIO_NUM     25
```
を

```
#define SIOD_GPIO_NUM     22
```
に、

```
#define VSYNC_GPIO_NUM    22
```
を

```
#define VSYNC_GPIO_NUM    25
```
に変更する。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/82535/605c0f79-5de3-e4b7-5d90-89e74bff17dc.png)
↓
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/82535/3ed9e3f5-bc2c-1ec1-d09a-151938fe1c92.png)

# プログラムの書き込み

- 左から2つ目の右矢印のボタンでプログラムをM5Cameraに書き込む
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/82535/61b45aa2-62ce-4fed-38ae-9fab51fcf67a.png)
エラーになる場合は上記で設定したボード関連の設定を再確認してください。
また、ケーブルの接触でうまくいかないことも結構ありますので、いくつかのケーブルで試してください。

- 右の虫眼鏡のボタンでシリアルモニタを開く

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/82535/de2c982e-a29a-db00-0e39-663ce364b054.png)

- 右下の速度を115200bpsに設定

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/82535/b44d41e0-6a93-7ffb-11bb-a987a73b84e6.png)

- M5Cameraのリセットスイッチを押すと再起動してWebカメラサーバの起動ログが確認できる
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/82535/6e9fe7d9-e675-736d-eb4a-0bc2c6f78de2.png)

# 動作確認

- スマホやPCでシリアルモニタの最後に表示されているURLにアクセスする（ここでは http://19.168.0.105）
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/82535/ae0de4b4-7e38-c165-8dc1-75bb3bf283b9.png)

- Get Stillで押すと写真を撮影、Start Streamで動画中継開始

動画中継は1台までしか見れないようです。

いろいろ設定ができますが、よく使いそうなのが
- Resolution で解像度切り替え
- V-Flip で上下反転
- H-Mirror で左右反転
あたりでしょうか。
顔認識もあるみたいですがうまく認識されませんでした。

HTMLを見てみると動画中継部分は
http://192.168.0.25:81/stream
で表示しており、内容は multipart/x-mixed-replace 形式で送られてくるようです。
IEやEdgeではダウンロードになっていしまい見れません。
PCのchrome, firefoxとiPhoneのChrome, Safariでは問題なく表示できました。

# さいごに

設定はREST風に変更できるので、自分でHTMLやクライアントアプリを用意すれば自由に制御できそうです。
カメラは小さいのでバッテリーをつければラジコンなどに搭載しても使えそうです。
Groveコネクタが一つあるのでサーボ2台を制御して首振りのカメラも作れそうです。

ルータでインターネット側につなげば外出先からも確認できます。
その時はセキュリティには注意が必要でしょう。

ちなみにM5CameraのMacアドレスはesp_efuse_mac_get_default関数で取得できます。

```
//Macアドレスをシリアルコンソールに表示する
uint8_t mac[6];
esp_efuse_mac_get_default(mac);
Serial.printf("Mac Address = %02X:%02X:%02X:%02X:%02X:%02X\r\n", mac[0], mac[1], mac[2], mac[3], mac[4], mac[5]);
```

参考サイト
https://ambidata.io/samples/m5stack/m5camera/