متصفح الويب الواقعي المعزز: 9 خطوات

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

سنبدأ اليوم في إنشاء متصفح ويب للواقع المعزز لنظام Android.

بدأت هذه الفكرة عندما طلب مني ExpressVPN أن أقوم برعاية فيديو يوتيوب. نظرًا لأن هذا هو أول ما لدي ، فقد أردت أن أفعل شيئًا ذا صلة بمنتجهم. فكرت على الفور ، سأقوم فقط بإنشاء متصفح ويب للواقع المعزز حتى نتمكن من تصفح الويب في الواقع المعزز على VPN. لا يمكن أن يكون الأمر بهذه الصعوبة ، أليس كذلك؟ خاطئ. وضعت لنفسي بعض القيود على هذا المشروع لأنني أردت استخدامه لتعلم بعض الأشياء الجديدة.

رقم واحد أردت أن يكون لنظام Android لأنني دائمًا ما أفعل أشياء مع IOS.

ثانيًا ، لم أرغب في استخدام أي واجهات برمجة تطبيقات مدفوعة ، أردت أن يتمكن الجميع من تنزيل هذا المشروع وتشغيله دون الحاجة إلى الدفع مقابل أي أشياء عبر الإنترنت. لذلك لا يوجد IBM Watson ولا واجهة برمجة تطبيقات Google ولا شيء من متجر Unity Asset.

هيا بنا نبدأ!

الخطوة 1: الأشياء الأولى أولاً

كان أول شيء أردت أن أبدأ به هو حل جيد لتحويل الكلام إلى نص حتى نتمكن من إجراء عمليات البحث عبر الإنترنت بصوتنا. أعتقد أيضًا أن الصوت هو طريقة رائعة للتفاعل في الواقع المعزز ، على الأقل حتى نحصل على حل جيد لتتبع اليد. أعلم أن Android لديه بعض وظائف الكلام الأصلي إلى نص ، لذا فإن البحث السريع في google سيساعدنا في العثور على بعض المكونات الإضافية لـ Unity.

جئت أولاً على هذا البرنامج المساعد للوحدة:

www.google.com/search؟rlz=1C5CHFA_enUS816U…

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

كان هذا أقل من مثالي.

الخطوة 2: تحويل الكلام إلى نص يعمل على Android

لذلك بدأت في البحث عن بعض المكونات الإضافية التي لم تظهر مربع النوافذ المنبثقة الأصلي ولم أجد الكثير ولكن انتهى بي المطاف بالعثور على مكتبة android هذه:

github.com/maxwellobi/Android-Speech-Recog…

الآن لا أعرف حرفيًا أي شيء عن تطوير Android الأصلي ، لكنني أردت أن أتحدى نفسي ، لذلك اعتقدت أنني سأحاول فقط كتابة بعض رموز الجسر لهذه المكتبة وتحويلها إلى مكون إضافي لنظام Android لاستخدامه في Unity. لساعات من الإحباط.

ثم نجحت أخيرًا …

الخطوة الثالثة: الدروس المستفادة

لذلك هناك شيئان تعلمتهما في هذه العملية لا يتضحان فورًا من مجرد البحث على Google حول كيفية إنشاء مكون إضافي لنظام Android من أجل الوحدة.

رقم واحد هو أنك ستحتاج على الأرجح إلى الحصول على مرجع لسياق تطبيق Android إذا كان المكون الإضافي الخاص بك سيفعل أي شيء مثير للاهتمام. يمكنك القيام بذلك عن طريق إضافة ملف class.jar من تثبيت Unity الخاص بك إلى مشروع Android كمكتبة. لذا انتقل إلى ملف بنية المشروع ثم اختر علامة تبويب التبعيات لوحدة التطبيق. هنا يمكنك النقر فوق زر علامة الجمع لإضافة ملف الجرة. انتقل إلى Unity build ، ومحركات التشغيل ، و androidplayer ، والاختلافات ، و mono ، و Development ، و classes ، وأخيراً class.jar. قم بتغيير النطاق للترجمة فقط. الآن ، في ملف جافا جديد ، يمكنك القيام بما يلي:

UnityPlayer.currentActivity.getApplicationContext () ،

واستخدم هذا المرجع أينما كنت في حاجة إليه.

المشكلة الغريبة التالية هي أنه لا يمكن تشغيل هذه الوظيفة الصوتية إلا على السلسلة الرئيسية وإلا ستحصل على أخطاء. للقيام بذلك في Unity ، عليك إخبار الوظائف والمكوِّن الإضافي بالتشغيل على UI Thread باعتباره AndroidJavaRunnable مثل الصورة أعلاه.

الخطوة 4: النضالات

في هذه المرحلة ، أفكر أنني خبير في Android ،

أنا أتقدم عبر الإنترنت لوظائف التطوير في android ، أنا أطلب ملصقات وقمصان android. الحياة جيدة. أنا الآن جاهز للانتقال إلى اكتشاف كيفية عرض صفحة ويب في Unity. بعد إجراء القليل من البحث ، أرى أن الحل المقبول هو استخدام Android WebView. هذه مجرد فئة Android تتيح لك عرض مواقع الويب القابلة للتفاعل داخل تطبيق Android دون تحميل كل شيء في المتصفح. في الأساس ، يمكنك الاحتفاظ بالمستخدمين في تطبيقك. أول أمر في العمل هو معرفة ما إذا كان أي شخص قد أنشأ مكونًا إضافيًا موحدًا لهذا المصدر مفتوح المصدر. جربت هذا المكون الإضافي أولاً:

github.com/gree/unity-webview

ولكنه يعرض WebView فقط على طبقة Unity GUI حتى لا يعمل ذلك. ثم أجد هذا المكون الإضافي لـ VR:

github.com/IanPhilips/UnityAndroidVRBrowse…

يتيح لك ذلك عرض WebView على نسيج ويمكن التفاعل معه ، وهو أمر رائع ، اعتقدت أن هذا هو الحل حتى جربته واكتشفت أنه كان يمنع جميع نقراتي من الوحدة.

الخطوة 5: العودة إلى لوحة الرسم

سأحاول فقط إنشاء المكون الإضافي الخاص بي من أجل هذا ، لأن كل ما أحتاجه حقًا هو إرسال صورة لموقع الويب إلى الوحدة. بعد إجراء بعض الأبحاث حول ذلك ، اكتشفت أنه يمكنني حفظ لوحة android في صورة نقطية ثم ترميزها إلى-p.webp

لقد نجحت أخيرًا.

حتى الآن يمكنني الحصول على لقطة شاشة من موقع ويب ، لذلك دعونا نرى كيف يعمل مع arcore …

لا.

أعني أنني أستخدم galaxy s7 وهو ليس أحدث هاتف ، لكن عناصر WebView هذه لا تزال تجمد التطبيق بالكامل وغير قابلة للاستخدام بشكل أساسي. أفترض أن السبب في ذلك هو أن كل من WebView و ARCore يتسببان في زيادة التحميل على سلسلة المحادثات الرئيسية ولكني لا أعرف حقًا. العودة الى لوحة الرسم. إذا أردنا أن نجعل هذا العمل ، فسنضطر إلى تنزيل الرفع الثقيل إلى نوع من الخادم. بعد إجراء بعض عمليات البحث على Googling ، اتضح أنه يمكنك التقاط لقطة شاشة لموقع ويب به مكتبة لـ Node.js تسمى WebShot تستخدم Phantom JS وهو متصفح بدون رأس قابل للبرمجة.

الخطوة 6: أخيرًا وصلنا إلى مكان ما

الآن عليّ معرفة كيفية استخدام Node.js….

اتضح أنه يمكنك إنشاء نص برمجي Node.js يستمع إلى رقم منفذ معين وعندما يصل إلى هذا المنفذ يمكنه إرجاع بعض المعلومات. يمكننا اختبار ذلك من خلال إنشاء نص برمجي صغير hello world يستمع إلى المنفذ 3000. يمكننا cd في الدليل باستخدام البرنامج النصي وتشغيله عن طريق عمل العقدة ثم اسم البرنامج النصي. إذا انتقلنا إلى عنوان IP الخاص بنا ثم المنفذ 3000 في متصفحنا ، فيمكننا رؤيته يعود مرحبًا بالعالم. الآن بعد أن أصبح لدي فهم بسيط للعقدة ، يمكنني تشغيلها على الخادم الخاص بي الذي أستضيف مواقع الويب الخاصة بي عليه وهو hawkhost.com. أدخل SSH إلى خادمي وأحاول تشغيل بعض البرامج النصية لـ hello world node.js … ولا شيء يعمل. بعد ساعات قليلة أخرى من العبث ، اكتشفت أن خادم الاستضافة الخاص بي به منفذين فقط مفتوحين للاستخدام ، أي 3000 و 12001.

لذا باستخدام هذه المنافذ وخوادم الاستضافة IP ، يمكنني الحصول على مثال عالم مرحب به. بعد ذلك ، أقوم بتثبيت وحدة WebShot وأنشئ نصًا برمجيًا صغيرًا يمكنني تمرير عنوان URL إليه وسيعيد لي صورة لموقع الويب على عنوان الويب هذا. يمكنني الآن بدء نص العقدة هذا وإرسال طلب http POST من Unity إلى عنوان IP المحدد ورقم المنفذ لخادمي والذي سيعيد لي مصفوفة بايت تمثل صورة ذلك الموقع. الآن هناك مشكلة أخرى وهي عندما أغلق الجهاز الخاص بي تنتهي العملية وتتوقف عن الاستماع. أقوم بمزيد من البحث وأجد وحدة تسمى إلى الأبد. تثبيت NPM إلى الأبد والآن يمكنني الانتقال إلى الأبد والقيام ببدء البرنامج النصي إلى الأبد وسيستمر في العمل حتى أقوم بتسجيل الدخول وإيقافه مرة أخرى.

الخطوة 7: إنه يعمل

رائعة. لكنها ليست رائعة بما فيه الكفاية.

عندما أفكر في قيمة تصفح الويب في الواقع المعزز ، فإن ذلك يأتي من إضافة المساحة. لم نعد محصورين في شاشة واحدة ، لذلك أريد أن أصنع شيئًا يسمح لي بتصور مسار البحث الخاص بي مباشرة أمامي. لذلك دعونا نحمل صفحة البحث الأولى ثم نزحف إلى تلك الصفحة ونستخرج كل نتيجة بحث كرابط ، والذي يمكننا بعد ذلك تحميله كصورة أعلى شاشتنا الرئيسية. يمكننا القيام بذلك باستخدام برنامج نصي آخر Node.js يقوم بحذف الصفحة الأولى من نتائج Google وتشغيلها باستمرار إلى الأبد. يمكن القيام بذلك بشكل أكثر كفاءة مع واجهة برمجة تطبيقات بحث Google ولكن القاعدة الثانية لهذا المشروع لم تكن مدفوعة لواجهة برمجة تطبيقات ، لذا سنفعل ذلك على هذا النحو في الوقت الحالي. الآن بعد أن أصبح لدينا الصور لكل رابط ، يمكننا تحميلها على شاشة أكبر في كل مرة نضغط عليها ونزدهر ، لدينا متصفح صغير لطيف هنا. إنها لا تعمل بكامل طاقتها لكنني سأقبلها. حسنًا ، إذا كنت تريد تشغيل هذا المشروع بنفسك ، فانتقل إلى Github وقم بتنزيل مشروع ExpressVPN:

github.com/MatthewHallberg/ARBrowserExpres…

الخطوة 8: تشغيل كل شيء

افتحه في Unity ودعنا نجعل كل شيء يعمل محليًا على جهازك. تحتاج أولاً إلى العثور على عنوان IP الخاص بجهازك ، لذلك إذا كنت تستخدم نظام التشغيل Mac ، فما عليك سوى الضغط على رمز wifi للكشف عن عنوان IP الخاص بك.

ارجع إلى الوحدة وافتح البرنامج النصي لوحدة تحكم المتصفح وأدخل عنوان IP الخاص بك هناك وانسخه إلى الحافظة الخاصة بك. ابحث عن مجلد nodeScripts وضعه على سطح المكتب ، وافتح المجلد وقم بتغيير كلا الامتدادات إلى.js. افتح كل برنامج نصي وقم بتغيير عنوان IP إلى IP الخاص بك. افتح الآن Terminal وعلينا تثبيت بعض الأشياء. ثبّت HomeBrew إذا لم يكن لديك بالفعل.

-يجب تثبيت العقدة

-npm تثبيت webshot

-npm تركيب المكواة

-npm تثبيت الاتحاد

-npm تثبيت cheerio

الآن يمكننا أن نبدأ كلا النصين ، لذا cd في مجلد nodescripts ونعمل node getimage.js ثم نفتح نافذة طرفية جديدة ونفعل node getlinks.js اترك كلا النوافذ الطرفية قيد التشغيل وارجع إلى المحرر. إذا ضغطنا على تشغيل كل شيء يجب أن يعمل بشكل جيد. يمكننا أيضًا الانتقال إلى ملف وإنشاء الإعدادات والضغط على الإنشاء والتشغيل للحصول عليه على هاتفنا! إذا كنت تريد إيقاف الخوادم ، فما عليك سوى الضغط على control c أو الأمر q لإغلاق المحطة بالكامل.

هذا هو!