Esp32Cam WebServer 网页源代码查看与编辑

最新推荐文章于 2024-03-05 10:06:12 发布
最新推荐文章于 2024-03-05 10:06:12 发布
阅读量2.2k 收藏 13
点赞数 3
分类专栏： Node MCU 文章标签： esp32cam
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_43031092/article/details/122454927
版权

Esp32Cam WebServer 网页源代码查看与编辑

  • date: 2022-01-12
  • lastmod: 2022-01-12

原文地址

背景介绍

在 为 Esp32 Cam 配置 Arduino 开发环境并人脸识别测试 中成功运行了开发板自带的示例程序，在网页中看到了摄像头的实时画面。然后这个开发板就在我的某创盒子了呆了几年吧。今年掏出来试试是因为 foldscope 试镜失败，尝试下手机摄像头观察发现可行，于是才掏出这个 esp32cam，根据同样的原理，最后在自己组装的纸片上也成功了，原因是把 z 轴拉到极限就可以了。

但是很奇怪的是和“安信可科技](https://docs.ai-thinker.com/esp32-cam)”给出的案例不同，我的网页中显示的图片右上角没有保存（Save）按钮，代码 bug 很正常的嘛，于是找源码看看，在源代码中用搜索字符串的方式也没有找到网页代码在哪里，就这么点地方，愣是没有看到我所熟悉的 HTML,一时半会没整明白。后来在 gitee 找到了一个狠人把这个页面由英文改为中文，但是代码（技术宅物语 / ESP32-CAM-WEB摄像头）里也是没有 html 代码，在评论区里链接的文章了解了怎么操作的，最后也找到了 esp32cam WebServer的最新版代码，跑起来看到了期待的 save。

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-BbVYoQyX-1641972984186)(…/…/static/images/esp32camWeb/webPreview.jpeg)]

转换的机制

html 转无符号数组

之前在太极创客的案例里都是直接写 html 字符串插入到代码里，或者直接 html 文件存储到内存里直接引用，说白了就是未经优化的原文。一般长下面这样

<!doctype html>
<html>
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width,initial-scale=1">
        <title>Robot Zero One Was Here</title>
    </head>
    <body>
        <div id="logo">
            <label for="nav-toggle-cb" id="nav-toggle">&#9776;&nbsp;&nbsp;Toggle settings</label>
         </div>
    </body>
</html>

然后可以看到里面有空格，为了最小化存储，我们可以删除空格，这不会影响浏览器渲染的结果，然后就开始压缩了，使用的工具是 gzip,编码方式是霍夫曼编码，最后压缩成一堆一眼看不懂的 0 和 1，然后用十六进制的方式（0x1f0x8b0x080x080xfd0x7d…）描述这些01，最后把这些十六进制分隔开存储到数组（uint8_t index_ov2640_html_gz[]）里。

说了那么多不如实践一下，CyberChef 给出了一个案例，可以使用 STEP 看一下每一步的过程，最后要到数组的话需要去掉第一个逗号，加上花括号。

数组转 html

反向操作一波即可。我把上面的案例逆向了一波，看这个

参考

Kearney form An idea
关注
  • 3
    点赞
  • 踩
  • 13
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
专栏目录
ESP32-CAM视频监控智能相机，源码-电路方案
04-19
建立自己的视频监控摄像头，并通过iPhone的Internet对其进行控制。 硬件部件: ESP32-CAM× 1个 FT232RL FTDI迷你USB× 1个 18650电池座× 1个 18650电池× 2 带有2个SG-90 Servos的迷你云台× 1个 MB102面包板电源模块× 1个 软件应用程序和在线服务: Arduino IDE 该项目是我们ESP32-CAM视频监控机器人项目的发展。最终，我们获得了一个视频监控云台摄像机，该摄像机可以通过互联网使用iPhone进行控制。 如图所示连接电线。确保将倾斜伺服系统连接到＃IO2引脚，将水平伺服系统连接到＃IO14。 演示视频:
安信可 ESP32-S3 模组上驱动摄像头 OV2640，实现远程拍照并 HTTP 传输到阿里云对象存储OSS，并显示在微信小程序上。（深度好文，全部开源）
徐宏的博客 | 修身齐家治国平天下
10-19 1万+
本系列博客学习由非官方人员 半颗心脏 潜心所力所写，仅仅做个人技术交流分享，不做任何商业用途。如有不对之处，请留言，本人及时更改。 系列一：ESP32系列模组基础学习系列笔记 1、 爬坑学习新旅程，虚拟机搭建esp32开发环境，打印 “Hellow World”。 2、 巧用eclipes编辑器，官方教程在在Windows下搭建esp32开发环境，打印 “Hellow World”。 3、 认识基本esp32的GPIO接口，开始点亮您的第一盏 LED和中断回调实现按键功能 。 4、体会esp...
ESP32系列四：搭建http的webserver的服务器
最新发布
挨踢农民的博客
03-05 3009
最近在使用ESP32搭建web服务器测试，发现esp32搭建这类开发环境还是比较方便的。具体的http协议这里就不再赘述，我们主要说一下如何使用ESP32提供的API来搭建我们的http web。一、web服务器搭建过程1、配置web服务器在中，Web服务器使用httpd组件实现。我们需要先创建httpd_config_t结构体，指定服务器的端口、最大并发连接数、URI匹配处理器等选项。然后，我们通过调用httpd_start函数来启动Web服务器。
ESP32-CAM的调试
2201_75795906的博客
07-28 884
该文章主要记录作者学习ESP32-CAM的过程，包括如何调节个人热点、调节代码等步骤。记录在调节过程中详细的步骤，并提供了代码示例和注释，以便读者更好地理解和应用。本文章对于ESP32-CAM初学者来说，能够提供一些参考和帮助。
改写ESP32CAM官方例程，创建httpserver任务实现网页视频播放
katerdaisy的博客
09-27 1517
改写ESP32CAM官方例程，将官方例程中的startCameraServer()，替换为自己写的http_test_task。在浏览器中输入esp32地址就可以播放视频。
【ESP32CAM识别图形左边界】（二）网页添加补光灯按钮
xanadw的博客
03-07 4273
文章目录 前言 一、pandas是什么？ 二、使用步骤 1.引入库 2.读入数据 总结 前言 提示：这里可以添加本文要记录的大概内容： 例如：随着人工智能的不断发展，机器学习这门技术也越来越重要，很多人都开启了学习机器学习，本文就介绍了机器学习的基础内容。 提示：以下是本篇文章正文内容，下面案例可供参考 一、pandas是什么？ 示例：pandas 是基于NumPy 的一种工具，该工具是为了解决数据分析任务而创建的。 二、使用步骤 1.引入库 代码如下（示例）：
esp32-cam-ai-thinker:有关使用ESP-IDF的AI Thinker ESP32-CAM的信息和示例
05-05
ESP32-CAM-AI思想家 该存储库的目的是集中ESP32-CAM AI Thinker的信息和示例。 ESP32-CAM AI Thinker通常与OV2640传感器一起出售 例子 与PlatformIO一起运行 要运行示例，请确保已安装PlatformIO 。 如果还没有的话，请参考。 闪烁的 要求 要刷新开发板，您需要一个USB到TTL加密狗。 使用外部电源也很重要。 USB通常无法提供足够的电流，这会导致电路板环路brownout错误。 接线 接线图 指示 闪烁时： 把板子调低 按住复位按钮（将GPIO0与GND短接） 打开板子 引导以运行草图时，请保持GPIO0打开。 该评估板还具有一个内置的重置按钮。 能力 该评估板和随附的OV2640可以完成以下任务： 外部64MBit PSRAM（ IPUS IPS6404 ） 嵌入式闪光灯 SD卡使用FatFS
安信可ESP32-CAM修改Web网页源代码
chenhuoxian的博客
05-14 1908
安信可ESP32-CAM修改Web网页源代码
《【ESP32开源项目】基于esp32cam制作的迷你监控，可以通过app远程查看》代码解析
katerdaisy的博客
11-25 4226
看到一篇很不错的博文，分析一下代码，记录基于esp32cam视频流媒体的处理方法。
【ESP32CAM识别图形左边界】（四）网页显示传感器数据
xanadw的博客
03-08 1130
之前的ESP32CAM的网页修改都是比较简单的按钮形式，也就是点击开或者关这种互动形式的数据，碰到一个粉丝有另外一种需求，那就是页面可以实时回显ESP32作为主控处理接收到的传感器数据，比如显示温湿度传感器、超声波传感器、红外传感器的数据或者检测结果。这个在ESP32代码里面的改动其实不是很多，主要的修改还是前端的页面设计，也就是需要修改html文件，实现前端页面的显示，以及获取数据的操作。
基于ESP32-CAM的图传探勘小车项目（代码开源）
热门推荐
black_sneak的博客
03-14 1万+
ESP32-CAM是安信可最新发布小尺寸的摄像头模组。该模块可以作为最小系统独立工作，尺寸仅为，深度睡眠电流最低达到6mA。相较于K210OpenMV等一系列MCU，ESP32-CAM可以说是最具性价比的图传模组了。借于ESP32-CAM的优秀表现与价格优势，ESP32-CAM被广泛应用于各种物联网场合，适用于家庭智能设备工业无线控制无线监控QR无线识别无线定位系统信号以及其它物联网应用，是物联网应用的理想解决方案（国外各大论坛与Github上都有各路大神炫酷的DIY设计，感兴趣的朋友去了解一下）。
ESP32-CAM、ESP8266、WIFI、蓝牙、摄像头设备实现嵌入式服务器点灯(原理图+源码)-电路方案
04-25
在上一期的免费项目:高性价比WIFI图传方案快速入门教程的介绍中，详细地介绍了ESP32-CAM模块的简单使用 ，其裁剪了官方图传和人脸识别的代码改造成简单的图传代码，由官方四个文件的代码缩减成一个文件的代码。目的就是让买家能快速上手这个源码。让这个源码复杂度降低很多，利于阅读和学习。 在这一期的免费项目:修改了上一期的项目的源码，实现嵌入式web server功能实现远程浏览器WIFI点灯的操作（PIN4的ＩＯ口集成了闪光灯LED,所以不用外接灯了，亮瞎眼的亮度），实现了将服务器嵌入到单片机，单片机wifi联网之后，局域网访问单片机主页（通过串口打印的网址）就可以在网页里面控制开发板的灯，该设计是ESP32-CAM物联网应用的一个巨大的尝试，本人浪费生命值写了两天代码，踩了很多坑，也学到很多，写了一共三个版本的代码，此版本的代码是最便宜的一个版本，呵呵，不会接线和操作的看上期的项目即可，这里不再重复说明了，重要的事情说一遍:我有收费版的代码，服务更周到。 下面请看模块运行效果图: 下面是实物图: 模块的原理图: 电脑接上串口CH340，CH340接上ESP32-CAM之后，打开串口调试助手，调试效果如下: 服务器返回消息: 真源码截图（绝对给力）: 项目总结:这次是利用ESP32-CAM模块对物联网应用的一次巨大的尝试，在电路城目前好像还没有相关的教程，在B站虽然有类似的项目，但是根本没有源码，也没有教程，而且功能没有我这个那么强大，因为我这个嵌入式服务器是有反馈的，而且支持网页手动输入指令，开灯或者关灯指令发送之后服务器会给客户端一个响应的，代码都是自己手工完成的，也借鉴过很多相关的项目。只要掌握这个嵌入式服务器远程点灯的项目，那么其他类似的设计就可以举一反三了。需要注意的是这个版本的代码是没有任何注释的，代码冗余度也很大，收费版的代码更加精简和加入详细注释（最关键）和调试代码。如下所示: 后期的的项目会涉及到图像处理（颜色识别，人脸检测，人脸识别，颜色跟踪，智能小车，手机app客户端控制，云平台语音识别，云平台图像识别等等，私有云图像处理，私有云监控搭建）全部原创开源，敬请期待。
ESP32-CAM Arduino IDE各种问题总结与人脸识别
qq_52785624的博客
03-30 7209
1. 不然就会出现串口打印这一串东西： [E][camera.c:1113] camera_probe(): Detected camera not supported. [E][camera.c:1379] esp_camera_init(): Camera probe failed with error 0x20004 2.串口一直打印 .................................... 就是连接不上 3.搜索不到相应的的ESP-32的安装包
esp32-cam页面修改 html界面如何转C语言数组
weixin_45729272的博客
04-04 909
html界面如何转C语言数组 很简单，访问https://gchq.github.io/CyberChef/这个网站 如何按下面的图配置就可以 这是html转c语言数组 这是c语言数组转html
ESP32-S3搭建外网可访问的网络摄像头（内网穿透）
不脱发的程序猿
09-05 5155
本篇博文使用ESP32-S3搭建网络摄像头，相比较局域网摄像头，本篇博文将分享如何搭建外网可以访问的网络摄像头。
使用ai thinker esp32-cam制作一个局域网可登录服务器（网页控制esp32响应）----自动车之网页操控
qq_45517242的博客
11-30 331
if (server.arg("USERNAME") == "admin" && server.arg("PASSWORD") == "admin") { //server.arg("PASSWORD")获取文本框值。if (server.arg("USERNAME") == "admin" && server.arg("PASSWORD") == "admin") { //server.arg("PASSWORD")获取文本框值。
ESP32-CAM摄像头-Arduino IDE-网页展示-人脸识别-之七次失败后的成功记录
Kearney
06-25 1万+
前言 买回来一个OV7076.。。。找帖子发现到了。。但是太复杂。。。。于是找到一个简单的ESP32 Cam，当时觉得这牛逼啊，还简单容易上手，结果今晚点亮了八次七次都灭deng 所需道具 必备: ESP32 Cam、USB-TTL烧录工具（含5跟杜邦线）、电脑、WiFi 选配: SD卡（最大支持2G） 完整过程 Arduino装ESP32开发环境 文件–>首选项–>附加开发板管理网址 输入https://dl.espressif.com/dl/package_esp32_index.json
ESP32 CAM CameraWebServer示例测试
chilian12321的博客
04-21 5373
一。下载资源 CAM资料链接：https://pan.baidu.com/s/1dL-qZKXrnKhcRCXIZtZabA 提取码：q20d 二。安装ESP32插件 在本例中，我们使用Arduino IDE对ESP32-CAM板进行编程。因此，您需要安装Arduino IDE以及ESP32插件。 在首项中输入https://dl.espressif.com/dl/package_esp32_index.json 工具–>开发板–>开发板管理器 搜索esp32，点击下载安装..
基于ESP32CAM的物联网相机系统⑦（用上位机JavaWeb实现WIFI图传）
niruxi0401的博客
05-02 4734
基于ESP32CAM的物联网相机系统（用上位机JavaWeb实现WIFI图传）
window系统使用终端开发esp32cam实现网页查看视频
05-05
要在Windows系统上使用终端开发ESP32-CAM实现网页查看视频，您可以按照以下步骤进行操作： 1. 下载ESP32-CAM的Arduino库并安装。 2. 将ESP32-CAM连接到您的计算机上，并在Arduino IDE中选择正确的开发板和端口。 3. 打开Arduino IDE的示例程序，选择File->Examples->ESP32->Camera->CameraWebServer。 4. 修改WiFi SSID和密码的变量值以匹配您的网络。 5. 上传程序到ESP32-CAM。 6. 打开串口监视器，将波特率设置为115200。 7. 在串口监视器中，您将看到ESP32-CAM的IP地址。将其复制到浏览器中。 8. 在浏览器中，您将看到ESP32-CAM的视频流。 注意：在使用ESP32-CAM时，请确保您的Windows系统能够正常识别USB串口设备，并且您已经正确安装了驱动程序。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值