สอนทำ Esp32 CAM เป็น Video Streaming บนแอพ Blynk

บทความนี้จะสอนการใช้งาน ESP32-CAM ทำเป็นกล้อง Video Streaming ให้สามารถดูภาพแบบ real-time ผ่านโทรศัพท์มือถือบนแอพ Blynk ของเราได้

ESP32-CAM คืออะไร?

ESP32-CAM เป็นโมดูลพร้อมกล้องวิดีโอขนาดเล็กในตัว สิ่งนี้ช่วยให้สามารถใช้งานฟังก์ชั่นใหม่ ๆ เช่น การเฝ้าระวังหรือการจารกรรมระยะไกลจับภาพทุกสิ่งที่เกิดขึ้นเมื่อคุณไม่อยู่และส่งไปยังอุปกรณ์ใด ๆ เพื่อบันทึกหรือเพื่อให้สามารถมองเห็นได้ เป็นโมดูลที่คุณสามารถใช้งานกับโครงการต่าง ๆ มากมายและกับ Arduino เป็นโมดูลที่สมบูรณ์พร้อมด้วยไมโครคอนโทรลเลอร์ในตัวซึ่งสามารถทำให้ทำงานได้อย่างอิสระ นอกเหนือจากการเชื่อมต่อ WiFi + Bluetooth แล้วโมดูลนี้ยังมีกล้องวิดีโอในตัวและช่องเสียบ microSD สำหรับจัดเก็บข้อมูลอีกด้วย

สเปค

  • The smallest 802.11b/g/n Wi-Fi BT SoC module
  • Low power 32-bit CPU,can also serve the application processor
  • Up to 160MHz clock speed, summary computing power up to 600 DMIPS
  • Built-in 520 KB SRAM, external 4MPSRAM
  • Supports UART/SPI/I2C/PWM/ADC/DAC
  • Support OV2640 and OV7670 cameras, built-in flash lamp
  • Support image WiFI upload
  • Support TF card
  • Supports multiple sleep modes
  • Embedded Lwip and FreeRTOS
  • Supports STA/AP/STA+AP operation mode
  • Support Smart Config/AirKiss technology
  • Support for serial port local and remote firmware upgrades (FOTA)

Pin

การติดตั้งโปรแกรม Arduino IDE  →  คลิก

โหลดLibrary

Blynk   →   https://github.com/blynkkk/blynk-library.git

Esp32 CAM  →  https://github.com/espressif/esp32-camera

สอนการติดตั้ง Library สำหรับโปรแกรม Arduino IDE  →  คลิก

ดาวโหลดแอพ Blynk  → คลิก

ตัวอย่างโค้ด

#include “src/OV2640.h”
#include <WiFi.h>
#include <WebServer.h>
#include <WiFiClient.h>

// 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”

char ssid[] = “***************”; //ใส่ชื่อไวไฟ
char pass[] = “***************”; //ใส่รหัสไวไฟ

OV2640 cam;

WebServer server(80);

const char HEADER[] = “HTTP/1.1 200 OK\r\n” \
“Access-Control-Allow-Origin: *\r\n” \
“Content-Type: multipart/x-mixed-replace; boundary=123456789000000000000987654321\r\n”;
const char BOUNDARY[] = “\r\n–123456789000000000000987654321\r\n”;
const char CTNTTYPE[] = “Content-Type: image/jpeg\r\nContent-Length: “;
const int hdrLen = strlen(HEADER);
const int bdrLen = strlen(BOUNDARY);
const int cntLen = strlen(CTNTTYPE);

void handle_jpg_stream(void)
{
char buf[32];
int s;

WiFiClient client = server.client();

client.write(HEADER, hdrLen);
client.write(BOUNDARY, bdrLen);

while (true)
{
if (!client.connected()) break;
cam.run();
s = cam.getSize();
client.write(CTNTTYPE, cntLen);
sprintf( buf, “%d\r\n\r\n”, s );
client.write(buf, strlen(buf));
client.write((char *)cam.getfb(), s);
client.write(BOUNDARY, bdrLen);
}
}

const char JHEADER[] = “HTTP/1.1 200 OK\r\n” \
“Content-disposition: inline; filename=capture.jpg\r\n” \
“Content-type: image/jpeg\r\n\r\n”;
const int jhdLen = strlen(JHEADER);

void handle_jpg(void)
{
WiFiClient client = server.client();

cam.run();
if (!client.connected()) return;

client.write(JHEADER, jhdLen);
client.write((char *)cam.getfb(), cam.getSize());
}

void handleNotFound()
{
String message = “Server is running!\n\n”;
message += “URI: “;
message += server.uri();
message += “\nMethod: “;
message += (server.method() == HTTP_GET) ? “GET” : “POST”;
message += “\nArguments: “;
message += server.args();
message += “\n”;
server.send(200, “text / plain”, message);
}

void setup()
{

Serial.begin(115200);

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;

// Frame parameters
// config.frame_size = FRAMESIZE_UXGA;
config.frame_size = FRAMESIZE_QVGA;
config.jpeg_quality = 12;
config.fb_count = 2;

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

cam.init(config);

IPAddress ip;

WiFi.mode(WIFI_STA);
WiFi.begin(ssid, pass);
while (WiFi.status() != WL_CONNECTED)
{
delay(500);
Serial.print(F(“.”));
}
ip = WiFi.localIP();
Serial.println(F(“WiFi connected”));
Serial.println(“”);
Serial.println(ip);
Serial.print(“Stream Link: http://”);
Serial.print(ip);
Serial.println(“/mjpeg/1”);
server.on(“/mjpeg/1”, HTTP_GET, handle_jpg_stream);
server.on(“/jpg”, HTTP_GET, handle_jpg);
server.onNotFound(handleNotFound);
server.begin();
}

void loop()
{
server.handleClient();
}

ดาวน์โหลดโค้ด  → คลิก

หมายเหตุ ดาวน์โหลดเป็นโฟล์เดอร์นะครับ 

ขั้นตอนการอัปโปรแกรมลงบอร์ด

1. เปิดโปรแกรม Arduino IDE ขึ้นมา เปิดไฟล์โค้ดที่ผมแปะไว้ให้ดาวน์โหลดขึ้นมา ดังรูป

2. ทำการใส่ชื่อไวไฟ กับรหัสไวไฟที่ต้องการให้บอร์ดเชื่อมต่อ

3. ไปที่เมนู Tools  →  Board : “xxxxxxx”  →  ESP32 Arduino  →  Esp32 Wrover Module

4. ไปที่เมนู Tools  แล้วทำการเซ็ทค่า ดังรูป

5. กดอัปโหลดโค้ดลงบอร์ด และรอจนเสร็จ

6. เปิด Serial Monitor ขึ้นมาแล้วเลือก Serial เป็น 115200 แล้วทำการคัดลอก IP ไว้ครับ แล้วเราไปต่อกันที่แอพ Blynk ครับ

ขั้นตอนการใช้งานแอพ Blynk

1. เมื่อเข้าแอพ Blynk  และทำการ Login เข้ามาเรียบร้อยแล้ว ให้กด New Project จากนั้นทำตามขั้นตอน ดังรูป

2. แอพจะส่ง Token ไปยังอีเมลของเรา หลังจากนั้นกด OK

หมายเหตุ “เราจะไม่ใช้ Token  นะครับ”

3. จะเจอหน้าต่างดังรูป หลังจากนั้นกดตรงเครื่องหมาย บวก ดังรูป

4. เลือกเครื่องมือ “Video Streaming” ดังรูป

5. เราจะได้จอวีดีโอมา ดังรูป หลังจากนั้นให้คลิกที่ตัวจอวีดีโอหนึ่งครั้ง

6. จะเจอหน้าต่าง แล้วทำการวาง IP ที่ได้จาก Serial Monitor ลงไปได้เลย และกดกลับ

7. คลิกที่ตัว สามเหลี่ยมมุมขวาบน เพื่อเชื่อมต่อกับบอร์ดครับ

8. เราก็จะได้ Video Streaming มา ดังรูป

หมายเหตุ! Esp32 CAM กับมือถือต้องเชื่อมต่อไวไฟตัวเดียวกันนะครับ

แค่นี้เราก็ทำ Video Streaming บนแอพ Blynk ได้แล้วครับ เพื่อน ๆ ก็สมารถนำไปประยุกต์ใช้กับงานของเพื่อน ๆ ดูนะครับ

Banner Content

0 Comments

Leave a Comment