第一篇：最简单DIY基于ESP32CAM的物联网相机系统①（用网页实现拍照图传）
第二篇：最简单DIY基于ESP32CAM的物联网相机系统②（在JAVAWEB服务器实现图片查看器）
第三篇：最简单DIY基于ESP32CAM的物联网相机系统③（在JSP服务器图传相片给所有客户端欣赏）
第四篇：最简单DIY基于ESP32CAM的物联网相机系统④（用调试串口助手实现串口图传）
第五篇（上）：最简单DIY基于ESP32CAM的物联网相机系统⑤(用1306OLED实现WIFI黑白屏照相机)
第五篇（下）：最简单DIY基于ESP32CAM的物联网相机系统⑤（用C#上位机实现串口图传）
第六篇：最简单DIY基于ESP32CAM的物联网相机系统⑥（用上位机VS2013 MFC实现WIFI图传）
第七篇：基于ESP32CAM的物联网相机系统⑦（用上位机JavaWeb实现WIFI图传）

文章目录

前言
一、基于ESP32CAM的物联网相机系统⑦（用上位机JavaWeb实现WIFI图传）是什么？
二、运行环境说明
- 1.PC软件环境
- 2.单片机开发环境Arduino
- 3.修改上面2的源码变成自己的源码
三、运行与调试
总结

前言

daodanjishui物联网核心原创技术之基于ESP32CAM的物联网相机系统⑦（用上位机JavaWeb实现WIFI图传）。
该专栏的第六篇博文：最简单DIY基于ESP32CAM的物联网相机系统⑥（用上位机VS2013 MFC实现WIFI图传）实现的是采用高速WIFI的方式传输图片，ESP32通过总线采集出来的图片在内存里面直接通过高速WIFI输出到电脑MFC服务器上，那么可以通过ESP32CAM的嵌入式网页来控制拍照和传输，在MFC软件的界面上看到传输过来的图片。缺点就是：上位机C++代码相当复杂不好短时间掌握，特别是C++的socket编程，还有就是这个MFC上位机不支持网页显示和保存图片到本地硬盘，客户端图传成功之后没有收到服务器响应的字符串确认上传成功。
现在本文采用的是高速WIFI的方式传输图片，很多ESP32的玩家也许玩了很久都未必掌握如何让它通过WIFI传输文件吧，网上也没有现成的代码给你参考吧？服务器怎么实时接收图片文件再合成图片文件没见过吧？这就是我这个方案的优势所在，核心原创绝对值得拥有，读者将会完全掌握用ESP32传输文件到服务器保存起来，上传成功会有服务器反馈的响应，通过ESP32CAM的嵌入式网页来控制拍照和传输，因为ESP32CAM开发板上没有可用的开关，所以我就采用嵌入式网页来实现拍照和上传了。这个javaweb代码跟C++不同的，适合新手java选手修改达到二次开发，所以下载了我这个项目的源码的读者，现在可以做一个基于ESP32CAM监控摄像头监控之类的设计了，也可以学会如何部署一个能否接收图片的网站服务器，也可以学会图像传输和接收和编码等热门知识！
B站地址：https://www.bilibili.com/video/BV1La411z7uK?spm_id_from=333.999.0.0

最简单DIY基于ESP32CAM的物联网相机系统7(用上位机JavaWeb实现WIFI图传)

请看看下面的服务器网站效果图（服务器主页只有一个字符串，下一期将会介绍主页显示图片）
在这里插入图片描述

手机端浏览器控制ESP32CAM摄像头拍照并且通过http请求上传服务器（局域网）
在这里插入图片描述

服务器接收手机客户端控制摄像头拍照存入服务器电脑硬盘（用图片查看器打开看图）
在这里插入图片描述

项目功能框架图：在这里插入图片描述

一、基于ESP32CAM的物联网相机系统⑦（用上位机JavaWeb实现WIFI图传）是什么？

这个方案采用的是高速WIFI的方式传输图片文件，很多ESP32的玩家也许玩了很久都未必掌握如何让它通过WIFI传输文件吧，网上也没有现成的代码给你参考吧？服务器怎么实时接收图片文件再合成图片文件没见过吧？这就是我这个方案的优势所在，核心原创绝对值得拥有，读者将会完全掌握用ESP32传输文件到服务器保存起来，上传成功会有服务器反馈的响应，可以通过ESP32CAM的嵌入式网页来控制拍照和传输，因为ESP32CAM开发板上没有可用的开关，所以我就采用嵌入式网页来实现拍照和上传了。

二、运行环境说明

1.PC软件环境

服务器搭建：上位机用Eclipse javaee版本，tomcat7，jdk1.7，window7操作系统，网上有很多指导搭建开发环境的教程，我在这里就不多说了。
下面顺便谈谈该开源我亲自编写服务器的故事：当时自己学习完JSP技术没有找到一个合适的练手项目，想用Javaweb写一个简单一点的网页游戏，也不需要套大型框架，后面写了一个点击大战的游戏，就是记录玩家在限定时间点击按钮的次数，用了数据库和增删改查技术，然后我就把这个游戏的代码去除了数据库功能后加上一些jsp语法实现的图片服务器的功能，我的下位机单片机ESP32CAM用http协议接收嵌入式主页的ajax技术触发的get请求，再用http请求传输图片文件给http短链接的服务器，服务器由于是短连接，资源充分，运行流畅，更适合玩家二次开发，注释详细。这个明修栈道暗度陈仓的功能多少人想写这个功能都写不出来！鲁迅笔下的“拿来主义”在我这里表现的淋漓尽致，这也是当代程序开发者高效捞金的真实写照。

2.单片机开发环境Arduino

官方摄像头源码路径是（只要读者正确安装了ESP32开发环境，这个源码可以在Arduino里面按照下面截图的方式打开的）：
在这里插入图片描述

#include "esp_camera.h"
#include <WiFi.h>

//
// WARNING!!! PSRAM IC required for UXGA resolution and high JPEG quality
//            Ensure ESP32 Wrover Module or other board with PSRAM is selected
//            Partial images will be transmitted if image exceeds buffer size
//

// Select camera model
#define CAMERA_MODEL_WROVER_KIT // Has PSRAM
//#define CAMERA_MODEL_ESP_EYE // Has PSRAM
//#define CAMERA_MODEL_M5STACK_PSRAM // Has PSRAM
//#define CAMERA_MODEL_M5STACK_WIDE	// Has PSRAM
//#define CAMERA_MODEL_AI_THINKER // Has PSRAM
//#define CAMERA_MODEL_TTGO_T_JOURNAL // No PSRAM

#include "camera_pins.h"

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

void startCameraServer();

void setup() {
  Serial.begin(115200);
  Serial.setDebugOutput(true);
  Serial.println();

  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;
  
  // if PSRAM IC present, init with UXGA resolution and higher JPEG quality
  //                      for larger pre-allocated frame buffer.
  if(psramFound()){
    config.frame_size = FRAMESIZE_UXGA;
    config.jpeg_quality = 10;
    config.fb_count = 2;
  } else {
    config.frame_size = FRAMESIZE_SVGA;
    config.jpeg_quality = 12;
    config.fb_count = 1;
  }

#if defined(CAMERA_MODEL_ESP_EYE)
  pinMode(13, INPUT_PULLUP);
  pinMode(14, INPUT_PULLUP);
#endif

  // camera init
  esp_err_t err = esp_camera_init(&config);
  if (err != ESP_OK) {
    Serial.printf("Camera init failed with error 0x%x", err);
    return;
  }

  sensor_t * s = esp_camera_sensor_get();
  // initial sensors are flipped vertically and colors are a bit saturated
  if (s->id.PID == OV3660_PID) {
    s->set_vflip(s, 1); // flip it back
    s->set_brightness(s, 1); // up the brightness just a bit
    s->set_saturation(s, -2); // lower the saturation
  }
  // drop down frame size for higher initial frame rate
  s->set_framesize(s, FRAMESIZE_QVGA);

#if defined(CAMERA_MODEL_M5STACK_WIDE)
  s->set_vflip(s, 1);
  s->set_hmirror(s, 1);
#endif

  WiFi.begin(ssid, password);

  while (WiFi.status() != WL_CONNECTED) {
    delay(500);
    Serial.print(".");
  }
  Serial.println("");
  Serial.println("WiFi connected");

  startCameraServer();

  Serial.print("Camera Ready! Use 'http://");
  Serial.print(WiFi.localIP());
  Serial.println("' to connect");
}

void loop() {
  // put your main code here, to run repeatedly:
  delay(10000);
}

3.修改上面2的源码变成自己的源码

核心代码如下（加入发送http请求的代码即可，注意了是传输图片文件，仔细看看源码就知道了）
在这里插入图片描述

String sendsnapshot(String serverName){//这个函数的功能是给局域网的服务器推送jpg图片文件
String getAll;
String getBody;//获取响应内容
  camera_fb_t * fb = NULL;
  fb = esp_camera_fb_get();
  if(!fb) {
    Serial.println("Camera capture failed");
    delay(1000);
    ESP.restart();
  } 
  Serial.println("Connecting to server: " +serverName);
  if (Wclient.connect(serverName.c_str(), serverPort)) {//链接服务器
    Serial.println("Connection successful!");    
    String head = "--RandomNerdTutorials\r\nContent-Disposition: form-data; name=\"imageFile\"; filename=\"esp32-cam.jpg\"\r\nContent-Type: image/jpeg\r\n\r\n";
    String tail = "\r\n--RandomNerdTutorials--\r\n";
    uint32_t imageLen = fb->len;
    uint32_t extraLen = head.length() + tail.length();
    uint32_t totalLen = imageLen + extraLen;
  
    Wclient.println("POST " + serverPath + " HTTP/1.1");
    Wclient.println("Host: " + serverName);
    Wclient.println("Content-Length: " + String(totalLen));
    Wclient.println("Content-Type: multipart/form-data; boundary=RandomNerdTutorials");
    Wclient.println();
    Wclient.print(head);
  
    uint8_t *fbBuf = fb->buf;
    size_t fbLen = fb->len;
    for (size_t n=0; n<fbLen; n=n+1024) {
      if (n+1024 < fbLen) {
        Wclient.write(fbBuf, 1024);
        fbBuf += 1024;
      }

服务器接收图片部分源码：

package test.daodanjishui.com;

import java.io.BufferedInputStream;
import java.io.BufferedOutputStream;
import java.io.File;
import java.io.FileOutputStream;
import java.io.IOException;
import java.io.PrintWriter;
import java.text.SimpleDateFormat;
import java.util.Date;
import java.util.Iterator;
import java.util.List;
import java.util.UUID;

import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;

import org.apache.commons.fileupload.FileItem;
import org.apache.commons.fileupload.disk.DiskFileItem;
import org.apache.commons.fileupload.disk.DiskFileItemFactory;
import org.apache.commons.fileupload.servlet.ServletFileUpload;
import org.apache.commons.fileupload.util.Streams;

/**
 * Servlet implementation class UpFromAndroid
 */
@WebServlet("/UpFromAndroid")
public class UpFromAndroid extends HttpServlet {
	private static final long serialVersionUID = 1L;
       
    /**
     * @see HttpServlet#HttpServlet()
     */
    public UpFromAndroid() {
        super();
        // TODO Auto-generated constructor stub
    }

    @Override
	protected void service(HttpServletRequest request, HttpServletResponse response)
			throws ServletException, IOException {
	
         System.out.println("服务端开始处理");
		request.setCharacterEncoding("UTF-8");    
       
      
        // 获得容器中上传文件夹所在的物理路径    如果按日期存放，则可以在files\\后面继续加 sdFolder+"\\"
        String savePath = this.getServletConfig().getServletContext().getRealPath("/") + "upload\\";    
        System.out.println("路径" + savePath);    
        File file = new File(savePath);    
        if (!file.isDirectory()) {    
            file.mkdirs();    
        }    
    
        try {    
            DiskFileItemFactory fac = new DiskFileItemFactory();    
            ServletFileUpload upload = new ServletFileUpload(fac);    
            upload.setHeaderEncoding("UTF-8");    
            // 获取多个上传文件    
            List  fileList = upload.parseRequest(request);    
            // 遍历上传文件写入磁盘    
            Iterator it = fileList.iterator();    
            while (it.hasNext()) {    
            FileItem obit = (FileItem)it.next();  
                //如果是普通  表单参数
                if(obit.isFormField()){ //普通域,获取页面参数
                  System.out.println("表单参数和值:" + obit.getFieldName() + ":" + obit.getString("UTF-8"));  
                }
                // 如果是 多媒体

**需要全部工程源码的请到最后链接去下载了。**想要自己写出来，不简单的，连接JAVAWEB服务器里面单片机的C++代码看得都犯迷糊了，不信读者可以试试写一个服务器和客户端看看。我反而喜欢用javaweb去写一些简单的网页，复杂的功能我交给java servlet后台去实现，现在能联网的界面一般都用网页显示了。这也是物联网发展的潮流！据说鸿蒙系统的GUI是用JAVAScript来写的，我相机的主页也采用了JAVAScript触发拍照和图传，所以到这里可以看到未来是脚本的天下。

三、运行与调试

看上面视频演示的过程就知道了，这里就不多说了。视频演示的效果满足的博客预想的效果。

总结

总结：在这个项目，读者可以学到很多技术，下载源码这点付出对于这些核心技术来说不值一提，学核心技术不花钱是有可能的，不过可能性不大，收费开源对得起我付出的努力编写此次博文，也对得起我深夜编码付出的劳动。下一期将会推出全网独家第一个ESP32CAM JAVA SWing GUI 技术编写的java版图传服务器，全部逻辑由我daodanjishui全部完成，历时两周时间研发成功，代码精妙无比，后期会加上远程MQTT控制和图像处理，扩展功能水到渠成，敬请期待。

代码工程下载链接：https://www.cirmall.com/circuit/28775/
点我直接跳转