DuvelBot - روبوت تقديم البيرة ESP32-CAM: 4 خطوات (بالصور)

2024 مؤلف: John Day | [email protected]. آخر تعديل: 2024-01-30 07:37

بعد يوم عمل شاق ، لا شيء يقترب من احتساء البيرة المفضلة لديك على الأريكة. في حالتي ، هذا هو الجعة البلجيكية الأشقر "Duvel". ومع ذلك ، بعد كل شيء باستثناء الانهيار ، نواجه مشكلة أكثر خطورة: الثلاجة التي تحتوي على دوفيل الخاص بي عبارة عن 20 قدمًا لا يمكن تجاوزها من الأريكة المذكورة.

في حين أن بعض الإكراه الخفيف من جانبي قد يحرك زبالًا للثلاجة مراهقًا في بعض الأحيان لسحب بدل أسبوعي من Duvel ، فمن الواضح أن مهمة توصيله إلى سلفه المنهك تقريبًا خطوة واحدة بعيدًا جدًا.

حان الوقت لإخراج مكواة اللحام ولوحة المفاتيح …

DuvelBot عبارة عن كاميرا ويب للقيادة بدون زخرفة تعتمد على AI-Thinker ESP32-CAM ، ويمكنك التحكم فيها من هاتفك الذكي أو متصفحك أو جهازك اللوحي.

من السهل تكييف هذه المنصة أو توسيعها لاستخدامات أقل للكحول (فكر في SpouseSpy و NeighbourWatch و KittyCam …).

لقد قمت ببناء هذا الروبوت بشكل أساسي لأتعلم قليلاً عن برمجة الويب بالكامل وأشياء إنترنت الأشياء ، والتي لم أكن أعرف عنها شيئًا. لذلك في نهاية Instructable هو شرح مفصل لكيفية عمل ذلك.

تستند العديد من أجزاء هذا Instructable إلى التفسيرات الممتازة الموجودة في Random Nerd Tutorials ، لذا يرجى الذهاب لزيارتهم!

اللوازم

ماذا تحتاج:

قائمة الأجزاء ليست منقوشة في الحجر ويمكن الحصول على العديد من الأجزاء في العديد من الإصدارات المختلفة ومن العديد من الأماكن المختلفة. اشتريت أكثر من علي اكسبريس. كما قال منجل: ارتجل.

المعدات:

• وحدة AI Thinker ESP32-CAM. من المحتمل أن تعمل مع وحدات ESP32-CAM الأخرى ولكن هذا ما استخدمته
• لوحة سائق المحرك L298N ،
• منصة روبوتات ذات 4 عجلات رخيصة ،
• مبيت ذو سطح مستو كبير مثل Hammond Electronics 1599KGY ،
• USB-to-3.3V-TTL- محول للبرمجة.
• للإضاءة: 3 مصابيح LED بيضاء ، BC327 أو ترانزستور NPN للأغراض العامة (Ic = 500mA) ، مقاوم 4k7k ، 3 مقاومات 82Ohm ، perfboard ، الكابلات (انظر التخطيطي والصور).
• مفتاح تبديل تشغيل / إيقاف وزر ضغط يفتح عادة للبرمجة.

اختياري:

• كاميرا عين السمكة بمرونة أطول من كاميرا OV2460 القياسية المزودة بوحدة ESP32-CAM ،
• هوائي WiFi مع كابل طويل مناسب وموصل Ultra Miniature Coax ، مثل هذا. يحتوي الطراز ESP32-CAM على هوائي داخلي والهيكل مصنوع من البلاستيك ، لذا لا توجد حاجة فعلاً للهوائي ، لكنني اعتقدت أنه يبدو رائعًا ، لذا …
• ورق لاصق قابل للطباعة بنفث الحبر لتصميم الغطاء العلوي.

أدوات الأجهزة المعتادة: لحام الحديد ، المثاقب ، مفكات البراغي ، كماشة …

الخطوة الأولى: بناء منصة الروبوت

التخطيطي:

التخطيطي ليس شيئًا مميزًا. تتحكم كاميرا ESP32-cam في المحركات عبر لوحة السائق للمحرك L298N ، والتي تحتوي على قناتين. يتم وضع محركات الجانب الأيسر والأيمن على التوازي ويحتل كل جانب قناة واحدة. يُنصح دائمًا بأربعة مكثفات سيراميك صغيرة 10..100nF بالقرب من دبابيس المحرك لمواجهة تداخل التردد اللاسلكي. أيضًا ، يمكن أن يحد غطاء كهربائي كبير (2200 … 4700 فائق التوهج) على تزويد لوحة المحرك كما هو موضح في التخطيط ، على الرغم من عدم الحاجة إليه بشدة ، من تموج جهد الإمداد قليلاً (إذا كنت تريد مشاهدة فيلم رعب ، فقم بفحص Vbat مع راسم الذبذبات أثناء تنشيط المحركات).

لاحظ أن كلتا دبابيس ENABLE لقناتي المحرك يتم تشغيلهما بواسطة نفس دبوس معدل عرض النبضة (PWM) الخاص بـ ESP32 (IO12). هذا لأن وحدة ESP32-CAM لا تحتوي على الكثير من GPIOs (تم تضمين تخطيطي للوحدة كمرجع). يتم تشغيل مصابيح LED الخاصة بالروبوت بواسطة IO4 ، والتي تعمل أيضًا على تشغيل فلاش LED المدمج ، لذا قم بإزالة Q1 لمنع ضوء فلاش LED من الإضاءة في مبيت مغلق.

يمكن الوصول إلى زر البرمجة ومفتاح التشغيل / الإيقاف وموصل الشحن وموصل البرمجة أسفل الروبوت. كان بإمكاني القيام بعمل أفضل لموصل البرمجة (مقبس 3.5 ملم؟) ، لكن البيرة لم تعد تنتظر. سيكون من الجيد أيضًا إعداد التحديثات عبر الهواء (OTA).

لوضع الروبوت في وضع البرمجة ، اضغط على زر البرمجة (يؤدي هذا إلى خفض مستوى IO0) ثم قم بتشغيله.

هام: لشحن بطاريات NiMH الخاصة بالروبوت ، استخدم مجموعة إمداد المختبر (غير محملة) لحوالي 14 فولت والتيار يقتصر على 250 مللي أمبير ، وسوف يتكيف الجهد مع جهد البطاريات. افصل الاتصال إذا شعر الروبوت بالسخونة أو وصل جهد البطارية إلى حوالي 12.5 فولت. يتمثل أحد التحسينات الواضحة هنا في دمج شاحن بطارية مناسب ، لكن هذا خارج نطاق Instructable.

الأجهزة:

يرجى أيضا الاطلاع على الملاحظات في الصور. يتم تثبيت الهيكل على قاعدة الروبوت باستخدام 4 مسامير M4 وصواميل ذاتية الغلق. لاحظ الأنابيب المطاطية المستخدمة كمباعدات للمسافات. نأمل أن يعطي هذا أيضًا بعض التعليق لـ Duvel ، إذا ثبت أن الركوب وعر. يتم تثبيت وحدة ESP32-CAM ولوحة المحرك L298N في الهيكل باستخدام أقدام بلاستيكية لاصقة (لست متأكدًا من الاسم الصحيح باللغة الإنجليزية) ، لمنع الاضطرار إلى حفر ثقوب إضافية. كما تم تركيب ESP32 على لوحة التحكم الخاصة به ورؤوس الدبوس القابلة للتوصيل. هذا يجعل من السهل تبديل ESP32.

لا تنس: إذا كنت تستخدم هوائي WiFi خارجيًا بدلاً من الهوائي المدمج ، فقم أيضًا بلحام وصلة مرور تحديد الهوائي على الجانب السفلي من لوحة ESP32-CAM.

اطبع الشعار العلوي في الملف DuvelBot.svg على ورق الملصقات النافثة للحبر (أو صمم بنفسك) ، وستكون جاهزًا للانطلاق!

الخطوة الثانية: برمجة الروبوت

يُنصح ببرمجة الروبوت قبل إغلاقه ، للتأكد من أن كل شيء يعمل ولا يظهر دخان سحري.

أنت بحاجة إلى أدوات البرنامج التالية:

• اردوينو IDE ،
• مكتبات ESP32 ، SPIFFS (نظام ملفات فلاش محيطي تسلسلي) ، مكتبة ESPAsync Webserver.

يمكن تثبيت هذا الأخير باتباع هذا البرنامج التعليمي العشوائي حتى ويتضمن قسم "تنظيم ملفاتك". أنا حقا لا أستطيع أن أشرح ذلك بشكل أفضل.

الرمز:

يمكن العثور على الكود الخاص بي على:

• رسم اردوينو DuvelBot.ino ،
• مجلد فرعي للبيانات يحتوي على الملفات التي سيتم تحميلها على فلاش ESP باستخدام SPIFFS. يحتوي هذا المجلد على صفحة الويب التي سيعملها برنامج 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" وحدد المنفذ التسلسلي المناسب لجهاز الكمبيوتر الخاص بك (أدوات -> منفذ -> شيء مثل / dev / ttyUSB0 أو COM4) ،
• افتح الشاشة التسلسلية في Arduino IDE ، أثناء الضغط على زر PROG (الذي يسحب IO0 منخفضًا) ، قم بتشغيل الروبوت ،
• تحقق من الشاشة التسلسلية من أن ESP32 جاهز للتنزيل ،
• أغلق الشاشة التسلسلية (وإلا فشل تحميل SPIFFS) ،
• أدوات -> "ESP32 Sketch Data Upload" وانتظر حتى ينتهي ،
• قم بإيقاف التشغيل وتشغيله مرة أخرى مع الاستمرار في الضغط على الزر PROG للعودة إلى وضع البرمجة ،
• اضغط على سهم "تحميل" لبرمجة الرسم وانتظر حتى ينتهي ،
• افتح الشاشة التسلسلية وأعد ضبط ESP32 عن طريق إيقاف التشغيل / التشغيل ،
• بمجرد بدء التشغيل ، قم بتدوين عنوان IP (شيء مثل 192.168.0.121) وافصل الروبوت عن محول USB-TTL ،
• افتح متصفحًا على عنوان IP هذا. يجب أن ترى الواجهة كما في الصورة.
• اختياري: قم بتعيين عنوان mac لـ ESP32 على عنوان IP ثابت في جهاز التوجيه الخاص بك (يعتمد على كيفية عمل جهاز التوجيه).

هذا كل شيء! اقرأ إذا كنت تريد أن تعرف كيف يعمل …

الخطوة 3: كيف يعمل

نأتي الآن إلى الجزء المثير للاهتمام: كيف يعمل كل شيء معًا؟

سأحاول شرحها خطوة… بخطوة… لكن يرجى أن تضع في اعتبارك أن Kajnjaps ليس متخصصًا في برمجة الويب. في الواقع ، كان تعلم القليل من برمجة الويب هو الفرضية الكاملة لبناء DuvelBot. إذا ارتكبت أخطاء واضحة ، يرجى ترك تعليق!

حسنًا ، بعد تشغيل ESP32 ، كالمعتاد في الإعداد ، يقوم بتهيئة GPIOs ، ويربطها بمؤقتات PWM للتحكم في المحرك ومؤشر LED. انظر هنا لمزيد من المعلومات حول التحكم في المحرك ، إنه قياسي جدًا.

ثم يتم تكوين الكاميرا. لقد أبقيت الدقة منخفضة جدًا عن عمد (VGA أو 640x480) لتجنب الاستجابة البطيئة. لاحظ أن لوحة AI-Thinker ESP32-CAM بها شريحة ذاكرة عشوائية (PSRAM) تستخدمها لتخزين إطارات الكاميرا بدقة أكبر:

if (psramFound ()) {Serial.println ("PSRAM found.")؛ 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 إذا (! SPIFFS.begin (صحيح)) {Serial.println ("حدث خطأ أثناء تركيب SPIFFS!") ؛ إرجاع؛ }

يعمل نظام SPIFFS مثل نظام ملفات صغير على ESP32. يتم استخدامه هنا لتخزين ثلاثة ملفات: صفحة الويب نفسها index.html ، و style.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 ("/ تم استلام الطلب!") ؛ طلب> إرسال (SPIFFS ، "/index.html" ، سلسلة () ، خطأ ، المعالج) ؛}) ؛

لذلك إذا اتصل العميل ، يستجيب ESP32 بإرسال ملف index.html من نظام ملفات SPIFFS. معالج المعلمات هو اسم الوظيفة التي تعالج HTML وتستبدل أي علامات خاصة:

// يستبدل العناصر النائبة في html مثل٪ DATA٪ // بالمتغيرات التي تريد إظهارها //

البيانات:٪ DATA٪

معالج السلسلة (const String & var) {if (var == "DATA") {//Serial.println("in processor! ")؛ سلسلة الإرجاع (dutyCycleNow) ؛ } سلسلة إرجاع () ؛}

الآن ، لنفحص index.html صفحة الويب نفسها. بشكل عام ، هناك دائمًا ثلاثة أجزاء:

1. كود html: ما هي العناصر التي يجب أن تظهر (الأزرار / النص / أشرطة التمرير / الصور وما إلى ذلك) ،
2. رمز النمط ، إما في ملف.css منفصل أو في قسم…: كيف يجب أن تبدو العناصر ،
3. جافا سكريبت أ … قسم: كيف يجب أن تعمل صفحة الويب.

بمجرد تحميل index.html في المتصفح (الذي يعرف أنه html بسبب سطر DOCTYPE) ، يتم تشغيله في هذا السطر:

هذا طلب لورقة أنماط css. موقع هذه الورقة موضح في href = "…". إذن ماذا يفعل متصفحك؟ حسنًا ، يُطلق طلبًا آخر إلى الخادم ، هذه المرة لـ style.css. يلتقط الخادم هذا الطلب لأنه تم تسجيله:

server.on ("/ style.css"، HTTP_GET، (AsyncWebServerRequest * request) {Serial.println ("تم استلام طلب css")؛ request-> send (SPIFFS، "/style.css"، "text / css ") ؛}) ؛

أنيق ، أليس كذلك؟ بالمناسبة ، من الممكن أن يكون href = "/ بعض / ملف / على / / الآخر / جانب / من / القمر" ، لجميع المستعرض الخاص بك يهتم. سيذهب لجلب هذا الملف بنفس السعادة. لن أشرح حول ورقة الأنماط لأنها تتحكم فقط في المظاهر ، لذا فهي ليست مثيرة للاهتمام حقًا هنا ، ولكن إذا كنت تريد معرفة المزيد ، فتحقق من هذا البرنامج التعليمي.

كيف يظهر شعار DuvelBot؟ في index.html لدينا:

التي يستجيب لها ESP32 بـ:

server.on ("duvel" ، HTTP_GET ، (AsyncWebServerRequest * request) {Serial.println ("تم استلام طلب شعار duvel!") ؛ طلب> إرسال (SPIFFS ، "/duvel.png" ، "صورة /-p.webp

.. ملف SPIFFS آخر ، هذه المرة صورة كاملة ، كما هو مشار إليه بواسطة "image / png" في الاستجابة.

نأتي الآن إلى الجزء المثير للاهتمام حقًا: رمز الأزرار. دعنا نركز على زر FORWARD:

إلى الأمام

الفئة = "…" الاسم هو مجرد اسم لربطه بورقة الأنماط لتخصيص الحجم واللون وما إلى ذلك. الأجزاء المهمة هي onmousedown = "toggleCheckbox ('forward')" و onmouseup = "toggleCheckbox ('stop') ". هذه تشكل إجراءات الزر (نفس الشيء بالنسبة إلى ontouchstart / ontouchend ولكن لذلك هو شاشات اللمس / الهواتف). هنا ، يستدعي إجراء الزر وظيفة toggleCheckbox (x) في قسم جافا سكريبت:

الوظيفة toggleCheckbox (x) {var xhr = new XMLHttpRequest () ؛ xhr.open ("GET" ، "/" + x ، صحيح) ؛ xhr.send () ، // يمكن أن تفعل شيئًا مع الاستجابة أيضًا عندما تكون جاهزًا ، لكننا لا نفعل}

لذا ، فإن الضغط على زر الأمام ، يؤدي على الفور إلى استدعاء toggleCheckbox ('forward'). تقوم هذه الوظيفة بعد ذلك بتشغيل XMLHttpRequest "GET" للموقع "/ forward" والذي يعمل تمامًا كما لو كنت قد كتبت 192.168.0.121/forward في شريط عنوان المتصفح. بمجرد وصول هذا الطلب إلى ESP32 ، يتم التعامل معه عن طريق:

server.on ("/ forward"، HTTP_GET، (AsyncWebServerRequest * request) {Serial.println ("Received / forward")؛ actionNow = FORWARD؛ request-> send (200، "text / simple"، "OK forward. ") ؛}) ؛

الآن يرد ESP32 ببساطة بنص "OK forward". لاحظ أن toggleCheckBox () لا يفعل أي شيء (أو ينتظر) هذه الاستجابة ، ولكن يمكن أن يكون كما هو موضح لاحقًا في رمز الكاميرا.

في حد ذاته أثناء هذه الاستجابة ، يقوم البرنامج فقط بتعيين متغير actionNow = FORWARD ، كاستجابة للضغط على الزر. الآن في الحلقة الرئيسية للبرنامج ، تتم مراقبة هذا المتغير بهدف زيادة / خفض PWM للمحركات. المنطق هو: طالما لدينا إجراء ليس STOP ، قم بزيادة المحركات في هذا الاتجاه حتى يتم الوصول إلى رقم معين (dutyCycleMax). ثم حافظ على هذه السرعة ، طالما أن ActionNow لم يتغير:

حلقة باطلة () {currentMillis = millis () ؛ if (currentMillis - previousMillis> = dutyCycleStepDelay) {// احفظ آخر مرة نفذت فيها الحلقة previousMillis = currentMillis ؛ // mainloop مسؤولة عن زيادة / خفض المحركات إذا (actionNow! = previousAction) {// منحدر لأسفل ، ثم توقف ، ثم غيّر الإجراء وقم بتكثيف dutyCycleNow = dutyCycleNow-dutyCycleStep؛ إذا كان (dutyCycleNow <= 0) {// إذا كانت قيمة التيار المستمر تساوي 0 ، فاضبط على الاتجاه الجديد ، وابدأ عند min dutycycle setDir (actionNow) ؛ الإجراء السابق = الإجراء الآن ؛ dutyCycleNow = dutyCycleMin ؛ }} else // actionNow == previousAction ramp up ، إلا عندما يكون الاتجاه STOP {if (actionNow! = STOP) {dutyCycleNow = dutyCycleNow + dutyCycleStep؛ if (dutyCycleNow> dutyCycleMax) dutyCycleNow = dutyCycleMax ؛ } else dutyCycleNow = 0 ؛ } ledcWrite (pwmChannel، dutyCycleNow) ؛ // اضبط دورة المحرك}}

يؤدي هذا إلى زيادة سرعة المحركات ببطء ، بدلاً من مجرد إطلاقها بأقصى سرعة وإراقة Duvel الثمينة. قد يكون التحسين الواضح هو نقل هذا الرمز إلى روتين مقاطعة مؤقت ، لكنه يعمل كما هو.

الآن إذا أطلقنا زر إعادة التوجيه ، فإن المتصفح الخاص بك يستدعي toggleCheckbox ('stop') ، مما يؤدي إلى طلب GET / stop. يضبط ESP32 الإجراء الآن على STOP (ويستجيب بعبارة "OK stop.") ، مما يبشر بالحلقة الرئيسية لتدوير المحركات.

ماذا عن المصابيح؟ نفس الآلية ، ولكن لدينا الآن شريط تمرير:

في جافا سكريبت ، تتم مراقبة إعداد شريط التمرير ، بحيث يحدث عند كل تغيير مكالمة للحصول على "/ LED / xxx" ، حيث xxx هي قيمة السطوع التي يجب تعيين مصابيح LED عليها:

var slide = document.getElementById ('slide')، 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 ('slide') للحصول على كائن شريط التمرير نفسه ، والذي تم التصريح به وأن القيمة يتم إخراجها إلى عنصر نص مع كل تغيير.

يلتقط المعالج الموجود في المخطط جميع طلبات السطوع باستخدام "/ LED / *" في تسجيل المعالج. ثم يتم تقسيم الجزء الأخير (رقم) وإلقاؤه إلى int:

server.on ("/ LED / *" ، HTTP_GET ، (AsyncWebServerRequest * request) {Serial.println ("تم استلام طلب led!") ؛ setLedBrightness ((request-> url ()). substring (5).toInt ()) ؛ طلب> إرسال (200 ، "نص / عادي" ، "مؤشرات موافق.") ؛}) ؛

على غرار ما تم وصفه أعلاه ، تتحكم الأزرار الراديوية في المتغيرات التي تحدد الإعدادات الافتراضية لـ PWM ، مثل أن DuvelBot يمكن أن يقودك ببطء مع البيرة ، مع الحرص على عدم سكب هذا الذهب السائل ، والعودة بسرعة إلى المطبخ لجلب المزيد.

… فكيف يتم تحديث صورة الكاميرا دون الحاجة إلى تحديث الصفحة؟ لذلك نستخدم تقنية تسمى AJAX (JavaScript غير متزامن و XML). تكمن المشكلة في أن اتصال العميل بالخادم عادة ما يتبع إجراءً ثابتًا: يقوم العميل (المستعرض) بتقديم الطلب ، والخادم (ESP32) يستجيب ، ويتم إغلاق الحالة. منتهي. لا شيء يحدث بعد الآن. إذا تمكنا بطريقة ما من خداع المتصفح ليطلب بانتظام تحديثات من ESP32 … وهذا بالضبط ما سنفعله بهذه القطعة من جافا سكريبت:

setInterval (function () {var xhttp = new XMLHttpRequest ()؛ xhttp.open ("GET"، "/ CAMERA"، true)؛ xhttp.responseType = "blob"؛ xhttp.timeout = 500؛ xhttp.ontimeout = function () {}؛ xhttp.onload = function (e) {if (this.readyState == 4 && this.status == 200) {// راجع: 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) ؛ // إنشاء كائن من blob 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 * request) {Serial.println ("تم استلام طلب الكاميرا!")؛ camera_fb_t * fb = NULL؛ // esp_err_t res = ESP_OK؛ size_t _jpg_buf_len = 0؛ uint8_t * _jpg_buf = NULL؛ // التقاط إطار fb = esp_camera_fb_get () ؛ إذا (! fb) {Serial.println ("تعذر الحصول على مخزن الإطارات المؤقت") ؛ عودة ؛} إذا (fb-> تنسيق! = PIXFORMAT_JPEG) / / بالفعل بهذا التنسيق من config {bool jpeg_converted = frame-j.webp

الأجزاء المهمة هي الحصول على الإطار fb = esp_camera_fb_get () وتحويله إلى-j.webp

ثم تنتظر وظيفة جافا سكريبت وصول هذه الصورة. ثم يستغرق الأمر القليل من العمل لتحويل "blob" المستلم إلى عنوان url يمكن استخدامه كمصدر لتحديث الصورة في صفحة html.

phew ، لقد انتهينا!

الخطوة 4: الأفكار والمخلفات

كان الهدف من هذا المشروع بالنسبة لي هو تعلم برمجة ويب كافية لربط الأجهزة بالويب. عدة امتدادات ممكنة لهذا المشروع. إليك بعض الأفكار:

• قم بتنفيذ دفق الكاميرا "الحقيقي" كما هو موضح هنا وهنا وانقله إلى خادم ثان كما هو موضح هنا على نفس ESP32 ، ولكن على نواة وحدة المعالجة المركزية الأخرى ، ثم قم باستيراد دفق الكاميرا إلى html الذي يقدمه الخادم الأول باستخدام…. يجب أن يؤدي هذا إلى تحديثات أسرع للكاميرا.
• استخدم وضع نقطة الوصول (AP) حتى يصبح الروبوت أكثر استقلالية كما هو موضح هنا.
• قم بتوسيع نطاق قياس جهد البطارية ، وإمكانيات النوم العميق وما إلى ذلك. هذا صعب بعض الشيء في الوقت الحالي لأن AI-Thinker ESP32-CAM لا يحتوي على العديد من GPIOs ؛ يحتاج إلى توسيع عبر uart وعلى سبيل المثال عبد اردوينو.
• قم بالتحويل إلى روبوت يبحث عن القطط ويخرج علاجات القطط من وقت لآخر بضغطة زر كبيرة ، قم بدفق أطنان من صور القطط اللطيفة خلال النهار …

يرجى التعليق إذا كنت تحب أو لديك أسئلة وشكرا على القراءة!