ESP32-CAM、ESP8266、WIFI、蓝牙、摄像头设备实现嵌入式服务器点灯

原创

已于 2024-05-28 15:33:47 修改 · 5.1k 阅读

标签

#单片机 #c++ #网页设计 #网络通信

于 2021-07-06 18:31:05 首次发布

本文详细介绍如何使用ESP32-CAM在Arduino IDE中开发一个嵌入式服务器，通过网页实现远程控制LED灯。作者分享了构建webserver、接收数据及硬件连接的步骤，并提供了代码实例和视频演示。

实战派 ESP32-S3，双模无线开发板

ESP32-S3 原生支持 ESP-IDF，WiFi + 蓝牙一次搞定

点击查看

ESP32-CAM ArduinoIDE开发系列文章目录

第一篇：ESP32-CAM高性价比WIFI图传方案快速入门教程
 第二篇：ESP32-CAM第一个无线点灯程序

前言

daodanjishui物联网核心原创技术之ESP32 Arduino IDE开发之嵌入式网页服务器架设、http请求收发与解析、单片机IO口操作和串口打印技术组成：ESP32-CAM实现嵌入式服务器点灯。

一、ESP32-CAM嵌入式服务器点灯是什么？

在上一篇的免费项目中：高性价比WIFI图传方案快速入门教程的介绍中，详细地介绍了ESP32-CAM模块的简单使用，其裁剪了官方图传和人脸识别的代码改造成简单的图传代码，由官方四个文件的代码缩减成一个文件的代码。目的就是让读者能快速上手这个源码。让这个源码复杂度降低很多，利于阅读和学习。
在这一篇的免费项目中，真真真真正正动手写代码了：daodanjishui修改了上一篇的项目的源码，实现嵌入式web server功能实现远程浏览器WIFI点灯的操作（PIN4的ＩＯ口集成了闪光灯LED,所以不用外接灯了，亮瞎眼的亮度），实现了将服务器嵌入到单片机，单片机wifi联网之后，局域网访问单片机主页（通过串口打印的网址）就可以在网页里面控制开发板的灯，该设计是ESP32-CAM物联网应用的一个巨大的尝试，daodanjishui用生命谱写了两天代码，踩了很多坑，也学到很多，写了一共三个版本的代码，此版本的代码是最便宜的一个版本，也是性价比最高的版本，不会接线和操作的看第一篇的项目即可，这里不再重复说明了，重要的事情说一遍：我有收费版的代码，服务更周到。
下面是优酷视频演示效果地址：https://v.youku.com/v_show/id_XNTE3ODU5MTY2NA==.html

直接看下面视频

ESP32

二、软件设计

1.构建webserver嵌入式服务器

要用网页点灯，那么必须要有一个服务器存放一个网页，浏览器客户端登录服务器，服务器给客户端推送一个点灯网页，客户端在网页上操作发送get请求提交on字符串，服务器接收到on字符串，就操作单片机的IO口点亮ESP32-CAM自带的闪光灯，并且返回一个字符串“on ok”给客户端浏览器。

网页设计代码如下，存入单片机（示例）：

String  index_html=String("")+"<html> <meta http-equiv=\"Content-Type\" content=\"text/html; charset=utf-8\" /"+
"  <head>   "+
"  </head>"+
"  <body>   "+
"    <h1>daodanjishui ESP32-cam免费开源点灯程序</h1><p>                        "+
"     <form action=\"control\" method=\"get\">"+
"   <table align=\"center\" width=\"450\">"+
"     <tr>"+
"       <td align=\"center\" colspan=\"2\">"+
"         <h2>说明:指令是on点击发送则开灯，反之off则关灯</h2>"+
"         <hr>"+
"       </td>"+
"     </tr>"+
"     <tr>"+
"       <td align=\"right\">指令：</td>"+
"       <td><input type=\"text\" name=\"var\" value=\"on\" /></td>"+
"     </tr>"+
"     <tr>"+
"       <td align=\"right\">数值：</td>"+
"       <td><input type=\"text\" name=\"val\" value=\"168\"/></td>"+
"     </tr>"+
"     <tr>"+
"       <td align=\"center\" colspan=\"2\">"+
"         <input type=\"submit\" value=\"发送\">    "+
"       </td>"+
"     </tr>"+
"   </table>"+
" </form>     "+
"  </body>"+
"</html>";

2.接收数据

接收数据通过的方式是网页的get请求传递的，读者看到网页里面有提交表单的动作吧？
代码如下（示例）：

 if(!strcmp(variable, "on")){
   
        
    controlLamp(true);
    httpd_resp_set_type(req, "text/html");
    httpd_resp_set_hdr(req, "Access-Control-Allow-Origin", "*");
    return httpd_resp_send(req, "on ok", 5);  
    }else if(!strcmp(variable, "off")){
   
       
    controlLamp(false);
    httpd_resp_set_type(req, "text/html");
    httpd_resp_set_hdr(req, "Access-Control-Allow-Origin", "*");
    return httpd_resp_send(req, "off ok", 6);   
    }else {
   
   
        res = -1;
    }

点灯和关灯操作在于一个驱动函数 controlLamp();这是我写的

void controlLamp(bool lampVal) {
   
   
  pinMode(LAMP_PIN, OUTPUT);
  digitalWrite(LAMP_PIN, lampVal);
  Serial.printf("Turn lamp %s\n", lampVal ? "On" : "Off");
}

三、硬件设计

1.说明

使用ESP32-CAM开发板基本不用设计硬件，因为板载一个LED闪光灯，连接线都不需要，注意的是要根据第一篇的原理图看出那个LED是GPIO4，所以代码有了下面的宏定义。

#define LAMP_PIN 4

四、运行与调试

1.下载程序

程序下载地址
或者直接复制下面代码和新建一个工程：

/*********
  author:daodanjishui
  Complete project details at https://RandomNerdTutorials.com/esp32-cam-video-streaming-web-server-camera-home-assistant/
  
  IMPORTANT!!! 
   - Select Board "AI Thinker ESP32-CAM"
   - GPIO 0 must be connected to GND to upload a sketch
   - After connecting GPIO 0 to GND, press the ESP32-CAM on-board RESET button to put your board in flashing mode
  
  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.
*********/
#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" //disable brownout problems
#include "soc/rtc_cntl_reg.h"  //disable brownout problems
#include "esp_http_server.h"
String  index_html=String("")+"<html> <meta http-equiv=\"Content-Type\" content=\"text/html; charset=utf-8\" /"+
"  <head>   "+
"  </head>"+
"  <body>   "+
"    <h1>daodanjishui ESP32-cam免费开源点灯程序</h1><p>                        "+
"     <form action=\"control\" method=\"get\">"+
"   <table align=\"center\" width=\"450\">"+
"     <tr>"+
"       <td align=\"center\" colspan=\"2\">"+
"         <h2>说明:指令是on点击发送则开灯，反之off则关灯</h2>"+
"         <hr>"+
"       </td>"+
"     </tr>"+
"     <tr>"+
"       <td align=\"right\">指令：</td>"+
"       <td><input type=\"text\" name=\"var\" value=\"on\" /></td>"+
"     </tr>"+
"     <tr>"+
"       <td align=\"right\">数值：</td>"+
"       <td><input type=\"text\" name=\"val\" value=\"168\"/></td>"+
"     </tr>"+
"     <tr>"+
"       <td align=\"center\" colspan=\"2\">"+
"         <input type=\"submit\" value=\"发送\">    "<