使用ESP32-CAM将图像发布到本地或云服务器-PHP(Photo Manager)

释放双眼,带上耳机,听听看~!

这篇教程将带领大家去了解如何使用 ESP32-CAM 板和 Arduino IDE 发出 HTTP POST 请求,以将照片发送到服务器。我们将展示如何将 JPG/JPEG 图像发布到本地服务器(Raspberry Pi LAMP 服务器)或云服务器(您可以从任何地方访问)。照片将显示在图库中,您可以在其中查看或删除照片。要将图像保存在服务器中并创建图库,我们将使用 PHP 脚本。

ESP32-CAM-Camera-Board-Send-Post-Images-to-Local-Cloud-Server-HTTP-POST-Arduino-IDE

要构建此项目,您需要执行以下步骤。按照LAMP Server或Hosting Server的说明进行操作,这取决于您要在本地还是从任何地方访问照片。

  1. 托管您的PHP应用程序
    1. Raspberry Pi LAMP服务器(本地访问)
    2. 托管服务器(可从任何地方访问)
  2. PHP脚本可在服务器中保存和显示照片
    1. Raspberry Pi LAMP服务器(本地访问)
    2. 托管服务器,比如阿里云腾讯云之类的都可以,可以申请免费试用(可从任何地方访问)
  3. 使用Arduino IDE对ESP32-CAM进行编程
  4. 测试和最终演示

1.托管您的PHP程序

该项目的目标是拥有一个本地或云服务器来存储和访问您的ESP32-CAM照片。

1. Raspberry Pi本地服务器:

使用Raspberry Pi LAMP服务器,您可以在本地访问图像(如下图所示),这个环节需要有在树莓派搭建LAMP服务器的基础,这部分本篇教程不详细讲,可以参考这篇文章:点击查看

  • 您可以在Raspberry Pi上运行LAMP(Linux,Apache,MySQL,PHP)服务器,以访问本地网络中的数据。Raspberry Pi LAMP服务器:用于在本地访问映像的本地Linux服务器。

 

2.云服务器(阿里云解决方案)

您还可以通过访问您自己的服务器+域,在世界任何地方可视化ESP32-CAM照片。以下是有关其工作原理的概述:

ESP32-CAM-Camera-Board-Send-Photo-Image-to-Cloud-Server-PHP-Script-Arduino

 

建议购买学生主机,比较便宜,然后再购买域名,可以买最便宜的,当然不买也行。这是这个项目的有趣之处:你可以访问您的域名 (http://example.com) 并查看您的 ESP32-CAM 照片。如果不知道怎么操作的,可以联系作者指导购买和部署!

HTTP POST请求方法

超文本传输​​协议 (HTTP) 用作客户端和服务器之间的请求-响应协议。下面是一个例子:

  • ESP32(客户端)向 Server(例如:本地 RPi Lamp Server 或 example.com)提交 HTTP 请求;
  • 服务器向 ESP32(客户端)返回响应;

HTTP POST用于将数据发送到服务器以创建/更新资源。例如,将图像发布到服务器。

POST /upload.php HTTP/1.1
Host: example.com
Content-Type: image/jpeg

2.1. 准备您的.php文件和上传文件夹(Raspberry Pi LAMP 服务器)

本部分为您的 Raspberry Pi LAMP 服务器准备.php文件和上传文件夹。如果您使用自己的服务器 + 域名,请跳到下一部分。

让Raspberry Pi 运行 Apache 和 PHP,在 Raspberry Pi 板终端窗口中导航到/var/www/html/目录:

pi@raspberrypi:~ $ cd /var/www/html/

创建一个名为uploads的新文件夹:

pi@raspberrypi:/var/www/html $ mkdir uploads
pi@raspberrypi:/var/www/html $ ls
uploads

目前,/var/www/html归 root 所有,使用下一个命令更改为 pi 用户并授予其所有权限,以便您稍后可以使用 PHP 脚本保存照片。

sudo chown -R pi:pi /var/www/html
chmod -R 777 /var/www/html/

最后,新建一个upload.php文件:

pi@raspberrypi:/var/www/html $ nano upload.php

这个 PHP 脚本负责从 ESP32-CAM 接收传入的图像,用时间戳重命名图像并将它们存储在上传文件夹中。编辑新创建的文件 ( upload.php ) 并复制以下代码段:

<?php
// Code Based on this example: w3schools.com/php/php_file_upload.asp

$target_dir = "uploads/";
$datum = mktime(date('H')+0, date('i'), date('s'), date('m'), date('d'), date('y'));
$target_file = $target_dir . date('Y.m.d_H:i:s_', $datum) . basename($_FILES["imageFile"]["name"]);
$uploadOk = 1;
$imageFileType = strtolower(pathinfo($target_file,PATHINFO_EXTENSION));

// Check if image file is a actual image or fake image
if(isset($_POST["submit"])) {
  $check = getimagesize($_FILES["imageFile"]["tmp_name"]);
  if($check !== false) {
    echo "File is an image - " . $check["mime"] . ".";
    $uploadOk = 1;
  }
  else {
    echo "File is not an image.";
    $uploadOk = 0;
  }
}

// Check if file already exists
if (file_exists($target_file)) {
  echo "Sorry, file already exists.";
  $uploadOk = 0;
}

// Check file size
if ($_FILES["imageFile"]["size"] > 500000) {
  echo "Sorry, your file is too large.";
  $uploadOk = 0;
}

// Allow certain file formats
if($imageFileType != "jpg" && $imageFileType != "png" && $imageFileType != "jpeg"
&& $imageFileType != "gif" ) {
  echo "Sorry, only JPG, JPEG, PNG & GIF files are allowed.";
  $uploadOk = 0;
}

// Check if $uploadOk is set to 0 by an error
if ($uploadOk == 0) {
  echo "Sorry, your file was not uploaded.";
// if everything is ok, try to upload file
}
else {
  if (move_uploaded_file($_FILES["imageFile"]["tmp_name"], $target_file)) {
    echo "The file ". basename( $_FILES["imageFile"]["name"]). " has been uploaded.";
  }
  else {
    echo "Sorry, there was an error uploading your file.";
  }
}
?>

 

您的upload.php文件应如下所示。保存文件并退出(Ctrl+X、Y 和 Enter 键):

upload-php-script-save-images-to-server-ESP32-CAM

然后,创建一个新的gallery.php文件:

pi@raspberrypi:/var/www/html $ nano gallery.php

编辑新创建的文件 ( gallery.php ) 并复制以下代码段:

<!-- 
   Permission is hereby granted, free of charge, to any person obtaining a copy
  of this software and associated documentation files.
  
  The above copyright notice and this permission notice shall be included in all
  copies or substantial portions of the Software.
-->
<!DOCTYPE html>
<html>
<head>
  <title>ESP32-CAM Photo Gallery</title>
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <style>
    .flex-container {
      display: flex;
      flex-wrap: wrap;
    }
    .flex-container > div {
      text-align: center;
      margin: 10px;
    }
  </style>
</head><body>
<h2>ESP32-CAM Photo Gallery</h2>
<?php
  // Image extensions
  $image_extensions = array("png","jpg","jpeg","gif");

  // Check delete HTTP GET request - remove images
  if(isset($_GET["delete"])){
    $imageFileType = strtolower(pathinfo($_GET["delete"],PATHINFO_EXTENSION));
    if (file_exists($_GET["delete"]) && ($imageFileType == "jpg" ||  $imageFileType == "png" ||  $imageFileType == "jpeg") ) {
      echo "File found and deleted: " .  $_GET["delete"];
      unlink($_GET["delete"]);
    }
    else {
      echo 'File not found - <a href="gallery.php">refresh</a>';
    }
  }
  // Target directory
  $dir = 'uploads/';
  if (is_dir($dir)){
    echo '<div class="flex-container">';
    $count = 1;
    $files = scandir($dir);
    rsort($files);
    foreach ($files as $file) {
      if ($file != '.' && $file != '..') {?>
        <div>
          <p><a href="gallery.php?delete=<?php echo $dir . $file; ?>">Delete file</a> - <?php echo $file; ?></p>
          <a href="<?php echo $dir . $file; ?>">
            <img src="<?php echo $dir . $file; ?>" style="width: 350px;" alt="" title=""/>
          </a>
       </div>
<?php
       $count++;
      }
    }
  }
  if($count==1) { echo "<p>No images found</p>"; } 
?>
  </div>
</body>
</html>

 

这个 PHP 脚本负责在图库上显示图像。您的gallery.php文件应如下所示。保存文件并退出(Ctrl+X、Y 和 Enter 键):

gallery-php-script-save-images-to-server-ESP32-CAM

2.2. 准备您的.php文件和上传文件夹(云服务)

如果您更喜欢远程运行服务器并从任何地方访问照片,您需要一个托管帐户,这里建议采用阿里云或腾讯云的学生主机,比较便宜,具体注册方法,这里就不详细讲解了,感兴趣的可以自己在百度上搜索下。

步骤如下:

  1. 注册云服务器
  2. 搭建php服务,新手推荐宝塔面板,简单方便
  3. 创建网站,没有域名的直接用ip访问也是ok的
  4. 上传php文件到网站根目录,php文件内容如下:

这个 PHP 脚本负责从 ESP32-CAM 接收传入的图像,用时间戳重命名图像并将它们存储在上传文件夹中。编辑新创建的文件 ( upload.php ) 并复制下面的代码段:

<?php
// Code Based on this example: w3schools.com/php/php_file_upload.asp

$target_dir = "uploads/";
$datum = mktime(date('H')+0, date('i'), date('s'), date('m'), date('d'), date('y'));
$target_file = $target_dir . date('Y.m.d_H:i:s_', $datum) . basename($_FILES["imageFile"]["name"]);
$uploadOk = 1;
$imageFileType = strtolower(pathinfo($target_file,PATHINFO_EXTENSION));

// Check if image file is a actual image or fake image
if(isset($_POST["submit"])) {
  $check = getimagesize($_FILES["imageFile"]["tmp_name"]);
  if($check !== false) {
    echo "File is an image - " . $check["mime"] . ".";
    $uploadOk = 1;
  }
  else {
    echo "File is not an image.";
    $uploadOk = 0;
  }
}

// Check if file already exists
if (file_exists($target_file)) {
  echo "Sorry, file already exists.";
  $uploadOk = 0;
}

// Check file size
if ($_FILES["imageFile"]["size"] > 500000) {
  echo "Sorry, your file is too large.";
  $uploadOk = 0;
}

// Allow certain file formats
if($imageFileType != "jpg" && $imageFileType != "png" && $imageFileType != "jpeg"
&& $imageFileType != "gif" ) {
  echo "Sorry, only JPG, JPEG, PNG & GIF files are allowed.";
  $uploadOk = 0;
}

// Check if $uploadOk is set to 0 by an error
if ($uploadOk == 0) {
  echo "Sorry, your file was not uploaded.";
// if everything is ok, try to upload file
}
else {
  if (move_uploaded_file($_FILES["imageFile"]["tmp_name"], $target_file)) {
    echo "The file ". basename( $_FILES["imageFile"]["name"]). " has been uploaded.";
  }
  else {
    echo "Sorry, there was an error uploading your file.";
  }
}
?>

 

保存您的文件并退出。

然后,编辑gallery.php文件并复制以下代码段。这负责在图库中显示图像:

<!-- 
   Permission is hereby granted, free of charge, to any person obtaining a copy
  of this software and associated documentation files.
  
  The above copyright notice and this permission notice shall be included in all
  copies or substantial portions of the Software.
-->
<!DOCTYPE html>
<html>
<head>
  <title>ESP32-CAM Photo Gallery</title>
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <style>
    .flex-container {
      display: flex;
      flex-wrap: wrap;
    }
    .flex-container > div {
      text-align: center;
      margin: 10px;
    }
  </style>
</head><body>
<h2>ESP32-CAM Photo Gallery</h2>
<?php
  // Image extensions
  $image_extensions = array("png","jpg","jpeg","gif");

  // Check delete HTTP GET request - remove images
  if(isset($_GET["delete"])){
    $imageFileType = strtolower(pathinfo($_GET["delete"],PATHINFO_EXTENSION));
    if (file_exists($_GET["delete"]) && ($imageFileType == "jpg" ||  $imageFileType == "png" ||  $imageFileType == "jpeg") ) {
      echo "File found and deleted: " .  $_GET["delete"];
      unlink($_GET["delete"]);
    }
    else {
      echo 'File not found - <a href="gallery.php">refresh</a>';
    }
  }
  // Target directory
  $dir = 'uploads/';
  if (is_dir($dir)){
    echo '<div class="flex-container">';
    $count = 1;
    $files = scandir($dir);
    rsort($files);
    foreach ($files as $file) {
      if ($file != '.' && $file != '..') {?>
        <div>
          <p><a href="gallery.php?delete=<?php echo $dir . $file; ?>">Delete file</a> - <?php echo $file; ?></p>
          <a href="<?php echo $dir . $file; ?>">
            <img src="<?php echo $dir . $file; ?>" style="width: 350px;" alt="" title=""/>
          </a>
       </div>
<?php
       $count++;
      }
    }
  }
  if($count==1) { echo "<p>No images found</p>"; } 
?>
  </div>
</body>
</html>

 

保存您的文件并退出。就是这样!您的服务器已准备就绪。

3. ESP32-CAM HTTP 将图像/照片发布到服务器

现在您已准备好服务器(Raspberry Pi LAMP 服务器或云服务器),是时候准备带有代码的 ESP32-CAM,每 30 秒向您的服务器发布一次新图像。在继续本教程之前,请确保您完成以下先决条件。

所需零件

要遵循本教程,您需要以下组件:

  • 带有 OV2640 的 ESP32-CAM
  • FTDI编程器
  • 母对母连接线
  • ESP32-CAM 5V 电源
  • 本地服务器:
    • Raspberry Pi 板 (树莓派)
    • MicroSD 卡 – 32GB Class10
    • 树莓派电源(5V 2.5A)
  • 云服务器(替代):阿里云腾讯云等云服务器

Arduino IDE环境

我们将 使用 Arduino IDE对 ESP32-CAM进行编程,因此请确保您已安装 ESP32 环境组件。

一、ESP32开发环境搭建(arduino)

检查 PHP 网址

您应该尝试打开 Raspberry Pi 本地 IP 地址或您的外部 example.com 域名,然后是/upload.php应该返回:

Sorry, only JPG, JPEG, PNG & GIF files are allowed.Sorry, your file was not uploaded.
ESP32-CAM-Camera-Board-Upload-Files-Image

如果您看到该消息保存了您的 URL/域名和路径,则您的服务器应该已准备就绪,您可以继续阅读本指南。

此外,尝试访问/gallery.php路径。你应该得到如下所示的东西:

ESP32-CAM-Camera-Board-gallery-PHP-file-view-delete-photos

ESP32-CAM 代码

下一个程序使用HTTP POST将图像发布到服务器。将下面的代码复制到您的 Arduino IDE:

 

在上传代码之前,您需要在以下变量中插入您的网络凭据:

const char* ssid = "REPLACE_WITH_YOUR_SSID";
const char* password = "REPLACE_WITH_YOUR_PASSWORD";

确保选择正确的相机模块,这里我们使用 AI-THINKER 模块。

添加您的 Raspberry Pi IP 地址或使用服务器域名:

String serverName = "192.168.1.XXX";   // REPLACE WITH YOUR Raspberry Pi IP ADDRESS
//String serverName = "example.com";   // OR REPLACE WITH YOUR DOMAIN NAME
String serverPath = "/upload.php";     // The default serverPath should be upload.php

上传代码到 ESP32-CAM

现在您可以将代码上传到您的 ESP32-CAM 板。使用FTDI 编程器将 ESP32-CAM 板连接到您的计算机。

连接示意图:

ESP32-CAM-FTDI-programmer-5V-supply

许多 FTDI 编程器都有一个连接线,可以让您选择 3.3V 或 5V。确保连接线在正确的位置以选择 5V。

重要的: 通用输入输出口 0 需要连接到 GND 以便您能够上传代码。

ESP32-CAM FTDI 程序员
GND GND
5V VCC (5V)
U0R TX
U0T 接收
通用输入输出口 0 GND

要上传代码,请按照以下步骤操作:

  1. 转到工具> 开发板并选择AI-Thinker ESP32-CAM。
  2. 转到工具>端口并选择 ESP32 连接的 COM 端口。
  3. 然后,单击上传按钮上传代码。
  4. 当您开始在调试窗口中看到这些点时,如下图所示,按下 ESP32-CAM 板载 RST 按钮。
dots-uploading-code

几秒钟后,代码应该会成功上传到您的开发板。

代码的工作原理

这是有关代码如何工作的快速解释:

  • 导入所有库;
  • 定义所需的变量;
  • 定义相机引脚;
  • 在里面  setup()  您建立 Wi-Fi 连接并初始化 ESP32 相机。
  • 这  loop() 有一个定时器调用sendPhoto()每 30 秒运行一次。您可以在定时器间隔 variable。

这 sendPhoto()功能是实际拍摄照片并将其发送到您的服务器的部分。您可以在需要拍摄照片并将其发布到服务器的其它项目中使用该功能。

4. 测试和最终演示

将代码上传到您的开发板后,打开 Arduino IDE 串行监视器,您应该会看到每 30 秒打印一次类似的消息:

The file esp32-cam.jpg has been uploaded.
ESP32-CAM-esp32-cam-jpg-file-Arduino-IDE-Serial-Monitor

如果您访问本地服务器 URL http://IP-Address/uploads或云服务器 URL http://example.com/uploads,您应该有一个包含所有存储照片的文件夹。

ESP32-CAM-Camera-Board-Uploads-Folder-Images-stored-server

您可以打开每个链接以打开带有完整图像的新页面:

ESP32-CAM-Upload-Photo-to-Server-PHP-Arduino-IDE

现在,如果您转到本地服务器 URL http://IP-Address/gallery.php或云服务器 URL http://example.com/gallery.php,则可以访问图库页面,您可以在其中查看和删除照片。

ESP32-CAM-Camera-Photo-Gallery-view-PHP-f

要删除任何照片,只需单击每张图像旁边的“删除文件”链接。

ESP32-CAM-delete-file-from-gallery-php

给TA买糖
共{{data.count}}人
人已赞赏
ESP32-CAM免费项目

使用ESP32-CAM通过HTTP POST将照片发送到本地或云服务器

2021-5-29 15:42:42

ArduinoArduino-进阶免费项目

使用 Arduino 的指纹传感器模块指南 (FPM10A)

2021-5-31 13:21:09

0 条回复 A文章作者 M管理员
    暂无讨论,说说你的看法吧
个人中心
购物车
优惠劵
今日签到
有新私信 私信列表
搜索