DuvelBot - Robot na Naghahatid ng Beer sa ESP32-CAM: 4 na Hakbang (na may Mga Larawan)

2024 May -akda: John Day | [email protected]. Huling binago: 2024-01-30 13:11

Kasunod sa pagsusumikap sa isang araw, walang malapit sa paghigop ng iyong paboritong beer sa sopa. Sa aking kaso, iyon ang Belgian blond ale na "Duvel". Gayunpaman, pagkatapos ng lahat maliban sa pagbagsak ay nahaharap tayo sa isang pinaka-seryosong problema: ang palamigan na naglalaman ng aking Duvel ay isang hindi maiiwasang 20 talampakan na tinanggal mula sa nasabing sopa.

Habang ang ilang magaan na pamimilit mula sa aking tagiliran ay maaaring ilipat ang paminsan-minsang tinedyer na fravenger upang ibuhos ang allowance ng aking linggong Duvel, ang gawain na talagang maihatid ito sa halos pagod na progenitor nito ay malinaw na isang hakbang na napakalayo.

Oras na upang putulin ang soldering iron at keyboard…

Ang DuvelBot ay isang no-frills na AI-Thinker ESP32-CAM batay sa pagmamaneho ng webcam, na maaari mong makontrol mula sa iyong smartphone, browser o tablet.

Madaling iakma o palawakin ang platform na ito sa mas kaunting paggamit ng alkohol (pag-iisip ng SpouseSpy, NeighbourWatch, KittyCam…).

Itinayo ko ang robot na ito higit sa lahat upang malaman nang kaunti tungkol sa buong web program at mga bagay na IoT, na kung saan ay wala akong alam. Kaya't sa pagtatapos ng Instructable na ito ay isang detalyadong paliwanag kung paano ito gumagana.

Maraming bahagi ng Instructable na ito ay batay sa mahusay na mga paliwanag na matatagpuan sa Random Nerd Tutorials, kaya't mangyaring puntahan sila!

Mga gamit

Ang iyong kailangan:

Ang listahan ng mga bahagi ay hindi nakaukit sa bato at maraming mga bahagi ay maaaring makuha sa isang tonelada ng iba't ibang mga bersyon at mula sa maraming iba't ibang mga lugar. Kinuha ko ang karamihan mula sa Ali-Express. Tulad ng sinabi ni Machete: mag-ayos.

Hardware:

• Module ng AI Thinker ESP32-CAM. Maaaring ito ay maaaring gumana sa ibang mga module ng ESP32-CAM ngunit iyon ang ginamit ko
• L298N board driver ng motor,
• Isang murang 4-wheeled robotics platform,
• Isang pabahay na may malaking patag na ibabaw tulad ng Hammond Electronics 1599KGY,
• USB-to-3.3V-TTL-converter para sa programa.
• Para sa pag-iilaw: 3 puting LEDs, BC327 o iba pang pangkalahatang layunin transistor NPN (Ic = 500mA), 4k7k resistor, 3 82Ohm resistors, perfboard, cables (tingnan ang eskematiko at mga larawan).
• Isang on / off toggle switch at isang normal na bukas na pushbutton para sa pagprograma.

Opsyonal:

• Isang fisheye camera na may mas mahabang pagbaluktot kaysa sa karaniwang OV2460 camera na ibinigay kasama ang module na ESP32-CAM,
• Ang WiFi antena na may angkop na mahabang cable at Ultra Miniature Coax Connector, tulad nito. Ang ESP32-CAM ay mayroong onboard antena at ang pabahay ay plastik, kaya't ang isang antena ay hindi talaga kinakailangan, subalit naisip kong cool ito, kaya…
• Inkjet na naka-print na sticker paper para sa tuktok na disenyo ng takip.

Ang karaniwang mga tool sa hardware: bakal na panghinang, drills, distornilyador, pliers…

Hakbang 1: Pagbuo ng Robot Platform

Ang eskematiko:

Ang eskematiko ay walang espesyal. Kinokontrol ng ESP32-cam ang mga motor sa pamamagitan ng L298N motor driver board, na mayroong dalawang mga channel. Ang mga motor ng kaliwa at kanang bahagi ay inilalagay sa parallel at ang bawat panig ay sumasakop sa isang channel. Apat na maliit na 10..100nF ceramic capacitor na malapit sa mga motor pin ay palaging ipinapayong kontrahin ang pagkagambala ng RF. Gayundin, ang isang malaking cap ng electrolytic (2200… 4700uF) sa supply ng motor board tulad ng ipinakita sa eskematiko, habang hindi mahigpit na kinakailangan, ay maaaring limitahan ang boltahe ng suplay ng boltahe (kung nais mong makakita ng isang nakakatakot na pelikula, pagkatapos ay i-imbestiga ang Vbat na may isang oscilloscope habang ang mga motor ay aktibo).

Tandaan na ang parehong mga channel ng motor na Pinapayagan ang mga pin ay hinihimok ng parehong pulso-width modulated (PWM) na pin ng ESP32 (IO12). Ito ay dahil ang module ng ESP32-CAM ay walang isang toneladang GPIO (kasama ang iskematiko ng module para sa sanggunian). Ang mga LED ng robot ay hinihimok ng IO4, na hinihimok din ang onboard flash LED, kaya alisin ang Q1 upang maiwasan ang flash LED sa ilaw sa isang saradong pabahay.

Ang pindutan ng Programming, on / off switch, pagsingil ng konektor at konektor ng programa ay maa-access sa ilalim ng robot. Maaari ko bang gawin ang isang mas mahusay na trabaho para sa konektor ng programa (3.5mm jack?), Ngunit ang beer ay hindi na makapaghintay. Gayundin ang mga over-the-air-update (OTA) ay magaling i-set up.

Upang mailagay ang robot sa mode ng pagprograma, pindutin ang pindutan ng programa (bababa nito ang IO0) at pagkatapos ay buksan ito.

Mahalaga: upang singilin ang mga baterya ng NiMH ng robot, gumamit ng isang hanay ng suplay ng lab (na-unload) sa halos 14V at kasalukuyang limitado sa 250mA. Ang boltahe ay babagay sa boltahe ng mga baterya. Idiskonekta kung ang robot ay nararamdaman na mainit o ang boltahe ng baterya ay umabot sa halos 12.5V. Ang isang malinaw na pagpapabuti dito ay upang isama ang isang tamang charger ng baterya, ngunit nasa labas ng saklaw ng Instructable na ito.

Ang hardware:

Mangyaring tingnan din ang mga tala sa mga larawan. Ang pabahay ay naka-mount sa base ng robot gamit ang 4 M4 bolts at mga self-locking nut. Tandaan ang goma na tubing na ginamit bilang mga distansya ng spacer. Inaasahan kong, nagbibigay din ito ng ilang suspensyon sa Duvel, kung dapat patunayan ang pagsakay. Ang module ng ESP32-CAM at L298N motor board ay naka-mount sa pabahay gamit ang mga plastik na malagkit na paa (hindi sigurado ng tamang pangalan sa Ingles), upang maiwasan na mag-drill ng labis na mga butas. Gayundin ang ESP32 ay naka-mount sa sarili nitong perfboard at pluggable pinheaders. Ginagawa nitong madali upang palitan ang ESP32.

Huwag kalimutan: kung pupunta ka sa isang panlabas na antennna ng WiFi sa halip na ang built-in na isa, pagkatapos ay paghihinang din ang jumper ng pagpili ng antena sa ilalim ng board ng ESP32-CAM.

I-print ang tuktok na logo sa file na DuvelBot.svg sa papel ng sticker ng inkjet (o idisenyo ang iyong sarili), at handa ka nang umalis!

Hakbang 2: I-program ang Robot

Maipapayo na iprograma ang robot bago mo ito isara, upang matiyak na gumagana ang lahat at walang lilitaw na mahika.

Kailangan mo ng mga sumusunod na tool ng software:

• Ang Arduino IDE,
• Ang mga aklatan ng ESP32, SPIFFS (serial peripheral flash file system), ESPAsync Webserver library.

Ang huli ay maaaring mai-install sa pamamagitan ng pagsunod sa randomnerdtutorial na ito hanggang sa at isama ang seksyon na "pag-aayos ng iyong mga file". Hindi ko talaga maipaliwanag nang mas mabuti ito.

Ang code:

Ang aking code ay matatagpuan sa:

• Isang Arduino sketch DuvelBot.ino,
• Isang data subfolder na humahawak sa mga file na mai-a-upload sa flash ng ESP gamit ang SPIFFS. Naglalaman ang folder na ito ng webpage na ihahatid ng ESP (index.html), isang imahe ng logo na bahagi ng webpage (duvel.png) at isang cascaded style sheet o CSS file (style.css).

Upang mai-program ang robot:

• Ikonekta ang converter ng USB-TTL tulad ng ipinakita sa eskematiko,
• File -> Buksan -> pumunta sa folder kung nasaan ang DuvelBot.ino.
• Baguhin ang iyong mga kredensyal sa network sa sketch:

const char * ssid = "yourNetworkSSIDHere"; const char * password = "yourPasswordHere";

• Mga Tool -> Lupon -> "AI-Thinker ESP-32 CAM" at piliin ang naaangkop na serial port para sa iyong pc (Mga Tool -> Port -> isang bagay tulad ng / dev / ttyUSB0 o COM4),
• Buksan ang serial monitor sa Arduino IDE, Habang pinipindot ang pindutan ng PROG (na hinihila ang IO0 mababa), buksan ang robot,
• Suriin ang serial monitor na handa nang i-download ang ESP32,
• Isara ang serial monitor (kung hindi nabigo ang pag-upload ng SPIFFS),
• Mga tool -> "ESP32 Sketch Data Upload" at hintaying matapos ito,
• I-off at i-on muli ang pagpindot sa pindutan ng PROG upang bumalik sa mode ng pagprograma,
• Pindutin ang arrow na "Mag-upload" upang mai-program ang sketch at hintaying matapos ito,
• Buksan ang serial monitor at i-reset ang ESP32 sa pamamagitan ng pag-off / pag-on,
• Kapag na-boot na ito, itala ang ip address (isang bagay tulad ng 192.168.0.121) at idiskonekta ang robot mula sa USB-TTL converter,
• Magbukas ng isang browser sa ip address na ito. Dapat mong makita ang interface tulad ng sa larawan.
• Opsyonal: itakda ang mac-address ng ESP32 sa isang nakapirming ip address sa iyong router (nakasalalay sa router kung paano gawin).

Ayan yun! Basahin kung nais mong malaman kung paano ito gumagana …

Hakbang 3: Paano Ito Gumagana

Ngayon nakarating kami sa kagiliw-giliw na bahagi: paano ito gumagana nang magkakasama?

Susubukan kong ipaliwanag ito hakbang … sa pamamagitan ng… hakbang ngunit mangyaring tandaan na ang Kajnjaps ay hindi isang dalubhasa sa pagprograma sa web. Sa katunayan, ang pag-aaral ng kaunting pagprogram sa web ay ang buong saligan ng pagbuo ng DuvelBot. Kung mali ang nagagawa ko, mangyaring mag-iwan ng komento!

Ok, pagkatapos ng ESP32 ay nakabukas, tulad ng dati sa pag-setup ay pinasimulan nito ang mga GPIO, naiugnay ang mga ito sa mga timer ng PWM para sa motor at LED control. Tingnan dito para sa higit pa sa motor control, ito ay medyo pamantayan.

Pagkatapos ang camera ay naka-configure. Sinadya kong itago ang resolusyon na medyo mababa (VGA o 640x480) upang maiwasan ang mabagal na tugon. Tandaan ang Ai-Thinker ESP32-CAM board ay may isang serial ram chip (PSRAM) na ginagamit nito upang mag-imbak ng mga frame ng camera na may mas malaking resolusyon:

kung (psramFound ()) {Serial.println ("Nahanap ang PSRAM."); config.frame_size = FRAMESIZE_VGA; config.jpg_quality = 12; config.fb_count = 2; // number of framebuffers see: https://github.com/espressif/esp32-camera} else {Serial.println ("walang nahanap na PSRAM."); config.frame_size = FRAMESIZE_QVGA; config.jpg_quality = 12; config.fb_count = 1; }

Pagkatapos ang serial peripheral flash file system (SPIFFS) ay naisugod:

// initialize SPIFFS if (! SPIFFS.begin (true)) {Serial.println ("Isang Error ang naganap habang tumataas ang SPIFFS!"); bumalik; }

Ang SPIFFS ay kumikilos tulad ng isang maliit na filesystem sa ESP32. Dito ito ginagamit upang mag-imbak ng tatlong mga file: ang webpage mismo index.html, isang naka-cascaded na style style style.css, at isang-p.webp

Susunod na kumokonekta ang ESP32 sa iyong router (huwag kalimutang itakda ang iyong mga kredensyal bago mag-upload):

// baguhin ang mga kredensyal ng iyong router hereconst char * ssid = "yourNetworkSSIDHere"; const char * password = "yourPasswordHere"; … // kumonekta sa WiFi Serial.print ("Kumokonekta sa WiFi"); WiFi.begin (ssid, password); habang (WiFi.status ()! = WL_CONNected) {Serial.print ('.'); pagkaantala (500); } // nakakonekta ngayon sa router: Ang ESP32 ay mayroon nang ip address

Upang aktwal na gumawa ng isang bagay na kapaki-pakinabang, nagsisimula kami ng isang hindi magkasabay na webserver:

// lumikha ng isang object na AsyncWebServer sa port 80AsyncWebServer server (80); … Server.begin (); // simulang makinig para sa mga koneksyon

Ngayon, kung nagta-type ka sa ip address na nakatalaga sa ESP32 ng router sa address bar ng isang browser, nakakakuha ng kahilingan ang ESP32. Nangangahulugan ito na dapat itong tumugon sa kliyente (ikaw, o ang iyong browser) sa pamamagitan ng paghahatid nito ng isang bagay, halimbawa ng isang webpage.

Alam ng ESP32 kung paano tumugon, dahil sa pag-set up ang mga tugon sa lahat ng posibleng pinapayagan na mga hiling ay nakarehistro gamit ang server.on (). Halimbawa, ang pangunahing webpage o index (/) ay hinahawakan tulad nito:

server.on ("/", HTTP_GET, (AsyncWebServerRequest * kahilingan) {Serial.println ("/ natanggap ang kahilingan!"); request-> ipadala (SPIFFS, "/index.html", String (), false, processor);});

Kaya kung nag-uugnay ang kliyente, ang ESP32 ay tumutugon sa pamamagitan ng pagpapadala ng file index.html mula sa SPIFFS filesystem. Ang parameter processor ay ang pangalan ng isang pagpapaandar na preprocesses ang html at pinapalitan ang anumang mga espesyal na tag:

// Pinapalitan ang mga placeholder sa html tulad ng% DATA% // sa mga variable na nais mong ipakita //

Data:% DATA%

String processor (const String & var) {if (var == "DATA") {//Serial.println("in processor! "); ibalik ang String (dutyCycleNow); } ibalik ang String ();}

Ngayon, hinahayaan ang disect mismo ng webpage index.html. Sa pangkalahatan laging may tatlong bahagi:

1. html code: anong mga elemento ang dapat ipakita (mga pindutan / teksto / slider / mga imahe atbp.),
2. style code, alinman sa isang hiwalay na.css file o sa isang… seksyon: kung ano ang hitsura ng mga elemento,
3. javascript isang… seksyon: kung paano dapat kumilos ang webpage.

Kapag ang index.html ay naglo-load sa browser (na alam na ito ay html dahil sa linya ng DOCTYPE), tumatakbo ito sa linyang ito:

Isang kahilingan iyon para sa isang sheet ng estilo ng css. Ang lokasyon ng sheet na ito ay ibinigay sa href = "…". Kaya ano ang ginagawa ng iyong browser? Tama, naglulunsad ito ng isa pang kahilingan sa server, sa oras na ito para sa style.css. Kinukuha ng server ang kahilingang ito, dahil nakarehistro ito:

server.on ("/ style.css", HTTP_GET, (AsyncWebServerRequest * kahilingan) {Serial.println ("natanggap ang kahilingan sa css"); hiling-> ipadala (SPIFFS, "/style.css", "text / css ");});

Magaling ha? Hindi sinasadya, maaaring ito ay href = "/ ilang / file / on / the / other / side / ng / the / moon", para sa lahat ng nagmamalasakit sa iyong browser. Dadalhin nito ang file na iyon na masaya rin. Hindi ko ipaliwanag ang tungkol sa styleheet dahil kinokontrol lamang nito ang mga hitsura kaya't hindi talaga ito kawili-wili dito, ngunit kung nais mong matuto nang higit pa, suriin ang tutorial na ito.

Paano lumilitaw ang logo ng DuvelBot? Sa index.html mayroon kaming:

kung saan tumutugon ang ESP32 sa:

server. );});

..isa pang SPIFFS file, sa oras na ito isang kumpletong imahe, tulad ng ipinahiwatig ng "imahe / png" sa tugon.

Narating namin ang talagang nakawiwiling bahagi: ang code para sa mga pindutan. Ituon natin ang button na FORWARD:

PAUNAHAN

Ang pangalan ng klase = "…" ay isang pangalan lamang upang maiugnay ito sa styleheet upang ipasadya ang laki, kulay, atbp. Ang mahahalagang bahagi ay onmousedown = "toggleCheckbox ('forward')" at onmouseup = "toggleCheckbox ('stop') ". Ito ang bumubuo sa mga pagkilos ng pindutan (pareho para sa ontouchstart / ontouchend ngunit para doon ay mga touchscreens / phone). Dito, tumatawag ang pagkilos na pindutan sa isang function na toggleCheckbox (x) sa seksyong javascript:

pagpapaandar toggleCheckbox (x) {var xhr = bagong XMLHttpRequest (); xhr.open ("GET", "/" + x, totoo); xhr.send (); // ay maaaring gumawa ng isang bagay sa tugon din kapag handa na, ngunit hindi namin}

Kaya ang pagpindot sa pasulong na pindutan, agad na nagreresulta sa toggleCheckbox ('pasulong') na tinatawag na. Ang pagpapaandar na ito pagkatapos ay naglulunsad ng isang XMLHttpRequest na "GET", ng lokasyon na "/ pasulong" na kumikilos tulad ng kung na-type mo ang 192.168.0.121/forward sa iyong address bar ng browser. Kapag dumating ang kahilingang ito sa ESP32, hahawakan ito ng:

server.on ("/ forward", HTTP_GET, (AsyncWebServerRequest * request) {Serial.println ("natanggap / pasulong"); actionNow = FORWARD; request-> send (200, "text / plain", "OK forward. ");});

Ngayon ang ESP32 ay simpleng tumugon sa isang teksto na "OK pasulong". Tandaan na ang toggleCheckBox () ay walang ginawa sa (o maghintay sa) ang tugon na ito, gayunpaman maaari itong ipakita sa ibang pagkakataon sa code ng camera.

Sa sarili nitong tugon, nagtatakda lamang ang programa ng isang variable na aksyonNow = FORWARD, bilang tugon sa pagpindot sa pindutan. Ngayon sa mainloop ng programa, ang variable na ito ay sinusubaybayan na may layunin na ramping pataas / pababa sa PWM ng mga motor. Ang lohika ay: hangga't mayroon kaming isang aksyon na hindi TUMIGIL, iakyat ang mga motor sa direksyong iyon hanggang sa maabot ang isang tiyak na bilang (dutyCycleMax). Pagkatapos ay itaguyod ang bilis na iyon, hangga't hindi pa nagbabago ang actionNow:

void loop () {currentMillis = millis (); kung (currentMillis - nakaraangMillis> = dutyCycleStepDelay) {// i-save ang huling oras na naisagawa mo ang loop na nakaraangMillis = currentMillis; // mainloop ay responsable para sa ramping pataas / pababa ng mga motors kung kung (dutyCycleNow <= 0) {// kung pagkatapos ng pagrampa sa dc ay 0, nakatakda sa bagong direksyon, magsimula sa min dutycycle setDir (actionNow); nakaraangAction = actionNow; dutyCycleNow = dutyCycleMin; }} else // actionNow == nakaraangAction ramp up, maliban kung ang direksyon ay STOP {if (actionNow! = STOP) {dutyCycleNow = dutyCycleNow + dutyCycleStep; kung (dutyCycleNow> dutyCycleMax) dutyCycleNow = dutyCycleMax; } ibang dutyCycleNow = 0; } ledcWrite (pwmChannel, dutyCycleNow); // ayusin ang motor na motorsiklo}}

Dahan-dahan nitong pinapataas ang bilis ng mga motor, sa halip na ilunsad lamang ng buong bilis at ibubuhos ang mahalagang mahalagang Duvel. Ang isang malinaw na pagpapabuti ay ilipat ang code na ito sa isang timer makagambala gawain, ngunit ito gumagana tulad ng dati.

Ngayon kung ilalabas namin ang pindutan ng pasulong, ang iyong browser ay tumatawag sa toggleCheckbox ('stop'), na nagreresulta sa isang kahilingan na GET / ihinto. Nagtatakda ang ESP32 ng actionNow to STOP (at tumutugon sa "OK stop."), Na nagdadala ng mainloop upang paikutin ang mga motor.

Kumusta naman ang mga LED? Parehong mekanismo, ngunit mayroon kaming slider:

Sa javascript, sinusubaybayan ang setting ng slider, na sa bawat pagbabago ay nangyayari ang isang tawag upang makuha ang "/ LED / xxx," kung saan ang xxx ay ang halaga ng ningning na dapat itakda ang mga LED sa:

var slide = document.getElementById ('slide'), sliderDiv = document.getElementById ("sliderAmount"); slide.onchange = function () {var xhr = bagong XMLHttpRequest (); xhr.open ("GET", "/ LED /" + this.value, true); xhr.send (); sliderDiv.innerHTML = this.value; }

Tandaan na ginamit namin ang document.getElementByID ('slide') upang makuha ang slider object mismo, na idineklara kasama at ang halaga ay output sa isang elemento ng teksto sa bawat pagbabago.

Ang handler sa sketch ay nakakakuha ng lahat ng mga kahilingan sa ningning sa pamamagitan ng paggamit ng "/ LED / *" sa pagpaparehistro ng handler. Pagkatapos ang huling bahagi (isang numero) ay nahahati at naihahatid sa isang int:

server. ()); request-> ipadala (200, "text / plain", "OK Leds.");});

Katulad ng inilarawan sa itaas, kinokontrol ng mga radiobutton ang mga variable na nagtakda ng mga default na PWM, na tulad ng DuvelBot ay maaaring dahan-dahan sa iyo ng beer, maingat na huwag maagusan ang likidong ginto, at mabilis na bumalik sa kusina upang kumuha pa.

… Kaya paano maa-update ang imahe ng camera nang hindi mo kinakailangang i-refresh ang pahina? Para doon ginagamit namin ang isang diskarteng tinatawag na AJAX (Asynchronous JavaScript at XML). Ang problema ay ang normal na isang koneksyon sa client-server ay sumusunod sa isang nakapirming pamamaraan: humihiling ang client (browser), tumugon ang server (ESP32), sarado ang kaso. Tapos na. Wala nang nangyayari. Kung paano lamang maaari naming linlangin ang browser sa regular na paghiling ng mga pag-update mula sa ESP32… at iyon mismo ang gagawin namin sa piraso ng javascript na ito:

setInterval (function () {var xhttp = bagong XMLHttpRequest (); xhttp.open ("GET", "/ CAMERA", totoo); xhttp.responseType = "blob"; xhttp.timeout = 500; xhttp.ontimeout = function () {}; xhttp.onload = function (e) {kung (this.readyState == 4 && this.status == 200) {// see: https://stackoverflow.com/questions/7650587/using… // https://www.html5rocks.com/en/tutorials/file/xhr2/ var urlCreator = window. URL || window.webkitURL; var imageUrl = urlCreator.createObjectURL (this.response); // lumikha ng isang bagay mula sa patak document.querySelector ("# camimage"). src = imageUrl; urlCreator.revokeObjectURL (imageurl)}}; xhttp.send ();}, 250);

Ang setInterval ay tumatagal ng isang parameter ng isang pag-andar at isinasagawa ito bawat madalas (dito minsan bawat 250ms na nagreresulta sa 4 na mga frame / segundo). Ang pagpapaandar na naisakatuparan ay gumagawa ng isang kahilingan para sa isang binary "patak" sa address / CAMERA. Hawak ito ng ESP32-CAM sa sketch bilang (mula sa Randomnerdtutorials):

server. * _.jpg_buf = NULL; // capture a frame fb = esp_camera_fb_get (); if (! fb) {Serial.println ("Hindi nakuha ang buffer ng frame"); bumalik;} kung (fb-> format! = PIXFORMAT_JPEG) / / nasa format na ito mula sa config {bool jpeg_converted = frame2.jpg (fb, 80, & _.jpg_buf, & _.jpg_buf_len); esp_camera_fb_return (fb); fb = NULL; kung (! jpeg_converted) {Serial.println ("Nabigo ang compression ng JPEG"); return; }} iba pa {_.jpg_buf_len = fb-> len; _.jpg_buf = fb-> buf;} //Serial.println(_.jpg_buf_len); // ipadala ang naka-format na kahilingan sa imahe-> send_P (200, "image / jpg", _.jpg_buf, _.jpg_buf_len); // paglilinis kung (fb) {esp_camera_fb_return (fb); fb = NULL; _.jpg_buf = NULL;} iba pa kung (_.jpg_buf) {libre (_.jpg_buf); _.jpg_buf = NULL;}});

Ang mga mahahalagang bahagi ay nakakakuha ng frame fb = esp_camera_fb_get () na nagko-convert ito sa isang-j.webp

Ang pagpapaandar ng javascript pagkatapos ay naghihintay para sa pagdating ng imaheng ito. Pagkatapos kakailanganin lamang ng kaunting trabaho upang mai-convert ang natanggap na "patak" sa isang url na maaaring magamit bilang isang mapagkukunan upang ma-update ang imahe sa pahina ng html.

phew, tapos na tayo!

Hakbang 4: Mga Ideya at Natira

Ang layunin ng proyektong ito para sa akin ay upang malaman ang sapat na web programming upang mai-interface ang hardware sa web. Posibleng maraming mga extension sa proyektong ito. Narito ang ilang mga ideya:

• Ipatupad ang 'real' streaming ng camera tulad ng ipinaliwanag dito at dito at ilipat ito sa isang ika-2 server tulad ng ipinaliwanag dito sa parehong ESP32, ngunit sa iba pang core ng CPU, pagkatapos ay i-import ang camerastream sa html na hinatid ng 1st server gamit ang isang…. Ito ay dapat magresulta sa mas mabilis na mga pag-update ng camera.
• Gumamit ng access point (AP) mode upang ang robot ay mas nakapag-iisa tulad ng ipinaliwanag dito.
• Palawakin sa pagsukat ng boltahe ng baterya, mga kakayahan sa deep-sleep atbp Ito ay medyo mahirap sa ngayon dahil ang AI-Thinker ESP32-CAM ay walang maraming mga GPIO; nangangailangan ng pagpapalawak sa pamamagitan ng uart at halimbawa isang alipin arduino.
• Mag-convert sa isang robot na naghahanap ng pusa na nagpapalabas ng mga gamot sa pusa paminsan-minsan sa paw press ng isang malaking pindutan, mag-stream ng tone-toneladang magagandang litrato ng pusa sa araw …

Mangyaring magkomento kung nagustuhan mo o may mga katanungan at salamat sa pagbabasa!