Tutorial ESP32-CAM : Streaming Online dengan Ngrok dan Blynk

Indobot Update

Tutorial ESP32-CAM
Tutorial ESP32-CAM : Membuat Streaming Online Anytime dan Anywhere dengan Ngrok dan Blynk
[lwptoc numeration=”none” title=”Daftar Isi”]

Halo Fanbot. Sedang ada project apa hari ini? Kali ini minbot ingin berbagi cara untuk melakukan streaming online dengan menggunakan ESP32-CAM. Jika biasanya kita menggunakan streaming dengan jaringan lokal (menggunakan jaringan wifi). Pada project kali ini kita akan menggunakan koneksi internet. Sehingga kita dapat melihat hasil video secara langsung di smartphone kapanpun dan di manapun. Penasaran bagaimana membuatnya? Yuk kita simak.

Tutorial ESP32-CAM : Streaming Online dengan Ngrok dan Blynk

Streaming Online (Anytime & Anywhere) dengan Ngrok dan Blynk

Alat dan Bahan

Alat dan bahan untuk project ini adalah sebagai berikut.

  1. Software Arduino IDE
  2. ESP32-CAM 1
  3. FTDI FT232RL 1
  4. Kabel jumper Secukupnya

 

Rangkaian

Susun komponen di atas menjadi rangkaian berikut.

Program

Program yang digunakan untuk project kali ini dapat menggunakan Library. Berikut caranya.

  • Download File berikut ini (KLIK DI SINI https://github.com/techiesms/esp32-cam-mjpeg ).
  • Unzip (Ekstrak) file yang ada di dalamnya, kemudian masuk ke folder “esp32_camera_mjpeg” pilih yang berformat .ino. Seperti ini programnya.

 

 

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

#define CAMERA_MODEL_AI_THINKER

#include "camera_pins.h"


#include "home_wifi_multi.h"

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);
  //while (!Serial);            //wait for serial connection.

  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(SSID1, PWD1);
  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();
}

  • Jika sudah terbuka pada Arduino IDE, buatlah tab baru (new tab) dengan nama “home_wifi_multi.h”. Kemudian isikan seperti berikut.
 
#define SSID1 "replace with your wifi ssid"
#define PWD1 "replace your wifi password"
  • Masukkan nama wifi pada SSID1 dan password pada PWD1 kemudian pilih save.

 

baca juga: Tutorial ESP32-CAM: Smart Bell dengan Kamera Otomatis untuk Mengetahui Siapa Tamu Anda

 

Jika sudah,  maka program sudah dapat dikirimkan ke ESP32-CAM.

Upload program di atas ke ESP32-CAM. Jangan lupa untuk menghubungkan dulu GPIO 0 ke GND agar program dapat ter-upload dengan baik.

Jika sketch sudah terkirim secara keseluruhan, maka cabutlah GPIO 0 dari GND untuk memasukkan pada Running Mode dari ESP32-CAM. Selanjutnya, buka serial monitor untuk melihat hasilnya.

Setting Link dari Ngrok

Ngrok di sini berguna untuk mengubah link dari jaringan lokal (wifi) menjadi link untuk sistem IoT dengan menggunakan Internet. Berikut ini adalah cara untuk membuatnya.

  • Sign Up untuk membuat akun baru. Isi nama, email, dan password (terserah kita).

  • Jika sudah, maka akan dimunculkan tampilan untuk user Ngrok. Klik download Ngrok untuk mendapatkan file .exe. File ini digunakan untuk aplikasi pembuat link nantinya.

  • Akan muncul tampilan seperti di bawah. Tuliskan “ngrok authtoken” ditambahkan Authtoken yang sudah didapatkan (Dapat Copy paste untuk mempermudah penulisan token). Kemudian klik enter.

  • Selanjutnya, masukkan “ngrok http” dan tambahkan link http untuk video streaming.

  • Jika sudah, maka akan dimunculkan tampilan seperti di bawah. Copy pada bagian . Paste pada browser. Kita sudah dapat melakukan streaming secara online di manapun dan kapanpun.

Baca Juga : Kontrol Servo IoT BLYNK

Setting Blynk

Untuk memasukkannya ke aplikasi Blynk, kita hanya perlu setting seperti berikut.

  • Buka aplikasi Blynk. Pilih New Project.
  • Berikan nama project dan pada Choose Device, pilih ESP32 Dev Board. Kemudian klik Create.

  • Tambahkan Widget Box. Pilih Video Streaming.

  • Klik widget Video Streaming. Kemudian masukkan link hasil dari Ngrok pada Link Address.

  • Jika sudah, kalian dapat melakukan pemantauan dengan kamera ini secara online.

 

baca juga: Project ESP32-CAM IoT : Mengkoneksikan ESP32-CAM dengan Aplikasi Telegram

 

Bagaimana? tertarik untuk membuatnya? Kuy kita langsung buat aja. Agar bisa lebih memahami project-project ESP32-CAM.

Mau belajar elektronika dasar? Arduino? atau Internet of Things? Ikuti kursus online Indobot Academy!

 

Ingin Tahu Program Kami Lebih Lanjut?

Silahkan isi Formulir Dibawah Ini untuk Diskusi dengan Tim Indobot Academy.

Baca Juga

Bagikan:

Tinggalkan komentar

whatsapp whatsapp