ESP32-CAM merupakan salah satu board mikrokontroler berbasis ESP32 yang telah dilengkapi dengan modul kamera sehingga mampu mengambil gambar, melakukan live streaming, hingga menjalankan berbagai proyek berbasis Internet of Things (IoT). Salah satu proyek paling sederhana namun sangat bermanfaat adalah mengambil foto (capture image) dan langsung menampilkannya di browser melalui jaringan WiFi. Berbeda dengan proyek yang menyimpan hasil foto ke microSD Card, pada tutorial ini foto akan langsung dikirim ke browser tanpa perlu media penyimpanan tambahan.
Dengan demikian, Anda tetap dapat memanfaatkan seluruh fitur pengambilan gambar meskipun tidak memasang kartu microSD pada ESP32-CAM. Project ini sangat cocok dijadikan dasar untuk berbagai pengembangan, seperti sistem monitoring ruangan berbasis WiFi, bel pintu dengan kamera (Smart Doorbell), sistem keamanan rumah, monitoring laboratorium, monitoring kandang ternak, robot dengan kamera, dan proyek Internet of Things (IoT) berbasis kamera. Pada artikel ini Anda akan belajar mulai dari persiapan hardware, instalasi Arduino IDE, menghubungkan ESP32-CAM ke jaringan WiFi, hingga mengambil foto dan menampilkannya langsung di browser menggunakan web server sederhana.
Cara Kerja Project
1. ESP32-CAM terlebih dahulu akan terhubung ke jaringan WiFi yang telah dikonfigurasi pada program. Setelah koneksi berhasil, perangkat akan memperoleh alamat IP (IP Address) yang digunakan untuk mengaksesnya melalui browser.
2. Setelah mendapatkan alamat IP, ESP32-CAM akan menjalankan web server sederhana. Web server ini berfungsi sebagai antarmuka yang memungkinkan pengguna mengakses kamera melalui browser di komputer maupun smartphone yang berada pada jaringan WiFi yang sama.
3. Ketika alamat IP tersebut dibuka melalui browser, halaman web akan ditampilkan. Pada halaman ini tersedia tombol Take Photo yang dapat digunakan untuk mengambil gambar menggunakan kamera OV3660.
4. Saat tombol Take Photo ditekan, kamera OV3660 akan langsung mengambil satu buah foto dan mengirimkannya ke browser dalam format JPEG melalui koneksi WiFi.
5. Hasil foto akan langsung ditampilkan pada halaman browser sehingga pengguna dapat melihatnya secara langsung. Selain itu, gambar juga dapat disimpan secara manual ke perangkat tanpa perlu menggunakan media penyimpanan tambahan.
6. Karena proses pengambilan dan pengiriman gambar dilakukan secara langsung melalui jaringan WiFi, proyek ini tidak memerlukan microSD Card sebagai tempat penyimpanan foto. Hal ini membuat rangkaian menjadi lebih sederhana dan proses penggunaan menjadi lebih praktis.
Keunggulan Project
- Tidak memerlukan microSD Card.
- Pengambilan gambar berlangsung secara real-time.
- Dapat diakses menggunakan smartphone maupun komputer.
- Mudah dikembangkan menjadi sistem monitoring.
- Menggunakan Web Server sederhana.
- Program relatif ringan dan mudah dipahami.
- Cocok untuk pemula maupun tingkat lanjut.
Spesifikasi Project
Pada tutorial ini, sistem yang akan dibuat memiliki spesifikasi sebagai berikut.
- Board : ESP32-CAM-MB AI Thinker
- Kamera : OV3660
- Software : Arduino IDE
- Komunikasi : WiFi
- Output : Halaman Web
- Format Gambar : JPEG
- Media Penyimpanan : Tidak menggunakan microSD Card
Komponen yang Dibutuhkan
- ESP32-CAM-MB AI Thinker
- Kamera OV3660
- Kabel USB Type-C atau Micro USB (sesuai tipe ESP32-CAM-MB yang digunakan)
- Laptop atau Komputer
- Arduino IDE
- Jaringan WiFi 2,4 GHz
Catatan: ESP32-CAM hanya mendukung jaringan WiFi 2,4 GHz, sehingga tidak dapat terhubung langsung ke jaringan 5 GHz.
Mengenal ESP32-CAM
ESP32-CAM merupakan papan pengembangan berbasis chip ESP32 yang telah dilengkapi modul kamera sehingga mampu melakukan berbagai tugas pengolahan citra sekaligus komunikasi melalui WiFi maupun Bluetooth. Board ini memiliki konsumsi daya yang relatif rendah, performa tinggi, serta harga yang cukup terjangkau sehingga banyak digunakan pada berbagai proyek IoT berbasis kamera.
Beberapa fitur utama ESP32-CAM antara lain:
- WiFi 2,4 GHz
- Bluetooth BLE
- Dual-Core Processor hingga 240 MHz
- PSRAM 4 MB
- Slot Kamera OV2640/OV3660
- Slot microSD (Opsional)
- GPIO yang dapat digunakan untuk berbagai sensor
Pada tutorial ini, fitur yang akan dimanfaatkan hanyalah kamera dan WiFi, sedangkan slot microSD tidak digunakan.
Mengenal Kamera OV3660
Modul OV3660 merupakan sensor kamera beresolusi hingga 3 Megapixel yang kompatibel dengan ESP32-CAM AI Thinker. Beberapa keunggulan kamera OV3660 meliputi:
- Resolusi lebih tinggi dibanding OV2640.
- Menghasilkan gambar lebih tajam.
- Mendukung berbagai ukuran frame.
- Kualitas warna lebih baik.
- Sangat cocok untuk aplikasi monitoring maupun pengambilan foto.
Pada project ini, kamera akan dikonfigurasi menggunakan resolusi yang sesuai agar proses pengambilan gambar berlangsung cepat dan stabil.
Persiapan Arduino IDE
Sebelum mengunggah program ke ESP32-CAM, lakukan konfigurasi Arduino IDE terlebih dahulu.
1. Install Arduino IDE
Pastikan Arduino IDE telah terpasang pada komputer Anda. Disarankan menggunakan Arduino IDE versi terbaru agar kompatibel dengan library ESP32.
2. Menambahkan URL ESP32
- Buka menu File → Preferences
- Pada bagian Additional Boards Manager URLs, tambahkan URL berikut.
https://espressif.github.io/arduino-esp32/package_esp32_index.json
Apabila sebelumnya sudah terdapat URL lain, tambahkan URL di atas dengan dipisahkan tanda koma.
3. Install ESP32 Board
- Selanjutnya buka Tools → Board → Boards Manager
- Kemudian cari esp32
- Install paket ESP32 by Espressif Systems hingga selesai.
4. Memilih Board
Setelah proses instalasi selesai, pilih board berikut.
Tools → Board → AI Thinker ESP32-CAM
5. Memilih Port
- Hubungkan ESP32-CAM-MB ke komputer menggunakan kabel USB.
- Kemudian pilih Tools → Port
- Lalu pilih port COM sesuai perangkat yang terdeteksi.
Program ESP32-CAM
Salin seluruh kode program berikut ke Arduino IDE.
#include "esp_camera.h"
#include <WiFi.h>
#include <WebServer.h>
// =========================
// Ganti dengan WiFi Anda
// =========================
const char* ssid = "NAMA_WIFI";
const char* password = "PASSWORD_WIFI";
// AI Thinker ESP32-CAM (OV3660/OV2640)
#define PWDN_GPIO_NUM 32
#define RESET_GPIO_NUM -1
#define XCLK_GPIO_NUM 0
#define SIOD_GPIO_NUM 26
#define SIOC_GPIO_NUM 27
#define Y9_GPIO_NUM 35
#define Y8_GPIO_NUM 34
#define Y7_GPIO_NUM 39
#define Y6_GPIO_NUM 36
#define Y5_GPIO_NUM 21
#define Y4_GPIO_NUM 19
#define Y3_GPIO_NUM 18
#define Y2_GPIO_NUM 5
#define VSYNC_GPIO_NUM 25
#define HREF_GPIO_NUM 23
#define PCLK_GPIO_NUM 22
WebServer server(80);
const char MAIN_page[] PROGMEM = R"rawliteral(
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>ESP32-CAM Take Photo</title>
<style>
body{
font-family:Arial;
background:#f2f2f2;
text-align:center;
margin-top:40px;
}
button{
padding:12px 25px;
font-size:18px;
cursor:pointer;
}
img{
margin-top:20px;
max-width:90%;
border-radius:10px;
box-shadow:0 0 10px rgba(0,0,0,.3);
}
</style>
</head>
<body>
<h2>ESP32-CAM Take Photo</h2>
<button onclick="capture()">Take Photo</button>
<br>
<img id="photo">
<script>
function capture(){
document.getElementById("photo").src="/capture?_="+new Date().getTime();
}
</script>
</body>
</html>
)rawliteral";
void handleRoot(){
server.send_P(200,"text/html",MAIN_page);
}
void handleCapture(){
camera_fb_t * fb = NULL;
fb = esp_camera_fb_get();
if(!fb){
server.send(500,"text/plain","Camera Capture Failed");
return;
}
server.send_P(200,"image/jpeg",(const char *)fb->buf,fb->len);
esp_camera_fb_return(fb);
}
void startCamera(){
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;
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;
}
esp_camera_init(&config);
}
void setup(){
Serial.begin(115200);
startCamera();
WiFi.begin(ssid,password);
Serial.print("Menghubungkan WiFi");
while(WiFi.status()!=WL_CONNECTED){
delay(500);
Serial.print(".");
}
Serial.println();
Serial.print("IP Address : ");
Serial.println(WiFi.localIP());
server.on("/",handleRoot);
server.on("/capture",HTTP_GET,handleCapture);
server.begin();
Serial.println("Web Server Aktif");
}
void loop(){
server.handleClient();
}
Mengubah Nama WiFi dan Password
Sebelum program diunggah ke ESP32-CAM, ubahlah bagian berikut sesuai dengan jaringan WiFi yang akan digunakan.
const char* ssid = "NAMA_WIFI";
const char* password = "PASSWORD_WIFI";
Sebagai contoh:
const char* ssid = "RumahSaya";
const char* password = "12345678";
Pastikan nama WiFi dan password ditulis dengan benar agar ESP32-CAM dapat terhubung ke jaringan tanpa kendala.
Penjelasan Singkat Program
1. Program di atas terdiri dari beberapa bagian utama yang saling bekerja sama sehingga ESP32-CAM dapat mengambil foto dan menampilkannya di browser.
2. Bagian pertama berfungsi untuk mengimpor library yang dibutuhkan, yaitu library kamera (esp_camera.h), WiFi (WiFi.h), dan web server (WebServer.h).
3. Selanjutnya dilakukan konfigurasi pin kamera AI Thinker, sehingga ESP32-CAM dapat berkomunikasi dengan modul kamera OV3660 yang terpasang.
4. Program kemudian membuat Web Server pada port 80. Saat browser mengakses alamat IP ESP32-CAM, server akan menampilkan halaman HTML sederhana yang berisi tombol Take Photo.
5. Ketika tombol tersebut ditekan, browser akan mengirim permintaan ke alamat /capture. ESP32-CAM kemudian mengambil satu frame gambar dari kamera, mengubahnya menjadi format JPEG, lalu mengirimkannya kembali ke browser sehingga foto langsung ditampilkan pada halaman web.
Dengan mekanisme ini, pengguna dapat mengambil foto berkali-kali hanya dengan menekan tombol Take Photo, tanpa memerlukan penyimpanan pada microSD Card.
Mengunggah Program ke ESP32-CAM-MB
Setelah program selesai ditulis, langkah berikutnya adalah mengunggah (upload) program ke board ESP32-CAM-MB menggunakan Arduino IDE. Salah satu kelebihan menggunakan ESP32-CAM-MB adalah proses upload menjadi jauh lebih mudah karena board ini telah dilengkapi USB to Serial Converter, sehingga Anda tidak memerlukan modul FTDI tambahan. Ikuti langkah-langkah berikut:
1. Hubungkan ESP32-CAM-MB ke komputer menggunakan kabel USB.
2. Pastikan board yang dipilih adalah AI Thinker ESP32-CAM.
3. Pilih Port (COM) yang sesuai pada Arduino IDE.
4. Klik tombol Upload (ikon panah ke kanan).
Arduino IDE akan mulai melakukan proses kompilasi program. Tunggu hingga proses selesai. Apabila tidak terdapat kesalahan (error), akan muncul pesan seperti berikut pada bagian Output.
Hard resetting via RTS pin...
Pesan tersebut menunjukkan bahwa program telah berhasil diunggah ke ESP32-CAM.
Membuka Serial Monitor
1. Setelah proses upload selesai, buka Serial Monitor melalui menu Tools → Serial Monitor, atau gunakan shortcut Ctrl + Shift + M.
2. Atur baud rate menjadi 115200
3. Apabila ESP32-CAM berhasil terhubung ke jaringan WiFi, Serial Monitor akan menampilkan informasi seperti berikut.
Menghubungkan WiFi......
IP Address : 192.168.1.15
Web Server Aktif
Perhatikan alamat IP Address yang muncul karena alamat tersebut akan digunakan untuk mengakses halaman web dari ESP32-CAM.
Catatan: Alamat IP yang diperoleh setiap perangkat dapat berbeda-beda, tergantung pada konfigurasi router atau jaringan WiFi yang digunakan.
Mengakses Halaman Web ESP32-CAM
1. Setelah memperoleh alamat IP dari Serial Monitor, buka browser pada komputer atau smartphone yang terhubung ke jaringan WiFi yang sama.
2. Ketik alamat IP ESP32-CAM pada address bar.
Sebagai contoh:
http://192.168.1.15
Tekan Enter.
3. Jika semua konfigurasi telah dilakukan dengan benar, browser akan menampilkan halaman web sederhana seperti berikut.
- Judul ESP32-CAM Take Photo
- Tombol Take Photo
Halaman tersebut merupakan antarmuka (interface) sederhana yang dibuat menggunakan HTML dan dijalankan langsung oleh ESP32-CAM.
Cara Mengambil Foto
Untuk mengambil gambar menggunakan ESP32-CAM, ikuti langkah-langkah berikut.
1. Pastikan halaman web telah berhasil dibuka.
2. Arahkan kamera ESP32-CAM ke objek yang ingin difoto.
3. Klik tombol Take Photo.
4. Tunggu beberapa saat hingga proses pengambilan gambar selesai.
5. Foto akan langsung muncul pada halaman browser.
Setiap kali tombol Take Photo ditekan, ESP32-CAM akan mengambil gambar terbaru sehingga hasil foto yang ditampilkan selalu diperbarui. Karena gambar dikirim langsung dari kamera ke browser melalui jaringan WiFi, proses ini tidak memerlukan microSD Card.
Menyimpan Foto ke Komputer
Meskipun project ini tidak menyimpan gambar ke microSD Card, Anda tetap dapat menyimpan hasil foto secara manual melalui browser. Caranya sangat mudah.
1. Setelah foto tampil pada browser, klik kanan pada gambar.
2. Pilih menu Save Image As....
3. Tentukan lokasi penyimpanan.
4. Klik Save.
Apabila menggunakan smartphone, biasanya cukup menekan dan menahan gambar selama beberapa detik, kemudian pilih opsi Download Image atau Simpan Gambar, tergantung browser yang digunakan.
Hasil Pengujian Project
Apabila seluruh langkah telah dilakukan dengan benar, maka project akan bekerja sebagai berikut.
- ESP32-CAM berhasil terhubung ke jaringan WiFi.
- Alamat IP muncul pada Serial Monitor.
- Browser dapat mengakses halaman web ESP32-CAM.
- Tombol Take Photo berfungsi dengan baik.
- Kamera mengambil gambar setiap tombol ditekan.
- Foto langsung ditampilkan pada browser.
- Gambar memiliki format JPEG.
- Pengambilan gambar dapat dilakukan berulang kali tanpa perlu me-restart board.
Dengan hasil tersebut, dapat disimpulkan bahwa sistem telah berjalan sesuai dengan yang diharapkan.
Penjelasan Alur Kerja Program
Secara umum, program bekerja melalui beberapa tahapan berikut.
1. ESP32-CAM Melakukan Inisialisasi
Saat pertama kali dinyalakan, ESP32-CAM akan menginisialisasi seluruh konfigurasi kamera, termasuk pengaturan pin, resolusi gambar, kualitas JPEG, serta buffer kamera.
Apabila proses inisialisasi berhasil, kamera siap digunakan untuk mengambil gambar.
2. ESP32-CAM Terhubung ke WiFi
Selanjutnya ESP32-CAM akan mencoba terhubung ke jaringan WiFi menggunakan SSID dan password yang telah ditentukan pada program.
Program akan terus mencoba melakukan koneksi hingga berhasil terhubung.
3. Web Server Dijalankan
Setelah memperoleh alamat IP, ESP32-CAM menjalankan Web Server pada port 80.
Server ini bertugas menerima setiap permintaan (request) dari browser.
4. Browser Membuka Halaman Utama
Saat pengguna memasukkan alamat IP ESP32-CAM pada browser, Web Server akan mengirimkan halaman HTML yang berisi tombol Take Photo.
Pada tahap ini, kamera belum mengambil gambar.
5. Pengguna Menekan Tombol Take Photo
Ketika tombol Take Photo ditekan, browser akan mengirimkan permintaan ke alamat /capture. Permintaan ini diterima oleh Web Server dan diteruskan ke fungsi pengambilan gambar.
6. Kamera Mengambil Gambar
ESP32-CAM akan menangkap satu frame dari kamera OV3660.
Frame tersebut kemudian dikompresi menjadi file JPEG sehingga ukurannya lebih kecil dan lebih cepat dikirim melalui jaringan WiFi.
7. Foto Ditampilkan di Browser
File JPEG yang telah dibuat langsung dikirim sebagai respons dari Web Server.
Browser kemudian menampilkan gambar tersebut sehingga pengguna dapat langsung melihat hasil foto tanpa harus menyimpannya terlebih dahulu ke media penyimpanan.
Troubleshooting
Apabila project belum berjalan sebagaimana mestinya, berikut beberapa masalah yang paling sering ditemui beserta solusinya.
1. ESP32-CAM Tidak Terdeteksi oleh Arduino IDE
Penyebab:
- Kabel USB hanya mendukung pengisian daya (charging only).
- Driver USB belum terpasang.
- Port COM belum dikenali oleh sistem.
Solusi:
- Gunakan kabel USB yang mendukung transfer data.
- Pastikan driver USB telah terinstal.
- Coba gunakan port USB lain pada komputer.
- Tutup dan buka kembali Arduino IDE.
2. Gagal Mengunggah Program
Penyebab:
- Board yang dipilih tidak sesuai.
- Port COM salah.
- Kabel USB bermasalah.
Solusi:
- Pilih AI Thinker ESP32-CAM pada menu Tools → Board.
- Pastikan memilih port yang benar.
- Ganti kabel USB jika diperlukan.
3. ESP32-CAM Tidak Terhubung ke WiFi
Penyebab:
- SSID atau password salah.
- Menggunakan jaringan WiFi 5 GHz.
- Sinyal WiFi terlalu lemah.
Solusi:
- Periksa kembali nama WiFi dan password.
- Gunakan jaringan 2,4 GHz.
- Dekatkan ESP32-CAM ke router WiFi.
4. Halaman Browser Tidak Bisa Dibuka
Penyebab:
- Salah memasukkan alamat IP.
- Komputer dan ESP32-CAM berada pada jaringan yang berbeda.
- Web Server belum berjalan.
Solusi:
- Pastikan alamat IP sesuai dengan yang tampil pada Serial Monitor.
- Hubungkan komputer atau smartphone ke jaringan WiFi yang sama.
- Restart ESP32-CAM, lalu coba kembali.
5. Foto Tidak Muncul
Penyebab:
- Kamera belum terpasang dengan benar.
- Konektor fleksibel kamera longgar.
- Inisialisasi kamera gagal.
Solusi:
- Lepaskan kemudian pasang kembali modul kamera.
- Pastikan kabel fleksibel terkunci dengan benar pada konektor.
- Tekan tombol RST pada ESP32-CAM untuk menginisialisasi ulang kamera.
6. Hasil Foto Buram
Penyebab:
- Lensa kamera belum fokus.
- Pencahayaan kurang.
- Objek terlalu dekat dengan kamera.
Solusi:
- Putar lensa kamera secara perlahan hingga fokus.
- Tambahkan pencahayaan pada objek.
- Atur jarak antara kamera dan objek agar sesuai dengan fokus lensa.
7. Gambar Terlambat Muncul
Penyebab:
- Koneksi WiFi kurang stabil.
- Resolusi gambar terlalu tinggi.
Solusi:
- Gunakan jaringan WiFi dengan sinyal yang lebih baik.
- Ubah nilai frame_size ke resolusi yang lebih rendah agar proses pengambilan dan pengiriman gambar menjadi lebih cepat.
0 Komentar