ESP32-CAM merupakan salah satu board IoT populer yang sudah dilengkapi kamera dan modul Wi-Fi sehingga dapat digunakan untuk berbagai proyek monitoring berbasis internet. Salah satu proyek yang cukup menarik adalah membuat kamera streaming yang dapat digerakkan dari browser. Pada tutorial ini, kita akan membuat ESP32-CAM Web Camera dengan Kontrol Servo 1 Axis menggunakan ESP32-CAM-MB, kamera OV3660, dan motor servo SG90. Berbeda dengan proyek Pan-Tilt yang menggunakan dua servo, proyek ini hanya menggunakan satu motor servo sehingga kamera dapat bergerak ke kiri dan kanan (Pan) melalui tombol pada halaman web. Ketika halaman web dibuka, pengguna dapat melihat video streaming secara real-time sekaligus mengontrol arah kamera langsung dari browser tanpa aplikasi tambahan.
Apa yang Akan Dibuat?
Pada proyek ini ESP32-CAM akan menampilkan live video streaming melalui browser, membuat halaman web otomatis, menghubungkan ESP32-CAM ke jaringan Wi-Fi, mengontrol motor servo SG90 dari browser, menggerakkan kamera ke kiri dan kanan, serta menampilkan video secara real-time.
Perangkat Keras yang Dibutuhkan
- 1x ESP32-CAM-MB
- 1x ESP32-CAM AI Thinker dengan kamera OV3660
- 1x Motor Servo SG90
- Kabel jumper secukupnya
- Kabel USB Type-C atau Micro USB (sesuai ESP32-CAM-MB)
Koneksi Servo SG90 ke ESP32-CAM
1. Kabel Coklat / Hitam (GND)
Servo GND → ESP32-CAM GND
2. Kabel Merah (VCC)
Servo VCC → ESP32-CAM 5V
3. Kabel Orange / Kuning (Signal)
Servo Signal → GPIO 14
Instalasi Arduino IDE dan Library Pendukung
Sebelum memulai pemrograman ESP32, pastikan Arduino IDE beserta board dan library yang diperlukan telah terinstal dengan benar.
1. Instal dan Konfigurasi Board ESP32
- Pastikan Arduino IDE sudah terpasang pada komputer.
- Buka menu File → Preferences
- Pada kolom Additional Boards Manager URLs, tambahkan URL berikut:
https://raw.githubusercontent.com/espressif/arduino-esp32/gh-pages/package_esp32_index.json
- Klik OK untuk menyimpan pengaturan.
- Selanjutnya buka menu Tools → Board → Boards Manager
- Pada kolom pencarian, ketik esp32
- Pilih ESP32 by Espressif Systems, kemudian klik Install.
- Tunggu hingga proses instalasi selesai.
2. Instal Library yang Dibutuhkan
- Buka menu Sketch → Include Library → Manage Libraries
- Pada kolom pencarian Library Manager, ketik ESP32Servo
- Pilih library ESP32Servo yang muncul pada daftar pencarian.
- Klik Install dan tunggu hingga proses instalasi selesai.
- Setelah library berhasil terpasang, Arduino IDE siap digunakan untuk mengembangkan proyek yang memanfaatkan kontrol servo pada ESP32.
Program Lengkap ESP32-CAM Web Camera 1 Axis
Salin seluruh kode berikut ke Arduino IDE.
#include "esp_camera.h"
#include <WiFi.h>
#include "esp_timer.h"
#include "img_converters.h"
#include "Arduino.h"
#include "fb_gfx.h"
#include "soc/soc.h"
#include "soc/rtc_cntl_reg.h"
#include "esp_http_server.h"
#include <ESP32Servo.h>
const char* ssid = "NAMA_WIFI";
const char* password = "PASSWORD_WIFI";
#define PART_BOUNDARY "123456789000000000000987654321"
#define CAMERA_MODEL_AI_THINKER
#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
#define SERVO_PIN 14
Servo servoPan;
int servoPos = 90;
static const char* _STREAM_CONTENT_TYPE =
"multipart/x-mixed-replace;boundary=" PART_BOUNDARY;
static const char* _STREAM_BOUNDARY =
"\r\n--" PART_BOUNDARY "\r\n";
static const char* _STREAM_PART =
"Content-Type: image/jpeg\r\nContent-Length: %u\r\n\r\n";
httpd_handle_t camera_httpd = NULL;
httpd_handle_t stream_httpd = NULL;
static const char PROGMEM INDEX_HTML[] = R"rawliteral(
<html>
<head>
<title>ESP32-CAM Servo Control</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
body{
font-family:Arial;
text-align:center;
padding-top:20px;
}
.button{
background:#2f4468;
color:white;
border:none;
padding:15px 25px;
font-size:18px;
margin:10px;
cursor:pointer;
}
img{
width:auto;
max-width:100%;
height:auto;
}
</style>
</head>
<body>
<h2>ESP32-CAM Servo Control</h2>
<img src="" id="photo">
<br><br>
<button class="button"
onclick="sendCmd('left')">
LEFT
</button>
<button class="button"
onclick="sendCmd('center')">
CENTER
</button>
<button class="button"
onclick="sendCmd('right')">
RIGHT
</button>
<script>
function sendCmd(x)
{
var xhr = new XMLHttpRequest();
xhr.open("GET","/action?go="+x,true);
xhr.send();
}
window.onload =
document.getElementById("photo").src =
window.location.href.slice(0,-1)+":81/stream";
</script>
</body>
</html>
)rawliteral";
Melanjutkan Kode
Tambahkan bagian berikut setelah kode di atas.
static esp_err_t index_handler(httpd_req_t *req)
{
httpd_resp_set_type(req, "text/html");
return httpd_resp_send(req,
(const char *)INDEX_HTML,
strlen(INDEX_HTML));
}
Fungsi Kontrol Servo
static esp_err_t cmd_handler(httpd_req_t *req)
{
char* buf;
size_t buf_len;
char variable[32] = {0};
buf_len = httpd_req_get_url_query_len(req)+1;
if(buf_len > 1)
{
buf = (char*)malloc(buf_len);
if(httpd_req_get_url_query_str(req, buf, buf_len)==ESP_OK)
{
httpd_query_key_value(buf,
"go",
variable,
sizeof(variable));
}
free(buf);
}
if(!strcmp(variable,"left"))
{
servoPos += 10;
if(servoPos > 180)
servoPos = 180;
servoPan.write(servoPos);
}
else if(!strcmp(variable,"right"))
{
servoPos -= 10;
if(servoPos < 0)
servoPos = 0;
servoPan.write(servoPos);
}
else if(!strcmp(variable,"center"))
{
servoPos = 90;
servoPan.write(servoPos);
}
httpd_resp_set_hdr(req,
"Access-Control-Allow-Origin",
"*");
return httpd_resp_send(req,NULL,0);
}
Fungsi Streaming Kamera
Untuk bagian stream_handler(), startCameraServer(), dan konfigurasi kamera, gunakan bagian yang sama seperti program asli Pan-Tilt karena tidak ada perubahan pada fungsi streaming kameranya. Perbedaannya hanya pada bagian servo dan halaman web.
Konfigurasi Servo
Di dalam fungsi setup() tambahkan:
servoPan.setPeriodHertz(50);
servoPan.attach(SERVO_PIN,1000,2000);
servoPan.write(servoPos);
Penjelasan:
- 50 Hz adalah frekuensi standar servo SG90.
- GPIO 14 digunakan sebagai pin kontrol servo.
- Posisi awal servo berada pada 90 derajat.
Mengubah SSID dan Password Wi-Fi
Cari bagian berikut:
const char* ssid = "NAMA_WIFI";
const char* password = "PASSWORD_WIFI";
Ganti dengan data Wi-Fi Anda.
Contoh:
const char* ssid = "Rumahku";
const char* password = "12345678";
Upload Program ke ESP32-CAM-MB
Karena menggunakan ESP32-CAM-MB, proses upload jauh lebih mudah.
1. Pilih Board AI Thinker ESP32-CAM
2. Pengaturan Upload
Flash Mode : QIO
Flash Frequency : 40MHz
Partition Scheme : Huge APP
PSRAM : Enabled
3. Klik Upload
Tunggu hingga proses selesai.
Membuka Live Streaming
Setelah upload selesai:
1. Buka Serial Monitor.
2. Atur baudrate 115200
3. Tekan tombol RESET pada ESP32-CAM.
4. Tunggu sampai muncul alamat IP.
Contoh:
WiFi connected
Camera Stream Ready!
Go to: http://192.168.1.10
Mengakses Web Server
1. Buka browser kemudian ketik http://192.168.1.10
2. Akan muncul tampilan video streaming, tombol LEFT, tombol CENTER, dan tombol RIGHT.
Cara Kerja Tombol
1. LEFT
Servo bergerak ke kiri 10°
2. RIGHT
Servo bergerak ke kanan 10°
3. CENTER
Servo kembali ke posisi 90°
Hasil Akhir Proyek
Setelah semua langkah selesai, ESP32-CAM menampilkan video secara real-time, kamera dapat diputar menggunakan servo SG90, kontrol dilakukan langsung dari browser, tidak memerlukan aplikasi tambahan, dan dapat diakses dari smartphone maupun laptop dalam jaringan Wi-Fi yang sama.
0 Komentar