Уеб браузър с разширена реалност: 9 стъпки

2024 Автор: John Day | [email protected]. Последно модифициран: 2024-01-30 07:52

Днес ще преминем през създаването на уеб браузър с добавена реалност за Android.

Тази идея започна, когато ExpressVPN ме помоли да направя спонсориран видеоклип в YouTube. Тъй като това е първият ми, исках да направя нещо, което е от значение за техния продукт. Почти веднага си помислих, о, просто ще направя уеб браузър с разширена реалност, за да можем да сърфираме в мрежата в AR в VPN. Не може да е толкова трудно, нали? Грешно. Зададох си някои ограничения за този проект, защото исках да го използвам, за да науча някои нови неща.

Номер едно исках да е за Android, защото винаги правя неща с IOS.

Второ, не исках да използвам никакви платени API, исках всеки да може да изтегли този проект и да го стартира, без да се налага да плаща за неща онлайн. Така че няма IBM Watson, няма Google API и нищо от магазина на Unity Asset.

ДА ЗАПОЧВАМЕ!

Стъпка 1: Първи неща първо

Първото нещо, което исках да работя, беше добро решение за говор към текст, за да можем да правим онлайн търсенията с гласа си. Също така мисля, че гласът е чудесен метод за взаимодействие в AR, поне докато имаме добро решение за проследяване на ръце. Знам, че Android има някои функции за естествен говор към текст, така че бързото търсене в Google ще ни помогне да намерим някои приставки за Unity.

За първи път попаднах на този плъгин за единство:

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

Изпробвах това и се получи чудесно. Единственият проблем беше, че когато го използвате с ARCore, той генерира местно изскачащо поле и изглежда, че фоново Unity и в крайна сметка губите проследяване.

Това беше по -малко от идеалното.

Стъпка 2: Работа на текст с реч за Android

Така че започнах да търся някои плъгини, които не изведоха родното изскачащо поле и не можах да намеря много, но в крайна сметка намерих тази Android библиотека:

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

Сега не знам буквално нищо за разработката на Android, но исках да предизвикам себе си, затова реших, че просто ще опитам да напиша някакъв мостов код за тази библиотека и да го превърна в плъгин за Android за използване в Unity. Отново това беше грешка и доведе до часове на разочарование.

После най -накрая проработи …

Стъпка 3: Извлечени уроци

Така че има две неща, които научих в този процес, които не са веднага очевидни от просто гугъл как да се направи плъгин за Android за единство.

Първо, вероятно ще трябва да получите препратка към контекста на приложението за Android, ако вашият плъгин ще направи нещо интересно. Можете да направите това, като добавите файла classes.jar от вашата инсталация на Unity към вашия Android проект като библиотека. Така че отидете на файлова структура на проекта и след това изберете раздела зависимости за модула на приложението. Тук можете да щракнете върху бутона плюс, за да добавите jar файла. Отидете на вашия Unity build, механизми за възпроизвеждане, androidplayer, вариации, моно, развитие, класове и накрая classes.jar. Променете обхвата само за компилиране. Сега в нов java файл можете да направите:

UnityPlayer.currentActivity.getApplicationContext ();

и използвайте тази справка, когато имате нужда от нея.

Следващият странен проблем е, че тази гласова функция може да се изпълнява само в основната нишка, в противен случай ще получите грешки. За да направите това в Unity, трябва да кажете на функциите и приставката да работят в нишката на потребителския интерфейс като AndroidJavaRunnable, както на горната снимка.

Стъпка 4: Борба

В този момент мисля, че съм експерт по Android, Кандидатствам онлайн за работни места за Android dev, поръчвам стикери и тениски за android. Животът е добър. Сега съм готов да премина към измислянето как да изобразя уеб страница в Unity. След малко проучване виждам, че приетото решение е да се използва Android WebView. Това е просто клас Android, който ви позволява да визуализирате уебсайтове, които могат да взаимодействат в приложение за Android, без да зареждате всичко в браузъра. По принцип това е така, че можете да задържите потребителите в приложението си. Първият ред на работа е да се види дали някой е направил плъгин за единство за това с отворен код. Първо пробвам този плъгин:

github.com/gree/unity-webview

но той само изобразява WebView на слоя Unity GUI, така че това няма да работи. След това намирам тази приставка за VR:

github.com/IanPhilips/UnityAndroidVRBrowse…

това ви позволява да визуализирате WebView до текстура и дори да взаимодейства, което е чудесно. Мислех, че това е отговорът, докато не го опитах и разбрах, че блокира всичките ми кликвания от единство.

Стъпка 5: Върнете се към чертожната дъска

Просто ще се опитам да направя своя плъгин за това, защото всичко, от което наистина се нуждая, е да изпратя изображение на уебсайта до единство. Правейки някои изследвания по въпроса, откривам, че мога да запиша андроид платно в растерна карта и след това да го кодирам в-p.webp

Най -накрая проработи.

Така че сега получавам екранна снимка от уебсайт, така че нека да видим как работи с arcore …

Не го прави.

Искам да кажа, че използвам галактика s7, която не е най -новият телефон, но тези неща от WebView все още замразяват цялото приложение и по същество са неизползваеми. Предполагам, че това е така, защото WebView и ARCore претоварват и основната нишка, но всъщност не знам. Обратно към дъската за рисуване. Ако искаме да свършим тази работа, ще трябва да натоварим тежкото вдигане на някакъв сървър. След като потърсите малко, се оказва, че можете да направите екранна снимка на уебсайт с библиотека за Node.js, наречена WebShot, която използва Phantom JS, който е скриптов браузър без глава.

Стъпка 6: Най -накрая стигаме някъде

Сега трябва да разбера как, по дяволите, да използвам Node.js….

Оказва се, че можете да направите скрипт Node.js, който слуша определен номер на порт и когато го удари на този порт, той може да върне известна информация. Можем да тестваме това, като създадем малък скрипт за здравей свят, който слуша на порт 3000. Можем да вмъкнем CD в директорията със скрипта и да го стартираме, като направим възел и след това името на скрипта. Ако отидем до нашия IP адрес и след това порт 3000 в браузъра си, можем да видим, че той връща hello world. Сега, когато имам малко представа за възел, мога да го накарам да работи на моя сървър, че хоствам моите уебсайтове, на които е hawkhost.com. Включвам SSH в моя сървър и се опитвам да изпълня няколко здрави световни скрипта node.js … и нищо не работи. След още няколко часа бъркане откривам, че конкретният ми хостинг сървър има само два отворени порта за използване, това са 3000 и 12001.

Така че, използвайки тези портове и IP хостинг сървърите си, мога да получа пример за здрав свят, работещ. След това инсталирам модула WebShot и създавам малък скрипт, на който мога да предам URL адрес и той ще ми върне изображение на уебсайта на този уеб адрес. Сега мога да стартирам този скрипт на възел и да изпратя http POST заявка от Unity до конкретния IP и номер на порт на моя сървър, който ще ми върне байтов масив, който е образът на този уебсайт. Благодаря БОЖЕ. Сега друг проблем е, че когато затворя терминала си, процесът приключва и спира да слуша. Правя още малко проучване и намирам модул, наречен завинаги. NPM инсталирате завинаги и сега мога да се придвижвам завинаги и да стартирам завинаги скрипта и той ще продължи да работи, докато не вляза и не го спра отново.

Стъпка 7: Работи

Страхотен. Но не е достатъчно готино.

Когато мисля за стойността на сърфирането в мрежата в AR, това идва от добавянето на пространство. Вече не сме ограничени до един екран, така че искам да направя нещо, което ми позволява да визуализирам моята пътека за търсене точно пред мен. Така че нека заредим тази първа страница за търсене и след това обхождаме тази страница и извличаме всеки резултат от търсенето като връзка, която след това можем да заредим като изображение над нашия основен екран. Можем да направим това с друг скрипт Node.js, който изстъргва първата страница с резултатите от Google и я изпълнява непрекъснато с завинаги. Това би могло да се направи много по -ефективно с приложния програмен интерфейс (API) за търсене на Google, но правило номер две за този проект не беше платен API, така че засега ще го направим така. Сега, когато имаме изображенията за всяка връзка, можем да ги заредим на по -голям екран всеки път, когато щракнем върху тях и се стремим, имаме хубав малък браузър тук. Не е напълно функционален, но ще го приема. Добре, така че ако искате сами да стартирате този проект, отидете в моя Github и изтеглете проекта expressVPN:

github.com/MatthewHallberg/ARBrowserExpres…

Стъпка 8: Работете всичко

Отворете го в Unity и нека всичко работи локално на вашата машина. Първо трябва да намерите IP адреса на вашата машина, така че ако сте на mac, просто задръжте опцията и щракнете върху символа wifi, за да разкриете вашия IP.

Върнете се към единството и отворете скрипта на контролера на браузъра и поставете вашия IP адрес там и го копирайте в клипборда. Намерете папката nodeScripts и я поставете на работния плот, отворете папката и променете двете разширения на.js. Отворете всеки скрипт и променете IP адреса на вашия IP. Сега отворете терминала и трябва да инсталираме някои неща. Инсталирайте HomeBrew, ако още нямате такъв.

-brew инсталационен възел

-npm инсталиране на webhot

-npm инсталирайте flatiron

-npm инсталирайте съюз

-npm инсталиране на cherio

Сега можем да стартираме двата скрипта, така че cd в папката nodescripts и да направим възел getimage.js И след това да отворим нов терминален прозорец и да въведем getlinks.js Оставете двата терминални прозореца да работят и се върнете към редактора. Ако натиснем play, всичко трябва да работи добре. Можем също да отидем във файл, да създадем настройки и да натиснем build и run, за да го получим на телефона си! Ако искате да спрете сървърите, просто натиснете control c или команда q, за да затворите целия терминал.

ТОВА Е!