Πρόγραμμα περιήγησης Ιστού επαυξημένης πραγματικότητας: 9 βήματα

2024 Συγγραφέας: John Day | [email protected]. Τελευταία τροποποίηση: 2024-01-30 08:36

Σήμερα θα κάνουμε ένα πρόγραμμα περιήγησης Ιστού Επαυξημένης Πραγματικότητας για Android.

Αυτή η ιδέα ξεκίνησε όταν η ExpressVPN μου ζήτησε να κάνω ένα βίντεο με χορηγία στο YouTube. Δεδομένου ότι αυτό είναι το πρώτο μου, ήθελα να κάνω κάτι που να σχετίζεται με το προϊόν τους. Σχεδόν αμέσως σκέφτηκα, ω, θα κάνω απλώς ένα πρόγραμμα περιήγησης ιστού επαυξημένης πραγματικότητας, ώστε να μπορούμε να περιηγηθούμε στον ιστό σε AR σε ένα VPN. Δεν μπορεί να είναι τόσο δύσκολο, σωστά; Λανθασμένος. Έθεσα κάποιους περιορισμούς για αυτό το έργο επειδή ήθελα να το χρησιμοποιήσω για να μάθω κάποια νέα πράγματα.

Το νούμερο ένα ήθελα να είναι για Android γιατί πάντα κάνω πράγματα με IOS.

Αριθμός δύο Δεν ήθελα να χρησιμοποιήσω κανένα API επί πληρωμή, ήθελα όλοι να μπορούν να κατεβάσουν αυτό το έργο και να το εκτελέσουν χωρίς να χρειάζεται να πληρώσουν για οποιαδήποτε πράγματα στο διαδίκτυο. Έτσι, ούτε IBM Watson, ούτε Google API και τίποτα από το Unity Asset store.

ΑΣ ΑΡΧΙΣΟΥΜΕ!

Βήμα 1: Πρώτα πράγματα πρώτα

Το πρώτο πράγμα που ήθελα να δουλέψω ήταν μια καλή λύση για ομιλία σε κείμενο, ώστε να μπορούμε να κάνουμε τις διαδικτυακές αναζητήσεις με τη φωνή μας. Επίσης, πιστεύω ότι η φωνή είναι μια εξαιρετική μέθοδος αλληλεπίδρασης στο AR, τουλάχιστον μέχρι να έχουμε μια καλή λύση παρακολούθησης χεριών. Γνωρίζω ότι το Android έχει κάποια φυσική λειτουργία ομιλίας σε κείμενο, οπότε μια γρήγορη αναζήτηση στο Google θα μας βοηθήσει να βρούμε κάποια πρόσθετα για την Unity.

Πρώτα ήρθα σε αυτό το plugin για ενότητα:

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

Το δοκίμασα και λειτούργησε τέλεια. Το μόνο πρόβλημα ήταν ότι όταν το χρησιμοποιείτε με ARCore δημιουργεί ένα εγγενές αναδυόμενο πλαίσιο και φαίνεται να υποβαθμίζει την Unity και τελικά χάνετε την παρακολούθηση.

Αυτό ήταν λιγότερο από ιδανικό.

Βήμα 2: Λειτουργία ομιλίας σε κείμενο για Android

Ξεκίνησα λοιπόν να ψάχνω για ορισμένα plugins που δεν έφεραν το τοπικό αναδυόμενο πλαίσιο και δεν μπορούσαν να βρουν πολλά, αλλά κατέληξα να βρω αυτήν τη βιβλιοθήκη Android:

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

Τώρα δεν ξέρω κυριολεκτικά τίποτα για τη μητρική ανάπτυξη Android, αλλά ήθελα να αμφισβητήσω τον εαυτό μου, οπότε σκέφτηκα ότι θα προσπαθούσα να γράψω κάποιον κωδικό γέφυρας για αυτήν τη βιβλιοθήκη και να το μετατρέψω σε προσθήκη Android για χρήση στην Unity. Και πάλι, αυτό ήταν λάθος σε ώρες απογοήτευσης.

Τότε τελικά λειτούργησε…

Βήμα 3: Διδάγματα

Υπάρχουν λοιπόν δύο πράγματα που έμαθα σε αυτήν τη διαδικασία που δεν είναι άμεσα εμφανή από το googling πώς να φτιάξω ένα plugin Android για ενότητα.

Το νούμερο ένα είναι ότι πιθανώς θα χρειαστεί να λάβετε μια αναφορά στο περιβάλλον της εφαρμογής Android εάν η προσθήκη σας πρόκειται να κάνει κάτι ενδιαφέρον. Μπορείτε να το κάνετε αυτό προσθέτοντας το αρχείο class.jar από την εγκατάσταση Unity στο έργο σας Android ως βιβλιοθήκη. Μεταβείτε στη δομή του έργου αρχείου και, στη συνέχεια, επιλέξτε την καρτέλα εξαρτήσεις για την ενότητα εφαρμογής. Εδώ μπορείτε να κάνετε κλικ στο κουμπί συν για να προσθέσετε το αρχείο jar. Μεταβείτε στο Unity build, τις μηχανές αναπαραγωγής, το androidplayer, τις παραλλαγές, το μονοφωνικό, την ανάπτυξη, τις τάξεις και τέλος το class.jar. Αλλάξτε το πεδίο μόνο για μεταγλώττιση. Τώρα, σε ένα νέο αρχείο java μπορείτε να κάνετε:

UnityPlayer.currentActivity.getApplicationContext ();

και χρησιμοποιήστε αυτήν την αναφορά όπου το χρειάζεστε.

Το επόμενο περίεργο ζήτημα είναι ότι αυτή η φωνητική λειτουργία μπορεί να εκτελεστεί μόνο στο κύριο νήμα, διαφορετικά θα λάβετε σφάλματα. Για να το κάνετε αυτό στο Unity πρέπει να πείτε τις λειτουργίες και το plugin να τρέχουν στο UI Thread ως AndroidJavaRunnable όπως η παραπάνω εικόνα.

Βήμα 4: Αγώνες

Σε αυτό το σημείο νομίζω ότι είμαι ειδικός στο Android, Κάνω αίτηση στο διαδίκτυο για δουλειές στο android dev, παραγγέλνω αυτοκόλλητα και μπλουζάκια android. Η ζωη ΕΙΝΑΙ ΩΡΑΙΑ. Τώρα είμαι έτοιμος να προχωρήσω στο να καταλάβω πώς να αποδώσω μια ιστοσελίδα στο Unity. Αφού έκανα μια μικρή έρευνα, βλέπω ότι η αποδεκτή λύση είναι η χρήση ενός Android WebView. Αυτή είναι απλώς μια τάξη Android που σας επιτρέπει να αποδίδετε ιστότοπους που είναι διαδραστικοί σε μια εφαρμογή Android χωρίς να φορτώνετε τα πάντα στο πρόγραμμα περιήγησης. Βασικά, είναι έτσι ώστε να μπορείτε να διατηρείτε τους χρήστες στην εφαρμογή σας. Η πρώτη σειρά επιχειρήσεων είναι να δούμε αν κάποιος έχει δημιουργήσει ένα πρόσθετο ενότητας για αυτό που είναι ανοιχτού κώδικα. Δοκιμάζω πρώτα αυτό το plugin:

github.com/gree/unity-webview

αλλά αποδίδει μόνο ένα WebView στο επίπεδο Unity GUI, έτσι δεν θα λειτουργήσει. Στη συνέχεια, βρίσκω αυτό το πρόσθετο για VR:

github.com/IanPhilips/UnityAndroidVRBrowse…

Αυτό σας επιτρέπει να αποδώσετε ένα WebView σε μια υφή και ακόμη και να αλληλεπιδρά, κάτι που είναι υπέροχο. Νόμιζα ότι αυτή ήταν η απάντηση μέχρι που το δοκίμασα και ανακάλυψα ότι μπλοκάρει όλα τα κλικ μου από την ενότητα.

Βήμα 5: Επιστροφή στον πίνακα σχεδίων

Απλώς θα προσπαθήσω να κάνω το plugin μου για αυτό, γιατί το μόνο που πραγματικά χρειάζομαι είναι να στείλω μια εικόνα της ιστοσελίδας στην ενότητα. Κάνοντας μια έρευνα σχετικά με αυτό, διαπιστώνω ότι μπορώ να αποθηκεύσω έναν καμβά Android σε ένα bitmap και στη συνέχεια να τον κωδικοποιήσω σε ένα-p.webp

Τελικά λειτούργησε.

Έτσι, τώρα μπορώ να πάρω ένα στιγμιότυπο οθόνης από έναν ιστότοπο, οπότε ας δούμε πώς λειτουργεί με το arcore…

Δεν το κάνει.

Εννοώ ότι χρησιμοποιώ ένα galaxy s7 που δεν είναι το νεότερο τηλέφωνο, αλλά αυτό το περιεχόμενο του WebView παγώνει ακόμα ολόκληρη την εφαρμογή και βασικά δεν μπορεί να χρησιμοποιηθεί. Υποθέτω ότι συμβαίνει επειδή το WebView και το ARCore υπερφορτώνουν και τα δύο το κύριο νήμα, αλλά δεν ξέρω πραγματικά. Πίσω στο σχεδιαστήριο. Αν θέλουμε να λειτουργήσει αυτό, θα πρέπει να αποφορτίσουμε τη φόρτωση των βαρών σε κάποιο διακομιστή. Αφού κάνετε κάποιο Googling, αποδεικνύεται ότι μπορείτε να τραβήξετε ένα στιγμιότυπο οθόνης ενός ιστότοπου με μια βιβλιοθήκη για το Node.js που ονομάζεται WebShot που χρησιμοποιεί το Phantom JS, το οποίο είναι ένα πρόγραμμα περιήγησης χωρίς κεφαλές με δυνατότητα επεξεργασίας.

Βήμα 6: Επιτέλους φτάνουμε κάπου

Τώρα πρέπει να καταλάβω πώς στο διάολο να χρησιμοποιήσω το Node.js….

Αποδεικνύεται ότι μπορείτε να δημιουργήσετε ένα σενάριο Node.js που ακούει έναν συγκεκριμένο αριθμό θύρας και όταν το χτυπήσει, στη συγκεκριμένη θύρα μπορεί να επιστρέψει κάποιες πληροφορίες. Μπορούμε να το δοκιμάσουμε δημιουργώντας ένα μικρό γεια -παγκόσμιο σενάριο που ακούει στη θύρα 3000. Μπορούμε να προσθέσουμε cd στον κατάλογο με το σενάριο και να το τρέξουμε κάνοντας κόμβο και μετά το όνομα του σεναρίου. Εάν μεταβούμε στη διεύθυνση IP μας και στη συνέχεια τη θύρα 3000 στο πρόγραμμα περιήγησής μας, μπορούμε να την δούμε να επιστρέφει γεια στον κόσμο. Τώρα που έχω μια μικρή κατανόηση στον κόμβο, μπορώ να το κάνω να λειτουργεί στον διακομιστή μου που φιλοξενεί τους ιστότοπούς μου στον οποίο είναι το hawkhost.com. Εισάγω SSH στον διακομιστή μου και προσπαθώ να εκτελέσω μερικά σενάρια γεια του κόσμου node.js… και τίποτα δεν λειτουργεί. Μετά από λίγες ώρες ανακατωμάτων ανακαλύπτω ότι ο συγκεκριμένος διακομιστής φιλοξενίας έχει μόνο δύο θύρες ανοιχτές για χρήση, δηλαδή 3000 και 12001.

Έτσι, χρησιμοποιώντας αυτές τις θύρες και τους IP διακομιστές φιλοξενίας μου, μπορώ να πάρω ένα παράδειγμα γεια στον κόσμο. Στη συνέχεια, εγκαθιστώ την ενότητα WebShot και δημιουργώ ένα μικρό σενάριο στο οποίο μπορώ να περάσω μια διεύθυνση URL και θα μου επιστρέψει μια εικόνα του ιστότοπου σε αυτήν τη διεύθυνση ιστού. Τώρα μπορώ να ξεκινήσω αυτό το σενάριο κόμβου και να στείλω ένα αίτημα http POST από την Unity στον συγκεκριμένο αριθμό IP και θύρας του διακομιστή μου, ο οποίος θα μου επιστρέψει έναν πίνακα byte που είναι η εικόνα αυτού του ιστότοπου. Ευχαριστώ τον ΘΕΟ. Τώρα ένα άλλο πρόβλημα είναι όταν κλείνω το τερματικό μου η διαδικασία τελειώνει και σταματάει την ακρόαση. Κάνω περισσότερη έρευνα και βρίσκω μια ενότητα που ονομάζεται για πάντα. Το NPM εγκαθίσταται για πάντα και τώρα μπορώ να πλοηγηθώ στο για πάντα και να ξεκινήσω για πάντα το σενάριο και θα συνεχίσει να τρέχει μέχρι να συνδεθώ και να το σταματήσω ξανά.

Βήμα 7: Λειτουργεί

Μεγάλος. Αλλά δεν είναι αρκετά δροσερό.

Όταν σκέφτομαι την αξία της περιήγησης στον ιστό σε AR, προέρχεται από την προσθήκη χώρου. Δεν περιοριζόμαστε πλέον σε μια μόνο οθόνη, οπότε θέλω να φτιάξω κάτι που θα μου επιτρέπει να οπτικοποιήσω το ίχνος αναζήτησής μου ακριβώς μπροστά μου. Ας φορτώσουμε λοιπόν την πρώτη σελίδα αναζήτησης και στη συνέχεια ανιχνεύσουμε αυτήν τη σελίδα και εξάγουμε κάθε αποτέλεσμα αναζήτησης ως σύνδεσμο, τον οποίο στη συνέχεια μπορούμε να φορτώσουμε ως εικόνα πάνω από την κύρια οθόνη μας. Μπορούμε να το κάνουμε αυτό με ένα άλλο σενάριο Node.js που καταστρέφει την πρώτη σελίδα των αποτελεσμάτων της Google και το εκτελεί συνεχώς με για πάντα. Αυτό θα μπορούσε να γίνει πολύ πιο αποτελεσματικά με το API αναζήτησης Google, αλλά ο κανόνας νούμερο δύο για αυτό το έργο δεν ήταν API επί πληρωμή, οπότε θα το κάνουμε έτσι προς το παρόν. Τώρα που έχουμε τις εικόνες για κάθε σύνδεσμο, μπορούμε να τις φορτώνουμε σε μεγαλύτερη οθόνη κάθε φορά που τις κάνουμε κλικ και κάνουμε boom, έχουμε ένα ωραίο μικρό πρόγραμμα περιήγησης εδώ. Δεν είναι πλήρως λειτουργικό αλλά θα το πάρω. Εντάξει, αν θέλετε να εκτελέσετε αυτό το έργο μόνοι σας, μεταβείτε στο Github μου και κατεβάστε το έργο expressVPN:

github.com/MatthewHallberg/ARBrowserExpres…

Βήμα 8: Λειτουργούν τα πάντα

Ανοίξτε το στο Unity και αφήστε τα πάντα να λειτουργούν τοπικά στο μηχάνημά σας. Πρώτα πρέπει να βρείτε τη διεύθυνση IP του μηχανήματός σας, οπότε εάν είστε σε mac απλά κρατήστε πατημένη την επιλογή και κάντε κλικ στο σύμβολο wifi για να αποκαλύψετε την IP σας.

Επιστρέψτε στην ενότητα και ανοίξτε το σενάριο του προγράμματος περιήγησης και τοποθετήστε τη διεύθυνση IP σας εκεί και αντιγράψτε το στο πρόχειρο. Βρείτε τον φάκελο nodeScripts και τοποθετήστε τον στην επιφάνεια εργασίας σας, ανοίξτε το φάκελο και αλλάξτε και τις δύο επεκτάσεις σε.js. Ανοίξτε κάθε σενάριο και αλλάξτε τη διεύθυνση IP στην IP σας. Τώρα ανοίξτε τερματικό και πρέπει να εγκαταστήσουμε κάποια πράγματα. Εγκαταστήστε το HomeBrew αν δεν το έχετε ήδη.

-κόμβος εγκατάστασης μπύρας

-npm εγκατάσταση webshot

-npm εγκατάσταση flatiron

-npm εγκατάσταση ένωσης

-npm εγκατάσταση cheerio

Τώρα μπορούμε να ξεκινήσουμε και τα δύο δέσμες ενεργειών στο φάκελο nodescripts και να κάνουμε node getimage.js Και στη συνέχεια να ανοίξουμε ένα νέο παράθυρο τερματικού και να κάνουμε κόμβους getlinks.js Αφήστε τα δύο παράθυρα τερματικού σε λειτουργία και επιστρέψτε στον επεξεργαστή. Αν πατήσουμε το play, όλα θα λειτουργήσουν καλά. Μπορούμε επίσης να μεταβούμε στο αρχείο, να δημιουργήσουμε ρυθμίσεις και να πατήσουμε build and run για να το λάβουμε στο τηλέφωνό μας! Εάν θέλετε να σταματήσετε τους διακομιστές, απλώς πατήστε το κουμπί ελέγχου c ή την εντολή q για να κλείσετε ολόκληρο το τερματικό.

ΑΥΤΟ ΕΙΝΑΙ!