ESP32-CAM+QT实现摄像头画面在局域网设备之间的展示和人脸识别操作

欢迎入群共同学习交流
时间记录：2023/12/3

一、软件和硬件介绍

软件：
1 Arduino，官网下载地址：Arduino-1.8.18
2 QT，这里不进行讲解QT的安装方法和版本，后续会写几个博客介绍QT下载和Qt For Android的配置，在那里会讲解需要的版本和下载地址
3 ESP32板卡离线支持包，点灯科技的一个网址，速度比较快，ESP32 SDK，里面同样有板卡的安装步骤，推荐安装2.0.9版本
硬件：
1 安信可科技的ESP32-CAM摄像头开发板，淘宝上便可以买到，记得选带摄像头的开发板

2 USB转TTL
本文章中使用的相关软件可私信本人来领取

二、Arduino的下载安装和配置ESP32支持包

1.双击下载的Arduino.exe文件，弹出界面点击I Agree同意协议

2.选择要安装的东西，从上往下依次是，Arduino软件、USB驱动、创建开始菜单快捷方式、创建桌面快捷方式、将.ino文件和软件关联，然后点击Next进行下一步安装，这里建议全选

3.Browse…处点击选择一下要将软件安装在哪个位置，然后点击Install等待软件安装即可，这里建议选择一个C盘之外的地方安装

4.安装完毕后点击close即可，然后在桌面上双击Arduino快捷方式打开软件，新安装的界面可以看到，工具-开发板位置这里仅有Arduino自带的开发板支持包，我们想要使用ESP32CAM就需要下载对应的支持包

5.打开文件-首选项界面，在附加开发板管理器网址的输入框输入网址https://arduino.me/packages/esp32.json，然后点击好保存

6.双击下载的esp32支持包进行安装即可，安装完成后重启Arduino软件，然后在工具-开发板处就可以看到新安装的esp32支持包

三、代码修改和摄像头数据查看

1.打开Arduino软件，选择工具-开发板-ESP32 Arduino-AI Thinker ESP32-CAM来选择对应的开发板

2.选择文件-示例-ESP32-Camera-CameraWebServer来打开对应的官方摄像头示例文件

3.在选择摄像头模式的这块代码里将第一个注释掉，然后将CAMERA_MODEL_AT_THINKER宏的注释取消掉

4.WIFI凭证的这块代码，修改xxxxxx为你自己对应的WIFI名称和密码

5.USB-TTL模块与ESP32CMA模块进行连接

USB-TTL	ESP32-CAM
GND	GND
5V	5V
TXD	UOR
RXD	UOT

然后再找一根杜邦线将ESP32CAM的IO0口和GND口连接，将USB-TTL的USB口插到电脑上
6.Arduino软件中选择工具-端口处选择一下对应的端口，然后点击上传按钮来向ESP32CAM中下载代码，代码上传是先进行代码编译然后才会上传的，在编译的时候按一下ESP32CAM模块上的RST按键

7.成功下载后输出结果如下

8.然后断开ESP32CAM模块上的IO0口与GND之间的连线，打开串口监视器，手机开个热点设置为指定的账号名和密码或者上边设置的WIFI账号密码是路由器的WIFI账号和密码，然后按下ESP32CAM模块的RST按键，等待模块连接WIFI
9.WIFI正常连接后，在串口监视器中会输出一个网址，和模块连接同一个WIFI的设备通过此网站便可以查看实时画面

10.打开网站界面便是这样的，点击Start Stream按钮然后便会显示实时的摄像头画面

11.点击画面上的Save按钮便可以保存一张现在画面的照片，esp32cam获取画面的弊端同时只能一个设备访问stream视频流

四、QT开发软件显示实时画面

1.通过网站我在开发者工具中查看了一下js代码，发现了它的拍照方法，访问这个接口API就会响应一张实时的图片画面

2.通过QT向这个接口发送请求然后将照片显示在QLabel组件上便可以实现画面的获取，我的QT代码放上来供大家参考和扩展
2.1 头文件(.h)

#ifndef WIDGET_H
#define WIDGET_H

#include <QWidget>
#include <QNetworkAccessManager>
#include <QNetworkRequest>
#include <QNetworkReply>
#include <QUrl>
#include <QPixmap>
#include <QTimer>

QT_BEGIN_NAMESPACE
namespace Ui { class Widget; }
QT_END_NAMESPACE

class Widget : public QWidget
{
    Q_OBJECT

public:
    Widget(QWidget *parent = nullptr);
    ~Widget();

private:
    Ui::Widget *ui;
    QNetworkAccessManager *manager;
    QNetworkRequest request;
    QNetworkReply *reply;
    QTimer *timer;
    int displayOK;

private slots:
    void onTimeout();
};
#endif // WIDGET_H

2.2 源文件(.cpp)

#include "widget.h"
#include "ui_widget.h"

Widget::Widget(QWidget *parent)
    : QWidget(parent)
    , ui(new Ui::Widget)
    , displayOK(0)
{
    ui->setupUi(this);

    manager = new QNetworkAccessManager(this);//创建网络管理对象

    request.setUrl(QUrl("http://192.168.125.224/capture?_cb=8888"));//设置请求地址

    timer = new QTimer(this);
    connect(timer,&QTimer::timeout,
            this,&Widget::onTimeout);
    timer->start(100);
}

Widget::~Widget()
{
    delete ui;
}

void Widget::onTimeout()
{
    if(displayOK == 0){
        reply = manager->get(request);
        connect(reply,&QNetworkReply::finished,[=](){
            QByteArray imageData = reply->readAll();
            QPixmap pixmap;
            pixmap.loadFromData(imageData);
            ui->label->setPixmap(pixmap.scaled(400,240));
            displayOK=0;
            reply->deleteLater();
        });
    }
    displayOK=1;
}

3.有需要QT完整代码的可私信本人索要
4.放一下QT开发的软件获取的画面，画质不算太好但是没有卡顿还算是可以的了

获取的摄像头画面

5.如果QT搭建的有QT For Android环境，直接换套件进行编译就可以在手机上使用了，选择使用QT就是因为它的跨平台使用效果好，搭建一下环境就能多平台使用了，比较方便

五、微信小程序抓取实时画面

使用一个image标签就可以直接展示了，src地址设置为http://IP地址:81/stream即可
最后啰嗦一下，本人属于单片机开发行业的一名小白，欢迎各位大佬联系一块学习交流
新增内容

六、ESP32CAM例程的人脸识别

6.1 搭建环境与上述过程一致，修改地方为三处
（1）esp32板卡离线支持包由2.0.9版本降为1.0.6版本，需要先将2.0.9版本的删除
（2）新的CameraWebServer例程的app_httpd.cpp文件中286-289行的free函数改为dl_lib_free函数

（3）新的CameraWebServer例程的app_httpd.cpp文件中385-388行的free函数改为dl_lib_free函数

6.2 修改完毕后即可上传代码，然后打开浏览器网址测试

6.3 打开开始视频和人脸检测按钮后，便会自动去进行检测，检测到人脸后便会使用黄色的框将其框起来

6.4 将人脸识别按钮也打开后便会进行人脸识别，识别到非人脸库的人脸红色框框起来，并且显示一段汉字提示，串口也会输出这一段字

6.5 注册人脸按钮点击后，会进行人脸注册，注册会识别五次然后保存一个ID，下一次人脸识别时使用，注册时显示的提示前面为人脸ID，后面为识别次数，5次后保存ID，提高检测准确率

6.6 成功注册人脸后，下一次人脸识别便会显示出注册人脸的ID，成功进行识别

6.7 然后这些操作相应的在串口也会有输出，可以修改这些地方输出自己想要的数据