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 
#include 
#include 
#include 
#include 
#include 
#include 

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即可
最后啰嗦一下，本人属于单片机开发行业的一名小白，欢迎各位大佬联系一块学习交流