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

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

Bài viết này sẽ hướng dẫn các bạn cách upload hình ảnh chụp được từ ESP32-CAM lên server internet, sau đó hiển thị lên trình duyệt. Đặc biệt việc chụp hình sẽ được chúng ta điều khiển trực tiếp từ giao diện WEB, ESP32-CAM chỉ thực hiện chụp khi có lệnh

admin by admin
March 9, 2021
in Điện tử- Robot, ESP32
0 0
1

Sau bài viết “Điều khiển chụp hình ESP32-CAMERA qua ineternet, hiển thị hình ảnh lên trình duyệt” , mình chưa có thời gian viết tiếp về server điều khiển hoạt động thế nào. Hôm nay mình sẽ tiếp tục chủ đề này, hi vọng có thể giúp các bạn hiểu và tự xây dựng hệ thống của mình từ local cho đến internet. Để hiểu được toàn bộ mã nguồn, các bạn cần có kiến thức cơ bản về HTTP, biết cơ bản HTML và PHP.

Toàn bộ quá trình hoạt động của hệ thống được mô tả trong sơ đồ dưới đây:

1- Đầu tiên là PC hoặc điện thoại thông qua giao diện WEB, điều khiển tham số {“led”:”on”} của file test.json trên server.

2- Sau đó, ESP32 sẽ định kì gửi POST REQUEST đọc file test.json này (2), bình thường thì ESP đọc được {“led”:”off”},

3- File test.json đã được thay đổi sau khi PC điều khiển. ESP đọc được {“led”:”on”}.

4- Sau đó, tại ESP32 thực hiện đọc và so sánh “led” có bằng “on” không, nếu thỏa mãn thì thực hiện bước tiếp theo.

5- Take photo và upload lên server. Tại server, sau khi có bản tin upload image từ esp32, nó sẽ lưu image này vào thư mục image_upload.

6- Bước cuối cùng là PC hoặc điện thoại sẽ load image này về trình duyệt và hiển thị ra màn hình.

Toàn bộ quá trình cứ thế lặp đi lặp lại theo sự điều khiển của người dùng. Hy vọng đến đây các bạn hiểu được cơ bản vấn đề. Bây giờ chúng ta sẽ đi viết chương trình để thực hiện 6 công việc nêu trên.

Để hệ thống trên hoạt động chúng ta đi viết các file php như sau:

1. Viết file esp32_cam_upload_control.php nhận hình ảnh từ ESP32-CAM

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
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <!-- <meta http-equiv="refresh" content="3"> -->
    <title>He Thong Dieu Khien</title>
    <link rel = "stylesheet" type="text/css" href="style.css"/>
    
  <script src="js/jquery.min.js"></script>
  <script src="js/jquery.js"></script>
  <script src="js/bootstrap.min.js"></script>
  <script src="js/ajax.js"></script>
  <script src="https://code.highcharts.com/highcharts.js"></script>
 
  
</head>
<body  align="center">
<br />
<header>
      
         <h2> <span style="color:#00F">HỆ THỐNG GIÁM SÁT QUA INTERNET SỬ DỤNG ESP32-CAMERA </span><br />        
      </h2>
      </header>
  
   <?php
 
  //thực hiện ghi giá trị led1=on vào test.json nếu như có bản tin POST của user:abcd_ef
  // gửi đến chính file php này.
   $jsonString = file_get_contents("test/test.json");
   $data = json_decode($jsonString, true);
  $user='abcd_ef';
if(isset($_POST['LED1_ON']))
{
if($user==$_POST['LED1_ON'])
{
$data['led1'] = "on";
}
}
  
$newJsonString = json_encode($data);
file_put_contents("test/test.json", $newJsonString);
 
   ?>    
<form action="esp32_cam_upload_control.php" method="post">  
  
<table border="2" width=100% height="400px" align="center">
<tr class="indam">
            <td bgcolor="#FFCC00">HÌNH ẢNH</td>
            <td bgcolor="#FFCC00">TRẠNG THÁI</td>
            <td bgcolor="#FFCC00"> ĐIỀU KHIỂN</td>
            
        </tr>
        <tr>
      
         <td><img id="myImage1" src="camera_upload/upload_esp32.jpg" width="500" height="400"></td>
            <td id="hh" >
             Hello!
            </td>
            <td> <p>
            <?php
$user='abcd_ef';
             echo "   <button style='height:60px; width:60px;' type='submit'  name='LED1_ON' value='$user'>TAKE PHOTO</button> ";
             echo "   <button style='height:60px; width:60px;' type='button' onclick='myFunction_reload()'>RELOAD</button> ";
            
?>
</p>
                </td>
                 <td    id="ketqua" > </td>
    
        </tr>      
    </table>  
</form>
 
<?php
 
// đọc file test.json để kiểm tra trạng thái điều khiển
   $jsonString = file_get_contents("test/test.json");
$data = json_decode($jsonString, true);
if ($data['led1'] == 'on')
{
echo "   <script>";
   echo "  document.getElementById('hh').innerHTML = 'TAKING PHOTO' ";
   echo "    </script> ";
}
?>
<script >
function myFunction_reload()
{
window.location.reload();
}
var t=setTimeout("auto_update_stt()",1000);
function auto_update_stt()
{
    // alert("Hbyeee");
     var t=setTimeout("auto_update_stt()",1000);
$.ajax({
url:"sync_allpages.php",
type:"post",
data:"val_button="+1,
async:true,
success:function(kq){
    
$("#ketqua").html(kq);
// alert("OK");
}
});
}
</script>

Trong mã nguồn trên các bạn chú ý cho mình một số điểm:

+ Đây là file cung cấp giao diện điều khiển cũng như hiển thị cho hình ảnh nhận được từ ESP, các bạn có thể tùy biến lại giao diện theo ý mình.

+ Phần này dùng một kĩ thuật gọi là AJAX, để xử lý bản tin POST REQUEST. Vì vậy trang web sẽ định kì 1s reload lại trạng thái của server cho việc hiển thị “TAKING PHOTO” hoặc “DONE” mà không cần reload toàn bộ trang.

+ Có một đoạn script nhỏ, đó là

var t=setTimeout(“auto_update_stt()”,1000);

Ý nghĩa của script này là cứ sau 1s thì thực hiện function: auto_update_stt()

2. File sync_allpages.php

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
<?php
if(isset($_POST["val_button"]))
{
echo"";
} // end if isset
// ################## Đọc file json để cập nhật stt ##################################
$jsonString = file_get_contents("test/test.json");
$data = json_decode($jsonString, true);
if ($data['led1'] == 'on')
{
echo "   <script>";
           echo "  document.getElementById('hh').innerHTML = 'LOADING NEW' ";
           echo "    </script> ";
}
  
if ($data['led1'] == 'off')
{
echo "   <script>";
    echo "  document.getElementById('hh').innerHTML = 'DONE!' ";
echo "    </script> ";
}
  
?>

Mục đích chính của file php trên là thực hiện kiểm tra giá trị của led1 =on hay off để thực hiện hiển thị lên giao diện web trạng thái đk của người dùng, việc này được thực hiện định kì 1s như đã giải thích ở trên

3. camera_upload.php

PHP
1
2
3
4
5
6
7
8
9
10
11
12
13
14
<?php
 
$jsonString = file_get_contents("test/test.json");
$data = json_decode($jsonString, true);
$received = file_get_contents('php://input');
$fileToWrite = "camera_upload/upload_esp32.jpg";
file_put_contents($fileToWrite, $received);
 
$data['led1'] = "off";
$newJsonString = json_encode($data);
file_put_contents("test/test.json", $newJsonString);
?>

File này rất quan trọng, nó nhận dữ liệu hình ảnh của ESP gửi lên, sau đó ghi dữ liệu này vào file upload_esp32.jpg, chính vì vậy mỗi khi có một hình ảnh mới thì server thực hiện ghi đề lên ảnh cũ, và chúng ta sẽ luôn load ra hình ảnh mới nhất được ESP đưa lên server. Sau khi lưu xong, thực hiện gán biến led1=off để báo cho giao diện hiển thị trạng thái “done”

Như vậy, chúng ta đã có tất cả các file PHP cần thiết, việc cuối cùng là tạo thêm các folder như dưới đây để lưu hình ảnh, lưu file test.json và các file cần thiết của javascript.

Trong thư mục test, các bạn tạo thêm 1 file là: test.json có nội dung là {“led1″:”on”} để có thể thao tác điều khiển ESP32 qua internet.

Trên đây là một số bước cơ bản, để có thể tạo ra một server bằng PHP cho phép chúng ta điều khiển chụp hình của ESP32 từ internet. Tác giả chỉ viết tóm tắt nên nếu có chỗ nào chưa hiểu các bạn hãy để lại comment phía dưới. Thanks!

Link test các mã nguồn đã nêu trên của tác giả: Link 

 

 

Số lượt xem: 1,909
Tags: điều khiển esp32 cam qua internetesp 32 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
70
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
497
ESP32-CAM: Hướng dẫn khắc phục lỗi kết nối Wifi kém, tốc độ chậm,…

ESP32-CAM: Hướng dẫn khắc phục lỗi kết nối Wifi kém, tốc độ chậm,…

February 16, 2020
1.7k

Comments 1

  1. Pingback: Học lập trình ESP32-CAM – My BLOG

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
17.6k
Đ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
10.7k
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
7.3k
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
5.7k
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