Tutoriel ESP32 45/55 - Serveur de streaming personnalisé avec contrôle LED CAM-3 l Kit d'apprentissage ESP32 de SunFounder
Dans ce tutoriel, nous allons explorer comment configurer un serveur de streaming personnalisé en utilisant la carte d'extension ESP32 de SunFounder. Le projet vous permet de diffuser une vidéo en direct sur votre navigateur tout en contrôlant une LED directement depuis l'interface. Cette combinaison de fonctionnalités offre une expérience d'apprentissage pratique avec l'IoT et les technologies web.
Nous utiliserons les capacités Wi-Fi intégrées de l'ESP32 pour créer un serveur web qui diffuse de la vidéo et gère les commandes de contrôle des LED. Le projet implique la programmation, le câblage et la compréhension de l'interaction entre les composants. Si vous souhaitez une compréhension plus claire de la configuration, assurez-vous de consulter la vidéo à (dans la vidéo à 00:00).
Matériel expliqué
Les composants principaux de ce projet comprennent le microcontrôleur ESP32, un module caméra, une LED et une résistance. L'ESP32 est un microcontrôleur polyvalent avec Wi-Fi et Bluetooth intégrés, ce qui le rend parfait pour les applications IoT. Le module caméra nous permet de capturer des vidéos, tandis que la LED fournit un dispositif de sortie simple pour le contrôle.
La LED est connectée via une résistance pour limiter le courant, évitant ainsi d'endommager à la fois la LED et le microcontrôleur. Cette configuration nous permettra d'allumer et d'éteindre la LED via notre interface web, mettant en avant les capacités de l'ESP32 à gérer des entrées et des sorties sur un réseau.
Détails de la fiche technique
| Fabricant | Espressif |
|---|---|
| Numéro de pièce | ESP32-WROOM-32 |
| Tension logique/IO | 3,3 V |
| Tension d'alimentation | 3,0-3,6 V |
| Courant de sortie (par canal) | 12 mA |
| Courant crête (par canal) | 40 mA |
| Directives sur la fréquence PWM | 1 kHz |
| Seuils de logique d'entrée | 0,2 V (bas) / 0,8 V (haut) |
| Chute de tension / RDS(on)/ saturation | 0,2 V (typ.) |
| Limites thermiques | Température maximale du jonc : 125 °C |
| Colis | QFN48 |
| Remarques / variantes | Disponible dans différentes configurations |
- Assurez-vous que l'ESP32 est alimenté avec une source de 3,3 V régulée.
- Utilisez une résistance limitant le courant (220 Ohm) avec la LED pour prévenir tout dommage.
- Maintenez des connexions appropriées pour éviter les entrées flottantes.
- Vérifiez que les identifiants Wi-Fi sont corrects et sensibles à la casse.
- Utilisez une source d'alimentation stable pour des performances constantes.
- Considérez la dissipation de chaleur dans des espaces clos.
Instructions de câblage
Pour câbler l'ESP32 et la LED, commencez par connecter la broche la plus longue de la LED à une broche GPIO appropriée, dans ce cas, nous utiliserons la broche 14. La broche la plus courte doit être connectée à la ligne de terre sur votre plaque à pain. Ensuite, placez une résistance de 220 Ohms en série avec la LED, en connectant une extrémité à la broche GPIO (broche 14) et l'autre extrémité à la terre. Assurez-vous que l'ESP32 est alimenté correctement, soit par le port micro USB, soit avec une batterie lithium 18650.
Pour le module caméra, assurez-vous de connecter les pins nécessaires en fonction du modèle de caméra que vous utilisez, car le câblage peut légèrement varier. L'ESP32 gérera le flux vidéo grâce à ses capacités intégrées, et le contrôle des LED sera géré via l'interface web que nous mettrons en place dans le code.
Exemples de code et guide d'utilisation
Le programme commence par inclure les bibliothèques nécessaires et définir les identifiants Wi-Fi. Vous devrez remplacerssidetpasswordavec vos véritables identifiants Wi-Fi pour connecter l'ESP32 à votre réseau.
const char* ssid = "SSID";
const char* password = "PASSWORD";Ensuite, nous définissons la broche LED et configurons les paramètres de la caméra. La broche utilisée pour la LED est définie commeLED_PIN, qui sera utilisé plus tard dans le code pour contrôler l'état de la LED.
#define LED_PIN 14
pinMode(LED_PIN, OUTPUT);Dans le gestionnaire de requêtes pour le contrôle LED, nous vérifions la commande reçue de l'interface web. Selon que la commande soit "on" ou "off", nous utilisonsdigitalWrite(LED_PIN, 1);pour allumer la LED etdigitalWrite(LED_PIN, 0);pour l'éteindre.
if(!strcmp(variable, "on")) {
Serial.println("ON");
digitalWrite(LED_PIN, 1);
}
else if(!strcmp(variable, "off")) {
Serial.println("OFF");
digitalWrite(LED_PIN, 0);
}Cette logique permet à l'interface web de communiquer efficacement avec l'ESP32, permettant un contrôle en temps réel de la LED en fonction des interactions de l'utilisateur. Le code complet se charge en dessous de l'article pour une exploration plus approfondie.
Démonstration / À quoi s'attendre
Une fois que tout est configuré et que le code est téléchargé, vous devriez pouvoir accéder à l'adresse IP de l'ESP32 dans votre navigateur web. La vidéo en streaming apparaîtra, et vous pourrez contrôler la LED à l'aide des boutons de l'interface. En cliquant sur "ON", la LED s'allumera, tandis que "OFF" l'éteindra. Assurez-vous que l'ESP32 et votre ordinateur sont connectés au même réseau pour garantir un bon fonctionnement (dans la vidéo à 12:30).
Horodatages vidéo
- 00:00 Début
- 1:51 Introduction au projet
- 2:31 Page de documentation
- 3:33 Explication du câblage
- 5:08 Explication du code Arduino
- 13:28 Sélectionner la carte ESP32 et le port COM dans l'IDE Arduino
- 15:10 Démonstration
Images
/*
* La permission est par la présente accordée, gratuitement, à toute personne obtenant une copie de ce logiciel et des fichiers de documentation associés. L'avis de droit d'auteur ci-dessus et cet avis de permission doivent être inclus dans toutes les copies ou des portions substantielles du logiciel.
*/
#include "esp_camera.h"
#include <WiFi.h>
#include "esp_timer.h"
#include "img_converters.h"
#include "Arduino.h"
#include "fb_gfx.h"
#include "soc/soc.h" // désactiver les problèmes de délestage
#include "soc/rtc_cntl_reg.h" // désactiver les problèmes de délestage
#include "esp_http_server.h"
// Remplacez les variables suivantes par votre combinaison SSID/Mot de passe.
const char* ssid = "SSID";
const char* password = "PASSWORD";
#define PART_BOUNDARY "123456789000000000000987654321"
#define CAMERA_MODEL_AI_THINKER
// #define CAMERA_MODEL_M5STACK_PSRAM
// #define CAMERA_MODEL_M5STACK_SANS_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 33
#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 LED_PIN 14
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(
<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 ;
transform: rotate(180deg);
}
</style>
</head>
<body>
<h1>ESP32 CAMERA</h1>
<img src="" id="photo" >
<table>
<tr><td align="center"><button class="button" onmousedown="toggleCheckbox('on');" ontouchstart="toggleCheckbox('on');onmouseup="toggleCheckbox('on');" ontouchend="toggleCheckbox('on');">ON</button></td>
<td align="center"><button class="button" onmousedown="toggleCheckbox('off');" ontouchstart="toggleCheckbox('off');onmouseup="toggleCheckbox('off');" ontouchend="toggleCheckbox('off');">OFF</button></td></tr>
</table>
<script>
function toggleCheckbox(x) {
var xhr = new XMLHttpRequest();
xhr.open("GET", "/action?go=" + x, true);
xhr.send();
}
window.onload = document.getElementById("photo").src = window.location.href.slice(0, -1) + ":81/stream";
</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,};
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, "go", variable, sizeof(variable)) == 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;
if(!strcmp(variable, "on")) {
Serial.println("ON");
digitalWrite(LED_PIN, 1);
}
else if(!strcmp(variable, "off")) {
Serial.println("OFF");
digitalWrite(LED_PIN, 0);
}
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 = "/action",
.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 setup() {
WRITE_PERI_REG(RTC_CNTL_BROWN_OUT_REG, 0); // désactiver le détecteur de baisse de tension
pinMode(LED_PIN, 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;
}
// Initialisation de la caméra
esp_err_t err = esp_camera_init(&config);
if (err != ESP_OK) {
Serial.printf("Camera init failed with error 0x%x", err);
return;
}
// Connexion Wi-Fi
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());
// Démarrer le serveur web de streaming
startCameraServer();
}
void loop() {
}
Common Course Links
Common Course Files
Ressources et références
-
Documentation
Fichiers📁
Aucun fichier disponible.
