esp32创建网页 esp32浏览网页

转载

数据狂徒 2024-07-30 19:26:33

文章标签 esp32创建网页 esp32cam html 数组字符串 文章分类 架构后端开发

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">☰  Toggle settings</label>
         </div>
    </body>
</html>

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

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