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

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 文件存储到内存里直接引用,说白了就是未经优化的原文。一般长下面这样


<html>
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width,initial-scale=1">
        <title>Robot Zero One Was Heretitle>
    head>
    <body>
        <div id="logo">
            <label for="nav-toggle-cb" id="nav-toggle">  Toggle settingslabel>
         div>
    body>
html>

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

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

数组转 html

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

参考

  • 嵌入式WEB html界面如何转C语言数组-bd7iow bd7iow 2021-11-14:hexdump
  • Editing the ESP32-CAM Camera Web Server HTML. April 25, 2019 Robot Zero One:CyberChef
  • 技术宅物语 / ESP32-CAM-WEB摄像头
  • 安信可ESP32-CAM摄像头开发demo–局域网拍照、实时视频、人脸识别.安信可科技. 2020-08-14

你可能感兴趣的:(Node,MCU,esp32cam)