Augmented Reality -webblaaier: 9 stappe

2024 Outeur: John Day | [email protected]. Laas verander: 2024-01-30 07:26

Ons gaan vandag 'n Augmented Reality -webblaaier vir Android maak.

Hierdie idee het begin toe ExpressVPN my gevra het om 'n geborgde YouTube -video te maak. Aangesien dit my eerste een is, wou ek iets doen wat relevant was vir hul produk. Ek het redelik dadelik gedink: oh, ek sal net 'n augmented reality webblaaier maak sodat ons in 'n VPN op die internet kan blaai. Dit kan nie so moeilik wees nie, reg? Verkeerde. Ek stel myself 'n paar beperkings vir hierdie projek, want ek wou dit gebruik om nuwe dinge te leer.

Nommer een wat ek wou hê dit moet wees vir Android, want ek doen altyd dinge met IOS.

Nommer twee: ek wou geen betaalde API's gebruik nie, ek wou hê dat almal hierdie projek net kan aflaai en dit kan bestuur sonder om vir die goed aanlyn te hoef te betaal. Dus geen IBM Watson, geen Google API en niks uit die Unity Asset -winkel nie.

LAAT ONS BEGIN!

Stap 1: Eerste dinge eerste

Die eerste ding wat ek aan die werk wou kry, was 'n goeie oplossing vir spraak na teks, sodat ons aanlyn met ons stem kon soek. Ek dink ook dat stem 'n uitstekende interaksiemetode in AR is, ten minste totdat ons 'n goeie oplossing vir handopsporing het. Ek weet dat Android 'n paar inheemse spraak- en teksfunksies het, so 'n vinnige soektog op Google sal ons help om 'n paar inproppe vir Unity te vind.

Ek het die eerste keer op hierdie inprop gekom vir eenheid:

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

Ek het dit probeer en dit het uitstekend gewerk. Die enigste probleem was dat dit 'n inheemse opspringboks genereer as u dit met ARCore gebruik, en dit lyk asof dit 'n agtergrond van Unity is, en u kan dus die opsporing verloor.

Dit was minder as ideaal.

Stap 2: Spraak tot teks werk vir Android

Dus het ek begin soek na 'n paar inproppe wat nie die oorspronklike pop -up -boks na vore gebring het nie en nie veel kon vind nie, maar ek het uiteindelik hierdie Android -biblioteek gevind:

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

Nou weet ek letterlik niks van inheemse Android -ontwikkeling nie, maar ek wou myself uitdaag, en ek het gedink ek sal net 'n brugkode vir hierdie biblioteek probeer skryf en dit in 'n Android -inprop verander vir gebruik in Unity. tot ure se frustrasie.

Toe werk dit uiteindelik …

Stap 3: lesse geleer

Daar is dus twee dinge wat ek in hierdie proses geleer het, wat nie onmiddellik duidelik is as ek net google nie, hoe om 'n Android -inprop vir eenheid te maak.

Die eerste een is dat u waarskynlik 'n verwysing na die Android -appkonteks moet kry as u inprop iets interessants gaan doen. U kan dit doen deur die klasse.jar -lêer van u Unity -installasie as biblioteek by u Android -projek te voeg. Gaan dus na die lêerprojekstruktuur en kies dan die oortjie afhanklikhede vir die app -module. Hier kan u op die plus -knoppie klik om die jar -lêer by te voeg. Gaan na u Unity -konstruksie, afspeelmotors, Android -speler, variasies, mono, ontwikkeling, klasse en uiteindelik class.jar. Verander die omvang om slegs saam te stel. Nou kan u in 'n nuwe java -lêer:

UnityPlayer.currentActivity.getApplicationContext ();

en gebruik die verwysing waar u dit ook al nodig het.

Die volgende vreemde probleem is dat hierdie stemfunksie slegs op die hoofdraad uitgevoer kan word, anders kry u foute. Om dit in Unity te kan doen, moet u die funksies en die inprop vertel om op die UI Thread te werk as 'n AndroidJavaRunnable, soos op die foto hierbo.

Stap 4: Sukkel

Op hierdie stadium dink ek dat ek 'n Android -kenner is, Ek is aanlyn aansoek vir Android-werk, ek bestel Android-plakkers en t-hemde. Die lewe is goed. Nou is ek gereed om uit te vind hoe om 'n webblad in Unity weer te gee. Nadat ek 'n bietjie navorsing gedoen het, sien ek dat die aanvaarbare oplossing is om 'n Android WebView te gebruik. Dit is slegs 'n Android-klas waarmee u webwerwe wat in 'n Android-app kan werk, weergee sonder om alles in die blaaier te laai. Dit is basies sodat u gebruikers in u app kan hou. Die eerste orde van sake is om te kyk of iemand 'n eenheids -inprop hiervoor gemaak het wat open source is. Ek probeer eers hierdie inprop:

github.com/gree/unity-webview

maar dit lewer slegs 'n WebView aan die Unity GUI -laag, sodat dit nie sal werk nie. Dan vind ek hierdie inprop vir VR:

github.com/IanPhilips/UnityAndroidVRBrowse…

Hiermee kan u 'n WebView weergee na 'n tekstuur en selfs interaktief, wat wonderlik is.

Stap 5: Terug na die tekenbord

Ek sal net hiervoor probeer om my plug -in te gebruik, want al wat ek regtig nodig het, is om 'n beeld van die webwerf na eenheid te stuur. As ek daaroor ondersoek het, kom ek agter dat ek 'n Android -doek op 'n bitmap kan stoor en dit dan na 'n-p.webp

Dit het uiteindelik gewerk.

Ek kry nou 'n skermkiekie van 'n webwerf, so laat ons kyk hoe dit met arcore werk …

Dit doen nie.

Ek bedoel ek gebruik 'n Galaxy S7, wat nie die nuutste telefoon is nie, maar hierdie WebView -goed bevries steeds die hele app en is basies onbruikbaar. Ek neem aan dit is omdat WebView en ARCore albei die hoofdraad oorlaai, maar ek weet nie regtig nie. Terug na die tekenbord. As ons dit wil laat werk, moet ons die swaar werk op 'n soort bediener aflaai. Nadat u bietjie gaan google het, blyk dit dat u 'n skermkiekie kan neem van 'n webwerf met 'n biblioteek vir Node.js genaamd WebShot, wat Phantom JS gebruik, wat 'n koplose blaaier is.

Stap 6: Uiteindelik kom ons êrens

Nou moet ek uitvind hoe de hel om Node.js te gebruik …

Dit blyk dat u 'n Node.js -script kan maak wat na 'n spesifieke poortnommer luister, en as dit op die poort raak, kan dit inligting teruggee. Ons kan dit toets deur 'n klein hallo -wêreldskrip te skep wat op poort 3000 luister. Ons kan die gids met die script inskryf en dit uitvoer deur 'n node te doen en dan die naam van die script. As ons na ons IP -adres navigeer en dan 3000 in ons blaaier poort, kan ons sien dat dit 'n goeie hallo terugkeer. Noudat ek 'n klein greep op die knoop het, kan ek dit op my bediener laat werk, en ek huisves my webwerwe waarop hawkhost.com is. Ek SSH in op my bediener en probeer 'n paar hallo world node.js -skrifte uitvoer … en niks werk nie. Na nog 'n paar uur se rommel kom ek agter dat my spesifieke gasheerbediener slegs twee poorte oop het, dit wil sê 3000 en 12001.

Deur die poorte en my IP -bedieners se IP te gebruik, kan ek 'n goeie wêreldvoorbeeld kry. Vervolgens installeer ek die WebShot -module en skep ek 'n klein skrif waarmee ek 'n URL kan deurgee, en dit gee 'n prentjie van die webwerf by die webadres. Nou kan ek die noduskrip begin en 'n http POST -versoek van Unity stuur na die spesifieke IP en poortnommer van my bediener, wat my 'n byte -skikking sal gee wat die beeld van die webwerf is. Dankie GOD. Nou is 'n ander probleem: as ek my terminale sluit, eindig die proses en stop met luister. Ek doen meer navorsing en vind 'n module wat vir ewig genoem word. NPM word vir ewig geïnstalleer, en nou kan ek vir ewig navigeer en die script vir ewig begin, en dit sal aanhou werk totdat ek aanmeld en dit weer stop.

Stap 7: Dit werk

Groot. Maar dit is nie cool genoeg nie.

As ek nadink oor die waarde daarvan om in AR te blaai, kom dit deur die toevoeging van ruimte. Ons is nie meer beperk tot 'n enkele skerm nie, so ek wil iets maak waarmee ek my soekroete voor my kan visualiseer. Laat ons dus die eerste soekbladsy laai en dan die bladsy deurkruis en elke soekresultaat uittrek as 'n skakel, wat ons dan as 'n prent bo ons hoofskerm kan laai. Ons kan dit doen met 'n ander Node.js -script wat die eerste bladsy van die Google -resultate afskraap en dit vir altyd deurloop. Dit kan baie meer doeltreffend gedoen word met die Google -soek -API, maar reël nommer twee vir hierdie projek was geen betaalde API's nie; ons gaan dit vir eers so doen. Noudat ons die beelde vir elke skakel het, kan ons dit op 'n groter skerm laai elke keer as ons daarop klik en 'boom' het, het ons 'n goeie blaaier hier. Dit is nie ten volle funksioneel nie, maar ek sal dit aanvaar. Goed, as u hierdie projek self wil uitvoer, gaan na my Github en laai die expressVPN -projek af:

github.com/MatthewHallberg/ARBrowserExpres…

Stap 8: Alles laat werk

Maak dit oop in Unity en laat alles plaaslik op u masjien werk. Eerstens moet u die IP -adres van u masjien vind, so as u op 'n Mac is, hou die opsie in en klik op die wifi -simbool om u IP te openbaar.

Gaan terug na eenheid en maak die blaaierbeheerderskrip oop, voer u IP -adres daar in en kopieer dit na u knipbord. Soek die gids nodeScripts en plaas dit op u lessenaar, maak die gids oop en verander beide uitbreidings na.js. Maak elke skrif oop en verander die IP -adres na u IP. Maak nou die terminale oop en ons moet 'n paar dinge installeer. Installeer HomeBrew as u dit nog nie het nie.

-brew installeer node

-npm installeer webshot

-npm installeer flatiron

-npm installeer vakbond

-npm installeer cheerio

Nou kan ons albei skrifte begin, sodat ons dit in die nodescripts -lêergids kan plaas en node kan kry getimage.js En dan 'n nuwe terminale venster oopmaak en node getlinks.js Laat beide terminale vensters loop en gaan terug na die redakteur. As ons op play druk, behoort alles goed te werk. Ons kan ook na die lêer gaan, instellings bou en op build and run klik om dit op ons telefoon te kry! As u die bedieners wil stop, druk dan op beheer c of beveel q om die hele terminale te sluit.

DIS DIT!