Webový prohlížeč s rozšířenou realitou: 9 kroků

2024 Autor: John Day | [email protected]. Naposledy změněno: 2024-01-30 08:22

Dnes si projdeme vytvořením webového prohlížeče pro rozšířenou realitu pro Android.

Tato myšlenka začala, když mě ExpressVPN požádal, abych vytvořil sponzorované video na YouTube. Protože se jedná o můj první, chtěl jsem udělat něco, co bylo relevantní pro jejich produkt. Docela okamžitě jsem si myslel, ohh, prostě vytvořím webový prohlížeč s rozšířenou realitou, abychom mohli procházet web v AR na VPN. To nemůže být tak těžké, že? Špatně. Nastavil jsem si pro tento projekt určitá omezení, protože jsem ho chtěl využít k naučení se nových věcí.

Číslo jedna, chtěl jsem, aby to bylo pro Android, protože vždy dělám věci s IOS.

Po druhé, nechtěl jsem používat žádné placené API, chtěl jsem, aby si každý mohl tento projekt stáhnout a spustit, aniž by musel platit za jakékoli věci online. Takže žádný IBM Watson, žádné Google API a nic z obchodu Unity Asset.

ZAČNĚME!

Krok 1: Nejprve první věci

První věc, kterou jsem chtěl dostat do práce, bylo dobré řešení pro převod řeči na text, abychom mohli online vyhledávání provádět hlasem. Také si myslím, že hlas je skvělá metoda interakce v AR, alespoň dokud nebudeme mít dobré řešení pro sledování rukou. Vím, že Android má některé funkce nativního převodu řeči na text, takže rychlé vyhledávání Google nám pomůže najít nějaké doplňky pro Unity.

Pro jednotu jsem poprvé narazil na tento plugin:

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

Zkoušel jsem to a fungovalo to skvěle. Jediným problémem bylo, že když jej používáte s ARCore, generuje nativní vyskakovací okno a zdá se, že na pozadí Unity a nakonec ztratíte sledování.

To bylo méně než ideální.

Krok 2: Získání řeči na text funguje pro Android

Začal jsem tedy hledat nějaké pluginy, které nevyvolaly nativní vyskakovací okno a moc toho nenašli, ale nakonec jsem našel tuto knihovnu pro Android:

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

Teď nevím doslova nic o nativním vývoji Androidu, ale chtěl jsem se vyzvat, a tak jsem si řekl, že zkusím napsat nějaký mostový kód pro tuto knihovnu a převést jej na Android plugin pro použití v Unity. Opět to byla chyba a vedení až hodiny frustrace.

Nakonec to fungovalo…

Krok 3: Poučení

V tomto procesu jsem se tedy naučil dvě věci, které nejsou zřejmé hned z googlení, jak vytvořit plugin pro Android pro jednotu.

Za prvé, pravděpodobně budete muset získat odkaz na kontext aplikace pro Android, pokud váš plugin udělá něco zajímavého. To můžete provést přidáním souboru classes.jar z instalace Unity do projektu Android jako knihovny. Přejděte tedy na strukturu projektu souboru a poté vyberte kartu závislostí pro modul aplikace. Zde můžete kliknutím na tlačítko plus přidat soubor jar. Přejděte na své sestavení Unity, motory pro přehrávání, androidplayer, variace, mono, vývoj, třídy a nakonec Class.jar. Změňte rozsah pouze na kompilaci. Nyní v novém souboru java můžete udělat:

UnityPlayer.currentActivity.getApplicationContext ();

a použijte tuto referenci, kdykoli ji budete potřebovat.

Dalším podivným problémem je, že tuto hlasovou funkci lze spustit pouze v hlavním vlákně, jinak se zobrazí chyby. Abyste to mohli udělat v Unity, musíte sdělit funkcím a pluginu, aby běžel na vlákně uživatelského rozhraní jako AndroidJavaRunnable jako na obrázku výše.

Krok 4: Bojuje

V tuto chvíli si myslím, že jsem expert na Android, Přihlašuji se online na vývojářské zakázky pro Android, objednávám nálepky a trička pro Android. Život je dobrý. Nyní jsem připraven přejít na to, jak vykreslit webovou stránku v Unity. Poté, co jsem udělal malý průzkum, vidím, že přijatým řešením je použít Android WebView. Toto je pouze třída Android, která vám umožňuje vykreslit webové stránky, které lze v aplikaci pro Android interaktivně ovládat, aniž byste museli vše načítat do prohlížeče. V zásadě je to tak, že můžete ve své aplikaci ponechat uživatele. Prvním úkolem je zjistit, zda někdo vytvořil jednotný plugin pro tento open source. Nejprve jsem zkusil tento plugin:

github.com/gree/unity-webview

ale vykresluje WebView pouze do vrstvy Unity GUI, takže to nebude fungovat. Pak jsem našel tento plugin pro VR:

github.com/IanPhilips/UnityAndroidVRBrowse…

to vám umožňuje vykreslit WebView na texturu a dokonce i její interakci, což je skvělé. Myslel jsem, že to byla odpověď, dokud jsem to nezkusil a nezjistil, že blokuje všechna moje kliknutí z jednoty.

Krok 5: Zpět na rýsovací prkno

Jen se pokusím vytvořit svůj plugin pro toto, protože vše, co opravdu potřebuji, je poslat obrázek webu jednotě. Když o tom něco zkoumám, zjistil jsem, že mohu uložit plátno Androidu na bitmapu a poté jej zakódovat do formátu-p.webp

Nakonec to fungovalo.

Nyní tedy mohu získat snímek obrazovky z webové stránky, pojďme se tedy podívat, jak to funguje s arcore …

Není.

Myslím tím, že používám galaxii s7, která není nejnovějším telefonem, ale tyto věci WebView stále zmrazují celou aplikaci a jsou v podstatě nepoužitelné. Předpokládám, že je to proto, že WebView a ARCore přetěžují hlavní vlákno, ale já opravdu nevím. Zpět k tabuli. Pokud chceme, aby to fungovalo, budeme muset vyložit zvedání těžkých břemen na nějaký server. Poté, co provedete Googling, se ukáže, že můžete pořídit snímek obrazovky webové stránky s knihovnou pro Node.js s názvem WebShot, která používá Phantom JS, což je skriptovatelný bezhlavý prohlížeč.

Krok 6: Konečně se někam dostáváme

Teď musím zjistit, jak sakra používat Node.js….

Ukázalo se, že můžete vytvořit skript Node.js, který naslouchá na konkrétním čísle portu, a když je na tomto portu zasažen, může vrátit nějaké informace. Můžeme to vyzkoušet vytvořením malého hello world skriptu, který naslouchá na portu 3000. Do adresáře se skriptem můžeme cd spustit a spustit ho provedením uzlu a poté názvu skriptu. Pokud v prohlížeči přejdeme na naši IP adresu a poté na port 3000, můžeme vidět, že se vrací ahoj svět. Nyní, když mám malý přehled o uzlu, mohu pracovat na mém serveru, na kterém hostuji své webové stránky, na kterých je hawkhost.com. SSH jsem na svůj server a zkusím spustit několik skriptů ahoj world node.js … a nic nefunguje. Po dalších několika hodinách nepořádku zjišťuji, že můj konkrétní hostitelský server má otevřené pouze dva porty k použití, tj. 3000 a 12001.

Takže pomocí těchto portů a IP mých hostingových serverů mohu získat příklad fungujícího ahoj světa. Dále nainstaluji modul WebShot a vytvořím malý skript, kterému mohu předat adresu URL, a vrátí mi obrázek webové stránky na dané webové adrese. Nyní mohu spustit tento skript uzlu a odeslat požadavek http POST od Unity na konkrétní IP a číslo portu mého serveru, které mi vrátí bajtové pole, které je obrazem této webové stránky. Děkuji BOHU. Nyní je dalším problémem, když zavřu terminál, proces skončí a přestane poslouchat. Provádím další průzkum a nalézám modul s názvem navždy. Instalace NPM navždy a nyní mohu navždy přejít a navždy spustit skript a bude pokračovat, dokud se nepřihlásím a znovu jej nezastavím.

Krok 7: Funguje to

Skvělý. Ale není to dost cool.

Když přemýšlím o hodnotě procházení webu v AR, vychází to z přidání místa. Už nejsme omezeni na jedinou obrazovku, takže chci vytvořit něco, co mi umožní vizualizovat moji vyhledávací stopu přímo přede mnou. Pojďme tedy načíst první vyhledávací stránku a poté ji procházet a každý výsledek vyhledávání extrahovat jako odkaz, který pak můžeme načíst jako obrázek nad naši hlavní obrazovku. Můžeme to udělat pomocí jiného skriptu Node.js, který vyškrábe první stránku výsledků Google a bude ji spouštět nepřetržitě navždy. To lze provést mnohem efektivněji pomocí API pro vyhledávání Google, ale pravidlo číslo dva pro tento projekt nebylo žádné placené API, takže to prozatím uděláme takto. Nyní, když máme obrázky pro každý odkaz, můžeme je načíst na větší obrazovku pokaždé, když na ně klikneme a bum, máme zde pěkný malý prohlížeč. Není to plně funkční, ale beru to. Dobře, takže pokud chcete tento projekt spustit sami, přejděte na můj Github a stáhněte si projekt expressVPN:

github.com/MatthewHallberg/ARBrowserExpres…

Krok 8: Zprovoznění všeho

Otevřete jej v Unity a nechte vše běžet lokálně na vašem počítači. Nejprve musíte zjistit IP adresu vašeho počítače, takže pokud používáte Mac, podržte volbu a kliknutím na symbol wifi odhalte svou IP.

Vraťte se do jednoty a otevřete skript řadiče prohlížeče, zadejte tam svoji IP adresu a zkopírujte ji do schránky. Najděte složku nodeScripts a vložte ji na plochu, otevřete složku a změňte obě rozšíření na.js. Otevřete každý skript a změňte IP adresu na vaši IP. Nyní otevřete terminál a musíme nainstalovat nějaké věci. Nainstalujte si HomeBrew, pokud jej ještě nemáte.

-brew instalační uzel

-npm nainstalovat webshot

-npm nainstalovat flatiron

-npm install union

-npm nainstalovat cheerio

Nyní můžeme spustit oba skripty, tedy cd, do složky nodecripts a provést node getimage.js A pak otevřít nové okno terminálu a udělat uzel getlinks.js Ponechat obě okna terminálu spuštěná a vrátit se zpět do editoru. Pokud stiskneme Play, vše by mělo fungovat dobře. Můžeme také přejít na soubor, nastavení sestavení a stisknout build a run, abychom jej dostali do telefonu! Pokud chcete zastavit servery, stačí stisknout control c nebo příkazem q zavřít celý terminál.

A JE TO!