ESP32-CAM robot FPV, Limitation html?

[Antttoine]

Bonjour à tous !

Alors pour faire court je suis en train de faire un petit "rover" que je voudrais un peu fun.

Aucun souci au début (merci Google), je contrôle le robot via un ESP32-cam, qui me permet d'avoir le retour vidéo.

Le tout étant piloté via une page html.

Sur ma page, en plus du stream vidéeo, j'ai 5 boutons directionnels et 1 bouton pour allumer le flash, tout fonctionne.

Pour rendre ça plus sympa, je veux ajouter une pince (avec un servo MG996r).

Et là, en rajoutant 2 boutons pour ouvrir et fermer la pince, ça bugue : il y a toujours 1 à 2 boutons sur la page qui ne fonctionnent plus et la page m'affiche que l'URL demandée n'existe pas, alors même que ces boutons étaient fonctionnels au précédent démarrage...
Un peu comme si j'avais trop de boutons sur la page (ça paraît assez c*n à dire).
Je précise que mes compétences en html sont très limitées

Quelqu'un aurait-t'il une idée du problème??

Le code est trop long pour que je puisse le mettre ici, je le mets donc en pièce jointe. Pour moi, le problème se situe dans le fichier app_httpd.cpp

(Il n'est pas de moi, hormis de rares modifs).

Si quelqu'un avait une suggestion... Merci d'avance, je tourne en rond!!!

app_httpd.cpp (18.5 KB)

Camera_car_servo.ino (3.02 KB)

camera_index.h (52.4 KB)

camera_pins.h (2.58 KB)

[al1fch]

Bonjour

Comment as-tu géré pour ton fichier camera_index.h qui contient code html compressé ?

Les modifications du fichier app_httpd.cpp ne suffisent pas , il faut des modifications complémentaires cohérentes dans le code de la page index.html (sous forme compressée dans le fichier camera_index.h)

Mes connaissances en html étant très sommaires je me suis contenté pour l'instant de modifier l'action associée a certains boutons existants (fichier app_httpd.cpp) c'est plus modeste..... je n'ai pas fait les retouches dans le code compressé de la page index.html. ça permet de tester dans n premier temps les fonctionalités puis ultérieurement de faire évoluer l'aspect de la page.

Si tu a juste besoin du flux video, les boutons ci-dessous à l'exception de Start Stream (s'ils sont présent dans ton index.html) sont disponibles pour un autre usage (capture d'image et reconnaissance faciale)

[Antttoine]

Bonjour,

A vrai dire, c'est une piste super intéressante, je ne savais pas que le fichier camera_index contenait du html compressé !!

J'imagine que le html compressé correspond au code ci-dessous (non?):

//File: index_ov2640.html.gz, Size: 4316
#define index_ov2640_html_gz_len 4316
const uint8_t index_ov2640_html_gz[] = {
 0x1F, 0x8B, 0x08, 0x08, 0x50, 0x5C, 0xAE, 0x5C, 0x00, 0x03, 0x69, 0x6E, 0x64, 0x65, 0x78, 0x5F,
 0x6F, 0x76, 0x32, 0x36, 0x34, 0x30, 0x2E, 0x68, 0x74, 0x6D, 0x6C, 0x00, 0xE5, 0x5D, 0x7B, 0x73,
 0xD3, 0xC6, 0x16, 0xFF, 0x9F, 0x4F, 0x21, 0x04, 0x25, 0xF6, 0x34, 0x76, 0x6C, 0xC7, 0x84, 0xE0,
 0xDA, 0xE2, 0x42, 0x08, 0xD0, 0x19, 0x5E, 0x25, 0x2D, 0x74, 0xA6, 0xD3, 0x81, 0xB5, 0xB4, 0xB2,
 0x55, 0x64, 0xC9, 0x95, 0x56, 0x76, 0x52, 0x26, 0x9F, 0xE3, 0x7E, 0xA0, 0xFB, 0xC5, 0xEE, 0xD9,
 0x87, 0xA4, 0x95, 0xBC, 0x7A, 0xD8, 0x26, 0x36, 0x97, 0xEB, 0xCC, 0x14, 0xD9, 0xDA, 0x73, 0xF6,
 0x9C, 0xF3, 0x3B, 0xAF, 0x5D, 0x3D, 0x3A, 0xBC, 0x6D, 0xF9, 0x26, 0xB9, 0x9A, 0x63, 0x6D, 0x4A,
 [...]
};

Je n'ai aucune idée de la façon dont je peux modifier ce code compressé, aurais-tu une idée ?

Juste pour info une capture d'écran de ma page de contrôle (très simpliste) :

[al1fch]

HTML compressé : des infos içi par exemple sur le principe

Cache et compression des pages web avec Gzip ou Deflate en HTTP

Pour décompresser à partir d'un tableau C des utilitaires existent peut être, en deux étapes
-extraire les octets du tableau
-decompresser (gzip)
-> on obtient normalement un fichier html qu'on modifie , compresse puis convertit en tableau C

D'autre part si tu demandes à ton navigateur le code source de la page il te donnera une bonne idée de ce que tu cherches

[Antttoine]

Super merci !

J'ai trouvé cet utilitaire qui à l'ai sympa :

CyberChef

Je regarde ton lien pour y voir plus clair, encore merci !

En revanche, le code source de ma page ne contient que ce que j'ai modifié dans app_httpd.

<TITLE>Surveillance Robot</TITLE><meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
<script>var xhttp = new XMLHttpRequest();</script><script>function getsend(arg) { xhttp.open('GET', arg +'?' + new Date().getTime(), true); xhttp.send() } </script><p align=center><IMG SRC='http://192.168.1.205:81/stream' style='width:800px; transform:rotate(180deg);'></p>
<p align=center> <button style=width:100px;height:40px; onmousedown=getsend('forward')  ontouchstart=getsend('forward') onmouseup=getsend('stop') >Forward</button> </p><p align=center><button style=width:100px;height:40px onmousedown=getsend('leftturn')  ontouchstart=getsend('leftturn') onmouseup=getsend('stop') >Left</button>&nbsp;<button style=width:100px;height:40px onmousedown=getsend('stop')      onmouseup=getsend('stop')                                  >Stop</button>&nbsp;<button style=width:100px;height:40px onmousedown=getsend('rightturn') ontouchstart=getsend('rightturn') onmouseup=getsend('stop') >Right</button></p><p align=center><button style=width:100px;height:40px onmousedown=getsend('reverse')  ontouchstart=getsend('reverse') onmouseup=getsend('stop') >Reverse</button></p><p align=center><button style=width:100px;height:40px onmousedown=getsend('ferm')  ontouchstart=getsend('ferm') onmouseup=getsend('stop') >ferme</button>&nbsp;<button style=width:100px;height:40px onmousedown=getsend('ouvr') ontouchstart=getsend('ouvr') onmouseup=getsend('stop') >ouvre</button></p><p align=center><button style=width:100px;height:40px onmousedown=getsend('lamp')  ontouchstart=getsend('lamp')  >lamp</button>&nbsp</p></p>

L'hypothèse d'avoir trop de "boutons" te paraît donc plausible??

edit : je me pose une question, le fichier index reste-t-il nécessaire dans mon cas (permet-il le stream?) ou sert-il uniquement lorsque l'on utilise la page "de base" de l'esp32 CAM?

[al1fch]

pas mal cet utilitaire !! merci
comment as-tu procédé au décodage ? 'une pou dex étapes ,quels parémétrages ?)

Pour moi le fichier index.htm décrit la page envoyée lorsque qu'un navigateur se connecte à l'ip du serveur sans préciser l'url d'une page particulière

Quelle allure à l'url que tu appelles pour obtenir ta page contenant le flux video et les boutons ?
(pas trop de temps aujourd'hui pour balayer ton code ......d'ou des réponses 'génériques'..... !!)

[Antttoine]

Voici les paramètres que j'utilise ! 4 étapes mais qui se font d'un coup :

En effet l'index est bien appelé dès la connexion donc difficile de s'en passer !
Via cet utilitaire, j'ai supprimé les boutons enroll face et face recognition, ainsi que (normalement) tous les paramètres qui y étaient associés.
Tout se recompile bien, aucun nouveau problème apparent lors du stream(mais le problème d'origine est toujours là).

Voici l'url (ça ne fonctionne qu'en local):
http://192.168.1.205/

Le stream se lance aussitôt, mais je peux aussi le visualiser en tapant simplement :
http://192.168.1.205:81/stream

Sinon, voici une capture d'écran de l'onglet network des outils de développement :
Tous les boutons fonctionnent sauf "ouvr", pourtant, les boutons "ferm", "ouvr" et "lamp" ont été codés de la même façon...

Le message d'erreur associé est "this URI doesn't exist"... les plus étrange est qu'en fonction des téléversement, parfois c'est l'un, parfois c'est l'autre qui ne marche pas !

Des réponses génériques mais qui m'ont permis de mettre le nez dans ce fameux html compressé dont je n'avais même pas supposé l'existence ! donc merci beaucoup!

Edit : c'est en changeant l'ordre des lignes ci-dessous que je change les URI fonctionnelles (la dernière de la liste ne fonctionne jamais- j'ai changé "ouvr" par "opn" au cas où)

  ra_filter_init(&ra_filter, 20);
  Serial.printf("Starting web server on port: '%d'", config.server_port);
  if (httpd_start(&camera_httpd, &config) == ESP_OK) {
    httpd_register_uri_handler(camera_httpd, &index_uri);
    httpd_register_uri_handler(camera_httpd, &forward_uri);
    httpd_register_uri_handler(camera_httpd, &reverse_uri);
    httpd_register_uri_handler(camera_httpd, &stop_uri);
    httpd_register_uri_handler(camera_httpd, &leftturn_uri);
    httpd_register_uri_handler(camera_httpd, &rightturn_uri);
    /*******************************/
    httpd_register_uri_handler(camera_httpd, &opn_uri);
    httpd_register_uri_handler(camera_httpd, &lamp_uri);
    httpd_register_uri_handler(camera_httpd, &ferm_uri);

    /************************/

  }