機材費3000円で始めるIoTカメラ入門(ESP-EYE編)

はじめに

記事をご覧くださりありがとうございます。

ソフトウェア開発の修行をしている
フリーランス学生エンジニアのたつのぶです🐉

^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
前回の記事、機材費2000円で始めるIoTカメラ入門(M5Camera編) ではM5Cameraを用いてIoTカメラ入門をしました。しかし、あれから、M5Cameraは販売終了してしまいました。
そこで似たようなカメラ(ESP-EYE)を用いてだいたい2秒おきに画像を送信するIoTカメラを作ってみた内容になっています。
^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
「機材費3000円で始めるIoTカメラ入門(ESP-EYE編)」
それでは本題に入っていきます✌✌

システム構成図

※あらかじめWEBサーバー(apache/nginx)でHTMLとPHPが動く環境が必要です。

利用例

• 防犯カメラ
• 子供の見守りカメラ
• ペットのリモート監視
• etc...

WI-FI接続が可能な環境である必要があります！

できたもの

3Dプリンタで造形したケースに入れました！！

実際にブラウザから見たイメージです。

だいたい二秒おきにサーバデータを更新する仕様になっています✋

①機材を調達しよう

機材名	価格
ESP-EYE	￥2,980

②ESPEYE(ESP32)のファームウェアを書き込む

自分の環境に合わせて下記4つを変更ください。
const char* ssid = "ssid";←接続するWIFIのSSIDを記述
const char* password = "pass";←接続するWIFIのパスワードを記述
String serverName = "domain.com"; ←送信先サーバのドメインを記述
String serverPath = "/img_rec.php"; ←送信先サーバのドメイン後のスクリプト名を記述

コンパイルが通らないことがあると思うので、その場合は適宜ライブラリをインストールしてください。
ポイントではありますが、client.setInsecure(); 「証明書の検証を行わない」処理を入れないと動きませんでした。

ソースコード

camFirm.ino

#include <Arduino.h>
#include <WiFi.h>
#include "soc/soc.h"
#include "soc/rtc_cntl_reg.h"
#include "esp_camera.h"
#include <WiFiClientSecure.h>
const char* ssid = "ssid";
const char* password = "pass";
String serverName = "domain.com"; 
String serverPath = "/img_rec.php"; 
const int serverPort = 443;
WiFiClientSecure client;
// ESPEYE
#define PWDN_GPIO_NUM    -1
#define RESET_GPIO_NUM   -1
#define XCLK_GPIO_NUM    4
#define SIOD_GPIO_NUM    18
#define SIOC_GPIO_NUM    23
#define Y9_GPIO_NUM      36
#define Y8_GPIO_NUM      37
#define Y7_GPIO_NUM      38
#define Y6_GPIO_NUM      39
#define Y5_GPIO_NUM      35
#define Y4_GPIO_NUM      14
#define Y3_GPIO_NUM      13
#define Y2_GPIO_NUM      34
#define VSYNC_GPIO_NUM   5
#define HREF_GPIO_NUM    27
#define PCLK_GPIO_NUM    25

const int timerInterval = 2000;    // 2秒おきに送信
unsigned long previousMillis = 0;   // last time image was sent

void setup() {
  WRITE_PERI_REG(RTC_CNTL_BROWN_OUT_REG, 0); 
  Serial.begin(115200);

  WiFi.mode(WIFI_STA);
  Serial.println();
  Serial.print("Connecting to ");
  Serial.println(ssid);
  WiFi.begin(ssid, password);  
  while (WiFi.status() != WL_CONNECTED) {
    Serial.print(".");
    delay(500);
  }
  Serial.println();
  Serial.print("ESP32-CAM IP Address: ");
  Serial.println(WiFi.localIP());

  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_SVGA;
    config.jpeg_quality = 10;  //0-63 lower number means higher quality
    config.fb_count = 2;
  } else {
    config.frame_size = FRAMESIZE_CIF;
    config.jpeg_quality = 12;  //0-63 lower number means higher quality
    config.fb_count = 1;
  }
  
  // camera init
  esp_err_t err = esp_camera_init(&config);
  if (err != ESP_OK) {
    Serial.printf("Camera init failed with error 0x%x", err);
    delay(1000);
    ESP.restart();
  }

  sendPhoto(); 
}

void loop() {
  unsigned long currentMillis = millis();
  if (currentMillis - previousMillis >= timerInterval) {
    sendPhoto();
    previousMillis = currentMillis;
  }
}

String sendPhoto() {
  String getAll;
  String getBody;

  camera_fb_t * fb = NULL;
  fb = esp_camera_fb_get();
  if(!fb) {
    Serial.println("Camera capture failed");
    delay(1000);
    ESP.restart();
  }
  
  Serial.println("Connecting to server: " + serverName);
  client.setInsecure();//skip verification
  if (client.connect(serverName.c_str(), serverPort)) {
    Serial.println("Connection successful!");    
    String head = "--IoTCam\r\nContent-Disposition: form-data; name=\"imageFile\"; filename=\"esp32-cam.jpg\"\r\nContent-Type: image/jpeg\r\n\r\n";
    String tail = "\r\n--IoTCam--\r\n";

    uint32_t imageLen = fb->len;
    uint32_t extraLen = head.length() + tail.length();
    uint32_t totalLen = imageLen + extraLen;
  
    client.println("POST " + serverPath + " HTTP/1.1");
    client.println("Host: " + serverName);
    client.println("Content-Length: " + String(totalLen));
    client.println("Content-Type: multipart/form-data; boundary=IoTCam");
    client.println();
    client.print(head);
  
    uint8_t *fbBuf = fb->buf;
    size_t fbLen = fb->len;
    for (size_t n=0; n<fbLen; n=n+1024) {
      if (n+1024 < fbLen) {
        client.write(fbBuf, 1024);
        fbBuf += 1024;
      }
      else if (fbLen%1024>0) {
        size_t remainder = fbLen%1024;
        client.write(fbBuf, remainder);
      }
    }   
    client.print(tail);
    
    esp_camera_fb_return(fb);
    
    int timoutTimer = 10000;
    long startTimer = millis();
    boolean state = false;
    
    while ((startTimer + timoutTimer) > millis()) {
      Serial.print(".");
      delay(100);      
      while (client.available()) {
        char c = client.read();
        if (c == '\n') {
          if (getAll.length()==0) { state=true; }
          getAll = "";
        }
        else if (c != '\r') { getAll += String(c); }
        if (state==true) { getBody += String(c); }
        startTimer = millis();
      }
      if (getBody.length()>0) { break; }
    }
    Serial.println();
    client.stop();
    Serial.println(getBody);
  }
  else {
    getBody = "Connection to " + serverName +  " failed.";
    Serial.println(getBody);
  }
  return getBody;
}

③画像保存用のサーバスクリプトを実装

🤗

ソースコード

img_rec.php

<?php
// ファイルへのパス
$target_dir = "./folder/";
$target_file = $target_dir . "test.jpg";
if (move_uploaded_file($_FILES["imageFile"]["tmp_name"], $target_file)) {
    echo "upload.";
}else {
    echo "err";
}
?>

④画像表示用のHTMLコードを実装

ソースコード

view_cam.html

<!DOCTYPE html>
<html>
  <head>
   <title>CAM View</title>
    <script>
      document.addEventListener('DOMContentLoaded', function(){
        const RELOAD_SPAN = 2000;
        function reload(){
          document.getElementById('figure').src =　'./folder/test.jpg' + '?' + Date.now();
	  //画像を回転する場合に利用↓
          //var d = 180;
          //var e = document.getElementById("figure");
          //e.style.transform = "rotate(" + d + "deg)";
        }
        setInterval(reload, RELOAD_SPAN);
      });
    </script>
  </head>
  <body>
    <h1>CAM View</h1>
    <img id="figure" width="50%" height="50%" src="./folder/test.jpg"><br>
  </body>
</html>

最後に

今回は、前回(2回分)の記事と同様の機能を他のIoTカメラ(ESP-EYE)を使った実装方法を紹介しました！！

アイデア次第で色々使えるので、拡張応用してトライしてみてください。

コメントや指摘、質問等お待ちしております。気軽にどうぞ^^

それでは✋