使用 esp_http_server、webserver 和 WiFiClient 库以及 Ajax 进行双重通信的 ESP32 CAM 问题
问题描述 投票：0回答：1
我希望利用http服务器的arduino标准库在网页和esp32服务器之间进行双重通信，并通过WiFi进行摄像头流传输。
似乎我在屏幕上得到了结果，我从 esp32 获取了摄像头视频以及一些数据（LED PWM 值以及天线接收信号强度），但我发现连续和间歇性的无响应错误（状态 404） ）在网页的网络流量中。 （在esp32的AP模式和Client模式下都进行了测试，结果是一样的）
我的猜测是esp_http_server、WebServer和WiFiClient的库之间可能存在崩溃，但进一步调查这一点超出了我的知识范围。所以我想从你那里找到答案。感谢任何评论。
在这里，我发布我的代码如下： （致谢：我修改了“Random Nerd”的源代码来实现双向通信。）
/*********
Modified from project at https://RandomNerdTutorials.com
From Project: ESP32-CAM Remote Controlled Car Robot Web Server
https://randomnerdtutorials.com/esp32-cam-car-robot-web-server/
HM, 5 Nov 2023
*********/
// Sample server commands: (assume ip address of the ESP32 is 192.168.8.5)
// 192.168.8.5/control?var=forward&val=1
// 192.168.8.5/control?var=led_PWM&val=10
// If more httpd_query_key_value() is added, use "&" to seperate key/value pair
// 192.168.8.5:81/stream
#include <Arduino.h>
#ifdef ESP32
#include <WiFi.h>
// #include <AsyncTCP.h>
// #include <ESPAsyncWebSrv.h> XXXX
#elif defined(ESP8266)
#include <ESP8266WiFi.h>
#include <ESPAsyncTCP.h>
#endif
#include <WiFiClient.h>
#include <WebServer.h>
WebServer server(80);
#include "esp_camera.h"
#include "esp_timer.h"
#include "img_converters.h"
#include "fb_gfx.h"
#include "soc/soc.h" // disable brownout problems
#include "soc/rtc_cntl_reg.h" // disable brownout problems
#include "esp_http_server.h"
#include "esp32-hal-ledc.h" // For Buildin LED
#define Flashlight 4 // Build-in flashlight of ESP32-CAM Board
const int ledFreq = 1000;
const int ledChannel = 4;
const int ledResolution = 12;
int led_intensity = 0;
// Replace with your network credentials
const char* ssid = "SSID for Android phone or PC";
const char* password = "123456";
#define CAMERA_MODEL_AI_THINKER
//#define CAMERA_MODEL_M5STACK_PSRAM
//#define CAMERA_MODEL_M5STACK_WITHOUT_PSRAM
//#define CAMERA_MODEL_M5STACK_PSRAM_B
//#define CAMERA_MODEL_WROVER_KIT
#if defined(CAMERA_MODEL_WROVER_KIT)
#define PWDN_GPIO_NUM -1
#define RESET_GPIO_NUM -1
#define XCLK_GPIO_NUM 21
#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 19
#define Y4_GPIO_NUM 18
#define Y3_GPIO_NUM 5
#define Y2_GPIO_NUM 4
#define VSYNC_GPIO_NUM 25
#define HREF_GPIO_NUM 23
#define PCLK_GPIO_NUM 22
#elif defined(CAMERA_MODEL_M5STACK_PSRAM)
#define PWDN_GPIO_NUM -1
#define RESET_GPIO_NUM 15
#define XCLK_GPIO_NUM 27
#define SIOD_GPIO_NUM 25
#define SIOC_GPIO_NUM 23
#define Y9_GPIO_NUM 19
#define Y8_GPIO_NUM 36
#define Y7_GPIO_NUM 18
#define Y6_GPIO_NUM 39
#define Y5_GPIO_NUM 5
#define Y4_GPIO_NUM 34
#define Y3_GPIO_NUM 35
#define Y2_GPIO_NUM 32
#define VSYNC_GPIO_NUM 22
#define HREF_GPIO_NUM 26
#define PCLK_GPIO_NUM 21
#elif defined(CAMERA_MODEL_M5STACK_WITHOUT_PSRAM)
#define PWDN_GPIO_NUM -1
#define RESET_GPIO_NUM 15
#define XCLK_GPIO_NUM 27
#define SIOD_GPIO_NUM 25
#define SIOC_GPIO_NUM 23
#define Y9_GPIO_NUM 19
#define Y8_GPIO_NUM 36
#define Y7_GPIO_NUM 18
#define Y6_GPIO_NUM 39
#define Y5_GPIO_NUM 5
#define Y4_GPIO_NUM 34
#define Y3_GPIO_NUM 35
#define Y2_GPIO_NUM 17
#define VSYNC_GPIO_NUM 22
#define HREF_GPIO_NUM 26
#define PCLK_GPIO_NUM 21
#elif defined(CAMERA_MODEL_AI_THINKER)
#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
#elif defined(CAMERA_MODEL_M5STACK_PSRAM_B)
#define PWDN_GPIO_NUM -1
#define RESET_GPIO_NUM 15
#define XCLK_GPIO_NUM 27
#define SIOD_GPIO_NUM 22
#define SIOC_GPIO_NUM 23
#define Y9_GPIO_NUM 19
#define Y8_GPIO_NUM 36
#define Y7_GPIO_NUM 18
#define Y6_GPIO_NUM 39
#define Y5_GPIO_NUM 5
#define Y4_GPIO_NUM 34
#define Y3_GPIO_NUM 35
#define Y2_GPIO_NUM 32
#define VSYNC_GPIO_NUM 25
#define HREF_GPIO_NUM 26
#define PCLK_GPIO_NUM 21
#else
#error "Camera model not selected"
#endif
#define MOTOR_1_PIN_1 14
#define MOTOR_1_PIN_2 15
#define MOTOR_2_PIN_1 13
#define MOTOR_2_PIN_2 12
#define PART_BOUNDARY "123456789000000000000987654321"
static const char* _STREAM_CONTENT_TYPE = "multipart/x-mixed-replace;boundary=" PART_BOUNDARY;
static const char* _STREAM_BOUNDARY = "\r\n--" PART_BOUNDARY "\r\n";
static const char* _STREAM_PART = "Content-Type: image/jpeg\r\nContent-Length: %u\r\n\r\n";
httpd_handle_t camera_httpd = NULL;
httpd_handle_t stream_httpd = NULL;
static const char PROGMEM INDEX_HTML[] = R"rawliteral(
<!DOCTYPE html>
<html>
<head>
<title>ESP32-CAM Robot</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
body { font-family: Arial; text-align: center; margin:0px auto; padding-top: 30px;}
table { margin-left: auto; margin-right: auto; }
td { padding: 8 px; }
.button {
background-color: #2f4468;
border: none;
color: white;
padding: 10px 20px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 18px;
margin: 6px 3px;
cursor: pointer;
-webkit-touch-callout: none;
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
-webkit-tap-highlight-color: rgba(0,0,0,0);
}
img { width: auto ;
max-width: 100% ;
height: auto ;
}
</style>
</head>
<body>
<h1>ESP32-CAM Robot</h1>
<img src="" id="photo" >
<table>
<tr>
<td colspan="3" align="center">
<button class="button" id="button_forward" ontouchstart="button_state_forward = true;" >forward</button>
</td>
</tr>
<tr>
<td align="center">
<button class="button" onmousedown="toggleCheckbox('left');" ontouchstart="toggleCheckbox('left');" onmouseup="toggleCheckbox('stop');" ontouchend="toggleCheckbox('stop');">Left</button>
</td>
<td align="center">
<button class="button" onmousedown="toggleCheckbox('stop');" ontouchstart="toggleCheckbox('stop');">Stop</button></td><td align="center"><button class="button" onmousedown="toggleCheckbox('right');" ontouchstart="toggleCheckbox('right');" onmouseup="toggleCheckbox('stop');" ontouchend="toggleCheckbox('stop');">Right</button>
</td>
</tr>
<tr>
<td colspan="3" align="center">
<button class="button" onmousedown="toggleCheckbox('backward');" ontouchstart="toggleCheckbox('backward');" onmouseup="toggleCheckbox('stop');" ontouchend="toggleCheckbox('stop');">Backward</button>
</td>
</tr>
</table>
<div align="center">
<input type="range" class="slider" id="LEDslider" min="0" max="255" value="0"
onchange="try{
fetch(document.location.origin+'/control?var=led_PWM&val='+this.value);
}catch(e){}">
</div>
<div class="LED_feedback_value">
<h4>The feedback of LED intensity: <span id="LED_feedback_value">0</span></h4>
</div>
<div class="RSSI">
<h4>The Received Signal Strength (RSSI): <span id="RSSI_feedback_value">N/A </span>dBm</h4><br>
</div>
<script>
var counter1 = 0;
let panelButtons = 0;
var button_state_forward = false;
function toggleCheckbox(x) {
var xhr = new XMLHttpRequest();
xhr.open("GET", "/control?var=" + x + "&val=0", true); // URL = server_ip_address/control?var=xxx&val=xxx
xhr.send();
}
setInterval(function(){
controlPanel();
counter1+=1;
if (counter1==2){
getLEDval(); //It was found that the 1st XML Request will be lost
getLEDval(); //So a 2nd XML Request will be repeated.
}
if (counter1==4){
counter1=0;
getRSSI();
getRSSI();
}
},200);
function controlPanel(){
fetch(document.location.origin+'/control?var=led_PWM&val='+ document.getElementById("LEDslider").value);
if(button_state_forward){
toggleCheckbox('forward');
button_state_forward=false; // URL = server_ip_address/control?var=xxx&val=xxx
}
}
function getLEDval(){
var xhttpr = new XMLHttpRequest();
xhttpr.onreadystatechange = function(){
if (this.readyState == 4 && this.status == 200){
document.getElementById("LED_feedback_value").innerHTML = this.responseText;
}
}
xhttpr.open("GET", "readLED", true);
xhttpr.send();
}
function getRSSI(){
var xhttpr = new XMLHttpRequest();
xhttpr.onreadystatechange = function(){
if (this.readyState == 4 && this.status == 200){
document.getElementById("RSSI_feedback_value").innerHTML = this.responseText;
}
}
xhttpr.open("GET", "readRSSI", true);
xhttpr.send();
}
window.onload = document.getElementById("photo").src = window.location.href.slice(0, -1) + ":81/stream";
// setInterval(controlPanel,1000); // Javascript does not support multiple setInterval()
</script>
</body>
</html>
)rawliteral";
static esp_err_t index_handler(httpd_req_t *req){
httpd_resp_set_type(req, "text/html");
return httpd_resp_send(req, (const char *)INDEX_HTML, strlen(INDEX_HTML));
}
static esp_err_t stream_handler(httpd_req_t *req){
camera_fb_t * fb = NULL;
esp_err_t res = ESP_OK;
size_t _jpg_buf_len = 0;
uint8_t * _jpg_buf = NULL;
char * part_buf[64];
res = httpd_resp_set_type(req, _STREAM_CONTENT_TYPE);
if(res != ESP_OK){
return res;
}
while(true){
fb = esp_camera_fb_get();
if (!fb) {
Serial.println("Camera capture failed");
res = ESP_FAIL;
} else {
if(fb->width > 400){
if(fb->format != PIXFORMAT_JPEG){
bool jpeg_converted = frame2jpg(fb, 80, &_jpg_buf, &_jpg_buf_len);
esp_camera_fb_return(fb);
fb = NULL;
if(!jpeg_converted){
Serial.println("JPEG compression failed");
res = ESP_FAIL;
}
} else {
_jpg_buf_len = fb->len;
_jpg_buf = fb->buf;
}
}
}
if(res == ESP_OK){
size_t hlen = snprintf((char *)part_buf, 64, _STREAM_PART, _jpg_buf_len);
res = httpd_resp_send_chunk(req, (const char *)part_buf, hlen);
}
if(res == ESP_OK){
res = httpd_resp_send_chunk(req, (const char *)_jpg_buf, _jpg_buf_len);
}
if(res == ESP_OK){
res = httpd_resp_send_chunk(req, _STREAM_BOUNDARY, strlen(_STREAM_BOUNDARY));
}
if(fb){
esp_camera_fb_return(fb);
fb = NULL;
_jpg_buf = NULL;
} else if(_jpg_buf){
free(_jpg_buf);
_jpg_buf = NULL;
}
if(res != ESP_OK){
break;
}
//Serial.printf("MJPG: %uB\n",(uint32_t)(_jpg_buf_len));
}
return res;
}
static esp_err_t cmd_handler(httpd_req_t *req){
char* buf;
size_t buf_len;
char variable[32] = {0,};
char value[32] = {0,}; // Assume max. of 32 characters??
// Serial.println("Received a command!");
buf_len = httpd_req_get_url_query_len(req) + 1;
if (buf_len > 1) {
buf = (char*)malloc(buf_len);
if(!buf){
httpd_resp_send_500(req);
return ESP_FAIL;
}
if (httpd_req_get_url_query_str(req, buf, buf_len) == ESP_OK) {
if (httpd_query_key_value(buf, "var", variable, sizeof(variable)) == ESP_OK &&
httpd_query_key_value(buf, "val", value, sizeof(value)) == ESP_OK) {
} else {
free(buf);
httpd_resp_send_404(req);
return ESP_FAIL;
}
} else {
free(buf);
httpd_resp_send_404(req);
return ESP_FAIL;
}
free(buf);
} else {
httpd_resp_send_404(req);
return ESP_FAIL;
}
sensor_t * s = esp_camera_sensor_get();
int res = 0;
/* Control Decode */
if(!strcmp(variable, "forward")) {
Serial.println("Forward");
digitalWrite(MOTOR_1_PIN_1, 1);
digitalWrite(MOTOR_1_PIN_2, 0);
digitalWrite(MOTOR_2_PIN_1, 1);
digitalWrite(MOTOR_2_PIN_2, 0);
}
else if(!strcmp(variable, "left")) {
Serial.println("Left");
digitalWrite(MOTOR_1_PIN_1, 0);
digitalWrite(MOTOR_1_PIN_2, 1);
digitalWrite(MOTOR_2_PIN_1, 1);
digitalWrite(MOTOR_2_PIN_2, 0);
}
else if(!strcmp(variable, "right")) {
Serial.println("Right");
digitalWrite(MOTOR_1_PIN_1, 1);
digitalWrite(MOTOR_1_PIN_2, 0);
digitalWrite(MOTOR_2_PIN_1, 0);
digitalWrite(MOTOR_2_PIN_2, 1);
}
else if(!strcmp(variable, "backward")) {
Serial.println("Backward");
digitalWrite(MOTOR_1_PIN_1, 0);
digitalWrite(MOTOR_1_PIN_2, 1);
digitalWrite(MOTOR_2_PIN_1, 0);
digitalWrite(MOTOR_2_PIN_2, 1);
}
else if(!strcmp(variable, "stop")) {
Serial.println("Stop");
digitalWrite(MOTOR_1_PIN_1, 0);
digitalWrite(MOTOR_1_PIN_2, 0);
digitalWrite(MOTOR_2_PIN_1, 0);
digitalWrite(MOTOR_2_PIN_2, 0);
}
else if(!strcmp(variable, "led_PWM")){
led_intensity = atoi(value)/4; // val =
Serial.printf("Command: LED PWM = %u\n",led_intensity); // val
ledcWrite(Flashlight, led_intensity); // val
}
else {
res = -1;
}
if(res){
return httpd_resp_send_500(req);
}
httpd_resp_set_hdr(req, "Access-Control-Allow-Origin", "*");
return httpd_resp_send(req, NULL, 0);
}
void startCameraServer(){
httpd_config_t config = HTTPD_DEFAULT_CONFIG();
config.server_port = 80;
httpd_uri_t index_uri = {
.uri = "/",
.method = HTTP_GET,
.handler = index_handler,
.user_ctx = NULL
};
httpd_uri_t cmd_uri = {
.uri = "/control",
.method = HTTP_GET,
.handler = cmd_handler,
.user_ctx = NULL
};
httpd_uri_t stream_uri = {
.uri = "/stream",
.method = HTTP_GET,
.handler = stream_handler,
.user_ctx = NULL
};
if (httpd_start(&camera_httpd, &config) == ESP_OK) {
httpd_register_uri_handler(camera_httpd, &index_uri);
httpd_register_uri_handler(camera_httpd, &cmd_uri);
}
config.server_port += 1;
config.ctrl_port += 1;
if (httpd_start(&stream_httpd, &config) == ESP_OK) {
httpd_register_uri_handler(stream_httpd, &stream_uri);
}
}
void handleRSSI() {
server.send(200, "text/plane", String(WiFi.RSSI())); //Send LED value only to client ajax request
Serial.println("RSSI request received and XMLHttpResponse sent!");
// Serial.printf("RSSi: %ld dBm\n",WiFi.RSSI())
}
void handleLED() {
server.send(200, "text/plane", String(led_intensity)); //Send LED value only to client ajax request
Serial.println("LED PWM request received and XMLHttpResponse sent!");
}
void setup() {
WRITE_PERI_REG(RTC_CNTL_BROWN_OUT_REG, 0); //disable brownout detector
ledcSetup(ledChannel, ledFreq, ledResolution); // Setup LED PWM freq & resolution
ledcAttachPin(Flashlight, 4);
pinMode(MOTOR_1_PIN_1, OUTPUT);
pinMode(MOTOR_1_PIN_2, OUTPUT);
pinMode(MOTOR_2_PIN_1, OUTPUT);
pinMode(MOTOR_2_PIN_2, OUTPUT);
Serial.begin(115200);
Serial.setDebugOutput(false);
camera_config_t config;
config.ledc_channel = LEDC_CHANNEL_0;
config.ledc_timer = LEDC_TIMER_0;
config.pin_d0 = Y2_GPIO_NUM;
config.pin_d1 = Y3_GPIO_NUM;
config.pin_d2 = Y4_GPIO_NUM;
config.pin_d3 = Y5_GPIO_NUM;
config.pin_d4 = Y6_GPIO_NUM;
config.pin_d5 = Y7_GPIO_NUM;
config.pin_d6 = Y8_GPIO_NUM;
config.pin_d7 = Y9_GPIO_NUM;
config.pin_xclk = XCLK_GPIO_NUM;
config.pin_pclk = PCLK_GPIO_NUM;
config.pin_vsync = VSYNC_GPIO_NUM;
config.pin_href = HREF_GPIO_NUM;
config.pin_sscb_sda = SIOD_GPIO_NUM;
config.pin_sscb_scl = SIOC_GPIO_NUM;
config.pin_pwdn = PWDN_GPIO_NUM;
config.pin_reset = RESET_GPIO_NUM;
config.xclk_freq_hz = 20000000;
config.pixel_format = PIXFORMAT_JPEG;
if(psramFound()){
config.frame_size = FRAMESIZE_VGA;
config.jpeg_quality = 10;
config.fb_count = 2;
} else {
config.frame_size = FRAMESIZE_SVGA;
config.jpeg_quality = 12;
config.fb_count = 1;
}
// Camera init
esp_err_t err = esp_camera_init(&config);
if (err != ESP_OK) {
Serial.printf("Camera init failed with error 0x%x", err);
return;
}
// Wi-Fi connection
WiFi.begin(ssid, password);
while (WiFi.status() != WL_CONNECTED) {
delay(500);
Serial.print(".");
}
Serial.println("");
Serial.println("WiFi connected");
Serial.print("Camera Stream Ready! Go to: http://");
Serial.println(WiFi.localIP());
// Start streaming web server
startCameraServer();
server.on("/readRSSI", handleRSSI);
server.on("/readLED", handleLED); //To get update of ADC Value only
server.begin(); //Start server
Serial.println("HTTP server started");
ledcWrite(Flashlight, 0x01);
}
void loop() {
server.handleClient();
delay(1);
}
包含网络流量和错误的网页：
尝试了AP和客户端模式下的代码及其工作原理，但由于Ajax的属性，出现间歇性错误404，看来我应该将Web服务器的套接字保留为80，这可能是崩溃的另一个原因...... .
1个回答
0
投票
投票
嗯，重复的 ajax 调用看起来肯定不正确
setInterval(function(){
controlPanel();
counter1+=1;
if (counter1==2){
getLEDval(); //It was found that the 1st XML Request will be lost
getLEDval(); //So a 2nd XML Request will be repeated.
}
if (counter1==4){
counter1=0;
getRSSI();
getRSSI();
}
},200);
基本上，您会立即调用 getLEDval() 或 getRSSI() 两次，Ajax 本质上是异步的，因此您不会给第一次调用完成的机会，并且您已经发送了第二个请求。
另外，这些调用是按一定间隔发生的，这使得一切变得更加异步，并且所有这些 Ajax 调用可能会堵塞在一个大队列中，因为您每秒重复循环 5 次（您的浏览器可能可以很好地处理它，但是 ESP 会难以同时处理超过 5-6 个请求。
最新问题
- 在 Google 表格中插入注释时更改单元格颜色
- 如何让我的后端只接受来自前端的请求？
- 机器学习算法令人困惑
- 使用 traefik PathPrefix 与 docker 一起部署的 NuxtJs 不会检测页面
- Hybris业务流程处于运行状态
- 为什么将 double 变量转换为 int 时，用于打印便士数量的 printf 语句会被打印掉？
- SQL 查询求和分组依据
- npm 和 VS Code 中的节点更新消息
- Android平台.NET maui项目中SQLite和SQL Server之间的同步错误不起作用
- Pinecone 节点 js 错误：TypeError - PineconeClient 不是构造函数
- 我有一个查询，用于根据给定的开始日期生成日期序列。我想对所有其他日期运行相同的查询并将结果合并
- SQLite - 仅设置从连接表返回的正确结果
- 将 haxe.Int64 转换为 Float？
- 无法在 Docker 中的 /run/secrets 中循环文件
- 如果类中没有找到属性，如何在函数/方法中返回 null？
- 在Python中使用in运算符搜索列表时使用什么算法？
- 将 json 从字符串解码为 double 时的浮点精度问题
- PHP - 使用点符号键将多维数组转换为二维数组
- T(n) = 7T(n/2) + n^2 和 T(n) = 7T(n/3) + n^2 的时间复杂度
- Flutter - 垂直分隔线和水平分隔线
© www.soinside.com 2019 - 2024. All rights reserved.