Store and share experiences about robocon, IoT, Embedded...
  • Home
  • Linux
  • Window
    • Latex
    • Matlab
  • Embedded programming
    • Jetson Tx1
    • Raspberry Pi
    • Raspberry Pico
  • Internet of things
    • HTTP+MySQL cho IoT
    • Websocket+Nodejs
    • ESP32
  • Electronics and robots
    • Robocon
    • Arduino
    • RISCV
    • FPGA
  • Network and devices
    • Basic CCNA
  • IoT Server
  • Q&A (Hỏi đáp)
  • About
No Result
View All Result
  • Home
  • Linux
  • Window
    • Latex
    • Matlab
  • Embedded programming
    • Jetson Tx1
    • Raspberry Pi
    • Raspberry Pico
  • Internet of things
    • HTTP+MySQL cho IoT
    • Websocket+Nodejs
    • ESP32
  • Electronics and robots
    • Robocon
    • Arduino
    • RISCV
    • FPGA
  • Network and devices
    • Basic CCNA
  • IoT Server
  • Q&A (Hỏi đáp)
  • About
No Result
View All Result
Store and share experiences about robocon, IoT, Embedded...
No Result
View All Result
Home Điện tử- Robot

ESP32-CAMERA: Chụp ảnh và hiển thị hỉnh ảnh lên trình duyệt

admin by admin
January 4, 2020
in Điện tử- Robot, ESP32
0 0
0

Trong quá trình tìm hiểu và lập trình ESP32, tôi có thấy một bài viết hướng dẫn khá hay, nên tôi dịch lại và giải thích một chút để bạn nào cần có thể tham khảo và trao đổi để làm những project hay hơn. Mã nguồn và nội dung sử dụng trong bài viết được tham khảo từ nguồn: https://RandomNerdTutorials.com/esp32-cam-take-photo-display-web-server/

Bài viết này chúng ta sẽ tìm hiểu cách sử dụng board ESP32 CAM để nhận lệnh “take photo” để chụp hình, sau đó lưu hình ảnh vào bộ nhớ SPIFFS, tiếp theo là hiển thị hình ảnh vừa mới chụp thông qua trình duyệt trên máy tính có kết nối đến board ESP32 này bằng giao thức http. 

Trước khi thực hiện nội dung bài hướng dẫn này, các bạn cần thực hiện các bước trong bài trước đây để có thể hiểu cách nạp code cũng như là kết nối phần cứng để lập trình trên arduino ide.

Các thành phần phần cứng cần thết:

+ ESP32-CAM với Camera OV2640

+ Dây nối

+ Module nạp chương trình USBtoTTL PL2303

Các bước thực hiện

1.Cài đặt các thư viện cần thiết cho ESP32

– Cài đặt Arduino IDE cho ESP32

– Cài đặt thư viện ESPAsyncWebServer. Các bạn hãy làm theo hướng dẫn sau để cài đặt thư viện này.

+ Trước tiên, do thư viện này không cài đặt trực tiếp từ Libraries manager nên chúng ta cần tải về từ Github theo link này.

+ Trên Arduino IDE thực hiện Sketch-> include->Library-> Add .ZIP libraries , sau đó chúng ta chọn đến thư viện mà chúng ta vừa download.

– Cài đặt thư viện AsyncTCP, các bạn tải theo link này từ Github và làm tương tự như trên.

2. Cách sử dụng thư viện và các hàm trong Javascript để tạo giao diện điều khiển và hiển thị

– Đầu tiên là chúng ta include đầy đủ các thư viện cần thiết của ESP32, webserver, SPIFFS,..vv

C++
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
#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

– Tiếp theo là thực hiện khai báo các tham số về mạng mà chúng ta sẽ kết nối

C++
1
2
3
4
5
WiFi.begin(ssid, password);
while (WiFi.status() != WL_CONNECTED) {
  delay(1000);
  Serial.println("Dang ket noi den wifi...");
}

– Thực hiện tạo object AsyncWebServer sử dụng Port 80

C++
1
AsyncWebServer server(80);

– Khởi tạo biến takeNewPhoto để thực hiện khi chúng ta ra lệnh “chup_hinh ” từ trình duyệt.

C++
1
boolean takeNewPhoto = false;

– Định nghĩa đường dẫn để lưu lại hình ảnh trong SPIFFS

C++
1
#define FILE_PHOTO "/photo.jpg"

– Bước tiếp theo là xây dựng webserver trên ESP32

PHP
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
const char index_html[] PROGMEM = R"rawliteral(
<!DOCTYPE HTML><html>
<head>
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <style>
    body { text-align:center; }
    .vert { margin-bottom: 10%; }
    .hori{ margin-bottom: 0%; }
  </style>
</head>
<body>
  <div id="container">
    <h2>ESP32-CAM Last Photo</h2>
    <p>It might take more than 5 seconds to capture a photo.</p>
    <p>
      <button onclick="rotatePhoto();">ROTATE</button>
      <button onclick="capturePhoto()">CAPTURE PHOTO</button>
      <button onclick="location.reload();">REFRESH PAGE</button>
    </p>
  </div>
  <div><img src="saved-photo" id="photo" width="70%"></div>
</body>
<script>
  var deg = 0;
  function capturePhoto() {
    var xhr = new XMLHttpRequest();
    xhr.open('GET', "/capture", true);
    xhr.send();
  }
  function rotatePhoto() {
    var img = document.getElementById("photo");
    deg += 90;
    if(isOdd(deg/90)){ document.getElementById("container").className = "vert"; }
    else{ document.getElementById("container").className = "hori"; }
    img.style.transform = "rotate(" + deg + "deg)";
  }
  function isOdd(n) { return Math.abs(n % 2) == 1; }
</script>
</html>)rawliteral";

Trong phần này các bạn cần có chút kiến thức về html, javascript. Chúng ta chỉ cần quan tâm một số câu lệnh quan trọng để các bạn có thể chỉnh sửa lại theo mục đích của mình.

JavaScript
1
2
3
<button onclick="rotatePhoto();">ROTATE</button>
<button onclick="capturePhoto()">CAPTURE PHOTO</button>
<button onclick="location.reload();">REFRESH PAGE</button>

Hiểu đơn giản là khi chúng ta mở trình duyệt, gõ địa chỉ IP của ESP32, Webserver sẽ trả lại trình duyệt của chúng ta các nội dung bao gồm mã html, javascript,…Lúc này, html sẽ tạo ra cho chúng ta giao diện mà chúng ta nhìn thấy, đồng thời javascript cung cấp cho chúng ta các hàm để thực hiện. Ví dụ, với các dòng lệnh trên, mỗi lần chúng ra click vào ROTATE, CAPTURE PHOTO, REFRESH PAGE trên trình duyệt webserver sẽ thực hiện các hàm có tên tương ứng rotatePhoto(),capturePhoto(), location.reload()

Các bạn có thể Việt hóa các câu lệnh trên để khi hiển thị trên màn hình trình duyệt là tiếng Việt.

Chúng ta tìm hiểu thêm một chút về các function này.

capturePhoto:

JavaScript
1
2
3
4
5
function capturePhoto() {
  var xhr = new XMLHttpRequest();
  xhr.open('GET', "/capture", true);
  xhr.send();
}

Với function này, khi chúng ta click vào capture trên trình duyệt, javascipt sẽ thực hiện gửi một GET request với đường dẫn /capture. Lúc này tại ESP32, webserver sẽ nhận bản tin request này và xử lý, nếu thấy trong đường dẫn có /capture, ESP32 sẽ thực hiện chức năng chụp hình. Phần này tôi sẽ nói cụ thể hơn ở dưới.

rotatePhoto:

JavaScript
1
2
3
4
5
6
7
8
function rotatePhoto() {
  var img = document.getElementById("photo");
  deg += 90;
  if(isOdd(deg/90)){ document.getElementById("container").className = "vert"; }
  else{ document.getElementById("container").className = "hori"; }
  img.style.transform = "rotate(" + deg + "deg)";
}
function isOdd(n) { return Math.abs(n % 2) == 1; }

Chức năng này được viết bằng javascript để thực hiện quay bức hình của mình trên trình duyệt, tôi ko chuyên về javascript nên ko phân tích chức năng này.

Phần xử lý tại server:

Như đã đề cập ở trên, khi server nhận được request nếu đường dẫn là kí tự “/”, thì sever sẽ phản hồi lại mã html để hiển thị giao diện cho web

JavaScript
1
server.on("/", HTTP_GET, [](AsyncWebServerRequest * request) {  request->send_P(200, "text/html", index_html);});

Khi server nhận được “/CAPTURE”, thì chương trình của chúng ta sẽ set biến takeNewPhoto thành true, sau đó thì trong loop(), chúng ta liên tục kiểm tra biến này, và thực hiện chụp hình khi takeNewPhoto==true

JavaScript
1
server.on("/capture", HTTP_GET, [](AsyncWebServerRequest * request) {  takeNewPhoto = true;  request->send_P(200, "text/plain", "Taking Photo");});

Trong trường hợp server nhận được “/saved-photo, chúng ta sẽ thực hiện gửi hình đã lưu trong bộ nhớ SPIFFS đến trình duyệt đã kết nối.

JavaScript
1
server.on("/saved-photo", HTTP_GET, [](AsyncWebServerRequest * request) {  request->send(SPIFFS, FILE_PHOTO, "image/jpg", false);});

3. Nạp mã nguồn cho ESP32 thực hiện chụp hình, lưu vào SPIFFS, khởi tạo Webserver.

Toàn bộ mã nguồn các bạn tải tại bài viết gốc của tác giả nhé!

Sử dụng mã nguồn cung cấp bên dưới để biên dịch trên arduino IDE và nạp vào ESP32, tham khảo bài viết trước để biết cách làm.

4. Kết quả

Mã nguồn và nội dung sử dụng trong bài viết được tham khảo từ nguồn: https://RandomNerdTutorials.com/esp32-cam-take-photo-display-web-server/

Số lượt xem: 1,333
Tags: chup hinh bang esp32esp32 cam webserveresp32-cam

Related Posts

[WOKWI tutorial 1]: Introduction- Học lập trình Arduino, ESP32/8266 miễn phí trên nền tảng WOKWI

[WOKWI tutorial 1]: Introduction- Học lập trình Arduino, ESP32/8266 miễn phí trên nền tảng WOKWI

March 2, 2023
117
Giám sát nhiệt độ thời gian thực với ESP32/8266 sử dụng MQTT – Hiển thị dữ liệu với MQTT over WebSocket

Giám sát nhiệt độ thời gian thực với ESP32/8266 sử dụng MQTT – Hiển thị dữ liệu với MQTT over WebSocket

September 1, 2021
609
Viết PHP server điều khiển ESP32-CAM chụp hình, hiển thị ảnh lên trình duyệt  qua internet

Viết PHP server điều khiển ESP32-CAM chụp hình, hiển thị ảnh lên trình duyệt qua internet

March 9, 2021
3k

Leave a Reply Cancel reply

Your email address will not be published. Required fields are marked *

Bài viết đọc nhiều

IoT Webserver- ESP8266/ESP32 gửi dữ liệu lên Cloud, hiển thị ra trình duyệt web với MySQL và PHP

IoT Webserver- ESP8266/ESP32 gửi dữ liệu lên Cloud, hiển thị ra trình duyệt web với MySQL và PHP

February 9, 2023
19.5k
Điều khiển ESP8266/ESP32 từ xa qua internet, không cần mở Port modem

Điều khiển ESP8266/ESP32 từ xa qua internet, không cần mở Port modem

November 7, 2019
12.1k
ESP32-CAMERA: Cài đặt môi trường Arduino IDE và nạp chương trình

ESP32-CAMERA: Cài đặt môi trường Arduino IDE và nạp chương trình

December 27, 2019
8.6k
IoT webserver- Gửi thông báo bằng email từ ESP8266 không dùng IFTTT

IoT webserver- Gửi thông báo bằng email từ ESP8266 không dùng IFTTT

November 19, 2020
6.4k
Store and share experiences about robocon, IoT, Embedded…

Lưu và chia sẻ những gì đã đọc, đã làm, đã nghiên cứu về vi điều khiển, hệ thống nhúng, internet of things, kiến trúc máy tính và hệ điều hành.

Liên hệ với quản trị viên

Chủ đề

  • Arduino
  • CCNA cơ bản
  • Cisco
  • Điện tử- Robot
  • ESP32
  • FPGA
  • HTTP+MySQL cho IoT
  • IoT Server
  • Jetson Tx1
  • Lập trình nhúng
  • Latex
  • Linux
  • Mạng và thiết bị mạng
  • Raspberry Pi
  • Raspberry Pico
  • RISCV
  • Robocon
  • Web of things
  • Websocket+Nodejs
  • Window
  • WordPress

Quản trị trang

  • Log in
  • Entries feed
  • Comments feed
  • WordPress.org

© 2019- 2023 luuvachiase.net - Phát triển và quản trị bởi Đỗ Ngọc Tuấn và Nguyễn Văn Tuấn ***Vui lòng ghi rõ nguồn khi trích dẫn bài viết từ Website này. DMCA.com Protection Status

No Result
View All Result
  • Trang chủ
  • Linux
  • Window
  • Lập trình nhúng
    • Jetson Tx1
    • Raspberry Pi
  • Web of things
    • HTTP+MySQL cho IoT
    • Websocket+Nodejs
  • Điện tử- Robot
    • Robocon
    • Arduino
    • RISCV
    • FPGA
  • Mạng và thiết bị mạng
    • CCNA cơ bản
  • IoT Server
  • Giới thiệu
  • Q&A (Hỏi đáp)

© 2019- 2023 luuvachiase.net - Phát triển và quản trị bởi Đỗ Ngọc Tuấn và Nguyễn Văn Tuấn ***Vui lòng ghi rõ nguồn khi trích dẫn bài viết từ Website này. DMCA.com Protection Status

Login to your account below

Forgotten Password?

Fill the forms bellow to register

All fields are required. Log In

Retrieve your password

Please enter your username or email address to reset your password.

Log In