বর্ধিত বাস্তবতা ওয়েব ব্রাউজার: 9 টি ধাপ

2024 লেখক: John Day | [email protected]. সর্বশেষ পরিবর্তিত: 2024-01-30 08:01

আজ আমরা অ্যান্ড্রয়েডের জন্য একটি অগমেন্টেড রিয়েলিটি ওয়েব ব্রাউজার তৈরির মধ্য দিয়ে যাচ্ছি।

এই ধারণাটি শুরু হয়েছিল যখন এক্সপ্রেসভিপিএন আমাকে একটি স্পনসর করা ইউটিউব ভিডিও করতে বলেছিল। যেহেতু এটি আমার প্রথম, তাই আমি তাদের পণ্যের সাথে প্রাসঙ্গিক কিছু করতে চেয়েছিলাম। খুব তাড়াতাড়ি আমি ভাবলাম, ওহ আমি শুধু একটি বর্ধিত বাস্তবতা ওয়েব ব্রাউজার তৈরি করব যাতে আমরা একটি ভিপিএন -তে এআর -তে ওয়েব ব্রাউজ করতে পারি। এটা এত কঠিন হতে পারে না, তাই না? ভুল। আমি এই প্রকল্পের জন্য নিজেকে কিছু সীমাবদ্ধতা নির্ধারণ করেছি কারণ আমি এটিকে নতুন কিছু শিখতে ব্যবহার করতে চেয়েছিলাম।

এক নম্বর আমি এটা অ্যান্ড্রয়েডের জন্য চাই কারণ আমি সবসময় আইওএস দিয়ে স্টাফ করি।

দুই নম্বর আমি কোন পেইড এপিআই ব্যবহার করতে চাইনি, আমি চেয়েছিলাম সবাই এই প্রজেক্টটি ডাউনলোড করতে এবং অনলাইনে কোন জিনিসের জন্য অর্থ প্রদান না করেই এটি চালাতে সক্ষম হোক। সুতরাং আইবিএম ওয়াটসন নেই, গুগল এপিআই নেই এবং ইউনিটি অ্যাসেট স্টোর থেকে কিছুই নেই।

চল শুরু করি!

ধাপ 1: প্রথম জিনিস প্রথম।

প্রথম যে জিনিসটি আমি কাজ করতে চেয়েছিলাম তা ছিল বক্তৃতা পাঠের জন্য একটি ভাল সমাধান যাতে আমরা আমাদের ভয়েস দিয়ে অনলাইন অনুসন্ধান করতে পারি। এছাড়াও আমি মনে করি ভয়েস এআর -এ ইন্টারঅ্যাকশনের একটি দুর্দান্ত পদ্ধতি, অন্তত যতক্ষণ না আমাদের হাতে ভালো ট্র্যাকিং সমাধান আছে। আমি জানি যে অ্যান্ড্রয়েডের টেক্সট কার্যকারিতার কিছু নেটিভ স্পিচ আছে তাই দ্রুত গুগল সার্চ আমাদের ইউনিটির জন্য কিছু প্লাগইন খুঁজে পেতে সাহায্য করবে।

আমি প্রথম এই প্লাগইনটিতে unityক্যের জন্য এসেছি:

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

আমি এটি চেষ্টা করেছি এবং এটি দুর্দান্ত কাজ করেছে। একমাত্র সমস্যা ছিল যখন আপনি এটি ARCore দিয়ে ব্যবহার করেন তখন এটি একটি নেটিভ পপআপ বক্স তৈরি করে এবং ব্যাকগ্রাউন্ড ইউনিটি মনে হয় এবং আপনি ট্র্যাকিং হারান।

এটি আদর্শের চেয়ে কম ছিল।

ধাপ 2: অ্যান্ড্রয়েডের জন্য ওয়ার্কিং থেকে টেক্সট স্পিচ পাওয়া।

তাই আমি এমন কিছু প্লাগইন খুঁজতে শুরু করেছি যা দেশীয় পপ আপ বক্সটি আনেনি এবং অনেক কিছু খুঁজে পায়নি কিন্তু আমি এই অ্যান্ড্রয়েড লাইব্রেরিটি খুঁজে পেয়েছি:

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

এখন আমি আক্ষরিকভাবে নেটিভ অ্যান্ড্রয়েড ডেভেলপমেন্ট সম্পর্কে কিছুই জানি না কিন্তু আমি নিজেকে চ্যালেঞ্জ করতে চেয়েছিলাম তাই আমি ভেবেছিলাম আমি শুধু এই লাইব্রেরির জন্য কিছু ব্রিজ কোড লেখার চেষ্টা করবো এবং ইউনিটিতে ব্যবহারের জন্য এটিকে অ্যান্ড্রয়েড প্লাগিনে পরিণত করব। হতাশার ঘন্টার জন্য।

তারপর অবশেষে এটি কাজ করেছে …

ধাপ 3: পাঠ শিখেছে।

সুতরাং এই প্রক্রিয়ায় আমি দুটি জিনিস শিখেছি যা gক্যের জন্য কীভাবে একটি অ্যান্ড্রয়েড প্লাগইন তৈরি করতে হয় তা কেবল গুগল করা থেকে স্পষ্ট নয়।

এক নম্বর হল, আপনার প্লাগইন যদি আকর্ষণীয় কিছু করতে যাচ্ছে তাহলে আপনাকে সম্ভবত অ্যান্ড্রয়েড অ্যাপ প্রসঙ্গের একটি রেফারেন্স পেতে হবে। আপনি আপনার ইউনিটি ইনস্টল থেকে class.jar ফাইলটি লাইব্রেরি হিসাবে আপনার অ্যান্ড্রয়েড প্রকল্পে যোগ করে এটি করতে পারেন। সুতরাং ফাইল প্রকল্পের কাঠামোতে যান এবং তারপরে অ্যাপ মডিউলের জন্য নির্ভরতা ট্যাবটি নির্বাচন করুন। এখানে আপনি জার ফাইল যোগ করতে প্লাস বাটনে ক্লিক করতে পারেন। আপনার ইউনিটি বিল্ড, প্লেব্যাক ইঞ্জিন, অ্যান্ড্রয়েডপ্লেয়ার, ভেরিয়েশন, মনো, ডেভেলপমেন্ট, ক্লাস এবং সবশেষে class.jar এ যান। শুধুমাত্র কম্পাইল করার সুযোগ পরিবর্তন করুন। এখন, একটি নতুন জাভা ফাইলে আপনি করতে পারেন:

UnityPlayer.currentActivity.getApplicationContext ();

এবং সেই রেফারেন্স ব্যবহার করুন যেখানেই আপনার প্রয়োজন।

পরবর্তী অদ্ভুত সমস্যা হল এই ভয়েস কার্যকারিতা শুধুমাত্র মূল থ্রেডে চালানো যেতে পারে অন্যথায় আপনি ত্রুটি পাবেন। ইউনিটিতে এটি করার জন্য আপনাকে উপরের ছবির মতো AndroidJavaRunnable হিসাবে UI থ্রেডে ফাংশন এবং প্লাগইন চালাতে হবে।

ধাপ 4: সংগ্রাম।

এই মুহুর্তে আমি ভাবছি আমি একজন অ্যান্ড্রয়েড বিশেষজ্ঞ, আমি অনলাইনে অ্যান্ড্রয়েড দেব চাকরির জন্য আবেদন করছি, আমি অ্যান্ড্রয়েড স্টিকার এবং টি-শার্ট অর্ডার করছি। জীবন সুন্দর. এখন আমি ইউনিটিতে কীভাবে একটি ওয়েবপৃষ্ঠা রেন্ডার করব তা বের করার জন্য আমি প্রস্তুত। একটু গবেষণা করার পর আমি দেখলাম যে গৃহীত সমাধান হল একটি অ্যান্ড্রয়েড ওয়েবভিউ ব্যবহার করা। এটি কেবল একটি অ্যান্ড্রয়েড ক্লাস যা আপনাকে ব্রাউজারে সবকিছু লোড না করেই একটি অ্যান্ড্রয়েড অ্যাপের মধ্যে আন্ত interঅ্যাক্টযোগ্য ওয়েবসাইটগুলি রেন্ডার করতে দেয়। মূলত, এটি তাই আপনি ব্যবহারকারীদের আপনার অ্যাপে রাখতে পারেন। ব্যবসার প্রথম ক্রম হল দেখতে হবে যে কেউ এই জন্য একটি plugক্য প্লাগইন তৈরি করেছে যা ওপেন সোর্স। আমি প্রথমে এই প্লাগইনটি চেষ্টা করি:

github.com/gree/unity-webview

তবে এটি কেবল ইউনিটি জিইউআই স্তরে একটি ওয়েবভিউ রেন্ডার করে তাই এটি কাজ করবে না। তারপরে আমি ভিআর এর জন্য এই প্লাগইনটি খুঁজে পাই:

github.com/IanPhilips/UnityAndroidVRBrowse…

এটি আপনাকে একটি ওয়েবভিউকে একটি টেক্সচারে রেন্ডার করার অনুমতি দেয় এবং এটি এমনকি ইন্টারেকটেবল, যা দুর্দান্ত। আমি মনে করি এই উত্তরটি ছিল যতক্ষণ না আমি এটি চেষ্টা করেছি এবং খুঁজে পেয়েছি যে এটি আমার সমস্ত ক্লিককে.ক্য থেকে অবরুদ্ধ করছে।

ধাপ 5: ড্রয়িং বোর্ডে ফিরে যান।

আমি শুধু এই জন্য আমার প্লাগইন করার চেষ্টা করতে যাচ্ছি, কারণ আমি সত্যিই প্রয়োজন একতা ওয়েবসাইটের একটি ছবি পাঠাতে হয়। এটি নিয়ে কিছু গবেষণা করে, আমি জানতে পারি যে আমি একটি অ্যান্ড্রয়েড ক্যানভাসকে একটি বিটম্যাপে সংরক্ষণ করতে পারি এবং তারপর এটিকে একটি পিএনজিতে এনকোড করতে পারি এবং শুধু সেই বাইটগুলিকে ইউনিটিতে পাঠাতে পারি, সেখানে সেই বাইটের অ্যারে দিয়ে একটি নতুন টেক্সচার তৈরি করি এবং আমি ভালো। আরও কয়েক ঘন্টা হতাশা এবং আমার অস্তিত্ব নিয়ে প্রশ্ন করার পরে …

এটি অবশেষে কাজ করেছে।

তাই এখন আমি একটি ওয়েবসাইট থেকে একটি স্ক্রিনশট পেতে পারি, তাই আসুন দেখি কিভাবে এটি আর্কোরের সাথে কাজ করে…

তা হয় না।

আমি বলতে চাচ্ছি যে আমি একটি গ্যালাক্সি এস 7 ব্যবহার করছি যা নতুন ফোন নয়, তবে এই ওয়েবভিউ স্টাফগুলি এখনও পুরো অ্যাপটি হিমায়িত করছে এবং মূলত অব্যবহারযোগ্য। আমি এটা ধরে নিচ্ছি কারণ ওয়েবভিউ এবং এআরকোর উভয়ই মূল থ্রেডকে ওভারলোড করছে কিন্তু আমি সত্যিই জানি না। অঙ্কন বোর্ড ফিরে। যদি আমরা এই কাজটি করতে চাই, তাহলে আমাদের ভারী উত্তোলন বন্ধ করতে হবে কোন ধরণের সার্ভারে। কিছু Googling করার পর দেখা যাচ্ছে আপনি Node.js এর জন্য একটি লাইব্রেরি সহ একটি ওয়েবসাইটের স্ক্রিনশট নিতে পারেন যা WebShot নামে পরিচিত যা ফ্যান্টম JS ব্যবহার করে যা একটি স্ক্রিপ্টযোগ্য হেডলেস ব্রাউজার।

ধাপ 6: অবশেষে আমরা কোথাও পাচ্ছি।

এখন আমি কিভাবে Node.js ব্যবহার করতে হবে তা বের করতে হবে…।

দেখা যাচ্ছে আপনি একটি Node.js স্ক্রিপ্ট তৈরি করতে পারেন যা একটি নির্দিষ্ট পোর্ট নম্বর শোনে এবং যখন এটি সেই পোর্টে আঘাত পায় তখন এটি কিছু তথ্য ফেরত দিতে পারে। আমরা পোর্ট 3000 এ শোনার জন্য একটু হ্যালো ওয়ার্ল্ড স্ক্রিপ্ট তৈরি করে এটি পরীক্ষা করতে পারি। যদি আমরা আমাদের আইপি ঠিকানায় নেভিগেট করি এবং তারপরে আমাদের ব্রাউজারে 3000 পোর্ট করি তবে আমরা এটি হ্যালো ওয়ার্ল্ড ফিরে দেখতে পারি। এখন যেহেতু আমি নোডে একটি ছোট্ট উপলব্ধি পেয়েছি আমি এটি আমার সার্ভারে কাজ করতে পারি যে আমি আমার ওয়েবসাইটগুলি হোস্ট করি যা hawkhost.com। আমি আমার সার্ভারে SSH করেছি এবং কিছু হ্যালো ওয়ার্ল্ড node.js স্ক্রিপ্ট চালানোর চেষ্টা করছি … এবং কিছুই কাজ করছে না। আরও কয়েক ঘণ্টা বিশৃঙ্খলার পর আমি জানতে পারি যে আমার বিশেষ হোস্টিং সার্ভারে ব্যবহারের জন্য শুধুমাত্র দুটি পোর্ট খোলা আছে, তা হল 3000 এবং 12001।

সুতরাং সেই পোর্ট এবং আমার হোস্টিং সার্ভার আইপি ব্যবহার করে আমি একটি হ্যালো ওয়ার্ল্ড উদাহরণ কাজ করতে পারি। পরবর্তী আমি ওয়েবশট মডিউল ইনস্টল করি এবং একটি ছোট স্ক্রিপ্ট তৈরি করি যাতে আমি একটি URL পাস করতে পারি এবং এটি আমাকে সেই ওয়েব ঠিকানায় ওয়েবসাইটের একটি ছবি ফিরিয়ে দেবে। এখন আমি সেই নোড স্ক্রিপ্টটি শুরু করতে পারি এবং আমার সার্ভারের নির্দিষ্ট আইপি এবং পোর্ট নম্বরে ইউনিটি থেকে একটি http পোস্ট অনুরোধ পাঠাতে পারি যা আমাকে সেই ওয়েবসাইটের ছবিটি একটি বাইট অ্যারে ফিরিয়ে দেবে। এখন আরেকটি সমস্যা হল যখন আমি আমার টার্মিনাল বন্ধ করি তখন প্রক্রিয়া শেষ হয় এবং শোনা বন্ধ করে দেয়। আমি আরও কিছু গবেষণা করি এবং চিরকালের জন্য একটি মডিউল খুঁজে পাই। NPM চিরতরে ইনস্টল করুন এবং এখন আমি চিরতরে নেভিগেট করতে পারি এবং চিরতরে স্ক্রিপ্টটি শুরু করতে পারি এবং এটি চলতে থাকবে যতক্ষণ না আমি লগ ইন করি এবং এটি আবার বন্ধ না করি।

ধাপ 7: এটি কাজ করে

দারুণ। কিন্তু এটি যথেষ্ট শীতল নয়।

যখন আমি এআর -তে ওয়েব ব্রাউজ করার মান সম্পর্কে চিন্তা করি তখন এটি স্থান সংযোজন থেকে আসে। আমরা আর একক পর্দায় সীমাবদ্ধ নই তাই আমি এমন কিছু করতে চাই যা আমাকে আমার অনুসন্ধানের পথটি সরাসরি আমার সামনে দেখতে দেয়। তাহলে আসুন প্রথমে সেই সার্চ পেজটি লোড করি এবং তারপর সেই পেজটি ক্রল করি এবং প্রতিটি সার্চ রেজাল্টকে একটি লিঙ্ক হিসেবে বের করি, যা আমরা তখন আমাদের মূল স্ক্রিনের উপরে একটি ইমেজ হিসেবে লোড করতে পারি। আমরা এটি অন্য Node.js স্ক্রিপ্ট দিয়ে করতে পারি যা গুগল ফলাফলের প্রথম পৃষ্ঠাটি স্ক্র্যাপ করে এবং এটিকে চিরকালের সাথে চালায়। এটি গুগল সার্চ এপিআই দিয়ে অনেক বেশি দক্ষতার সাথে করা যেতে পারে কিন্তু এই প্রকল্পের জন্য দুই নং নিয়মটি কোন পরিশোধিত এপিআই ছিল না, তাই আমরা আপাতত এটি করতে যাচ্ছি। এখন যেহেতু আমাদের কাছে প্রত্যেকটি লিঙ্কের জন্য ছবি আছে আমরা প্রতিবার সেগুলিকে ক্লিক করে বড় আকারের স্ক্রিনে লোড করতে পারি, আমাদের এখানে একটি সুন্দর ছোট ব্রাউজার আছে। এটি পুরোপুরি কার্যকরী নয় তবে আমি এটি গ্রহণ করব। ঠিক আছে তাই যদি আপনি এই প্রকল্পটি চালাতে চান তবে আমার গিথুব এ যান এবং এক্সপ্রেসভিপিএন প্রকল্পটি ডাউনলোড করুন:

github.com/MatthewHallberg/ARBrowserExpres…

ধাপ 8: সবকিছু কাজ করছে।

এটিকে ইউনিটিতে খুলুন এবং আসুন আপনার মেশিনে স্থানীয়ভাবে সবকিছু চালানো যাক। প্রথমে আপনাকে আপনার মেশিনের আইপি ঠিকানা খুঁজে বের করতে হবে তাই যদি আপনি ম্যাকের উপর থাকেন তবে শুধু অপশনটি ধরে রাখুন এবং আপনার আইপি প্রকাশ করতে ওয়াইফাই প্রতীকটি ক্লিক করুন।

Unityক্যে ফিরে যান এবং ব্রাউজার কন্ট্রোলার স্ক্রিপ্টটি খুলুন এবং সেখানে আপনার আইপি ঠিকানাটি রাখুন এবং এটি আপনার ক্লিপবোর্ডে অনুলিপি করুন। নোডস্ক্রিপ্ট ফোল্ডারটি খুঁজুন এবং এটি আপনার ডেস্কটপে রাখুন, ফোল্ডারটি খুলুন এবং উভয় এক্সটেনশন.js এ পরিবর্তন করুন। প্রতিটি স্ক্রিপ্ট খুলুন এবং আপনার আইপি আইপি ঠিকানা পরিবর্তন করুন। এখন টার্মিনাল খুলুন এবং আমাদের কিছু জিনিস ইনস্টল করতে হবে। আপনার যদি ইতিমধ্যে এটি না থাকে তবে হোমব্রিউ ইনস্টল করুন।

-ব্রিউ ইনস্টল নোড

-npm ওয়েবশট ইনস্টল করুন

-npm install flatiron

-npm ইনস্টল ইউনিয়ন

-npm চেরিও ইনস্টল করুন

এখন আমরা উভয় স্ক্রিপ্ট শুরু করতে পারি তাই সিডি নোডস্ক্রিপ্ট ফোল্ডারে এবং নোড getimage.js করতে এবং তারপর একটি নতুন টার্মিনাল উইন্ডো খুলুন এবং নোড getlinks.js করুন উভয় টার্মিনাল উইন্ডো চলমান রেখে সম্পাদকের কাছে ফিরে যান। যদি আমরা প্লে চাপি তাহলে সবকিছু ঠিকঠাক চলবে। আমরা ফাইলটিতে যেতে পারি, সেটিংস তৈরি করতে পারি, এবং আমাদের ফোনে এটি পেতে বিল্ড এবং রান করতে পারি! আপনি যদি সার্ভারগুলি বন্ধ করতে চান তবে পুরো টার্মিনালটি বন্ধ করার জন্য নিয়ন্ত্রণ c বা কমান্ড q চাপুন।

এটাই!