ربات سرو آبجو DuvelBot - ESP32 -CAM: 4 مرحله (همراه با تصاویر)

2024 نویسنده: John Day | [email protected]. آخرین اصلاح شده: 2024-01-30 08:53

پس از یک روز کاری سخت ، هیچ چیز به آن نمی رسد که آبجو مورد علاقه خود را روی مبل میل کنید. در مورد من ، این بلد بلوند بلژیکی "Duvel" است. با این حال ، پس از فروپاشی ، ما با یک مشکل جدی روبرو هستیم: یخچال حاوی دوول من یک پل غیرقابل جابجایی است که 20 متر از نیمکت مذکور برداشته شده است.

در حالی که برخی اجبارهای سبک از جانب من ممکن است یک جاروبرقی یخچال و فریزر نوجوان را وادار کند تا کمک هزینه هفته من از دوول را بریزد ، اما وظیفه تحویل آن به نسل تقریباً خسته شده آن یک مرحله بسیار دور است.

زمان شکستن لحیم کاری و صفحه کلید…

DuvelBot بدون زواید AI-اندیشمند ESP32-CAM بر اساس وب کم رانندگی است، که شما می توانید از گوشی های هوشمند خود را، مرورگر و یا قرص کنترل کنید.

این آسان برای انطباق و یا گسترش این پلت فرم به استفاده کمتر به نوشیدن الکل (فکر می کنم SpouseSpy، NeighbourWatch، KittyCam …).

من این ربات را عمدتا برای یادگیری کمی در مورد کل برنامه نویسی وب و موارد اینترنت اشیا ، که از آنها چیزی نمی دانستم ، ساختم. بنابراین در پایان این دستورالعمل توضیح مفصلی درباره نحوه عملکرد آن آمده است.

بسیاری از این Instructable قطعات در توضیحات بسیار عالی در بر داشت در تصادفی به NERD آموزش بر اساس، پس لطفا به آنها بازدید می دهد!

تدارکات

آنچه شما نیاز دارید:

لیست قطعات بر روی سنگ تراشیده نشده است و بسیاری از قطعات را می توان در تن نسخه های مختلف و از مکان های مختلف تهیه کرد. من بیشترین خرید را از علی اکسپرس داشتم. همانطور که ماچته گفت: بداهه.

سخت افزار:

• ماژول AI Thinker ESP32-CAM. احتمالاً می تواند با سایر ماژول های ESP32-CAM کار کند ، اما من از آن استفاده کردم
• تخته راننده موتور L298N ،
• یک پلت فرم ارزان قیمت رباتیک 4 چرخ ،
• محفظه ای با سطح مسطح بزرگ مانند Hammond Electronics 1599KGY ،
• مبدل USB-to-3.3V-TTL برای برنامه نویسی.
• برای روشنایی: 3 LED سفید ، BC327 یا سایر ترانزیستورهای عمومی NPN (Ic = 500mA) ، مقاومت 4k7k ، 3 مقاومت 82 اهم ، ورق ورق ، کابل (شماتیک و تصاویر را ببینید).
• یک کلید روشن/خاموش و یک دکمه معمولی باز برای برنامه نویسی.

اختیاری:

• یک دوربین ماهیگیری با انعطاف طولانی تر از دوربین استاندارد OV2460 ارائه شده با ماژول ESP32-CAM ،
• آنتن WiFi با کابل مناسب بلند و کانکتور Coax Ultra Miniature ، مانند این. ESP32-CAM دارای آنتن داخلی و قاب پلاستیکی است، بنابراین یک آنتن است که واقعا مورد نیاز نیست، با این حال من فکر کردم آن نگاه سرد، تا …
• کاغذ برچسب قابل چاپ با جوهر افشان برای طراحی جلد بالا.

ابزارهای سخت افزاری معمول: لحیم کاری ، مته ، پیچ گوشتی ، انبردست …

مرحله 1: ساخت بستر روبات

شماتیک:

شماتیک چیز خاصی نیست. ESP32-cam موتورها را از طریق برد راننده موتور L298N ، که دارای دو کانال است ، کنترل می کند. موتورهای سمت چپ و راست به صورت موازی قرار گرفته و هر طرف یک کانال را اشغال می کند. چهار خازن سرامیکی کوچک 10..100nF نزدیک به پین های موتور مانند همیشه برای مقابله با تداخل RF توصیه می شود. همچنین ، یک درپوش الکترولیتی بزرگ (2200… 4700uF) روی منبع موتور ، همانطور که در شکل نشان داده شده است ، در حالی که به شدت مورد نیاز نیست ، می تواند موج ولتاژ منبع تغذیه را کمی محدود کند (اگر می خواهید یک فیلم ترسناک ببینید ، سپس Vbat را کاوش کنید. با یک اسیلوسکوپ در حالی که موتورها فعال هستند).

توجه داشته باشید که هر دو کانال موتور فعال کردن پین توسط همان عرض پالس مدوله (PWM) پین از ESP32 (IO12) هدایت می شود. دلیل این است که ماژول ESP32-CAM یک تن از GPIOs (شماتیک ماژول شامل مرجع) ندارد. LED های این ربات توسط IO4 هدایت می شوند که LED فلش داخلی را نیز هدایت می کند ، بنابراین Q1 را حذف کنید تا LED فلاش در محفظه بسته روشن نشود.

دکمه برنامه نویسی ، کلید روشن/خاموش ، اتصال شارژ و اتصال برنامه نویسی در زیر ربات قابل دسترسی است. من می توانستم برای اتصال برنامه نویسی (جک 3.5 میلی متری؟) کار بسیار بهتری انجام دهم ، اما آبجو دیگر نمی تواند صبر کند. همچنین به روزرسانی های غیر حضوری (OTA) برای راه اندازی خوب است.

برای قرار دادن ربات در حالت برنامه نویسی ، دکمه برنامه نویسی را فشار دهید (این IO0 را کم می کند) و سپس آن را روشن کنید.

مهم: برای شارژ باتری های NiMH روبات ، از یک منبع تغذیه آزمایشگاهی (بدون بار) در حدود 14 ولت و جریان محدود به 250 میلی آمپر استفاده کنید. ولتاژ با ولتاژ باتری ها سازگار می شود. اگر ربات داغ شد یا ولتاژ باتری به حدود 12.5 ولت رسید ، آن را قطع کنید. یک پیشرفت واضح در اینجا ادغام یک شارژر مناسب باتری است ، اما این خارج از محدوده این دستورالعمل است.

سخت افزار:

لطفاً نکات موجود در تصاویر را نیز مشاهده کنید. بدنه با استفاده از 4 پیچ M4 و مهره های خود قفل شده بر روی پایه ربات نصب شده است. به لوله لاستیکی که به عنوان فاصله گیر استفاده می شود توجه کنید. امیدوارم که این حالت تا حدی تعلیق به Duvel بدهد ، در صورتی که سوار ناهموار باشد. ماژول ESP32-CAM و برد موتور L298N با استفاده از پاهای چسبناک پلاستیکی (از نام مناسب در انگلیسی مطمئن نیست) در محفظه نصب شده است تا از ایجاد حفره های اضافی جلوگیری شود. همچنین ESP32 بر روی تخته سوراخ و سرپوش های قابل اتصال خود نصب شده است. با این کار تعویض ESP32 آسان می شود.

فراموش نکنید: اگر به جای آنتن WiFi داخلی از آنتن وای فای خارجی استفاده می کنید ، بلوز انتخاب آنتن را در قسمت زیرین برد ESP32-CAM نیز لحیم کنید.

لوگوی برتر موجود در فایل DuvelBot.svg را روی کاغذ برچسب جوهر افشان چاپ کنید (یا خودتان طراحی کنید) ، و آماده رفتن هستید!

مرحله 2: برنامه ریزی روبات

توصیه می شود قبل از بستن ربات برنامه ریزی کنید تا مطمئن شوید همه چیز کار می کند و دود جادویی ظاهر نمی شود.

شما به ابزارهای نرم افزاری زیر نیاز دارید:

• Arduino IDE ،
• کتابخانه های ESP32 ، SPIFFS (سیستم فایل فلش جانبی سریال) ، کتابخانه وب سرور ESPAsync.

آخرین مورد را می توان با پیروی از این آموزش تصادفی تا بخش "سازماندهی پرونده های خود" و شامل آن نصب کرد. واقعا نمی تونستم بهتر توضیح بدم

کد:

کد من را می توانید در آدرس زیر پیدا کنید:

• طرح آردوینو DuvelBot.ino ،
• یک زیر پوشه داده که فایلهایی را که قرار است با استفاده از SPIFFS روی فلش ESP بارگذاری شوند ، در خود نگه می دارد. این پوشه شامل صفحه وب است که ESP به آن خدمت می کند (index.html) ، یک تصویر لوگو که بخشی از صفحه وب است (duvel.png) و یک برگه سبک آبشار یا فایل CSS (style.css).

برای برنامه ریزی ربات:

• مبدل USB-TTL را همانطور که در شکل نشان داده شده است ، وصل کنید ،
• فایل -> باز کردن -> رفتن به پوشه ای که DuvelBot.ino در آن قرار دارد.
• اعتبار شبکه خود را در طرح تغییر دهید:

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

• ابزارها -> برد -> "AI -Thinker ESP -32 CAM" و پورت سریال مناسب برای رایانه خود را انتخاب کنید (Tools -> Port -> چیزی مانند /dev /ttyUSB0 یا COM4) ،
• باز کردن مانیتور سریال در آردوینو IDE، در حالی که با فشار دادن دکمه PROG (که نیش ترمزی میزند پایین IO0)، سوئیچ بر روی ربات،
• در مانیتور سریال بررسی کنید که ESP32 برای بارگیری آماده است ،
• بستن مانیتور سریال (در غیر این صورت بارگذاری SPIFFS ناموفق است) ،
• Tools -> "ESP32 Sketch Data Upload" و منتظر بمانید تا به پایان برسد ،
• برای بازگشت به حالت برنامه نویسی ، دکمه PROG را خاموش و روشن کنید ،
• برای برنامه ریزی طرح ، پیکان "بارگذاری" را فشار دهید و منتظر بمانید تا به پایان برسد ،
• مانیتور سریال را باز کرده و ESP32 را با خاموش و روشن کردن مجدد تنظیم کنید ،
• پس از راه اندازی ، آدرس IP (چیزی مانند 192.168.0.121) را یادداشت کرده و ربات را از مبدل USB-TTL جدا کنید ،
• مرورگری را در این آدرس IP باز کنید. شما باید رابط کاربری را مانند تصویر مشاهده کنید.
• اختیاری: مک آدرس از ESP32 را به یک آدرس IP ثابت در روتر خود را (بستگی به روتر چگونه به انجام).

خودشه! اگر می خواهید بدانید چگونه کار می کند ، ادامه مطلب را بخوانید…

مرحله 3: چگونه کار می کند

اکنون به قسمت جالب می رسیم: چگونه همه اینها با هم کار می کنند؟

سعی می کنم گام به گام … گام به گام توضیح دهم ، اما لطفاً به خاطر داشته باشید که کاجنجاپس متخصص برنامه نویسی وب نیست. در حقیقت ، یادگیری کمی برنامه نویسی تحت وب کل پیش فرض ساخت DuvelBot بود. اگر اشتباهات آشکاری مرتکب شدم ، لطفاً نظر دهید!

خوب، پس ESP32 است در راه اندازی روشن، به طور معمول آن را مقدار دهی اولیه GPIOs، همکاران آنها را با تایمر PWM برای موتور و کنترل LED. برای اطلاعات بیشتر در مورد کنترل موتور اینجا را ببینید ، این کاملاً استاندارد است.

سپس دوربین پیکربندی می شود. من عمداً وضوح تصویر را بسیار پایین نگه داشتم (VGA یا 640x480) تا از پاسخ ضعیف جلوگیری کنم. توجه داشته باشید که برد AI-Thinker ESP32-CAM دارای تراشه رم سریال (PSRAM) است که از آن برای ذخیره فریم های دوربین با وضوح بیشتر استفاده می کند:

if (psramFound ()) {Serial.println ("PSRAM پیدا شد.")؛ config.frame_size = FRAMESIZE_VGA؛ config.jpg_quality = 12؛ config.fb_count = 2؛ // تعدادی از فریم بافرها را ببینید: https://github.com/espressif/esp32-camera} else {Serial.println ("PSRAM پیدا نشد.") ؛ config.frame_size = FRAMESIZE_QVGA؛ config.jpg_quality = 12؛ config.fb_count = 1؛ }

سپس سیستم فایل فلش جانبی سریال (SPIFFS) راه اندازی می شود:

// مقداردهی اولیه SPIFFS if (! SPIFFS.begin (true)) {Serial.println ("هنگام نصب SPIFFS خطایی رخ داده است!") ؛ برگشت؛ }

SPIFFS مانند یک سیستم فایل کوچک در ESP32 عمل می کند. در اینجا از آن برای ذخیره سه فایل استفاده می شود: صفحه وب خود index.html ، یک فایل style styles.css در قالب فایل آبشار ، و لوگوی تصویر-p.webp

بعد ESP32 به روتر شما متصل می شود (فراموش نکنید که قبل از بارگذاری اطلاعات کاربری خود را تنظیم کنید):

// اعتبارنامه روتر خود را اینجا تغییر دهید char* ssid = "yourNetworkSSIDHere" ؛ const char* password = "yourPasswordHere" ؛ … // اتصال به WiFi Serial.print ("اتصال به WiFi") ؛ WiFi.begin (ssid ، رمز عبور) ؛ while (WiFi.status ()! = WL_CONNECTED) {Serial.print ('.')؛ تأخیر (500) ؛ } // اکنون به روتر متصل شده است: ESP32 اکنون دارای آدرس IP است

برای انجام یک کار مفید ، ما یک وب سرور ناهمزمان را راه اندازی می کنیم:

// ایجاد یک شیء AsyncWebServer در سرور پورت 80AsyncWebServer (80) ؛ … server.begin ()؛ // شروع به گوش دادن به اتصالات کنید

در حال حاضر، اگر شما در آدرس IP که به ESP32 توسط روتر در یک نوار آدرس مرورگر اختصاص داده بود تایپ، ESP32 می شود یک درخواست. این بدان معناست که باید به مشتری (شما یا مرورگر شما) با ارائه چیزی ، به عنوان مثال یک صفحه وب ، به مشتری پاسخ دهد.

ESP32 نحوه پاسخگویی را می داند ، زیرا در هنگام تنظیم پاسخ همه درخواستهای مجاز ممکن با استفاده از server.on () ثبت شده است. به عنوان مثال ، صفحه اصلی یا فهرست اصلی (/) به این شکل اداره می شود:

server.on ("/"، HTTP_GET، (AsyncWebServerRequest *request) {Serial.println ("/درخواست دریافت شد!") ؛ request-> send (SPIFFS، "/index.html" ، String () ، false ، پردازنده)؛})؛

بنابراین اگر سرویس گیرنده متصل شود ، ESP32 با ارسال فایل index.html از سیستم فایل SPIFFS پاسخ می دهد. پردازشگر پارامتر نام یک تابع است که html را پیش پردازش می کند و هر تگ خاصی را جایگزین می کند:

// متغیرهایی را که می خواهید نمایش دهید در html مانند٪ DATA٪ // جایگزین می کند //

داده ها:٪ DATA٪

پردازنده رشته شده (const عبارات و ور) {اگر (VAR == "داده") {پردازنده //Serial.println("in! ")؛ بازگشت رشته (dutyCycleNow) ؛ } string string ()؛}

اکنون ، اجازه دهید خود صفحات وب index.html را از بین ببریم. به طور کلی همیشه سه قسمت وجود دارد:

1. کد html: چه عناصری باید نشان داده شوند (دکمه ها/متن/لغزنده ها/تصاویر و غیره) ،
2. کد سبک ، در یک فایل.css جداگانه یا در یک بخش…: عناصر باید چگونه باشند ،
3. javascript a… بخش: نحوه عملکرد صفحه وب

پس از بارگذاری فایل index.html را در مرورگر (که می داند آن است اچ تی ام ال به دلیل خط DOCTYPE است)، آن را به این خط اجرا می شود:

این یک درخواست برای یک شیوه نامه css است. مکان این برگه در href = "…" آمده است. بنابراین مرورگر شما چه می کند؟ درست است ، درخواست دیگری را به سرور ارسال می کند ، این بار برای style.css. سرور این درخواست را ثبت می کند ، زیرا ثبت شده است:

server.on ("/style.css"، HTTP_GET، (درخواست AsyncWebServerRequest *) {Serial.println ("درخواست css دریافت شد") ؛ درخواست-> ارسال (SPIFFS ، "/style.css" ، "text/css ")؛})؛

مرتب است؟ در ضمن، آن می توانست عکاس هنگام عکسبرداری = "/ برخی از / فایل / در / به / دیگر / سمت / از / به / ماه"، برای همه مرورگر خود را مراقبت. با خوشحالی آن فایل را می آورد. من در مورد شیوه نامه توضیح نمی دهم زیرا فقط ظاهر را کنترل می کند ، بنابراین اینجا واقعاً جالب نیست ، اما اگر می خواهید بیشتر بدانید ، این آموزش را بررسی کنید.

لوگوی DuvelBot چگونه ظاهر می شود؟ در index.html ما داریم:

که ESP32 با آن پاسخ می دهد:

server.on ("/duvel"، HTTP_GET، (درخواست AsyncWebServerRequest *) {Serial.println ("درخواست لوگوی duvel دریافت شد!") ؛ درخواست-> ارسال (SPIFFS ، "/duvel.png" ، "image-p.webp

..یکی دیگر از فایل های SPIFFS ، این بار یک تصویر کامل ، همانطور که در پاسخ نشان داده شده است "image/png".

اکنون به قسمت واقعاً جالب می رسیم: کد دکمه ها. اجازه دهید روی دکمه FORWARD تمرکز کنیم:

رو به جلو

نام class = "…" فقط یک نام برای پیوند دادن آن به شیوه نامه برای سفارشی سازی اندازه ، رنگ و غیره است. قسمتهای مهم onmousedown = "toggleCheckbox ('جلو')" و onmouseup = "toggleCheckbox ('توقف') " اینها عملکردهای دکمه را تشکیل می دهند (برای ontouchstart/ontouchend اما برای صفحه های لمسی/تلفن ها). در اینجا ، عملکرد دکمه یک تابع toggleCheckbox (x) را در قسمت جاوا اسکریپت فراخوانی می کند:

تابع toggleCheckbox (x) {var xhr = new XMLHttpRequest ()؛ xhr.open ("GET" ، "/" + x ، true) ؛ xhr.send ()؛ // در صورت آماده بودن می تواند با پاسخ نیز کاری انجام دهد ، اما ما انجام نمی دهیم}

بنابراین با فشار دادن دکمه جلو ، بلافاصله منجر به تماس با toggleCheckbox ('جلو') می شود. سپس این عملکرد یک XMLHttpRequest "GET" ، از محل "/forward" را راه اندازی می کند که درست مانند این است که شما 192.168.0.121/forward را در نوار آدرس مرورگر خود تایپ کرده باشید. هنگامی که این درخواست به ESP32 می رسد ، توسط:

server.on ("/forward"، HTTP_GET، (AsyncWebServerRequest *request) {Serial.println ("دریافت/ارسال")؛ actionNow = FORWARD؛ request-> send (200، "text/plain"، "OK forward. ")؛})؛

اکنون ESP32 به سادگی با یک متن "OK forward" پاسخ می دهد. توجه داشته باشید toggleCheckBox () با این پاسخ هیچ کاری نمی کند (یا منتظر بمانید) ، اما می تواند همانطور که بعداً در کد دوربین نشان داده شده است.

به خودی خود در طول این پاسخ ، فقط یک متغیر actionNow = FORWARD ، به عنوان پاسخ به فشار دادن دکمه ، تنظیم می کند. در حال حاضر در برنامه اصلی ، این متغیر با هدف افزایش یا کاهش PWM موتورها کنترل می شود. منطق است: تا زمانی که ما یک عمل است که متوقف نمی شود، سطح شیب دار تا موتور در این جهت تا زمانی که تعداد معینی (dutyCycleMax) رسیده است. سپس آن سرعت را تا زمانی که actionNow تغییر نکرده است حفظ کنید:

حلقه خالی () {currentMillis = millis ()؛ if (currentMillis - previousMillis> = dutyCycleStepDelay) {// آخرین باری که حلقه را اجرا کردید saveMillis = currentMillis؛ // mainloop مسئول بالا و پایین بردن موتورها در صورت (actionNow! = previousAction) {// ramp down، then stop، then change action and ramp up dutyCycleNow = dutyCycleNow-dutyCycleStep؛ اگر (dutyCycleNow <= 0) {// اگر بعد از بالا آمدن dc 0 ، در جهت جدید قرار دهید ، از min mincycycle setDir (actionNow) شروع کنید ؛ previousAction = actionNow؛ dutyCycleNow = dutyCycleMin؛ }} else // actionNow == ramp قبلی action بالا می رود ، مگر در مواردی که جهت STOP باشد {if (actionNow! = STOP) {dutyCycleNow = dutyCycleNow+dutyCycleStep؛ if (dutyCycleNow> dutyCycleMax) dutyCycleNow = dutyCycleMax؛ } else dutyCycleNow = 0؛ } ledcWrite (pwmChannel، dutyCycleNow) ؛ // تنظیم موتورسیکلت موتور}}

این امر به آرامی سرعت موتورها را افزایش می دهد ، به جای اینکه فقط با سرعت کامل راه اندازی شود و دوول گرانبها گرانبها ریخته شود. یک پیشرفت واضح این است که این کد را به روال وقفه زمان سنج منتقل کنید ، اما به همان صورت کار می کند.

حال اگر ما دکمه رو به جلو را آزاد کند، مرورگر خود را از تماس toggleCheckbox ('توقف')، و در نتیجه یک درخواست به دریافت / توقف. ESP32 مجموعه actionNow برای متوقف کردن (و پاسخ با "توقف OK.")، که به چرخش پایین موتور روشهایی mainloop.

LED ها چطور؟ مکانیسم مشابه ، اما اکنون ما یک اسلایدر داریم:

در جاوا اسکریپت ، تنظیمات نوار لغزنده کنترل می شود ، به گونه ای که در هر تغییر یک تماس برای دریافت "/LED/xxx" اتفاق می افتد ، جایی که xxx مقدار روشنایی است که LED ها باید در آن تنظیم شوند:

var slide = document.getElementById ('اسلاید') ، sliderDiv = document.getElementById ("sliderAmount") ؛ slide.onchange = function () {var xhr = new XMLHttpRequest ()؛ xhr.open ("GET" ، "/LED/" + this.value ، true) ؛ xhr.send ()؛ sliderDiv.innerHTML = this.value؛ }

توجه داشته باشید که ما از document.getElementByID ("اسلاید") برای بدست آوردن خود شیء نوار لغزنده که با آن اعلام شده بود و با هر تغییر مقدار آن به یک عنصر متن خروجی می شود ، استفاده کردیم.

کنترل کننده در طرح تمام درخواست های روشنایی را با استفاده از "/LED/*" در ثبت نام گیرنده می گیرد. سپس قسمت آخر (یک عدد) تقسیم شده و به int ارسال می شود:

server.on ("/LED/ *" ، HTTP_GET ، (درخواست AsyncWebServerRequest *) {Serial.println ("درخواست رهبری دریافت شد!") ؛ setLedBrightness ((request-> url ()). زیر رشته (5).toInt ()) ؛ request-> send (200 ، "text/plain" ، "OK Leds.")؛})؛

همانطور که در بالا توضیح داده شد ، دکمه های رادیویی متغیرهایی را تنظیم می کنند که پیش فرض PWM را تنظیم می کنند ، به طوری که DuvelBot می تواند با آبجو به آرامی به سمت شما حرکت کند ، مراقب باشید که طلای مایع نریزد و سریع به آشپزخانه برگردید تا مقداری بیشتر بیاورید.

… بنابراین چگونه بدون نیاز به تازه سازی صفحه ، تصویر دوربین به روز می شود؟ برای این منظور از تکنیکی به نام AJAX (Asynchronous JavaScript and XML) استفاده می کنیم. مشکل این است که معمولاً اتصال سرویس گیرنده-سرور از یک روش ثابت پیروی می کند: مشتری (مرورگر) درخواست می کند ، سرور (ESP32) پاسخ می دهد ، مورد بسته می شود. انجام شده. دیگر هیچ اتفاقی نمی افتد. اگر فقط به نحوی بتوانیم مرورگر را فریب دهیم تا به طور مرتب از ESP32 درخواست به روزرسانی کند … و این دقیقاً همان کاری است که ما با این قطعه جاوا اسکریپت انجام خواهیم داد:

setInterval (function () {var xhttp = new XMLHttpRequest ()؛ xhttp.open ("GET"، "/CAMERA"، true)؛ xhttp.responseType = "blob"؛ xhttp.timeout = 500؛ xhttp.ontimeout = تابع () {}؛ xhttp.onload = تابع (e) {if (this.readyState == 4 && this.status == 200) {// مشاهده کنید: https://stackoverflow.com/questions/7650587/using… // https://www.html5rocks.com/fa/tutorials/file/xhr2/ var urlCreator = window. URL || window.webkitURL؛ var imageUrl = urlCreator.createObjectURL (this.response) ؛ // ایجاد یک شی از لکه document.querySelector ("#camimage"). src = imageUrl؛ urlCreator.revokeObjectURL (imageurl)}} ؛ xhttp.send ()؛}} ، 250) ؛

setInterval یک تابع را به عنوان پارامتر در نظر گرفته و هر چند وقت یکبار آن را اجرا می کند (در اینجا در هر 250 میلی ثانیه یکبار 4 فریم در ثانیه به دست می آید). عملکردی که اجرا می شود درخواست "blob" دودویی را در آدرس /CAMERA می دهد. این توسط ESP32-CAM در طرح زیر به عنوان (از Randomnerdtutorials) اداره می شود:

server.on ("/CAMERA"، HTTP_GET، (درخواست AsyncWebServerRequest *) {Serial.println ("درخواست دوربین دریافت شد!")؛ camera_fb_t * fb = NULL؛ // esp_err_t res = ESP_OK؛ size_t _jpg_buf_len = 0؛ uint * _jpg_buf = NULL؛ // ضبط یک قاب fb = esp_camera_fb_get () ؛ اگر (! fb) {Serial.println ("بافر قاب قابل دستیابی نیست") ؛ بازگشت ؛} if (fb-> فرمت! = PIXFORMAT_JPEG)/ /در حال حاضر در این قالب از پیکربندی {bool jpeg_converted = frame-j.webp

بخشهای مهم تبدیل فریم fb = esp_camera_fb_get () به-j.webp

سپس تابع جاوا اسکریپت منتظر رسیدن این تصویر است. سپس فقط کمی کار لازم است تا "blob" دریافتی را به url تبدیل کنید که می تواند به عنوان منبع برای به روز رسانی تصویر در صفحه html استفاده شود.

خب ما تموم شدیم!

مرحله 4: ایده ها و باقی مانده ها

هدف این پروژه برای من یادگیری برنامه نویسی وب به اندازه کافی برای اتصال سخت افزار به وب بود. چندین افزونه برای این پروژه امکان پذیر است. در اینجا چند ایده وجود دارد:

• جریان واقعی دوربین را همانطور که اینجا و اینجا توضیح داده شده پیاده کنید و آن را به سرور دوم منتقل کنید همانطور که در اینجا در همان ESP32 توضیح داده شده است ، اما در هسته دیگر CPU ، سپس با استفاده از… این باید باعث به روز رسانی سریعتر دوربین شود.
• از حالت نقطه دسترسی (AP) استفاده کنید تا روبات بصورت مستقل تر در اینجا توضیح داده شود.
• با اندازه گیری ولتاژ باتری ، قابلیت های خواب عمیق و غیره گسترش دهید. این در حال حاضر کمی دشوار است زیرا AI-Thinker ESP32-CAM GPIO های زیادی ندارد. نیاز به گسترش از طریق uart و به عنوان مثال آردوینو برده دارد.
• تبدیل به یک ربات گربه طلب که گهگاه غذاهای گربه را با فشار دادن پنجه یک دکمه بزرگ بیرون می زند و در طول روز هزاران عکس زیبا از گربه پخش می کند…

لطفاً اگر دوست داشتید یا سوالی داشتید نظر دهید و از خواندن آن متشکرم!