電子工作

ESP32 CAMとBlynkを接続して、カメラ画像を遠隔で携帯に転送してみた

安価で高性能なESP32 CAMと携帯アプリのBlynkを接続して、携帯でカメラ操作をしてみたので紹介します。

カメラ撮影をしてみたいと思ったんですけど、ESP32 CAMってどういうことができるんですか?

ESP32 CAMはWiFiやBlue tooth機能が入っているから、WebサーバーやBlynkと連携して、カメラ撮影をしたり、物体を検知したら、カメラ撮影をしたりできるんだよ。今回はどんなことができるか紹介するよ。

携帯から操作できたり、動物が通過したら撮影できたりして楽しそうですね。詳しく聞かせてください。あとESP32って設定方法が書いてないので、わからないことが多いので教えてください。

<記事の対象者>
 ・ESP-32CAMを使ってWebカメラサーバーを使用したい人
 ・ESP-32 CAMの設定方法がわからない人
 ・ESP-32CAMとBlynkを使用したい人

🚀 0円で現役エンジニアから学べる【Techスクールオンライン】のお申込みをお勧めします。 このオンラインスクールでは、現役のエンジニアから直接学ぶことができ、プログラミングの基礎から高度なスキルまでを習得できます。しかも、今なら 0円 で受講できるチャンスです。 エンジニア転職を考えている方やプログラミングに興味がある方、新しいスキルを習得したい方に特におすすめです。

ESP32 CAMでできること

ESP32CAMの設定方法については以前説明したこちらの記事も参考にしてください。

ESP32 CAMでできることは多数あります。また、部品数も少なくてできるため、かなりおすすめです。例えば下記の内容を行うことができます。

携帯のボタンで遠隔からカメラ撮影・カメラ画像の確認を行う

携帯アプリのBlynkを使用すると、簡単に携帯から、撮影を行うことができます。また、フラッシュ(LED)もボードに設置されているので、暗いところで撮影することもできます。今回はBlynkとESP32camの設定方法と撮影した様子を紹介します。

モーションセンサーを使用して、物体が通過すると、携帯に通知の連絡と画像を送信する。

モーションセンサーを設置して、人が通過するとカメラ撮影を行うことができます。テレビでもモーションセンサを使用して、鉄腕ダッシュとかで、イノシシとかが撮影されていますが、こんなことも自分で簡単に作ることができます。

カメラ画像から顔認識をして、鍵の開閉を行う

ESP32 CAMでは、Webサーバー上にカメラ画像を映すことができます。こんなサーバーが準備されており、画像サイズや動画をWeb上で確認することができます。これらに、顔認識の項目も用意されており、例えば、自分の顔を認識させることで、カメラに本人が映し出されたら、リレー回路を使用して鍵の開閉を行うことができます。

猫がご飯を食べたら、カメラで撮影して、Lineに通知する

ごはんの前に超音波センサーやモーションセンサを使用して、カメラ撮影した画像をLineやメールに送信することも簡単にできます。これらも、ボードにWiFiモジュールやBlue toothモジュールが組み込まれているから、できることとなっています。さらに1500円程度で非常に安価なので、電子工作で遊ぶにはつくりごたえがあって非常に面白いと思います。

ESP32 CAMとBlynkを設定してみる

準備するもの

今回使用するものはこちらになります。部品点数は少ないですが、かなりいろいろ応用できると思います。

・ESP32 CAM
・USB TTLシリアルコンバータ
・ブレッドボード(小)
・ジャンパ線

ESP32 CAMの回路を製作してみる

では回路の製作をしていきます。簡単ですが、手順が少し面倒ですので、細かく説明していきます。

まず、事前準備ですが、ESP32 CAMを購入すると、レンズのモジュールとボードのモジュールが分かれて配送されます。これらをボードのコネクタが90°開きますので、開いた状態で、レンズのシートを挿入して白線が見えなくなるようにコネクタをカチッと閉じて固定します。

ESP32 CAM 接続

ESP32 CAMをブレッドボードと接続し、USB-TTLシリアルコンバータの配線を画像の通りに配線します。

ESP 32CAM

上記のとおり接続したら、回路は完成です。次にプログラムの作成に移ります。

BlynkとESP32 CAMのプログラムを作成してみる

ではプログラムの作成に移ります。概要はこちらになります。

<プログラムの概要>
 ・携帯で撮影ボタンを押すと、画像が携帯に送信される
 ・Blynkに撮影したと通知の連絡(Notifyの使用)
 ・撮影時にフラッシュとしてLEDを点灯する

プログラム作成時の注意点

プログラムコードの注意点はこちらです。

・ボードをAI Thinkerにする
・初期設定のCAMERA_MODEL_WROVER_KITをコメント化“//”の追加
・CAMERA_MODEL AI THINKERを有効化“//”の削除
・WiFiの ssid, password, BLynkのTokenをプログラム記入

基本的なコードはWeb Camera Serveのスケッチ例をもとに、Blynkを追加しただけになります。

またCapture()関数を定義しており、Blynkのボタンで12番信号をONしたときに、フラッシュとカメラ撮影を行うように設定しています。

プログラムコード全文はこちらになります

#include "esp_camera.h"
#include <WiFi.h>
#include <WiFiClient.h>
#include <BlynkSimpleEsp32.h>
//
// WARNING!!! Make sure that you have either selected ESP32 Wrover Module,
//            or another board which has PSRAM enabled
//

// Select camera model
//#define CAMERA_MODEL_WROVER_KIT
//#define CAMERA_MODEL_ESP_EYE
//#define CAMERA_MODEL_M5STACK_PSRAM
//#define CAMERA_MODEL_M5STACK_WIDE
#define CAMERA_MODEL_AI_THINKER

#include "camera_pins.h"


#define LED 4
#define BUTTON 12

const char* ssid = "YOUR SSID";
const char* password = "YOUR PASSWORD";
char auth[] = "YOUR TOKEN";


String my_Local_IP;

void startCameraServer();


void capture()
{
  pinMode(LED, OUTPUT);
  digitalWrite(LED,HIGH);
  uint32_t number = random(40000000);
  Blynk.notify("Someone is at the door..");
  Serial.println("http://"+my_Local_IP+"/capture?_cb="+ (String)number);
  Blynk.setProperty(V1, "urls", "http://"+my_Local_IP+"/capture?_cb="+(String)number);
  delay(1000);
  digitalWrite(LED,LOW);
  
}
void setup() {
  Serial.begin(115200);
  pinMode(LED,OUTPUT);
  Serial.setDebugOutput(true);
  Serial.println();

  camera_config_t config;
  config.ledc_channel = LEDC_CHANNEL_0;
  config.ledc_timer = LEDC_TIMER_0;
  config.pin_d0 = Y2_GPIO_NUM;
  config.pin_d1 = Y3_GPIO_NUM;
  config.pin_d2 = Y4_GPIO_NUM;
  config.pin_d3 = Y5_GPIO_NUM;
  config.pin_d4 = Y6_GPIO_NUM;
  config.pin_d5 = Y7_GPIO_NUM;
  config.pin_d6 = Y8_GPIO_NUM;
  config.pin_d7 = Y9_GPIO_NUM;
  config.pin_xclk = XCLK_GPIO_NUM;
  config.pin_pclk = PCLK_GPIO_NUM;
  config.pin_vsync = VSYNC_GPIO_NUM;
  config.pin_href = HREF_GPIO_NUM;
  config.pin_sscb_sda = SIOD_GPIO_NUM;
  config.pin_sscb_scl = SIOC_GPIO_NUM;
  config.pin_pwdn = PWDN_GPIO_NUM;
  config.pin_reset = RESET_GPIO_NUM;
  config.xclk_freq_hz = 20000000;
  config.pixel_format = PIXFORMAT_JPEG;
  //init with high specs to pre-allocate larger buffers
  if (psramFound()) {
    config.frame_size = FRAMESIZE_UXGA;
    config.jpeg_quality = 10;
    config.fb_count = 2;
  } else {
    config.frame_size = FRAMESIZE_SVGA;
    config.jpeg_quality = 12;
    config.fb_count = 1;
  }

#if defined(CAMERA_MODEL_ESP_EYE)
  pinMode(13, INPUT_PULLUP);
  pinMode(14, INPUT_PULLUP);
#endif

  // camera init
  esp_err_t err = esp_camera_init(&config);
  if (err != ESP_OK) {
    Serial.printf("Camera init failed with error 0x%x", err);
    return;
  }

  sensor_t * s = esp_camera_sensor_get();
  //initial sensors are flipped vertically and colors are a bit saturated
  if (s->id.PID == OV3660_PID) {
    s->set_vflip(s, 1);//flip it back
    s->set_brightness(s, 1);//up the blightness just a bit
    s->set_saturation(s, -2);//lower the saturation
  }
  //drop down frame size for higher initial frame rate
  s->set_framesize(s, FRAMESIZE_QVGA);

#if defined(CAMERA_MODEL_M5STACK_WIDE)
  s->set_vflip(s, 1);
  s->set_hmirror(s, 1);
#endif

  WiFi.begin(ssid, password);

  while (WiFi.status() != WL_CONNECTED) {
    delay(500);
    Serial.print(".");
  }
  Serial.println("");
  Serial.println("WiFi connected");

  startCameraServer();

  Serial.print("Camera Ready! Use 'http://");
  Serial.print(WiFi.localIP());
  my_Local_IP = WiFi.localIP().toString();
  Serial.println("' to connect");
  Blynk.begin(auth, ssid, password);
}

void loop() {
  // put your main code here, to run repeatedly:
  Blynk.run();
  if(digitalRead(BUTTON) == LOW)
  capture();
}

Blynkの設定

では携帯側からBlynkの設定を行っていきます。

Blynkの設定を行うため、New Projectを選択し、名前・ボード・WiFiを選択します。

画面ボタンの配置

次にBlynk上で下記のアイテムを配置します。
 ・Image Gallery
 ・Notification
 ・Button × 2

スワイプすると下記画面が出てくるので、これらを配置していきます。

配置するとこんな感じになります。

ボタンの設定

次にボタンとプログラム・回路のピンの設定を行っていきます。

Image Galleryをクリックすると、Image Settings が開かれるので、ここで、プログラムで設定しているV1を選択します。

次にボタンスイッチの設定を下記の通り行います。
 ・ボタン1(撮影) :ピン番号12
 ・ボタン2(LED)  :ピン番号4

<ボタン1の設定>

<ボタン2の設定>

以上でBlynkの設定の完了です。

この状態でプログラムを回路にコンパイルを行ってみます。

コンパイル時の注意点

プログラムをコンパイルするときには、必ず、先ほどの通り下図のように配線します。

この状態でコンパイルすると、問題なければ、通常通りコンパイルされます。一方書き込みに時間がかかり、Failed to connect to ESP32/Timed out/Fatal Error/packet header errorとかがでてくることがあります。こんな時は下記を確認してください。

↓↓↓↓↓↓↓↓↓こんな感じで

・・・・・_____・・・・・とでるときは、このタイミングでボードの裏にあるリセットボタンを押してみましょう。(ブレッドボードに接続しているためカッターで押しました)リセットボタンを押すと、Uploadモードになるため、Timed outがなくなり、無事書き込むことができました

書き込むことができたら、シリアルモニタを起動しましょう。

シリアルモニタを起動すると、なにも記載されていない上ただと思います。この状態で必ず、先ほど接続した、⑤のESP32のIO0とGNDの接続を切ります。これがつながったままだとエラーが出ます。断線したら、リセットボタンをカッターまたはペンなどで押します

すると、下記画面が出てきて、’WiFi connected”と記載され、”http:○○”とURLが記載されます。このホームページを打つと、こちらのような画面が映り、画像撮影や動画を撮ることができます。

以上で設定は完了になります。次にBlynkで操作していきます。

BlynkでESP32 CAMを操作する方法

では接続が完了しましたので、再生ボタンを押して、撮影ボタンを押してみます。

するとこんな感じで、フラッシュがたかれて、携帯に画像を映すことができました。この状態では、ESP32-CAMには5V電源とGNDのみを接続すれば撮影することができるので、乾電池駆動のカメラを簡単に作ることができます。

こんな感じで携帯画面にNotificationで通知を行うこともできます。動画でも紹介していますので、見てください。

🚀 0円で現役エンジニアから学べる【Techスクールオンライン】のお申込みをお勧めします。 このオンラインスクールでは、現役のエンジニアから直接学ぶことができ、プログラミングの基礎から高度なスキルまでを習得できます。しかも、今なら 0円 で受講できるチャンス。
私がツナグバに登録してから、求人情報が豊富に届き、自分に合った仕事を見つけることができました。特に、第二新卒向けの求人情報が多いので、自分のスキルや経験を活かしながら新たなキャリアに挑戦することができました。転職活動は不安も多いですが、ツナグバのサポートがあれば、成功への道が明るく感じました。