第一篇:最简单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图传)
文章目录
前言
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://gf.bilibili.com/item/detail/1107810114
点我直接跳转