ऑगमेंटेड रियलिटी वेब ब्राउजर: 9 कदम

2024 लेखक: John Day | [email protected]. अंतिम बार संशोधित: 2024-01-30 09:21

आज हम Android के लिए एक ऑगमेंटेड रियलिटी वेब ब्राउज़र बनाने जा रहे हैं।

यह विचार तब शुरू हुआ जब एक्सप्रेसवीपीएन ने मुझे एक प्रायोजित यूट्यूब वीडियो करने के लिए कहा। चूंकि यह मेरा पहला है, मैं कुछ ऐसा करना चाहता था जो उनके उत्पाद के लिए प्रासंगिक हो। बहुत जल्दी मैंने सोचा, ओह, मैं सिर्फ एक संवर्धित वास्तविकता वेब ब्राउज़र बनाऊंगा ताकि हम एक वीपीएन पर एआर में वेब ब्राउज़ कर सकें। यह इतना कठिन नहीं हो सकता, है ना? गलत। मैंने इस परियोजना के लिए कुछ सीमाएँ निर्धारित कीं क्योंकि मैं कुछ नई चीजें सीखने के लिए इसका उपयोग करना चाहता था।

नंबर एक मैं चाहता था कि यह एंड्रॉइड के लिए हो क्योंकि मैं हमेशा आईओएस के साथ सामान करता हूं।

नंबर दो मैं किसी भी भुगतान किए गए एपीआई का उपयोग नहीं करना चाहता था, मैं चाहता था कि हर कोई इस परियोजना को डाउनलोड करने और ऑनलाइन किसी भी सामान के लिए भुगतान किए बिना इसे चलाने में सक्षम हो। तो कोई आईबीएम वाटसन नहीं, कोई Google एपीआई नहीं, और यूनिटी एसेट स्टोर से कुछ भी नहीं।

आएँ शुरू करें!

चरण 1: पहली चीजें पहले।

पहली चीज जो मैं काम करना चाहता था वह भाषण से पाठ के लिए एक अच्छा समाधान था ताकि हम अपनी आवाज के साथ ऑनलाइन खोज कर सकें। इसके अलावा, मुझे लगता है कि आवाज एआर में बातचीत का एक अच्छा तरीका है, कम से कम जब तक हमारे पास एक अच्छा हाथ ट्रैकिंग समाधान न हो। मुझे पता है कि एंड्रॉइड के पास टेक्स्ट कार्यक्षमता के लिए कुछ मूल भाषण है, इसलिए एक त्वरित Google खोज हमें एकता के लिए कुछ प्लगइन्स खोजने में मदद करेगी।

मैं पहली बार इस प्लगइन पर एकता के लिए आया था:

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

मैंने इसे आजमाया और इसने बहुत अच्छा काम किया। एकमात्र समस्या यह थी कि जब आप इसे एआरकोर के साथ उपयोग करते हैं तो यह एक देशी पॉपअप बॉक्स उत्पन्न करता है और एकता को पृष्ठभूमि में लगता है और आप ट्रैकिंग खो देते हैं।

यह आदर्श से कम नहीं था।

चरण 2: Android के लिए टेक्स्ट वर्किंग के लिए भाषण प्राप्त करना।

इसलिए मैंने कुछ प्लगइन्स की खोज शुरू की जो देशी पॉप अप बॉक्स नहीं लाए और बहुत कुछ नहीं मिला लेकिन मुझे यह एंड्रॉइड लाइब्रेरी मिल गई:

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

अब मुझे मूल एंड्रॉइड डेवलपमेंट के बारे में कुछ भी नहीं पता है, लेकिन मैं खुद को चुनौती देना चाहता था इसलिए मुझे लगा कि मैं इस लाइब्रेरी के लिए कुछ ब्रिज कोड लिखने की कोशिश करूंगा और इसे एकता में उपयोग के लिए एंड्रॉइड प्लगइन में बदल दूंगा। फिर से, यह एक गलती और लीड थी घंटों हताशा के लिए।

फिर आखिरकार इसने काम किया …

चरण 3: सबक सीखा।

तो इस प्रक्रिया में मैंने दो चीजें सीखी हैं जो एकता के लिए एंड्रॉइड प्लगइन बनाने का तरीका जानने से तुरंत स्पष्ट नहीं होती हैं।

नंबर एक यह है कि यदि आपका प्लगइन कुछ भी दिलचस्प करने जा रहा है तो आपको शायद एंड्रॉइड ऐप संदर्भ का संदर्भ प्राप्त करने की आवश्यकता होगी। आप लाइब्रेरी के रूप में अपने एंड्रॉइड प्रोजेक्ट में अपने यूनिटी इंस्टॉल से class.jar फ़ाइल जोड़कर ऐसा कर सकते हैं। इसलिए फाइल प्रोजेक्ट स्ट्रक्चर पर जाएं और फिर ऐप मॉड्यूल के लिए डिपेंडेंसी टैब चुनें। यहां आप जार फ़ाइल जोड़ने के लिए प्लस बटन पर क्लिक कर सकते हैं। अपने यूनिटी बिल्ड, प्लेबैक इंजन, एंड्रॉइडप्लेयर, वेरिएशन, मोनो, डेवलपमेंट, क्लासेस और अंत में क्लासेस.जर पर जाएं। केवल संकलन के लिए दायरा बदलें। अब, एक नई जावा फ़ाइल में आप यह कर सकते हैं:

UnityPlayer.currentActivity.getApplicationContext ();

और जहां भी आपको इसकी आवश्यकता हो, उस संदर्भ का उपयोग करें।

अगला अजीब मुद्दा यह है कि यह आवाज की कार्यक्षमता केवल मुख्य धागे पर ही चल सकती है अन्यथा आपको त्रुटियां मिलेंगी। एकता में ऐसा करने के लिए आपको यूआई थ्रेड पर चलने के लिए कार्यों और प्लगइन को ऊपर की तस्वीर की तरह AndroidJavaRunnable के रूप में बताना होगा।

चरण 4: संघर्ष।

इस समय मैं सोच रहा हूँ कि मैं एक Android विशेषज्ञ हूँ, मैं एंड्रॉइड देव नौकरियों के लिए ऑनलाइन आवेदन कर रहा हूं, मैं एंड्रॉइड स्टिकर और टी-शर्ट ऑर्डर कर रहा हूं। जीवन अच्छा है। अब मैं यह पता लगाने के लिए तैयार हूं कि एकता में वेबपेज कैसे प्रस्तुत किया जाए। थोड़ा शोध करने के बाद मैं देखता हूं कि स्वीकृत समाधान Android WebView का उपयोग करना है। यह सिर्फ एक एंड्रॉइड क्लास है जो आपको उन वेबसाइटों को प्रस्तुत करने की अनुमति देता है जो ब्राउज़र में सब कुछ लोड किए बिना एंड्रॉइड ऐप के अंदर इंटर-एक्टेबल हैं। मूल रूप से, ऐसा इसलिए है ताकि आप उपयोगकर्ताओं को अपने ऐप में रख सकें। व्यवसाय का पहला क्रम यह देखना है कि क्या किसी ने इसके लिए एक एकता प्लगइन बनाया है जो कि खुला स्रोत है। मैं पहले इस प्लगइन को आजमाता हूं:

github.com/gree/unity-webview

लेकिन यह केवल एकता GUI परत के लिए एक WebView प्रदान करता है ताकि यह काम न करे। तब मुझे यह प्लगइन VR के लिए मिलता है:

github.com/IanPhilips/UnityAndroidVRBrowse…

यह आपको एक बनावट के लिए एक वेबव्यू प्रस्तुत करने की अनुमति देता है और यह भी इंटरैक्ट करने योग्य है, जो कि बहुत अच्छा है। मैंने सोचा कि यह तब तक जवाब था जब तक मैंने इसे आजमाया और पता चला कि यह मेरे सभी क्लिकों को एकता से रोक रहा है।

चरण 5: वापस ड्राइंग बोर्ड पर।

मैं इसके लिए बस अपना प्लगइन बनाने की कोशिश कर रहा हूं, क्योंकि मुझे वास्तव में वेबसाइट की एक छवि को एकता में भेजने की ज़रूरत है। उस पर कुछ शोध करते हुए, मुझे पता चला कि मैं एक एंड्रॉइड कैनवास को बिटमैप में सहेज सकता हूं और फिर इसे एक पीएनजी में एन्कोड कर सकता हूं और उन बाइट्स को एकता को भेज सकता हूं, वहां बाइट्स की उस सरणी के साथ एक नया बनावट बनाएं और मैं अच्छा हूं। कुछ घंटों की निराशा और मेरे अस्तित्व पर सवाल उठाने के बाद…

यह आखिरकार काम कर गया।

तो अब मुझे एक वेबसाइट से एक स्क्रीनशॉट मिल सकता है, तो आइए देखें कि यह आर्कोर के साथ कैसे काम करता है…

यह नहीं करता है।

मेरा मतलब है कि मैं एक गैलेक्सी एस 7 का उपयोग कर रहा हूं जो नवीनतम फोन नहीं है, लेकिन यह वेबव्यू सामग्री अभी भी पूरे ऐप को फ्रीज कर रही है और मूल रूप से अनुपयोगी है। मुझे लगता है कि ऐसा इसलिए है क्योंकि वेबव्यू और एआरकोर दोनों मुख्य धागे को ओवरलोड कर रहे हैं लेकिन मुझे वास्तव में पता नहीं है। ड्रॉइंग बोर्ड पर वापस। अगर हम यह काम करना चाहते हैं, तो हमें भारी भारोत्तोलन को किसी प्रकार के सर्वर पर लोड करना होगा। कुछ Googling करने के बाद यह पता चला है कि आप Node.js के लिए एक लाइब्रेरी वाली वेबसाइट का स्क्रीनशॉट ले सकते हैं जिसे WebShot कहा जाता है जो Phantom JS का उपयोग करता है जो एक स्क्रिप्ट योग्य हेडलेस ब्राउज़र है।

चरण 6: अंत में हम कहीं मिल रहे हैं।

अब मुझे यह पता लगाना है कि Node.js का उपयोग कैसे करें…।

पता चलता है कि आप एक Node.js स्क्रिप्ट बना सकते हैं जो किसी विशेष पोर्ट नंबर पर सुनती है और जब यह उस पोर्ट पर हिट हो जाती है तो यह कुछ जानकारी वापस कर सकती है। हम पोर्ट 3000 पर सुनने वाली एक छोटी हैलो वर्ल्ड स्क्रिप्ट बनाकर इसका परीक्षण कर सकते हैं। हम स्क्रिप्ट के साथ निर्देशिका में सीडी कर सकते हैं और इसे नोड और फिर स्क्रिप्ट नाम करके चला सकते हैं। यदि हम अपने आईपी पते पर नेविगेट करते हैं और फिर अपने ब्राउज़र में 3000 पोर्ट करते हैं तो हम इसे हैलो वर्ल्ड लौटाते हुए देख सकते हैं। अब जब मेरे पास नोड पर एक छोटी सी समझ है तो मैं इसे अपने सर्वर पर काम कर सकता हूं कि मैं अपनी वेबसाइट होस्ट करता हूं जिस पर hawkhost.com है। मैं अपने सर्वर में एसएसएच करता हूं और कुछ हैलो वर्ल्ड नोड.जेएस स्क्रिप्ट चलाने की कोशिश करता हूं … और कुछ भी काम नहीं कर रहा है। कुछ और घंटों की गड़बड़ी के बाद मुझे पता चला कि मेरे विशेष होस्टिंग सर्वर में केवल दो पोर्ट उपयोग के लिए खुले हैं, जो कि 3000 और 12001 हैं।

तो उन बंदरगाहों और मेरे होस्टिंग सर्वर आईपी का उपयोग करके मैं एक हैलो वर्ल्ड उदाहरण काम कर सकता हूं। इसके बाद मैं वेबशॉट मॉड्यूल स्थापित करता हूं और एक छोटी सी स्क्रिप्ट बनाता हूं जिसे मैं एक यूआरएल पास कर सकता हूं और यह मुझे उस वेब पते पर वेबसाइट की एक छवि लौटाएगा। अब मैं उस नोड स्क्रिप्ट को शुरू कर सकता हूं और एकता से मेरे सर्वर के विशिष्ट आईपी और पोर्ट नंबर पर एक http POST अनुरोध भेज सकता हूं जो मुझे एक बाइट सरणी लौटाएगा जो उस वेबसाइट की छवि है। भगवान का शुक्र है। अब एक और समस्या यह है कि जब मैं अपना टर्मिनल बंद करता हूं तो प्रक्रिया समाप्त हो जाती है और सुनना बंद हो जाता है। मैं कुछ और शोध करता हूं और हमेशा के लिए नामक मॉड्यूल ढूंढता हूं। एनपीएम हमेशा के लिए स्थापित हो जाता है और अब मैं हमेशा के लिए नेविगेट कर सकता हूं और हमेशा के लिए स्क्रिप्ट शुरू कर सकता हूं और यह तब तक चलता रहेगा जब तक मैं लॉग इन नहीं करता और इसे फिर से बंद नहीं करता।

चरण 7: यह काम करता है

महान। लेकिन यह काफी अच्छा नहीं है।

जब मैं एआर में वेब ब्राउज़ करने के मूल्य के बारे में सोचता हूं तो यह स्थान के अतिरिक्त से आता है। हम अब एक स्क्रीन तक ही सीमित नहीं हैं इसलिए मैं कुछ ऐसा बनाना चाहता हूं जिससे मैं अपने सामने अपने खोज पथ की कल्पना कर सकूं। तो चलिए उस पहले खोज पृष्ठ को लोड करते हैं और फिर उस पृष्ठ को क्रॉल करते हैं और प्रत्येक खोज परिणाम को एक लिंक के रूप में निकालते हैं, जिसे हम अपनी मुख्य स्क्रीन के ऊपर एक छवि के रूप में लोड कर सकते हैं। हम इसे किसी अन्य Node.js स्क्रिप्ट के साथ कर सकते हैं जो Google परिणामों के पहले पृष्ठ को स्क्रैप करता है और इसे हमेशा के लिए लगातार चलाता है। यह Google खोज एपीआई के साथ और अधिक कुशलता से किया जा सकता है लेकिन इस परियोजना के लिए नियम संख्या दो कोई भुगतान एपीआई नहीं था, इसलिए हम इसे अभी के लिए ऐसा करने जा रहे हैं। अब जब हमारे पास प्रत्येक लिंक के लिए छवियां हैं, तो हम उन्हें हर बार क्लिक करने और बूम करने पर बड़ी स्क्रीन पर लोड कर सकते हैं, हमारे पास यहां एक अच्छा छोटा ब्राउज़र है। यह पूरी तरह कार्यात्मक नहीं है, लेकिन मैं इसे लूंगा। ठीक है, यदि आप इस परियोजना को स्वयं चलाना चाहते हैं तो मेरे जीथब पर जाएँ और एक्सप्रेसवीपीएन परियोजना डाउनलोड करें:

github.com/MatthewHallberg/ARBrowserExpres…

चरण 8: सब कुछ काम करना।

इसे एकता में खोलें और अपनी मशीन पर स्थानीय रूप से चलने वाली हर चीज़ प्राप्त करें। सबसे पहले आपको अपनी मशीन का आईपी पता ढूंढना होगा ताकि यदि आप मैक पर हैं तो बस होल्ड ऑप्शन पर क्लिक करें और अपने आईपी को प्रकट करने के लिए वाईफाई सिंबल पर क्लिक करें।

एकता पर वापस जाएं और ब्राउज़र नियंत्रक स्क्रिप्ट खोलें और वहां अपना आईपी पता डालें और इसे अपने क्लिपबोर्ड पर कॉपी करें। नोडस्क्रिप्ट फ़ोल्डर ढूंढें और इसे अपने डेस्कटॉप पर रखें, फ़ोल्डर खोलें और दोनों एक्सटेंशन को.js में बदलें। प्रत्येक स्क्रिप्ट खोलें और आईपी पते को अपने आईपी में बदलें। अब टर्मिनल खोलें और हमें कुछ चीजें इंस्टॉल करनी होंगी। HomeBrew स्थापित करें यदि आपके पास पहले से नहीं है।

-काढ़ा स्थापित नोड

-एनपीएम वेबशॉट स्थापित करें

-एनपीएम इंस्टाल फ्लैटिरॉन

-एनपीएम संघ स्थापित करें

-एनपीएम चीयरियो स्थापित करें

अब हम दोनों स्क्रिप्ट को cd को नोडस्क्रिप्ट फ़ोल्डर में शुरू कर सकते हैं और नोड getimage.js कर सकते हैं और फिर एक नई टर्मिनल विंडो खोल सकते हैं और नोड getlinks.js कर सकते हैं दोनों टर्मिनल विंडो को चालू छोड़ दें और संपादक के पास वापस जाएं। अगर हम प्ले दबाते हैं तो सब कुछ ठीक काम करना चाहिए। हम फाइल पर भी जा सकते हैं, सेटिंग्स बना सकते हैं, और इसे अपने फोन पर लाने के लिए हिट बिल्ड एंड रन कर सकते हैं! यदि आप सर्वर को रोकना चाहते हैं तो पूरे टर्मिनल को बंद करने के लिए नियंत्रण सी या कमांड क्यू दबाएं।

यह बात है!