Augmented Reality -webbläsare: 9 steg

2024 Författare: John Day | [email protected]. Senast ändrad: 2024-01-30 12:45

Idag ska vi gå igenom en Augmented Reality -webbläsare för Android.

Denna idé började när ExpressVPN bad mig att göra en sponsrad YouTube -video. Eftersom det här är min första ville jag göra något som var relevant för deras produkt. Ganska omedelbart tänkte jag, ohh jag kommer bara att göra en augmented reality -webbläsare så att vi kan surfa på webben i AR på en VPN. Det kan inte vara så svårt, eller hur? Fel. Jag satte mig några begränsningar för det här projektet eftersom jag ville använda det för att lära mig några nya saker.

Nummer ett jag ville att det skulle vara för Android eftersom jag alltid gör saker med IOS.

Nummer två Jag ville inte använda några betalda API: er, jag ville att alla bara skulle kunna ladda ner det här projektet och köra det utan att behöva betala för saker online. Så ingen IBM Watson, inget Google API och inget från Unity Asset -butiken.

LÅT OSS BÖRJA!

Steg 1: Första sakerna först

Det första jag ville få igång var en bra lösning för tal till text så att vi kunde göra onlinesökningar med vår röst. Jag tycker också att röst är en bra metod för interaktion i AR, åtminstone tills vi har en bra handspårningslösning. Jag vet att Android har vissa modersmål till textfunktioner, så en snabb Google -sökning hjälper oss att hitta några plugins för Unity.

Jag kom först på detta plugin för enhet:

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

Jag testade detta och det fungerade bra. Det enda problemet var att när du använder den med ARCore genererar den en infödd popup -låda och verkar som bakgrund till Unity och du slutar förlora spårning.

Detta var mindre än idealiskt.

Steg 2: Få tal till text som fungerar för Android

Så jag började söka efter några plugins som inte gav den inbyggda popup -rutan och inte kunde hitta mycket men jag hittade till slut detta Android -bibliotek:

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

Nu vet jag bokstavligen ingenting om inbyggd Android -utveckling men jag ville utmana mig själv så jag tänkte att jag bara skulle försöka skriva en brokod för detta bibliotek och göra det till ett Android -plugin för användning i Unity. Återigen var detta ett misstag och ledning till timmar av frustration.

Sen fungerade det äntligen …

Steg 3: Lärdomar

Så det är två saker jag lärde mig i denna process som inte direkt framgår av att bara googla hur man gör ett Android -plugin för enhet.

Nummer ett är att du förmodligen måste få en referens till Android -appens sammanhang om ditt plugin kommer att göra något intressant. Du kan göra detta genom att lägga till filen classes.jar från din Unity -installation till ditt Android -projekt som ett bibliotek. Så gå till filprojektstruktur och välj sedan fliken Beroenden för appmodulen. Här kan du klicka på plusknappen för att lägga till burkfilen. Gå till din Unity build, uppspelningsmotorer, androidplayer, variationer, mono, utveckling, klasser och slutligen classes.jar. Ändra omfattningen för att bara kompilera. Nu kan du göra i en ny java -fil:

UnityPlayer.currentActivity.getApplicationContext ();

och använd den referensen var du än behöver den.

Nästa konstiga fråga är att den här röstfunktionen bara kan köras på huvudtråden, annars får du fel. För att göra detta i Unity måste du berätta för funktionerna och tillägget att köras på UI -tråden som en AndroidJavaRunnable som bilden ovan.

Steg 4: Kämpar

Just nu tror jag att jag är en Android -expert, Jag söker online för Android dev-jobb, jag beställer Android-klistermärken och t-shirts. Livet är gott. Nu är jag redo att gå vidare till att ta reda på hur jag gör en webbsida i Unity. Efter att ha undersökt lite ser jag att den accepterade lösningen är att använda en Android WebView. Detta är bara en Android-klass som låter dig återge webbplatser som är interagerbara i en Android-app utan att ladda allt i webbläsaren. I grund och botten är det så att du kan behålla användare i din app. Den första affärsordningen är att se om någon har gjort ett enhetsplugin för detta som är öppen källkod. Jag försöker först detta plugin:

github.com/gree/unity-webview

men det gör bara en WebView till Unity GUI -lagret så det kommer inte att fungera. Då hittar jag detta plugin för VR:

github.com/IanPhilips/UnityAndroidVRBrowse …

detta låter dig göra en WebView till en textur och dess till och med interagerbara, vilket är bra. Jag trodde att detta var svaret tills jag försökte det och fick reda på att det blockerade alla mina klick från enhet.

Steg 5: Tillbaka till ritbordet

Jag ska bara försöka göra mitt plugin för detta, för allt jag verkligen behöver är att skicka en bild av webbplatsen till enhet. Genom att undersöka det får jag reda på att jag kan spara en Android -duk till en bitmapp och sedan koda den till en-p.webp

Det fungerade äntligen.

Så nu får jag en skärmdump från en webbplats, så låt oss se hur det fungerar med arcore …

Det gör det inte.

Jag menar att jag använder en galaxy s7 som inte är den nyaste telefonen, men de här WebView -sakerna fryser fortfarande hela appen och är i princip oanvändbara. Jag antar att det beror på att WebView och ARCore båda överbelastar huvudtråden men jag vet inte riktigt. Tillbaka till ritbordet. Om vi vill få det här att fungera, måste vi ladda ner tunga lyft till någon sorts server. Efter att ha googlat visar det sig att du kan ta en skärmdump av en webbplats med ett bibliotek för Node.js som heter WebShot som använder Phantom JS som är en skriptbar huvudlös webbläsare.

Steg 6: Äntligen kommer vi någonstans

Nu måste jag ta reda på hur fan att använda Node.js….

Det visar sig att du kan skapa ett Node.js -skript som lyssnar på ett visst portnummer och när det får en träff kan det returnera lite information. Vi kan testa detta genom att skapa ett litet hej världsskript som lyssnar på port 3000. Vi kan cd in i katalogen med skriptet och köra det genom att göra nod och sedan skriptnamnet. Om vi navigerar till vår IP -adress och sedan portar 3000 i vår webbläsare kan vi se den återvända hej världen. Nu när jag har ett litet grepp om noden kan jag få det att fungera på min server som jag är värd för mina webbplatser som är hawkhost.com. Jag SSH in på min server och försöker köra några hej värld node.js -skript … och ingenting fungerar. Efter ytterligare några timmars bråkande upptäcker jag att min speciella webbserver bara har två portar öppna för användning, det vill säga 3000 och 12001.

Så med dessa portar och mina webbhotellsservrar kan jag få ett hej världsexempel som fungerar. Därefter installerar jag WebShot -modulen och skapar ett litet skript som jag kan skicka en URL till och det kommer att ge mig en bild av webbplatsen på den webbadressen. Nu kan jag starta det nodskriptet och skicka en http POST -begäran från Unity till den specifika IP -adressen och portnumret på min server som ger mig en byte -array som är bilden av den webbplatsen. Tack GUD. Nu är ett annat problem när jag stänger min terminal slutar processen och slutar lyssna. Jag gör lite mer forskning och hittar en modul som heter forever. NPM installeras för alltid och nu kan jag navigera till evigt och för alltid starta skriptet så fortsätter det att köra tills jag loggar in och stoppar det igen.

Steg 7: Det fungerar

Bra. Men det är inte tillräckligt coolt.

När jag tänker på värdet av att surfa på webben i AR kommer det från tillägget av utrymme. Vi är inte längre begränsade till en enda skärm så jag vill göra något som gör att jag kan visualisera mitt sökväg framför mig. Så låt oss ladda den första söksidan och sedan genomsöka den sidan och extrahera varje sökresultat som en länk, som vi sedan kan ladda som en bild ovanför vår huvudskärm. Vi kan göra detta med ett annat Node.js -skript som skrapar första sidan i Googles resultat och kör det kontinuerligt med evigt. Detta skulle kunna göras mycket mer effektivt med Googles sök -API men regel nummer två för detta projekt var inga betalda API: er, så vi kommer att göra det så här för tillfället. Nu när vi har bilderna för varje länk kan vi ladda dem på en större skärm varje gång vi klickar på dem och boom, vi har en trevlig liten webbläsare här. Det är inte fullt fungerande men jag tar det. Okej, så om du vill köra detta projekt själv, gå till min Github och ladda ner expressVPN -projektet:

github.com/MatthewHallberg/ARBrowserExpres…

Steg 8: Få allt att fungera

Öppna den i Unity och låt allt fungera lokalt på din maskin. Först måste du hitta maskinens IP -adress så om du är på mac håller du bara ner alternativet och klickar på wifi -symbolen för att avslöja din IP.

Gå tillbaka till enhet och öppna skriptet för webbläsarkontrollen och lägg in din IP -adress där och kopiera den till ditt urklipp. Hitta mappen nodeScripts och lägg den på skrivbordet, öppna mappen och ändra båda tilläggen till.js. Öppna varje skript och ändra IP -adressen till din IP. Öppna nu terminalen och vi måste installera några saker. Installera HomeBrew om du inte redan har det.

-brygga installationsnod

-npm installera webbhotell

-npm instal flatiron

-npm installera fackförening

-npm installera cheerio

Nu kan vi starta båda skripten så cd in i nodescripts -mappen och göra nod getimage.js Och öppna sedan ett nytt terminalfönster och gör nod getlinks.js Låt båda terminalfönstren vara igång och gå tillbaka till redigeraren. Om vi trycker på play borde allt fungera bra. Vi kan också gå till filen, bygga inställningar och klicka på bygg och kör för att få den på vår telefon! Om du vill stoppa servrarna, tryck bara på kontroll c eller kommando q för att stänga hela terminalen.

DET ÄR ALLT!