กดปุ๊บ ส่งปั๊บ! สร้างกล้องวงจรปิดส่งรูปเข้า WhatsApp ด้วย ESP32-CAM 📸📲

Send Image VIA Whatsapp Using ESP32-Cam

สวัสดีชาว Maker และนักประดิษฐ์สาย IoT ทุกคนครับ! ทุกวันนี้เราใช้ WhatsApp กันจนเป็นส่วนหนึ่งของชีวิตประจำวันไปแล้ว ทั้งส่งข้อความทักทาย ส่งรูปให้เพื่อน หรือคุยงาน แต่ลองคิดดูสิครับว่าจะเจ๋งแค่ไหน ถ้าเราสามารถสร้าง "ระบบฝังตัว (Embedded System)" หรือกล้องวงจรปิดขนาดจิ๋ว ที่พอกดปุ่มปุ๊บ ก็แชะภาพแล้วส่งตรงเข้าแชท WhatsApp ของเราได้ทันที โดยไม่ต้องง้อมือถือเลย!

ในโปรเจกต์นี้ เราจะมาเปลี่ยนแนวคิดนั้นให้เป็นจริงกันครับ โดยใช้บอร์ดไมโครคอนโทรลเลอร์ยอดฮิตอย่าง ESP32-CAM ทำหน้าที่เป็นตากล้อง และส่งภาพผ่านคลาวด์ API ของ CircuitDigest Cloud เพื่อยิงตรงเข้ามือถือของเราแบบเรียลไทม์ (ซึ่งเทคนิคนี้เราเคยใช้ทำ ระบบส่งรูปผ่าน Email มาแล้ว แต่วันนี้เราจะมาลุยฝั่ง WhatsApp กันครับ!)

ภาพรวมการทำงาน (How it works)

เพื่อให้เห็นภาพรวมง่ายๆ สเตปการทำงานของระบบนี้มีแค่ 4 ขั้นตอนครับ:

  1. สมัครใช้งาน CircuitDigest Cloud เพื่อรับ API Key
  2. ต่อวงจร Push button (ปุ่มกด) เข้ากับขา GPIO 13 ของบอร์ด ESP32-CAM
  3. แฟลชโค้ด (Upload Sketch) โดยใส่รหัส Wi-Fi, API Key และเบอร์โทรศัพท์ของคุณลงไป
  4. เมื่อกดปุ่มปุ๊บ โมดูลจะเปิดไฟแฟลช แชะภาพเป็นไฟล์ JPEG แล้วส่งเข้า WhatsApp ของคุณภายในไม่กี่วินาที!

เตรียมของให้พร้อม (Components Required)

อุปกรณ์สำหรับโปรเจกต์นี้มีไม่เยอะครับ เน้นความเรียบง่าย:

  • ESP32-CAM: พระเอกของเรา ทำหน้าที่ควบคุมระบบและถ่ายภาพ
  • Push Button: สวิตช์ปุ่มกดสำหรับเป็นตัวสั่งการ (Trigger) ให้ถ่ายรูป
  • Breadboard & Jumper wires: สำหรับต่อวงจรให้เป็นระเบียบ

💡 Maker's Tip: เนื่องจาก ESP32-CAM ทั่วไปจะไม่มีพอร์ต USB ในตัว คุณอาจจะต้องใช้บอร์ด USB-to-Serial Converter ในการอัปโหลดโค้ด (ดูวิธีโปรแกรม ESP32-CAM ที่นี่)

นอกจากนี้ โปรเจกต์ที่มีกล้องแบบนี้ ขาดไม่ได้เลยคือ "เคสใส่กล้อง" ครับ! แนะนำให้ใช้ เครื่อง 3D Printer ปริ้นท์เคสสวยๆ มาใส่เพื่อป้องกันไฟฟ้าลัดวงจรและตั้งกล้องได้มั่นคงขึ้น หากเพื่อนๆ กำลังหา บอร์ด ESP32-CAM, สายไฟ, หรือเส้นพลาสติก 3D Print (Filament) คุณภาพสูง สามารถแวะไปช้อปของแท้พร้อมส่งได้ที่ Globalbyte เลยครับ!

การต่อวงจร (Circuit Diagram & Pinout)

การต่อวงจรนั้นง่ายมากครับ เราจะใช้ Breadboard เข้ามาช่วยเพื่อลดความยุ่งยากของสายไฟ โดยเราจะต่อปุ่มกดเข้ากับขา GPIO 13 และตั้งค่าในโค้ดให้เป็นแบบ INPUT_PULLUP (เมื่อกดปุ่ม สถานะจะเป็น LOW)

Circuit Diagram for ESP32-CAM WhatsApp
พิน (Pin / Node) ต่อเข้ากับ (Connected To) หน้าที่การทำงาน (Function)
GPIO 13 Pin 1 ของปุ่มกด รับคำสั่งถ่ายรูป (อ่านค่า LOW เมื่อถูกกด)
GND Pin 2 ของปุ่มกด จุดอ้างอิงกราวด์ (Common ground)
GPIO 4 ไฟแฟลช (Onboard LED) ให้แสงสว่างตอนถ่ายภาพ (เปิดค้าง 150 ms)
5 V / GND แหล่งจ่ายไฟ (Power supply) จ่ายไฟ 5V ที่เสถียร (แนะนำให้ใช้อะแดปเตอร์แยกแทนการเสียบผ่าน USB คอมพิวเตอร์)

การตั้งค่าและการใช้งานจริง (Hardware Config & WhatsApp Setup)

หลังจากต่อสายบน Breadboard เรียบร้อยแล้ว ให้ไปสมัครใช้งานที่เว็บไซต์ CircuitDigest Cloud เพื่อรับ API Key จากนั้นทำการอัปโหลดโค้ดลงบอร์ด เมื่อเรากดปุ่มที่บอร์ด ตัวระบบก็จะยิงภาพผ่าน API เข้าสู่ WhatsApp ของคุณแบบเป๊ะๆ เลยครับ ลองกด View more เพื่อดูภาพประกอบขั้นตอนการเซ็ตอัปและผลลัพธ์กันได้เลย!

Hardware Connection on Breadboard
การต่ออุปกรณ์จริงบน Breadboard ให้เป็นระเบียบ
CircuitDigest Cloud Registration
ลงทะเบียนใช้งานที่ CircuitDigest Cloud
WhatsApp Received Message
ผลลัพธ์จริง! รูปภาพถูกส่งเข้า WhatsApp พร้อมข้อมูลเวลาและสถานะทันที

เจาะลึกโค้ดการทำงาน (Source Code Explained)

โค้ดของโปรเจกต์นี้ถูกแบ่งเป็นสัดส่วนชัดเจนเพื่อให้ง่ายต่อการทำความเข้าใจครับ ลองมาดูส่วนที่สำคัญกัน:

1. การตั้งค่าและไลบรารี: นำเข้าไลบรารีที่จำเป็นสำหรับกล้อง, Wi-Fi, และ HTTPS รวมถึงกำหนดค่า SSID, รหัสผ่าน, API Key และเบอร์โทรศัพท์เป้าหมาย

C++ (Libraries & Credentials)
#include "esp_camera.h"
#include <WiFi.h>
#include <WiFiClientSecure.h>
#include <time.h>

const char *ssid = "YOURSSID", *pwd = "YOURPASSWORD";
const char *apiKey = "YOURAPIKEY", *phone = "YOURNUMBER";

2. การตั้งค่ากล้อง (initCam): ฟังก์ชันนี้จะคอยกำหนดพิน (Pin) ให้ตรงกับโมดูล ESP32-CAM และปรับความละเอียดของภาพตามการรองรับของหน่วยความจำ (PSRAM)

3. การจัดการหน่วยความจำภาพ: เมื่อถ่ายภาพเสร็จ โค้ดจะก๊อปปี้ข้อมูลภาพไปเก็บไว้ใน Buffer ที่สร้างขึ้นมาใหม่แบบไดนามิก malloc() เพื่อป้องกันข้อมูลสูญหาย และเคลียร์ RAM คืนให้กับระบบทันที

4. การส่ง HTTP POST: ส่วนนี้สำคัญมาก เพราะมันคือการสร้างฟอร์มข้อมูลแบบ multipart/form-data และใช้ API Key เพื่อยืนยันตัวตน ก่อนจะส่งก้อนข้อมูลภาพวิ่งไปที่เซิร์ฟเวอร์เพื่อให้ยิงเข้า WhatsApp ครับ

5. การอ่านค่าปุ่มกด: โค้ดจะคอยเช็คสถานะของขา 13 ถ้ามีการกดปุ่ม (สถานะเปลี่ยนจาก HIGH เป็น LOW) ก็จะหน่วงเวลาเล็กน้อยเพื่อกันปุ่มเบิ้ล (Debounce) จากนั้นเปิดไฟแฟลช กดถ่าย แชะ! และส่งเข้าฟังก์ชัน sendWa() ครับ

โค้ดฉบับเต็ม (Complete Project Code)

คุณสามารถก๊อปปี้โค้ดด้านล่างนี้ไปปรับใช้ใน Arduino IDE ของคุณได้เลย อย่าลืมเปลี่ยนค่า Wi-Fi และ API Key ด้วยนะครับ

C++ (ESP32-CAM WhatsApp Complete Code)
#include "esp_camera.h"
#include <WiFi.h>
#include <WiFiClientSecure.h>
#include <time.h>

const char *ssid = "Yourssid", *pwd = "yourpassword";
const char *apiKey = "yourapikey", *phone = "yournumber";

camera_fb_t *fb = nullptr;
bool lastBtn = HIGH;

void initCam() {
  camera_config_t cfg; 
  cfg.ledc_channel=LEDC_CHANNEL_0; cfg.ledc_timer=LEDC_TIMER_0;
  cfg.pin_d0=5; cfg.pin_d1=18; cfg.pin_d2=19; cfg.pin_d3=21; cfg.pin_d4=36; cfg.pin_d5=39;
  cfg.pin_d6=34; cfg.pin_d7=35; cfg.pin_xclk=0; cfg.pin_pclk=22; cfg.pin_vsync=25;
  cfg.pin_href=23; cfg.pin_sscb_sda=26; cfg.pin_sscb_scl=27; cfg.pin_pwdn=32; cfg.pin_reset=-1;
  cfg.xclk_freq_hz=20000000; cfg.pixel_format=PIXFORMAT_JPEG;
  cfg.frame_size=psramFound()?FRAMESIZE_VGA:FRAMESIZE_QVGA;
  cfg.jpeg_quality=psramFound()?10:12; cfg.fb_count=psramFound()?2:1;
  if(esp_camera_init(&cfg) != ESP_OK) ESP.restart();
}

void sendWa() {
  if(!fb) return;
  if(WiFi.status() != WL_CONNECTED) WiFi.reconnect();
  while(WiFi.status() != WL_CONNECTED) delay(100);
  
  uint8_t *imgBuf = (uint8_t*)malloc(fb->len);
  if(!imgBuf) { esp_camera_fb_return(fb); fb=nullptr; return; }
  size_t len = fb->len; 
  memcpy(imgBuf, fb->buf, len);
  esp_camera_fb_return(fb); 
  fb = nullptr;
  esp_camera_deinit(); 
  delay(100);
  
  WiFiClientSecure client; 
  client.setInsecure();
  if(!client.connect("www.circuitdigest.cloud", 443)) { free(imgBuf); initCam(); return; }
  
  struct tm ti; 
  char ts[64] = "Time Unknown";
  if(getLocalTime(&ti, 1000)) strftime(ts, 64, "%I:%M %p, %B %d, %Y", &ti);
  
  String b = "ESP32CAMBound7MA4YWxkTrZu0gW", cr = "\r\n", d = "--";
  String body = d+b+cr+"Content-Disposition: form-data; name=\"phone_number\""+cr+cr+phone+cr+
    d+b+cr+"Content-Disposition: form-data; name=\"template_id\""+cr+cr+"image_capture_alert"+cr+
    d+b+cr+"Content-Disposition: form-data; name=\"variables\""+cr+cr+"{\"event_type\":\"Just a Picture\",\"location\":\"office\",\"device_name\":\"ESP32 CAM #1\",\"captured_time\":\""+String(ts)+"\"}"+cr+
    d+b+cr+"Content-Disposition: form-data; name=\"image\"; filename=\"p.jpg\""+cr+"Content-Type: image/jpeg"+cr+cr;
  String end = cr+d+b+d+cr;
  
  client.println("POST /api/v1/whatsapp/send-with-image HTTP/1.1");
  client.println("Host: www.circuitdigest.cloud\r\nAuthorization: " + String(apiKey));
  client.println("Content-Type: multipart/form-data; boundary=" + b);
  client.println("Content-Length: " + String(body.length() + len + end.length()) + "\r\n");
  client.print(body); 
  client.write(imgBuf, len); 
  client.print(end); 
  free(imgBuf);
  
  while(client.connected()) if(client.readStringUntil('\n') == "\r") break;
  client.stop(); 
  initCam();
}

void setup() {
  Serial.begin(115200); 
  pinMode(4, OUTPUT); 
  pinMode(13, INPUT_PULLUP);
  initCam(); 
  WiFi.begin(ssid, pwd);
  while(WiFi.status() != WL_CONNECTED) delay(100);
  configTime(19800, 0, "pool.ntp.org");
  Serial.println("Ready!");
}

void loop() {
  bool cur = digitalRead(13);
  if(lastBtn == HIGH && cur == LOW) {
    delay(50);
    if(digitalRead(13) == LOW) {
      camera_fb_t *s = esp_camera_fb_get(); if(s) esp_camera_fb_return(s);
      digitalWrite(4, HIGH); delay(150); 
      fb = esp_camera_fb_get(); 
      digitalWrite(4, LOW);
      Serial.println("Captured!"); 
      sendWa(); 
      cur = digitalRead(13);
    }
  }
  lastBtn = cur; 
  delay(10);
}

ไอเดียต่อยอด & การแก้ปัญหา (Applications & Troubleshooting)

โปรเจกต์นี้สามารถนำไปต่อยอดใช้งานจริงได้หลายอย่างเลยครับ เช่น เอาไปทำ ออดหน้าบ้านอัจฉริยะ (Smart Door) ใครมากดกริ่งก็ส่งรูปเข้ามือถือทันที, ทำกล้องแอบถ่ายสัตว์ป่า, หรือใช้เป็นโปรเจกต์ส่งโปรเจกต์จบก็ยังได้ (ดูไอเดียทำกล้องอ่านป้ายทะเบียนรถที่นี่)

ตารางการแก้ปัญหาเบื้องต้น

  • กดแล้วกล้องไม่ถ่ายรูป: อาจเกิดจากไฟไม่พอ ให้แน่ใจว่าใช้ไฟ 5V ที่นิ่งพอ (ไม่ควรใช้ไฟจาก USB คอมพิวเตอร์อย่างเดียว) หรือเช็คการตั้งค่า PIN ในโค้ดอีกครั้ง
  • ต่อ Wi-Fi ไม่ได้: บอร์ด ESP32-CAM รองรับแค่ Wi-Fi 2.4 GHz เท่านั้น (ห้ามต่อ 5 GHz) เช็คชื่อรหัสผ่านให้ชัวร์ และลองกด Reset ที่บอร์ดดูครับ
  • ภาพที่ได้มืดหรือเบลอ: อาจเกิดจากแสงสว่างไม่พอ ให้เช็คว่าไฟแฟลช (LED) ติดตอนกดถ่ายหรือไม่ หรือลองปรับค่าความละเอียดในโค้ดดูได้ครับ
  • ส่งเข้า WhatsApp ไม่ได้: สาเหตุหลักคือกรอก API Key หรือเบอร์โทรศัพท์ผิด หรืออาจจะยังไม่ได้กดยืนยันในเว็บ CircuitDigest Cloud ครับ

FAQs

  • เปลี่ยนจากการกดปุ่มเป็นเซนเซอร์จับความเคลื่อนไหว (PIR) ได้ไหม?
    ได้แน่นอนครับ! แค่เปลี่ยนจากปุ่มกดมาต่อเซนเซอร์ PIR เข้าไปแทน เมื่อมีคนเดินผ่านก็จะแชะภาพส่งทันที
  • ใช้เวลาส่งภาพนานแค่ไหน?
    ปกติแล้วจะใช้เวลาเพียงไม่กี่วินาทีครับ ขึ้นอยู่กับความเร็วของ Wi-Fi ที่บ้านและเซิร์ฟเวอร์ปลายทาง

เริ่มต้นทำโปรเจกต์ IoT เจ๋งๆ ด้วยอุปกรณ์คุณภาพสูงได้แล้ววันนี้!

ช้อปบอร์ด ESP32-CAM และเส้น 3D Print Filament เข้ากลุ่ม Community พูดคุยสาย Maker สอบถามเทคนิคและสั่งซื้อผ่าน LINE OA

อ้างอิงและเรียบเรียงจาก: Globalbyteshop Blog

แหล่งที่มาบทความ: Circuit Digest - ESP32-CAM WhatsApp Message System

ดาวน์โหลด Source Code และวงจร: GitHub Repository

โปรเจกต์ที่เกี่ยวข้อง:

*คำเตือน: เนื้อหานี้เป็นการสรุปและเรียบเรียงแนวคิดจากโปรเจกต์ต้นฉบับภาษาอังกฤษ ข้อมูลและขั้นตอนการต่อวงจรบางส่วนอาจถูกย่อทอนเพื่อให้เข้าใจง่าย โค้ดที่แสดงในบทความอาจต้องมีการปรับแก้ตั้งค่า Wi-Fi และ API ให้ตรงกับอุปกรณ์ของผู้ใช้งาน ผู้สนใจสามารถศึกษารายละเอียดเชิงลึกและดาวน์โหลดไฟล์ต้นฉบับได้จาก เว็บไซต์ต้นฉบับ

 


Blog posts

เข้าสู่ระบบ

ลืมรหัสผ่านใช่ไหม?

ยังไม่มีบัญชีใช่ไหม?
สร้างบัญชี