Przeglądarka internetowa Augmented Reality: 9 kroków

2024 Autor: John Day | [email protected]. Ostatnio zmodyfikowany: 2024-01-30 11:31

Dzisiaj zajmiemy się tworzeniem przeglądarki internetowej Augmented Reality na Androida.

Ten pomysł zaczął się, gdy ExpressVPN poprosił mnie o zrobienie sponsorowanego filmu na YouTube. Ponieważ jest to mój pierwszy, chciałem zrobić coś, co byłoby istotne dla ich produktu. Prawie od razu pomyślałem, och, zrobię po prostu przeglądarkę internetową z rozszerzoną rzeczywistością, abyśmy mogli przeglądać sieć w AR na VPN. To nie może być takie trudne, prawda? Zło. Postawiłem sobie pewne ograniczenia dla tego projektu, ponieważ chciałem go wykorzystać do nauczenia się nowych rzeczy.

Numer jeden, który chciałem, aby był dla Androida, ponieważ zawsze robię rzeczy z IOS.

Po drugie, nie chciałem korzystać z żadnych płatnych interfejsów API, chciałem, aby każdy mógł po prostu pobrać ten projekt i uruchomić go bez konieczności płacenia za jakiekolwiek rzeczy online. Nie ma więc IBM Watson, Google API ani nic ze sklepu Unity Asset.

ZACZNIJMY!

Krok 1: Najpierw najważniejsze rzeczy

Pierwszą rzeczą, którą chciałem uzyskać, było dobre rozwiązanie do zamiany mowy na tekst, abyśmy mogli wyszukiwać w Internecie za pomocą głosu. Uważam też, że głos jest świetną metodą interakcji w AR, przynajmniej dopóki nie będziemy mieli dobrego rozwiązania do śledzenia rąk. Wiem, że Android ma natywną funkcję zamiany mowy na tekst, więc szybkie wyszukiwanie w Google pomoże nam znaleźć wtyczki do Unity.

Po raz pierwszy natknąłem się na tę wtyczkę do jedności:

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

Wypróbowałem to i zadziałało świetnie. Jedynym problemem było to, że gdy używasz go z ARCore, generuje natywne wyskakujące okienko i wydaje się, że Unity działa w tle, a Ty tracisz śledzenie.

To było mniej niż idealne.

Krok 2: Uzyskiwanie mowy na tekst działający w systemie Android

Zacząłem więc szukać wtyczek, które nie wyświetlały natywnego wyskakującego okienka i nie mogłem znaleźć wiele, ale w końcu znalazłem tę bibliotekę Androida:

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

Teraz dosłownie nic nie wiem o natywnym tworzeniu Androida, ale chciałem rzucić sobie wyzwanie, więc pomyślałem, że po prostu spróbuję napisać kod pomostowy dla tej biblioteki i przekształcić go w wtyczkę Androida do użytku w Unity. do godzin frustracji.

Potem w końcu się udało…

Krok 3: Wyciągnięte wnioski

Tak więc są dwie rzeczy, których nauczyłem się w tym procesie, które nie są od razu widoczne po prostu w Google, jak stworzyć wtyczkę do Androida dla jedności.

Po pierwsze, prawdopodobnie będziesz potrzebować odniesienia do kontekstu aplikacji na Androida, jeśli Twoja wtyczka ma zamiar zrobić coś interesującego. Możesz to zrobić, dodając plik class.jar z instalacji Unity do projektu systemu Android jako bibliotekę. Przejdź więc do struktury projektu pliku, a następnie wybierz zakładkę zależności dla modułu aplikacji. Tutaj możesz kliknąć przycisk plus, aby dodać plik jar. Przejdź do swojej kompilacji Unity, silników odtwarzania, androidplayera, wariacji, mono, rozwoju, klas i wreszcie klas.jar. Zmień zakres na tylko kompilację. Teraz w nowym pliku java możesz zrobić:

UnityPlayer.bieżącaAktywność.getApplicationContext();

i używaj tego odniesienia wszędzie tam, gdzie go potrzebujesz.

Kolejnym dziwnym problemem jest to, że tę funkcję głosową można uruchomić tylko w głównym wątku, w przeciwnym razie pojawią się błędy. Aby to zrobić w Unity, musisz powiedzieć funkcjom i wtyczce, aby działały w wątku interfejsu użytkownika jako AndroidJavaRunnable, jak na powyższym obrazku.

Krok 4: Zmagania

W tym momencie myślę, że jestem ekspertem od Androida, Ubiegam się online o pracę dla programistów na Androida, zamawiam naklejki i koszulki na Androida. Życie jest dobre. Teraz jestem gotowy, aby przejść do wymyślenia sposobu renderowania strony internetowej w Unity. Po przeprowadzeniu niewielkich badań widzę, że akceptowanym rozwiązaniem jest użycie Android WebView. To tylko klasa Androida, która umożliwia renderowanie stron internetowych, które są interaktywne w aplikacji na Androida, bez ładowania wszystkiego w przeglądarce. Zasadniczo po to, abyś mógł zatrzymać użytkowników w swojej aplikacji. Pierwszym zadaniem jest sprawdzenie, czy ktoś stworzył do tego wtyczkę Unity, która jest open source. Najpierw wypróbowuję tę wtyczkę:

github.com/gree/unity-webview

ale renderuje tylko WebView do warstwy GUI Unity, więc to nie zadziała. Następnie znajduję tę wtyczkę do VR:

github.com/IanPhilips/UnityAndroidVRPrzeglądaj…

pozwala to na renderowanie WebView do tekstury, a nawet interaktywne, co jest świetne. Myślałem, że to jest odpowiedź, dopóki nie spróbowałem i nie dowiedziałem się, że blokuje wszystkie moje kliknięcia przed jednością.

Krok 5: Powrót do tablicy kreślarskiej

Po prostu spróbuję zrobić swoją wtyczkę on, ponieważ wszystko, czego naprawdę potrzebuję, to wysłać obraz witryny do Unity. Przeprowadzając pewne badania na ten temat, dowiaduję się, że mogę zapisać płótno Androida na bitmapę, a następnie zakodować je do-p.webp

W końcu się udało.

Teraz dostaję zrzut ekranu ze strony internetowej, więc zobaczmy, jak to działa z arcore…

Nie.

Mam na myśli, że używam Galaxy s7, który nie jest najnowszym telefonem, ale ten WebView wciąż blokuje całą aplikację i w zasadzie nie nadaje się do użytku. Zakładam, że to dlatego, że WebView i ARCore przeciążają główny wątek, ale tak naprawdę nie wiem. Wróćmy do deski kreślarskiej. Jeśli chcemy, aby to zadziałało, będziemy musieli przenieść ciężkie podnoszenie na jakiś serwer. Po wykonaniu trochę Googlingu okazuje się, że możesz zrobić zrzut ekranu strony internetowej z biblioteką Node.js o nazwie WebShot, która używa Phantom JS, która jest skryptową przeglądarką bezgłową.

Krok 6: Nareszcie do czegoś dochodzimy

Teraz muszę wymyślić, jak do cholery używać Node.js….

Okazuje się, że możesz stworzyć skrypt Node.js, który nasłuchuje na konkretnym numerze portu i gdy zostanie trafiony na tym porcie, może zwrócić pewne informacje. Możemy to przetestować, tworząc mały skrypt hello world, który nasłuchuje na porcie 3000. Możemy przejść do katalogu ze skryptem i uruchomić go, wykonując polecenie node, a następnie nazwę skryptu. Jeśli przejdziemy do naszego adresu IP, a następnie portu 3000 w naszej przeglądarce, zobaczymy, że zwraca hello world. Teraz, gdy mam mały uchwyt na węźle, mogę go uruchomić na moim serwerze, na którym hostuję moje witryny, na których jest hawkhost.com. SSH do mojego serwera i próbuję uruchomić kilka skryptów hello world node.js… i nic nie działa. Po kolejnych kilku godzinach dowiaduję się, że mój konkretny serwer hostingowy ma tylko dwa otwarte porty, czyli 3000 i 12001.

Używając tych portów i mojego adresu IP serwerów hostingowych, mogę uzyskać działający przykład hello world. Następnie instaluję moduł WebShot i tworzę mały skrypt, do którego mogę podać adres URL, który zwróci mi obraz strony internetowej pod tym adresem. Teraz mogę uruchomić ten skrypt węzła i wysłać żądanie http POST z Unity na konkretny adres IP i numer portu mojego serwera, który zwróci mi tablicę bajtów, która jest obrazem tej witryny. Dzięki BOGU. Teraz inny problem polega na tym, że kiedy zamykam terminal, proces kończy się i kończy nasłuchiwanie. Robię więcej badań i znajduję moduł o nazwie na zawsze. NPM instaluje się na zawsze, a teraz mogę przejść do opcji na zawsze i na zawsze uruchomić skrypt i będzie on działał, dopóki się nie zaloguję i ponownie go zatrzymam.

Krok 7: Działa

Świetny. Ale to nie jest wystarczająco fajne.

Kiedy myślę o wartości przeglądania sieci w AR, wynika to z dodania przestrzeni. Nie jesteśmy już ograniczeni do jednego ekranu, więc chcę stworzyć coś, co pozwoli mi zwizualizować moją ścieżkę wyszukiwania tuż przede mną. Załadujmy więc tę pierwszą stronę wyszukiwania, a następnie zindeksujmy tę stronę i wyodrębnijmy każdy wynik wyszukiwania jako link, który następnie możemy załadować jako obraz nad naszym głównym ekranem. Możemy to zrobić za pomocą innego skryptu Node.js, który zdrapuje pierwszą stronę wyników Google i uruchamia ją w sposób ciągły i bez końca. Można to zrobić znacznie wydajniej za pomocą interfejsu API wyszukiwania Google, ale zasadą numer dwa dla tego projektu nie były płatne interfejsy API, więc na razie zrobimy to w ten sposób. Teraz, gdy mamy obrazy dla każdego linku, możemy je załadować na większy ekran za każdym razem, gdy je klikniemy i bum, mamy tutaj ładną małą przeglądarkę. Nie jest w pełni funkcjonalny, ale wezmę to. W porządku, więc jeśli chcesz sam uruchomić ten projekt, wejdź na mój Github i pobierz projekt expressVPN:

github.com/MatthewHallberg/ARBrowserExpres…

Krok 8: Wszystko działa

Otwórz go w Unity i niech wszystko działa lokalnie na twoim komputerze. Najpierw musisz znaleźć adres IP swojego komputera, więc jeśli korzystasz z komputera Mac, po prostu przytrzymaj opcję i kliknij symbol wifi, aby ujawnić swój adres IP.

Wróć do jedności i otwórz skrypt kontrolera przeglądarki, wpisz tam swój adres IP i skopiuj go do schowka. Znajdź folder nodeScripts i umieść go na pulpicie, otwórz folder i zmień oba rozszerzenia na.js. Otwórz każdy skrypt i zmień adres IP na swój adres IP. Teraz otwórz terminal i musimy zainstalować kilka rzeczy. Zainstaluj HomeBrew, jeśli jeszcze go nie masz.

- warzyć węzeł instalacyjny

-npm zainstaluj webshot

-npm zainstaluj żelazko

-npm zainstaluj związek

-npm zainstaluj cheerio

Teraz możemy uruchomić oba skrypty, więc cd do folderu nodescripts i wykonaj node getimage.js Następnie otwórz nowe okno terminala i wykonaj node getlinks.js Pozostaw oba okna terminala uruchomione i wróć do edytora. Jeśli wciśniemy play, wszystko powinno działać dobrze. Możemy również przejść do pliku, ustawień kompilacji i nacisnąć kompilację i uruchomić, aby pobrać go na nasz telefon! Jeśli chcesz zatrzymać serwery, po prostu naciśnij C lub polecenie q, aby zamknąć cały terminal.

OTÓŻ TO!