مرورگر وب واقعیت افزوده: 9 مرحله

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

امروز ما در حال ساخت مرورگر وب واقعیت افزوده برای Android هستیم.

این ایده زمانی شروع شد که ExpressVPN از من خواست تا یک ویدیوی پشتیبانی شده YouTube تهیه کنم. از آنجا که این اولین مورد من است ، می خواستم کاری انجام دهم که مربوط به محصول آنها باشد. تقریباً بلافاصله فکر کردم ، اوه ، من فقط یک مرورگر وب واقعیت افزوده ایجاد می کنم تا بتوانیم وب را به صورت AR در VPN مرور کنیم. نمی تواند آنقدر سخت باشد ، درست است؟ اشتباه. من محدودیت هایی را برای این پروژه تعیین کردم زیرا می خواستم از آن برای یادگیری چیزهای جدید استفاده کنم.

شماره 1 من می خواستم برای Android باشد زیرا همیشه با IOS کار می کنم.

شماره دو من نمی خواستم از هیچ API پولی استفاده کنم ، من می خواستم که همه بتوانند این پروژه را بارگیری کرده و بدون نیاز به پرداخت هزینه آنلاین به صورت آنلاین اجرا کنند. بنابراین نه IBM Watson ، نه Google API ، و نه چیزی از فروشگاه Unity Asset.

بیایید شروع کنیم!

مرحله 1: اولین چیزها ابتدا

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

من ابتدا به این افزونه برای وحدت رسیدم:

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

من این را امتحان کردم و عالی کار کرد. تنها مشکلی که وجود داشت این بود که وقتی از آن با ARCore استفاده می کنید ، یک پنجره پنجره اصلی ایجاد می کند و به نظر می رسد که Unity را پس زمینه می کند و در نهایت ردیابی را از دست می دهید.

این کمتر از ایده آل بود.

مرحله 2: تبدیل گفتار به متن برای Android

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

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

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

سپس بالاخره کار کرد…

مرحله 3: درس های آموخته شده

بنابراین دو چیز در این فرایند آموختم که با جستجوی نحوه ساخت افزونه Android برای وحدت بلافاصله مشخص نمی شود.

شماره یک این است که اگر افزونه شما کار جالبی انجام دهد ، احتمالاً باید به زمینه برنامه Android اشاره کنید. می توانید این کار را با افزودن فایل class.jar از نصب Unity به پروژه Android خود به عنوان کتابخانه انجام دهید. بنابراین به ساختار پروژه پروژه بروید و سپس برگه وابستگی ها را برای ماژول برنامه انتخاب کنید. در اینجا می توانید برای افزودن فایل jar روی دکمه plus کلیک کنید. به Unity build خود ، موتورهای پخش ، androidplayer ، تغییرات ، مونو ، توسعه ، کلاس ها و در نهایت class.jar بروید. محدوده را فقط برای کامپایل تغییر دهید. اکنون ، در یک فایل جاوا جدید می توانید موارد زیر را انجام دهید:

UnityPlayer.currentActivity.getApplicationContext ()؛

و هرجا که به آن نیاز دارید از آن مرجع استفاده کنید.

مسئله عجیب بعدی این است که این قابلیت صدا را فقط می توان در موضوع اصلی اجرا کرد ، در غیر این صورت با خطا مواجه خواهید شد. برای انجام این کار در یونیتی ، باید توابع و افزونه را اجرا کنید تا مانند تصویر بالا در UI Thread به عنوان AndroidJavaRunnable اجرا شود.

مرحله 4: مبارزه می کند

در این مرحله من فکر می کنم یک متخصص Android هستم ،

من برای مشاغل توسعه دهنده اندروید درخواست می کنم ، برچسب و تی شرت های اندرویدی سفارش می دهم. زندگی خوب است. اکنون آماده هستم تا به نحوه یافتن نحوه ارائه صفحه وب در Unity بپردازم. پس از کمی تحقیق متوجه می شوم که راه حل مورد قبول استفاده از Android WebView است. این فقط یک کلاس Android است که به شما امکان می دهد وب سایت هایی را که در یک برنامه Android فعال هستند بدون بارگذاری همه چیز در مرورگر ارائه دهید. اساساً ، به این دلیل است که می توانید کاربران را در برنامه خود نگه دارید. اولین دستور کار این است که ببینیم آیا کسی افزونه وحدت بخشی را برای این منبع باز ایجاد کرده است یا خیر. من ابتدا این افزونه را امتحان می کنم:

github.com/gree/unity-webview

اما فقط یک WebView را به لایه GUI Unity ارائه می دهد تا کار نکند. سپس این افزونه را برای VR پیدا می کنم:

github.com/IanPhilips/UnityAndroidVR مرور…

این به شما این امکان را می دهد که WebView را به یک بافت و حتی با آن تعامل دهید ، که بسیار عالی است. من فکر کردم این جواب بود تا زمانی که آن را امتحان کردم و متوجه شدم که تمام کلیک های من را از وحدت مسدود می کند.

مرحله 5: بازگشت به صفحه طراحی

من فقط سعی می کنم افزونه خود را برای این کار ایجاد کنم ، زیرا تنها چیزی که من واقعاً به آن احتیاج دارم این است که تصویری از وب سایت را به واحد ارسال کنم. با انجام برخی تحقیقات در مورد آن ، متوجه می شوم که می توان یک بوم اندروید را در یک bitmap ذخیره کرده و سپس آن را در یک-p.webp

بالاخره کار کرد.

بنابراین اکنون می توانم از یک وب سایت یک اسکرین شات بگیرم ، بنابراین بیایید ببینیم که چگونه با arcore کار می کند…

نمی کند.

منظورم این است که من از galaxy s7 استفاده می کنم که جدیدترین گوشی نیست ، اما این مطالب WebView هنوز کل برنامه را یخ زده و اساساً قابل استفاده نیست. من فرض می کنم این به این دلیل است که WebView و ARCore هر دو موضوع اصلی را بیش از حد بار می کنند ، اما من واقعاً نمی دانم. برگشت به تخته رسم. اگر بخواهیم این کار را انجام دهیم ، باید بارهای سنگین را به نوعی از سرور خاموش کنیم. پس از انجام برخی از جستجوهای گوگل ، مشخص می شود که می توانید از یک وب سایت دارای کتابخانه برای Node.js به نام WebShot که از Phantom JS که یک مرورگر بدون سر قابل نوشتن است ، استفاده کنید.

مرحله ششم: بالاخره به جایی می رسیم

حالا باید بفهمم چگونه از Node.js استفاده کنم…

به نظر می رسد شما می توانید یک اسکریپت Node.js بسازید که به شماره پورت خاصی گوش می دهد و هنگامی که روی آن پورت ضربه می خورد ، می تواند برخی اطلاعات را برگرداند. ما می توانیم این مورد را با ایجاد یک اسکریپت کوچک سلام جهانی که در پورت 3000 گوش می دهد ، آزمایش کنیم. ما می توانیم با اسکریپت در دایرکتوری cd کرده و آن را با انجام گره و سپس نام اسکریپت اجرا کنیم. اگر به آدرس IP خود برویم و سپس در مرورگر خود پورت 3000 را مشاهده کنیم ، می توانیم مشاهده کنیم که سلام سلام بر می گردد. اکنون که درک کوچکی از گره دارم ، می توانم آن را در سرور خود که میزبان وب سایت های خود است که hawkhost.com است میزبانی کنم. من SSH را وارد سرور خود می کنم و سعی می کنم چند اسکریپت hello world node.js را اجرا کنم … هیچ چیز کار نمی کند. پس از چند ساعت گشت و گذار در اطراف ، متوجه می شوم که سرور میزبانی خاص من فقط دو پورت برای استفاده باز کرده است ، یعنی 3000 و 12001.

بنابراین با استفاده از این پورت ها و IP سرورهای میزبانی خود می توانم یک مثال جهانی در حال کار را دریافت کنم. در مرحله بعد ماژول WebShot را نصب می کنم و یک اسکریپت کوچک ایجاد می کنم که می توانم یک آدرس اینترنتی را برای آن ارسال کنم و یک تصویر از وب سایت در آن آدرس وب به من نشان می دهد. اکنون می توانم آن اسکریپت گره را شروع کنم و یک درخواست http POST از Unity به IP و شماره پورت سرور خود ارسال کنم که یک آرایه بایت به من نشان می دهد که تصویر آن وب سایت است. خدا را شکر. اکنون مشکل دیگر این است که وقتی پایانه خود را می بندم ، فرایند به پایان می رسد و گوش دادن را متوقف می کند. من تحقیقات بیشتری انجام می دهم و ماژولی به نام برای همیشه پیدا می کنم. NPM برای همیشه نصب می شود و اکنون می توانم برای همیشه حرکت کنم و اسکریپت را برای همیشه شروع کنم و تا زمانی که وارد سیستم نشوم و دوباره آن را متوقف کنم ، اجرا می شود.

مرحله 7: کار می کند

عالی. اما به اندازه کافی سرد نیست

وقتی به ارزش مرور وب در AR فکر می کنم ، از افزودن فضا ناشی می شود. ما دیگر فقط به یک صفحه محدود نیستیم ، بنابراین می خواهم چیزی بسازم که به من اجازه دهد مسیر جستجوی خود را درست روبروی خود تجسم کنم. بنابراین اجازه دهید ابتدا آن صفحه جستجو را بارگذاری کرده و سپس آن صفحه را خزیده و هر نتیجه جستجو را به عنوان یک پیوند استخراج کنیم ، و سپس می توانیم آن را به عنوان یک تصویر در بالای صفحه اصلی بارگذاری کنیم. ما می توانیم این کار را با یک اسکریپت Node.js دیگر انجام دهیم که صفحه اول نتایج Google را خراش می دهد و به طور مداوم با آن برای همیشه اجرا می شود. این را می توان با API جستجوی Google بسیار کارآمدتر انجام داد ، اما قانون شماره 2 این پروژه API های پولی نبود ، بنابراین ، ما فعلاً این کار را انجام می دهیم. اکنون که تصاویر مربوط به هر پیوند را در اختیار داریم ، می توانیم هر بار که روی آنها کلیک می کنیم و آنها را رونق می دهیم ، آنها را روی صفحه بزرگتری بارگذاری کنیم ، ما یک مرورگر کوچک خوب داریم. کاملاً کاربردی نیست اما آن را می پذیرم خوب اگر می خواهید این پروژه را خودتان اجرا کنید به Github من بروید و پروژه expressVPN را بارگیری کنید:

github.com/MatthewHallberg/ARBrowserExpres…

گام هشتم: کارکردن همه چیز

آن را در Unity باز کنید و بگذارید همه چیز به صورت محلی در دستگاه شما اجرا شود. ابتدا باید آدرس IP دستگاه خود را پیدا کنید ، بنابراین اگر در مک هستید فقط گزینه را نگه دارید و روی نماد wifi کلیک کنید تا IP شما نشان داده شود.

به اتحاد برگردید و اسکریپت کنترلر مرورگر را باز کنید و آدرس IP خود را در آنجا قرار دهید و آن را در کلیپ بورد خود کپی کنید. پوشه nodeScripts را پیدا کرده و روی میز کار خود قرار دهید ، پوشه را باز کرده و هر دو پسوند را به.js تغییر دهید. هر اسکریپت را باز کنید و آدرس IP را به IP خود تغییر دهید. حالا ترمینال را باز کنید و باید برخی موارد را نصب کنیم. اگر قبلاً آن را ندارید HomeBrew را نصب کنید.

گره نصب و راه اندازی

-npm عکس وب را نصب کنید

-npm نصب flatiron

-npm نصب اتحادیه

-npm cheerio را نصب کنید

حالا می توانیم هر دو اسکریپت را به صورت cd وارد پوشه nodescripts کنیم و node getimage.js را انجام دهیم و سپس یک پنجره ترمینال جدید باز کرده و node getlinks.js را ترک کرده و هر دو پنجره ترمینال را اجرا کرده و به ویرایشگر بازگردید. اگر بازی را فشار دهیم همه چیز باید خوب کار کند. ما همچنین می توانیم به فایل برویم ، تنظیمات را بسازیم ، و ساخت و اجرا را فشار دهیم تا آن را در تلفن خود دریافت کنیم! اگر می خواهید سرورها را متوقف کنید ، فقط کلید c یا دستور q را فشار دهید تا کل ترمینال بسته شود.

خودشه!