Navigateur Web en réalité augmentée : 9 étapes

2024 Auteur: John Day | [email protected]. Dernière modifié: 2024-01-30 09:08

Aujourd'hui, nous allons créer un navigateur Web en réalité augmentée pour Android.

Cette idée a commencé quand ExpressVPN m'a demandé de faire une vidéo YouTube sponsorisée. Comme c'est mon premier, je voulais faire quelque chose qui soit pertinent pour leur produit. À peu près immédiatement, j'ai pensé, ohh, je vais juste créer un navigateur Web en réalité augmentée afin que nous puissions naviguer sur le Web en réalité augmentée sur un VPN. Ça ne peut pas être si difficile, n'est-ce pas ? Tort. Je me suis fixé des limites pour ce projet car je voulais l'utiliser pour apprendre de nouvelles choses.

Numéro un, je voulais que ce soit pour Android car je fais toujours des trucs avec IOS.

Numéro deux, je ne voulais pas utiliser d'API payantes, je voulais que tout le monde puisse simplement télécharger ce projet et l'exécuter sans avoir à payer pour quoi que ce soit en ligne. Donc pas d'IBM Watson, pas d'API Google et rien du magasin Unity Asset.

COMMENÇONS!

Étape 1: Tout d'abord

La première chose que je voulais faire fonctionner était une bonne solution pour la parole au texte afin que nous puissions faire les recherches en ligne avec notre voix. Je pense également que la voix est une excellente méthode d'interaction en RA, du moins jusqu'à ce que nous ayons une bonne solution de suivi des mains. Je sais qu'Android a des fonctionnalités natives de synthèse vocale, donc une recherche rapide sur Google nous aidera à trouver des plugins pour Unity.

Je suis tombé sur ce plugin pour l'unité:

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

J'ai essayé cela et cela a très bien fonctionné. Le seul problème était que lorsque vous l'utilisez avec ARCore, il génère une boîte contextuelle native et semble mettre Unity en arrière-plan et vous finissez par perdre le suivi.

C'était loin d'être idéal.

Étape 2: Faire fonctionner Speech to Text pour Android

J'ai donc commencé à rechercher des plugins qui n'affichaient pas la boîte de dialogue contextuelle native et n'ont pas pu trouver grand-chose, mais j'ai fini par trouver cette bibliothèque Android:

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

Maintenant, je ne sais littéralement rien sur le développement Android natif, mais je voulais me mettre au défi alors j'ai pensé que j'allais juste essayer d'écrire du code de pont pour cette bibliothèque et de le transformer en un plugin Android à utiliser dans Unity. Encore une fois, c'était une erreur et une piste à des heures de frustration.

Puis finalement ça a marché…

Étape 3: Leçons apprises

Il y a donc deux choses que j'ai apprises dans ce processus qui ne sont pas immédiatement apparentes en cherchant simplement sur Google comment créer un plugin Android pour l'unité.

Premièrement, vous aurez probablement besoin d'une référence au contexte de l'application Android si votre plugin va faire quelque chose d'intéressant. Vous pouvez le faire en ajoutant le fichier classes.jar de votre installation Unity à votre projet Android en tant que bibliothèque. Allez donc dans la structure du projet de fichier, puis choisissez l'onglet dépendances pour le module d'application. Ici, vous pouvez cliquer sur le bouton plus pour ajouter le fichier jar. Accédez à votre version Unity, moteurs de lecture, androidplayer, variations, mono, développement, classes et enfin classes.jar. Modifiez la portée pour compiler uniquement. Maintenant, dans un nouveau fichier java, vous pouvez faire:

UnityPlayer.currentActivity.getApplicationContext();

et utilisez cette référence là où vous en avez besoin.

Le prochain problème étrange est que cette fonctionnalité vocale ne peut être exécutée que sur le thread principal, sinon vous obtiendrez des erreurs. Pour ce faire dans Unity, vous devez indiquer aux fonctions et au plugin de s'exécuter sur le thread d'interface utilisateur en tant qu'AndroidJavaRunnable, comme sur l'image ci-dessus.

Étape 4: Luttes

À ce stade, je pense que je suis un expert Android, Je postule en ligne pour des emplois de développement Android, je commande des autocollants et des t-shirts Android. La vie est belle. Je suis maintenant prêt à découvrir comment afficher une page Web dans Unity. Après avoir fait quelques recherches, je vois que la solution acceptée est d'utiliser une WebView Android. Il s'agit simplement d'une classe Android qui vous permet de rendre des sites Web interagissant dans une application Android sans tout charger dans le navigateur. Fondamentalement, c'est pour que vous puissiez garder les utilisateurs dans votre application. La première chose à faire est de voir si quelqu'un a créé un plugin d'unité pour cela qui est open source. J'essaye d'abord ce plugin:

github.com/gree/unity-webview

mais il ne rend qu'une WebView à la couche d'interface graphique Unity, donc cela ne fonctionnera pas. Ensuite, je trouve ce plugin pour VR:

github.com/IanPhilips/UnityAndroidVRBrowse…

cela vous permet de restituer une WebView en une texture et même d'interagir, ce qui est génial. Je pensais que c'était la réponse jusqu'à ce que je l'essaie et découvre que cela bloquait tous mes clics depuis l'unité.

Étape 5: Retour à la planche à dessin

Je vais juste essayer de créer mon plugin on pour cela, car tout ce dont j'ai vraiment besoin, c'est d'envoyer une image du site Web à unity. En faisant des recherches à ce sujet, je découvre que je peux enregistrer un canevas Android sur un bitmap, puis l'encoder en-p.webp

Cela a finalement fonctionné.

Alors maintenant, j'obtiens une capture d'écran d'un site Web, alors voyons comment cela fonctionne avec arcore…

Ce n'est pas le cas.

Je veux dire que j'utilise un Galaxy S7 qui n'est pas le téléphone le plus récent, mais ce truc de WebView bloque toujours l'ensemble de l'application et est fondamentalement inutilisable. Je suppose que c'est parce que WebView et ARCore surchargent tous les deux le fil principal, mais je ne sais pas vraiment. Retour à la planche à dessin. Si nous voulons que cela fonctionne, nous allons devoir décharger les charges lourdes sur une sorte de serveur. Après avoir fait quelques recherches sur Google, il s'avère que vous pouvez prendre une capture d'écran d'un site Web avec une bibliothèque pour Node.js appelée WebShot qui utilise Phantom JS, un navigateur sans tête scriptable.

Étape 6: Enfin, nous arrivons quelque part

Maintenant, je dois comprendre comment utiliser Node.js….

Il s'avère que vous pouvez créer un script Node.js qui écoute sur un numéro de port particulier et lorsqu'il reçoit un coup sur ce port, il peut renvoyer des informations. Nous pouvons tester cela en créant un petit script hello world qui écoute sur le port 3000. Nous pouvons entrer dans le répertoire avec le script et l'exécuter en faisant node puis le nom du script. Si nous naviguons vers notre adresse IP puis le port 3000 dans notre navigateur, nous pouvons le voir retourner hello world. Maintenant que j'ai une petite compréhension du nœud, je peux le faire fonctionner sur mon serveur sur lequel j'héberge mes sites Web sur hawkhost.com. Je SSH sur mon serveur et j'essaie d'exécuter quelques scripts hello world node.js… et rien ne fonctionne. Après encore quelques heures à déconner, je découvre que mon serveur d'hébergement n'a que deux ports ouverts, à savoir 3000 et 12001.

Donc, en utilisant ces ports et l'adresse IP de mes serveurs d'hébergement, je peux faire fonctionner un exemple de bonjour le monde. Ensuite, j'installe le module WebShot et crée un petit script auquel je peux transmettre une URL et qui me renverra une image du site Web à cette adresse Web. Maintenant, je peux démarrer ce script de nœud et envoyer une requête HTTP POST depuis Unity à l'adresse IP et au numéro de port spécifiques de mon serveur, ce qui me renverra un tableau d'octets qui est l'image de ce site Web. Dieu merci. Maintenant, un autre problème est que lorsque je ferme mon terminal, le processus se termine et arrête d'écouter. Je fais quelques recherches supplémentaires et trouve un module appelé pour toujours. NPM s'installe pour toujours et maintenant je peux naviguer pour toujours et démarrer pour toujours le script et il continuera à s'exécuter jusqu'à ce que je me connecte et l'arrête à nouveau.

Étape 7: ça marche

Super. Mais ce n'est pas assez cool.

Quand je pense à la valeur de la navigation sur le Web en réalité augmentée, cela vient de l'ajout d'espace. Nous ne sommes plus confinés à un seul écran donc je souhaite faire quelque chose qui me permette de visualiser mon parcours de recherche juste devant moi. Alors chargeons cette première page de recherche, puis explorons cette page et extrayons chaque résultat de recherche sous forme de lien, que nous pouvons ensuite charger sous forme d'image au-dessus de notre écran principal. Nous pouvons le faire avec un autre script Node.js qui gratte la première page des résultats Google et l'exécute en continu pour toujours. Cela pourrait être fait beaucoup plus efficacement avec l'API de recherche Google, mais la règle numéro deux pour ce projet n'était pas une API payante, nous allons donc le faire comme ça pour le moment. Maintenant que nous avons les images pour chaque lien, nous pouvons les charger sur un écran plus grand à chaque fois que nous cliquons dessus et boum, nous avons un joli petit navigateur ici. Ce n'est pas entièrement fonctionnel mais je vais le prendre. D'accord, donc si vous souhaitez exécuter ce projet vous-même, accédez à mon Github et téléchargez le projet expressVPN:

github.com/MatthewHallberg/ARBrowserExpres…

Étape 8: Tout fonctionne

Ouvrez-le dans Unity et exécutons tout en local sur votre machine. Vous devez d'abord trouver l'adresse IP de votre machine, donc si vous êtes sur mac, maintenez simplement l'option et cliquez sur le symbole wifi pour révéler votre IP.

Revenez à l'unité et ouvrez le script du contrôleur de navigateur, mettez-y votre adresse IP et copiez-la dans votre presse-papiers. Recherchez le dossier nodeScripts et placez-le sur votre bureau, ouvrez le dossier et remplacez les deux extensions par.js. Ouvrez chaque script et remplacez l'adresse IP par votre IP. Ouvrez maintenant le terminal et nous devons installer certaines choses. Installez HomeBrew si vous ne l'avez pas déjà.

-brew installer le nœud

-npm installer la capture d'écran

-npm installer le fer à repasser

-npm installer l'union

-npm installer Cheerio

Maintenant, nous pouvons démarrer les deux scripts, donc cd dans le dossier nodescripts et faire node getimage.js Et puis ouvrir une nouvelle fenêtre de terminal et faire node getlinks.js Laissez les deux fenêtres de terminal en cours d'exécution et revenez à l'éditeur. Si nous appuyons sur play, tout devrait fonctionner correctement. Nous pouvons également accéder au fichier, créer les paramètres et cliquer sur créer et exécuter pour l'obtenir sur notre téléphone ! Si vous voulez arrêter les serveurs, appuyez simplement sur le contrôle c ou la commande q pour fermer tout le terminal.

C'EST ÇA!