Browser web in realtà aumentata: 9 passaggi

2024 Autore: John Day | [email protected]. Ultima modifica: 2024-01-30 10:03

Oggi andremo a creare un browser web in Realtà Aumentata per Android.

Questa idea è iniziata quando ExpressVPN mi ha chiesto di fare un video YouTube sponsorizzato. Dato che questo è il mio primo, volevo fare qualcosa che fosse rilevante per il loro prodotto. Quasi subito ho pensato, ohh, farò solo un browser Web in realtà aumentata in modo da poter navigare sul Web in AR su una VPN. Non può essere così difficile, vero? Sbagliato. Mi sono posto alcune limitazioni per questo progetto perché volevo usarlo per imparare alcune cose nuove.

Numero uno, volevo che fosse per Android perché faccio sempre cose con IOS.

Numero due, non volevo utilizzare alcuna API a pagamento, volevo che tutti potessero semplicemente scaricare questo progetto ed eseguirlo senza dover pagare nulla online. Quindi niente IBM Watson, niente API di Google e niente dall'Unity Asset Store.

INIZIAMO!

Passaggio 1: prima le cose

La prima cosa che volevo far funzionare era una buona soluzione per la sintesi vocale in modo da poter fare le ricerche online con la nostra voce. Inoltre penso che la voce sia un ottimo metodo di interazione in AR, almeno fino a quando non avremo una buona soluzione per il tracciamento delle mani. So che Android ha alcune funzionalità native di sintesi vocale, quindi una rapida ricerca su Google ci aiuterà a trovare alcuni plugin per Unity.

Mi sono imbattuto per la prima volta in questo plugin per l'unità:

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

Ho provato questo e ha funzionato alla grande. L'unico problema era che quando lo usi con ARCore genera una finestra popup nativa e sembra mettere in background Unity e finisci per perdere il tracciamento.

Questo era tutt'altro che ideale.

Passaggio 2: far funzionare la sintesi vocale in testo per Android

Quindi ho iniziato a cercare alcuni plugin che non facevano apparire la finestra pop-up nativa e non sono riuscito a trovare molto, ma alla fine ho trovato questa libreria Android:

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

Ora non so letteralmente nulla dello sviluppo Android nativo, ma volevo mettermi alla prova, quindi ho pensato di provare a scrivere un codice bridge per questa libreria e trasformarlo in un plug-in Android da utilizzare in Unity. a ore di frustrazione.

Poi finalmente ha funzionato…

Passaggio 3: lezioni apprese

Quindi ci sono due cose che ho imparato in questo processo che non sono immediatamente evidenti semplicemente cercando su Google come creare un plug-in Android per l'unità.

Il numero uno è che probabilmente dovrai ottenere un riferimento al contesto dell'app Android se il tuo plug-in farà qualcosa di interessante. Puoi farlo aggiungendo il file classes.jar dalla tua installazione di Unity al tuo progetto Android come libreria. Quindi vai alla struttura del progetto del file e quindi scegli la scheda delle dipendenze per il modulo dell'app. Qui puoi fare clic sul pulsante più per aggiungere il file jar. Vai alla tua build Unity, motori di riproduzione, Androidplayer, variazioni, mono, sviluppo, classi e infine classi.jar. Modificare l'ambito per compilare solo. Ora, in un nuovo file java puoi fare:

UnityPlayer.currentActivity.getApplicationContext();

e usa quel riferimento dove ne hai bisogno.

Il prossimo problema strano è che questa funzionalità vocale può essere eseguita solo sul thread principale, altrimenti si otterranno errori. Per fare ciò in Unity devi dire alle funzioni e al plugin di funzionare sul thread dell'interfaccia utente come AndroidJavaRunnable come nell'immagine sopra.

Fase 4: lotte

A questo punto penso di essere un esperto di Android, Sto facendo domanda online per lavori di sviluppo Android, sto ordinando adesivi e magliette Android. La vita è bella. Ora sono pronto per passare a capire come eseguire il rendering di una pagina Web in Unity. Dopo aver fatto una piccola ricerca, vedo che la soluzione accettata è utilizzare un WebView Android. Questa è solo una classe Android che ti consente di eseguire il rendering di siti Web interattivi all'interno di un'app Android senza caricare tutto nel browser. Fondamentalmente, è così che puoi mantenere gli utenti nella tua app. Il primo ordine del giorno è vedere se qualcuno ha creato un plug-in unity per questo che è open source. Per prima cosa provo questo plugin:

github.com/gree/unity-webview

ma rende solo un WebView al livello della GUI di Unity, quindi non funzionerà. Poi trovo questo plugin per la realtà virtuale:

github.com/IanPhilips/UnityAndroidVRBrowse…

questo ti consente di eseguire il rendering di un WebView su una trama ed è persino interagibile, il che è fantastico. Ho pensato che questa fosse la risposta fino a quando non l'ho provata e ho scoperto che stava bloccando tutti i miei clic dall'unità.

Passaggio 5: torna al tavolo da disegno

Cercherò solo di creare il mio plugin on per questo, perché tutto ciò di cui ho veramente bisogno è inviare un'immagine del sito Web a unity. Facendo alcune ricerche su questo, scopro che posso salvare una tela Android su una bitmap e quindi codificarla in un-p.webp

Alla fine ha funzionato.

Quindi ora posso ottenere uno screenshot da un sito Web, quindi vediamo come funziona con arcore…

Non è così.

Voglio dire, sto usando un Galaxy S7 che non è il telefono più recente, ma questa roba di WebView sta ancora congelando l'intera app e praticamente inutilizzabile. Presumo che sia perché WebView e ARCore stanno entrambi sovraccaricando il thread principale, ma non lo so davvero. Torna al tavolo da disegno. Se vogliamo farlo funzionare, dovremo scaricare il lavoro pesante su un qualche tipo di server. Dopo aver fatto un po 'di ricerca su Google, risulta che puoi fare uno screenshot di un sito Web con una libreria per Node.js chiamata WebShot che utilizza Phantom JS che è un browser senza testa con script.

Passaggio 6: finalmente stiamo arrivando da qualche parte

Ora devo capire come diavolo usare Node.js….

Si scopre che puoi creare uno script Node.js che ascolta su un particolare numero di porta e quando viene colpito su quella porta può restituire alcune informazioni. Possiamo testarlo creando un piccolo script hello world che ascolta sulla porta 3000. Possiamo cd nella directory con lo script ed eseguirlo facendo node e poi il nome dello script. Se navighiamo verso il nostro indirizzo IP e poi portiamo 3000 nel nostro browser, possiamo vederlo tornare ciao mondo. Ora che ho una piccola conoscenza del nodo, posso farlo funzionare sul mio server su cui ospito i miei siti Web su cui è hawkhost.com. Eseguo SSH nel mio server e provo a eseguire alcuni script hello world node.js … e niente funziona. Dopo alcune ore di confusione scopro che il mio particolare server di hosting ha solo due porte aperte per l'uso, ovvero 3000 e 12001.

Quindi, usando quelle porte e l'IP del mio server di hosting, posso far funzionare un esempio di Hello World. Quindi installo il modulo WebShot e creo un piccolo script che posso passare un URL e mi restituirà un'immagine del sito Web a quell'indirizzo web. Ora posso avviare lo script del nodo e inviare una richiesta http POST da Unity all'IP specifico e al numero di porta del mio server che mi restituirà un array di byte che è l'immagine di quel sito Web. Grazie a DIO. Ora un altro problema è quando chiudo il mio terminale il processo termina e smette di ascoltare. Faccio ancora qualche ricerca e trovo un modulo chiamato per sempre. NPM si installa per sempre e ora posso navigare per sempre e avviare per sempre lo script e continuerà a funzionare fino a quando non effettuo l'accesso e lo interrompo di nuovo.

Passaggio 7: funziona

Grande. Ma non è abbastanza bello.

Quando penso al valore della navigazione sul web in AR, viene dall'aggiunta di spazio. Non siamo più limitati a un singolo schermo, quindi voglio creare qualcosa che mi permetta di visualizzare il mio percorso di ricerca proprio di fronte a me. Quindi carichiamo quella prima pagina di ricerca, quindi eseguiamo la scansione di quella pagina ed estraiamo ogni risultato di ricerca come collegamento, che possiamo quindi caricare come immagine sopra la nostra schermata principale. Possiamo farlo con un altro script Node.js che raschia la prima pagina dei risultati di Google e lo esegue continuamente con per sempre. Questo potrebbe essere fatto in modo molto più efficiente con l'API di ricerca di Google, ma la regola numero due per questo progetto non era un'API a pagamento, quindi per ora lo faremo in questo modo. Ora che abbiamo le immagini per ogni collegamento, possiamo caricarle su uno schermo più grande ogni volta che facciamo clic su di esse e boom, abbiamo un bel browser qui. Non è completamente funzionante ma lo prendo. Va bene, quindi se vuoi eseguire questo progetto da solo vai al mio Github e scarica il progetto expressVPN:

github.com/MatthewHallberg/ARBrowserExpres…

Passaggio 8: far funzionare tutto

Aprilo in Unity e facciamo funzionare tutto localmente sul tuo computer. Per prima cosa devi trovare l'indirizzo IP della tua macchina, quindi se sei su mac tieni premuta l'opzione e fai clic sul simbolo wifi per rivelare il tuo IP.

Torna a Unity e apri lo script del controller del browser e inserisci il tuo indirizzo IP e copialo negli appunti. Trova la cartella nodeScripts e mettila sul desktop, apri la cartella e modifica entrambe le estensioni in.js. Apri ogni script e cambia l'indirizzo IP con il tuo IP. Ora apri il terminale e dobbiamo installare alcune cose. Installa HomeBrew se non lo hai già.

-brew install node

-npm installazione webshot

-npm instal flatiron

-npm install union

-npm install cheerio

Ora possiamo avviare entrambi gli script quindi cd nella cartella nodescripts e fare node getimage.js E poi aprire una nuova finestra di terminale ed eseguire node getlinks.js Lascia entrambe le finestre di terminale in esecuzione e torna all'editor. Se premiamo play tutto dovrebbe funzionare correttamente. Possiamo anche andare su file, creare impostazioni e premere build ed esegui per ottenerlo sul nostro telefono! Se vuoi fermare i server, premi semplicemente control c o command q per chiudere l'intero terminale.

QUESTO È TUTTO!