기자재비 2000엔으로 시작하는 IoT 카메라 입문(M5 Camera 편)

개시하다

기사 읽어주셔서 감사합니다.
이것은 자유직업 학생 엔지니어의 대열이다🐉
^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
6000엔의 기자재비로 시작된 IoT 카메라 입문(Grove 시리즈 카메라 편)의 3분의 1의 가격이라니
화질이 좋아졌을 뿐만 아니라 용접이 필요 없어도 같은 효과를 낼 수 있다.
M5 Stack의 후계자가 아닙니다.
^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
이번 기사는 "기재비 2천엔으로 시작한 IoT 카메라 입문(M5 Camera 편)"
따라서 지난번 보도와 마찬가지로 대체로 2초 간격으로 IoT 카메라를 만들어 이미지를 보내는 내용이다.
기자재 명세서와 소스 코드가 실렸으니 가볍고 유쾌하게 찾아보세요✌～～
그럼 본론으로 들어갑시다.

이용 예

모니터링 카메라

어린이 보호 카메라

애완동물의 원격 감시

etc...

와이파이를 연결할 수 있는 환경이어야 합니다!

만들어진 물건

실제 브라우저에서 본 인상입니다.

서버 데이터를 2초 간격으로 업데이트합니다.✋

① 기자재를 구입하자

기자재 명칭
가격.
M5Camera
￥2,035

② ESP 32에 기록된 펌웨어

자신의 환경에 따라 아래 네 가지를 변경하세요.
char ssid[]= "ssid";← 연결된 WIFI를 설명하는 SSID
char pass[]= "pass";← 연결된 WIFI 암호 설명
String serverName = "domain.com"; ← 대상 서버의 도메인 설명
String serverPath = "/XXXX.php";← 대상 서버의 도메인을 설명한 후 스크립트 이름
나는 컴파일링이 통과할 수 없을 것 같아서, 이 경우 프로그램 라이브러리를 적당히 설치해 주십시오.
포인트지만 클라이언트.setInsecure(); 인증서 확인 처리를 실행하지 않으면 실행할 수 없습니다.
소스 코드
camFirm.ino

// target : ESP32 wrover , Huge APP
// M5Camera model B
#include <WiFi.h>
#include <WiFiClientSecure.h>
#include <esp_camera.h>
char ssid[]= "ssid";
char pass[]= "pass";
String serverName = "domain.com";   
String serverPath = "/XXXX.php";
const int serverPort = 443;


// for m5camera model B
#define PWDN_GPIO_NUM     -1
#define RESET_GPIO_NUM    15
#define XCLK_GPIO_NUM     27
#define SIOD_GPIO_NUM     22 //25
#define SIOC_GPIO_NUM     23

#define Y9_GPIO_NUM       19
#define Y8_GPIO_NUM       36
#define Y7_GPIO_NUM       18
#define Y6_GPIO_NUM       39
#define Y5_GPIO_NUM        5
#define Y4_GPIO_NUM       34
#define Y3_GPIO_NUM       35
#define Y2_GPIO_NUM       32
#define VSYNC_GPIO_NUM    25 //22
#define HREF_GPIO_NUM     26
#define PCLK_GPIO_NUM     21

void initCam(void){
  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; // PIXFORMAT_ + YUV422|GRAYSCALE|RGB565|JPEG
  config.jpeg_quality = 10;
  config.frame_size = FRAMESIZE_UXGA; //FRAMESIZE_ + QVGA|CIF|VGA|SVGA|XGA|SXGA|UXGA
  config.fb_count = 1;

  esp_err_t err = esp_camera_init(&config);
  if (err != ESP_OK) {
    Serial.printf("Camera init failed with error 0x%x", err);
    while(1){}
  }
}
void setup()
{
  Serial.begin(115200);
  Serial.println("\r\nHello Line Notify");
  initCam();
  WiFi.begin(ssid, pass);
   while (WiFi.status() != WL_CONNECTED) { //Check for the connection
    delay(1000);
    Serial.println("Connecting to WiFi..");
  }
  Serial.println("");
  Serial.println("WiFi connected.");
  Serial.println("IP address: ");
  Serial.println(WiFi.localIP());
}
void loop()
{
  sendPhoto();
  delay(2000); 
}
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);
  WiFiClientSecure client;
  client.setInsecure();  
  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
// ファイルへのパス
$path = './folder/';
// ファイルがアップロードされているかと、POST通信でアップロードされたかを確認
if( !empty($_FILES['imageFile']['tmp_name']) && is_uploaded_file($_FILES['imageFile']['tmp_name']) ) {
        // ファイルを指定したパスへ保存する
        if( move_uploaded_file( $_FILES['imageFile']['tmp_name'], $path.'test.jpg') ) {
                echo 'success';
        } else {
                echo 'fail';
        }
}
?>

④ 이미지 디스플레이에 사용할 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>

최후

어때?
이번에 우리는 지난번에 보도한 기능과 같은 기능으로 IoT 네트워크 카메라 프로그램을 실시했다.
6000엔에 M5 Camera 세 대를 살 수 있어서 놀랐어요.
당신의 평론, 지적과 질문을 기대합니다.사양하지 마세요^^
그럼 안녕히 계세요.✋