ESP32-CAM merupakan modul mikrokontroler yang dilengkapi kamera dan dapat digunakan untuk mengambil serta mengirimkan gambar melalui jaringan internet. Salah satu cara yang mudah untuk menampilkan hasil tangkapan ESP32-CAM secara online adalah menggunakan layanan web hosting gratis InfinityFree. Pada tutorial ini, Anda akan belajar membuat sistem sederhana yang dapat menerima gambar dari ESP32-CAM, menyimpannya ke server, dan menampilkan hasil gambar melalui halaman galeri web yang dapat diakses dari mana saja menggunakan browser.
Apa yang Akan Dibuat?
Pada project ini akan dibuat sistem dengan fitur sebagai berikut:
- Mengambil gambar menggunakan ESP32-CAM
- Mengirim gambar ke server hosting melalui HTTP POST
- Menyimpan gambar secara otomatis ke folder server
- Dapat diakses melalui internet menggunakan domain gratis
Gambaran Sistem
Alur kerja sistem yang dibuat adalah sebagai berikut:
1. ESP32-CAM mengambil gambar.
2. Gambar dikirim ke file upload.php pada hosting InfinityFree.
3. Server menyimpan gambar ke folder uploads.
4. Halaman gallery.php membaca gambar yang tersimpan.
5. Pengguna dapat melihat hasil gambar melalui browser.
Diagram sistem:
ESP32-CAM
↓
upload.php
↓
uploads/
↓
gallery.php
Persiapan yang Perlu Dilakukan
1. Hardware
- ESP32-CAM AI Thinker
- USB to TTL Programmer
- Kabel jumper
- Koneksi Wi-Fi
2. Software
- Arduino IDE
- Akun InfinityFree
- Browser (Google Chrome atau Microsoft Edge)
- Visual Studio Code (opsional)
Langkah-langkah Menampilkan Gambar Menggunakan InfinityFree Web Hosting
Langkah 1 - Membuat Hosting Gratis InfinityFree
1. Buka akun hosting InfinityFree.
2. Buat hosting baru.
3. Pilih subdomain gratis.
4. Pada tutorial ini digunakan domain https://esp-project.rf.gd
5. Tunggu hingga domain aktif.
Langkah 2 - Membuka File Manager
1. Login ke dashboard InfinityFree.
2. Pilih File Manager.
3. Masuk ke folder htdocs
Folder tersebut merupakan root website yang akan diakses melalui domain.
Langkah 3 - Membuat Struktur Website
Buat struktur folder berikut:
Keterangan:
- index.html : halaman utama website
- upload.php : menerima file gambar
- gallery.php : menampilkan galeri gambar
- upload.html : halaman pengujian upload
- uploads : folder penyimpanan gambar
Langkah 4 - Membuat Halaman Utama
Buat file index.html kemudian isi dengan kode berikut:
<!DOCTYPE html>
<html>
<head>
<title>ESP32-CAM Gallery</title>
</head>
<body>
<h2>ESP32-CAM Photo Upload</h2>
<a href="gallery.php">Lihat Foto</a>
</body>
</html>
- Simpan file tersebut.
- Buka https://esp-project.rf.gd/index.html
Jika berhasil akan muncul halaman utama website.
Langkah 5 - Membuat Folder Penyimpanan Gambar
1. Buat folder uploads
2. Pastikan seluruh huruf menggunakan huruf kecil.
Folder ini digunakan untuk menyimpan gambar yang diunggah ke server.
Langkah 6 - Membuat Script Upload
Buat file upload.php kemudian isi dengan kode berikut:
<?php
$upload_dir = "uploads/";
if (!file_exists($upload_dir)) {
mkdir($upload_dir, 0755, true);
}
if(isset($_FILES["image"])){
$filename = date("Ymd_His") . ".jpg";
$target = $upload_dir . $filename;
if(move_uploaded_file($_FILES["image"]["tmp_name"], $target)){
echo "SUCCESS";
} else {
echo "FAILED";
}
} else {
echo "NO_IMAGE";
}
?>
Script ini bertugas menerima file gambar dan menyimpannya ke folder uploads.
Langkah 7 - Membuat Halaman Uji Upload
Buat file upload.html kemudian isi dengan kode berikut:
<!DOCTYPE html>
<html>
<body>
<form action="upload.php" method="post" enctype="multipart/form-data">
<input type="file" name="image">
<input type="submit" value="Upload">
</form>
</body>
</html>
- Buka halaman berikut https://esp-project.rf.gd/upload.html
- Pilih gambar kemudian klik Upload.
- Jika berhasil akan muncul pesan SUCCESS
Langkah 8 - Membuat Halaman Galeri
Buat file gallery.php kemudian isi dengan kode berikut:
<?php
$files = glob("uploads/*.jpg");
echo "<h2>Galeri Foto ESP32-CAM</h2>";
foreach(array_reverse($files) as $file){
echo "<div style='margin:20px'>";
echo "<img src='$file' width='300'><br>";
echo basename($file);
echo "</div>";
}
?>
Script ini akan membaca seluruh file JPG yang terdapat pada folder uploads dan menampilkannya ke halaman web.
Langkah 9 - Menguji Galeri
- Setelah upload berhasil dilakukan, buka halaman https://esp-project.rf.gd/gallery.php
- Jika berhasil, gambar yang telah diunggah akan tampil pada halaman galeri.
Langkah 10 - Menghubungkan ESP32-CAM
Setelah website berhasil diuji, langkah berikutnya adalah memprogram ESP32-CAM agar dapat mengirim gambar secara otomatis ke https://esp-project.rf.gd/upload.php. Ketika ESP32-CAM mengambil gambar dan mengirimkannya ke server, gambar akan tersimpan pada folder uploads dan otomatis dapat dilihat melalui halaman galeri.
Demonstrasi Hasil Akhir
Pada tahap akhir sistem berhasil berjalan dengan baik. Hasil pengujian menunjukkan bahwa:
- File gambar berhasil diunggah ke server InfinityFree.
- File tersimpan pada folder uploads.
- Halaman gallery.php berhasil menampilkan gambar yang tersimpan.
- Website dapat diakses melalui internet menggunakan domain gratis.
URL galeri hasil project https://esp-project.rf.gd/gallery.php. Pengguna dapat membuka URL tersebut melalui smartphone, laptop, maupun tablet untuk melihat hasil tangkapan kamera secara online.
0 Komentar