FastWeb之ESP32CAM-MQTT传输图片

• 适用平台：WEB(桌面)

1. 说明

  本范例采用MQTT通讯协议，获取ESP32CAM的图片数据。MQTT是由IBM开发的通讯协议，为传感器提供一个轻量可靠的二进制通信设定，使得开发MQTT与物联网，机器之间的通信变得非常简单。MQTT的报文长度至多可达256MB，故可使用该特性来传输图像视频等二进制数据。

  在网页端可以使用WebSocket实现对MQTT协议的连接以及消息的传输，该种传输方式不需要经过FastWeb所在服务器的中转，直接由MQTT Broker向网页客户端传输，与传统的MQTT传输相比响应速度更快，性能更好。ESP32-CAM模块采用TTL模式进行输出。

  通过本范例学习，可以掌握UgMQTTws控件的基本使用方法，并根据此来实现图像查看的功能。

2. 零件连接图

3. 使用零件

序	零件名称	数量
1	ESP32CAM 开发板	1
2	USB-TTL模块	1
3	杜邦线	若干

4. Arduino流程图

5. Arduino程序

  使用Arduino IDE 编译并上传以下Arduino程序。该程序使用的是esp32开发板，需要在Arduino IDE中添加安装该开发板环境，并在编译时选择开发板环境为ESP32系列开发板。在Arduino IDE中添加ESP32开发板环境 (opens new window)。注意烧录时ESP32CAM的开发板中IO0针脚需要进行接地操作，否则会导致刷写失败。

#include "WiFi.h"
#include "esp_camera.h"
#include "esp_timer.h"
#include "img_converters.h"
#include "Arduino.h"
#include "soc/soc.h"           // Disable brownour problems
#include "soc/rtc_cntl_reg.h"  // Disable brownour problems
#include "driver/rtc_io.h"
//#include "StringArray.h"

#include <PubSubClient.h>
#include <base64.h>
#include <libb64/cencode.h>


//esp32-cam针脚定义 拍照相关
constexpr int kCameraPin_PWDN   =  32;
constexpr int kCameraPin_RESET  =  -1;  // NC
constexpr int kCameraPin_XCLK   =   0;
constexpr int kCameraPin_SIOD   =  26;
constexpr int kCameraPin_SIOC   =  27;
constexpr int kCameraPin_Y9     =  35;
constexpr int kCameraPin_Y8     =  34;
constexpr int kCameraPin_Y7     =  39;
constexpr int kCameraPin_Y6     =  36;
constexpr int kCameraPin_Y5     =  21;
constexpr int kCameraPin_Y4     =  19;
constexpr int kCameraPin_Y3     =  18;
constexpr int kCameraPin_Y2     =   5;
constexpr int kCameraPin_VSYNC  =  25;
constexpr int kCameraPin_HREF   =  23;
constexpr int kCameraPin_PCLK   =  22;

// 此处需替换连接的无线网络为自己使用的无线网络
const char* ssid = "YOUR_WIFI_SSID";
const char* password = "YOUR_WIFI_PASSWORD";

// 此处需替换MQTT服务端为自己使用的服务端
const char* mqtt_server = "YOUR_MQTT_BROKER_HOSTNAME";
const int mqtt_port = 1883;
const char* mqtt_user = "YOUR_MQTT_BROKER_USERNAME";
const char* mqtt_password = "YOUR_MQTT_BROKER_PASSWORD";

//设置主题
const char* mqtt_TopicName = "/devices/esp32/data";

//设置相机帧的分辨率大小
framesize_t resolution_ = FRAMESIZE_QVGA;


//定义延时时间1000=1s
#define SLEEP_DELAY 60000 //延迟60s
#define FILE_PHOTO "/photo.jpg"

// OV2640 相机模组的针脚定义
#define PWDN_GPIO_NUM     32
#define RESET_GPIO_NUM    -1
#define XCLK_GPIO_NUM      0
#define SIOD_GPIO_NUM     26
#define SIOC_GPIO_NUM     27
#define Y9_GPIO_NUM       35
#define Y8_GPIO_NUM       34
#define Y7_GPIO_NUM       39
#define Y6_GPIO_NUM       36
#define Y5_GPIO_NUM       21
#define Y4_GPIO_NUM       19
#define Y3_GPIO_NUM       18
#define Y2_GPIO_NUM        5
#define VSYNC_GPIO_NUM    25
#define HREF_GPIO_NUM     23
#define PCLK_GPIO_NUM     22


// 选择相机型号
#define CAMERA_MODEL_WROVER_KIT
//#define CAMERA_MODEL_ESP_EYE
//#define CAMERA_MODEL_M5STACK_PSRAM
//#define CAMERA_MODEL_M5STACK_WIDE
//#define CAMERA_MODEL_AI_THINKER


//#define ESP32_CLIENT_ID = WiFi.macAddress()
//const char* esp_client_id = WiFi.macAddress()
WiFiClient mqttClient;
PubSubClient client(mqttClient);

const int LED_BUILTIN = 4;


void setup_camera() {

     // OV2640 camera module
     camera_config_t config;
    config.pin_pwdn     = kCameraPin_PWDN;
    config.pin_reset    = kCameraPin_RESET;
    config.pin_xclk     = kCameraPin_XCLK;
    config.pin_sscb_sda = kCameraPin_SIOD;
    config.pin_sscb_scl = kCameraPin_SIOC;
    config.pin_d7       = kCameraPin_Y9;
    config.pin_d6       = kCameraPin_Y8;
    config.pin_d5       = kCameraPin_Y7;
    config.pin_d4       = kCameraPin_Y6;
    config.pin_d3       = kCameraPin_Y5;
    config.pin_d2       = kCameraPin_Y4;
    config.pin_d1       = kCameraPin_Y3;
    config.pin_d0       = kCameraPin_Y2;
    config.pin_vsync    = kCameraPin_VSYNC;
    config.pin_href     = kCameraPin_HREF;
    config.pin_pclk     = kCameraPin_PCLK;
    config.xclk_freq_hz = 20000000;
    config.ledc_timer   = LEDC_TIMER_0;
    config.ledc_channel = LEDC_CHANNEL_0;
    config.pixel_format = PIXFORMAT_JPEG;
    config.frame_size   = FRAMESIZE_SVGA;
    config.jpeg_quality = 10;
    config.fb_count     = 1;

  esp_err_t err = esp_camera_init(&config);
  Serial.printf("esp_camera_init: 0x%x\n", err);

  // sensor_t *s = esp_camera_sensor_get();
  // s->set_framesize(s, FRAMESIZE_QVGA);   
  }

String msg;
int timeCount = 0;
void getimg(){//拍照分段发送到mqtt

    camera_fb_t *fb = esp_camera_fb_get();
    if (fb){
        Serial.printf("width: %d, height: %d, buf: 0x%x, len: %d\n", fb->width, fb->height, fb->buf, fb->len);
        char data[4104];
        //client.publish(mqtt_TopicName, "0");
        for (int i = 0; i < fb->len; i++){

            sprintf(data, "%02X", *((fb->buf + i)));
            msg += data;
           // if (msg.length() == 4096){
           //     timeCount += 1;
           //     client.beginPublish(mqtt_TopicName, msg.length(), 0);
           //     client.print(msg);
           //     client.endPublish();
           //     msg = "";
           // }
        }
        if (msg.length() > 0){
            client.beginPublish(mqtt_TopicName, msg.length(), 0);
            client.print(msg);
            client.endPublish();
            msg = "";
        }
        //client.publish(mqtt_TopicName, "1");
        timeCount = 0;
        esp_camera_fb_return(fb);
    }
}

void setup_wifi() {
  delay(10);
  // 连接WIFI
  Serial.println();
  Serial.print("Connecting to ");
  Serial.println(ssid);

  WiFi.begin(ssid, password);

  while (WiFi.status() != WL_CONNECTED) {
    delay(500);
    Serial.print(".");
  }

  Serial.println("");
  Serial.println("WiFi connected");
  Serial.print("IP address : ");
  Serial.println(WiFi.localIP());
}

//MQTT重连
void reconnect() {
  while (!client.connected()) {
    Serial.print("Attempting MQTT connection...");
    if (client.connect("ESP32Client", mqtt_user, mqtt_password)) {
      Serial.println("connected");
    } else {
      Serial.print("failed, rc=");
      Serial.print(client.state());
      Serial.println(" try again in 5 seconds");
      delay(5000);
    }
  }
}

void setup() {
  Serial.begin(115200);
  Serial.setDebugOutput(true);
  Serial.println();
  setup_camera(); //设置相机
  setup_wifi();		//连接WIFI
  client.setServer(mqtt_server, mqtt_port); //连接MQTT Broker
  if (client.connect("ESP32Client", mqtt_user, mqtt_password)) {
      Serial.println("mqtt connected");
    } 
}

void loop() {
  getimg();

  if (!client.connected()) {
    reconnect();
  }

  delay(10000);
}

6. 设计明细

  开启FastWeb设计器，分别加入下插图之控件。

  ①：TUgImage组件，控件名称为UgImage02。

  ②：TUgEdit组件，控件名称为UgEdit01。

  ③：TUgImage组件，控件名称为UgImage01。

  ④：TUgLabel组件，控件名称为UgLabel01。

  ⑤：TUgFSToggle组件，控件名称为UgFSToggle01。

  ⑥：TUgContainerPanel组件，控件名称为UgContainerPanel01。

• UgWebRunFrame属性设置

  • Height：设置页面高度=320。
  • Width：设置页面宽度=480。

• UgMQTTws01属性设置

  • Visible：设置控件是否可见。设置为False。
  • MQTTOptions：设置MQTT选项。
    • CleanSession：设置为True。
    • ClientID：设置客户端ID号，与已连接的客户端ID不能重复。
    • HostName：设置MQTT Broker的地址。
    • Password：设置MQTT Broker的账号密码。
    • Port：设置WebSocket服务的端口号，默认为9001。
    • Topic：设置MQTT的主题，启动时自动订阅该主题。
    • UserName：设置MQTT Broker的连接用户名。

• ①UgImage02属性设置

  • Align：设置图片控件的对齐方式，设置为alClient(客户区对齐)。
  • Stretch：设置图片拉伸为True。
  • Picture：设置图像（背景图片）。点击Picture属性右侧的[√]，打开图像编辑器，点击[Load]按钮打开文件上传界面，点击右侧的[Browse...]打开图像浏览界面，选择图像后，点击[确定]按钮返回到文件上传界面，点击[Upload]将文件上传至编辑器中，待图片显示后，点击[Save]按钮即可。

  

  

• ②UgEdit01属性设置

  • Height：设置控件高度=24。
  • Width：设置控件宽度=180。
  • FieldLabel：设置编辑框显示的对应标签名称，设置为主题名称。
  • FieldLabelAlign：设置字段标签显示相对于控件的位置，设置为laTop。
  • Text：设置编辑内容为=/devices/esp32/camera。

• ③UgImage01属性设置

  • Height：设置控件高度=240。
  • Width：设置控件宽度=320。
  • Stretch：设置图片拉伸为True。

• ④UgLabel01属性设置

  • Caption：设置标签显示的内容，设置为订阅开关。
  • Font：设置字体，在其中的Style属性设置fsBold为True，即加粗该字体。设置其Color属性为clWhite，即字体显示为白色。

• ⑥UgContainerPanel01属性设置

  • Height：设置控件高度=257。
  • Width：设置控件宽度=342。

7. 程序设计

7.1. 程序初始设置

  一些初始化设置的程序。

//JScript
  UgFSToggle01.OnToggled = &UgFSToggle01OnToggled;
  UgMQTTws01.OnMessage = &UgMQTTws01OnMessage;
  UGMM.LC(Self);

//PasScript
procedure UgWebRunFrameOnAfterRunScript(const sender: tobject);
//翻译
begin
  UGMM.LC(Self);
end;

// Make sure to add code blocks to your code group

7.2. 事件设置

• ⑤UgFSToggle01-OnToggled事件

  点击切换以开启/关闭主题订阅。

//JScript
function UgFSToggle01OnToggled(sender){
if (UgFStoggle01.Toggled){ 
  UgMQTTws01.Subscribe(UgEdit01.Text);
  }
  Else{
    UgMQTTws01.Unsubscribe(UgEdit01.Text);
  }
}

//PasScript
procedure UgFSToggle01OnToggled(const value: boolean);
begin
  if UgFStoggle01.Toggled Then
  Begin
    UgMQTTws01.Subscribe(UgEdit01.Text);
  End
  Else
  Begin
    UgMQTTws01.Unsubscribe(UgEdit01.Text);
  End;
end;

// Make sure to add code blocks to your code group

• UgMQTTws01-OnMessage事件

  当接收到订阅信息时解析。

//JScript
function UgMQTTws01OnMessage(atopic,apayload){
  UGCM.HexToJPG(apayload,"profile-image.jpg");
  UgImage01.Picture.LoadFromFile("profile-image.jpg");
}

//PasScript
procedure ugMQTTws01OnMessage(const atopic: string;apayload: string);
begin
  UGCM.HexToJPG(apayload,'profile-image.jpg');
  UgImage01.Picture.LoadFromFile('profile-image.jpg');
end;

// Make sure to add code blocks to your code group

8. 运行结果

  使用鼠标点击工具栏保存到数据库，然后点击运行（Run），测试运行结果。打开订阅开关，接收相机拍摄的图片。