Navegador de realidade aumentada: 9 etapas

2025 Autor: John Day | [email protected]. Última modificação: 2025-01-23 15:03

Hoje vamos fazer um navegador de realidade aumentada para Android.

Essa ideia começou quando o ExpressVPN me pediu para fazer um vídeo patrocinado no YouTube. Como este é meu primeiro, eu queria fazer algo que fosse relevante para o produto deles. Imediatamente pensei, ohh, vou apenas fazer um navegador de realidade aumentada para que possamos navegar na web em RA em uma VPN. Não pode ser tão difícil, certo? Errado. Eu me limitei a este projeto porque queria usá-lo para aprender coisas novas.

Número um, eu queria que fosse para o Android, porque sempre faço coisas com IOS.

Número dois, eu não queria usar nenhuma API paga, queria que todos pudessem apenas baixar este projeto e executá-lo sem ter que pagar por nada online. Portanto, sem IBM Watson, sem API do Google e nada da loja Unity Asset.

VAMOS COMEÇAR!

Etapa 1: as primeiras coisas primeiro

A primeira coisa que eu queria fazer funcionar era uma boa solução de voz em texto para que pudéssemos fazer as pesquisas online com nossa voz. Também acho que a voz é um ótimo método de interação em RA, pelo menos até que tenhamos uma boa solução de rastreamento de mãos. Eu sei que o Android tem algumas funcionalidades nativas de fala para texto, então uma rápida pesquisa no Google nos ajudará a encontrar alguns plug-ins para o Unity.

Eu encontrei este plugin pela primeira vez para a unidade:

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

Eu tentei isso e funcionou muito bem. O único problema é que quando você o usa com o ARCore ele gera uma caixa popup nativa e parece que o Unity está em segundo plano e você acaba perdendo o rastreamento.

Isso estava aquém do ideal.

Etapa 2: Fazendo a Fala para Texto Funcionar para Android

Então, comecei a pesquisar alguns plug-ins que não traziam a caixa pop-up nativa e não consegui encontrar muito, mas acabei encontrando esta biblioteca android:

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

Agora eu não sei literalmente nada sobre o desenvolvimento nativo do Android, mas eu queria me desafiar, então decidi apenas tentar escrever algum código de ponte para esta biblioteca e transformá-lo em um plugin do Android para uso no Unity. Mais uma vez, isso foi um erro e chumbo a horas de frustração.

Então, finalmente funcionou …

Etapa 3: Lições aprendidas

Portanto, há duas coisas que aprendi neste processo que não são imediatamente aparentes apenas ao pesquisar no Google como fazer um plug-in Android para a unidade.

O número um é que você provavelmente precisará obter uma referência ao contexto do aplicativo Android se o seu plug-in for fazer algo interessante. Você pode fazer isso adicionando o arquivo classes.jar da instalação do Unity ao seu projeto Android como uma biblioteca. Então, vá para a estrutura do projeto de arquivo e escolha a guia de dependências para o módulo de aplicativo. Aqui você pode clicar no botão de adição para adicionar o arquivo jar. Acesse sua construção do Unity, mecanismos de reprodução, androidplayer, variações, mono, desenvolvimento, classes e, finalmente, classes.jar. Altere o escopo para compilar apenas. Agora, em um novo arquivo java, você pode fazer:

UnityPlayer.currentActivity.getApplicationContext ();

e use essa referência sempre que precisar.

O próximo problema estranho é que essa funcionalidade de voz só pode ser executada no thread principal ou você receberá erros. Para fazer isso no Unity, você precisa dizer às funções e ao plugin para rodar no UI Thread como um AndroidJavaRunnable como a imagem acima.

Etapa 4: Lutas

Neste ponto, estou pensando que sou um especialista em Android, Estou me inscrevendo para empregos de desenvolvedor Android, estou pedindo adesivos e camisetas do Android. A vida é boa. Agora estou pronto para avançar e descobrir como renderizar uma página da web no Unity. Depois de fazer uma pequena pesquisa, vejo que a solução aceita é usar um Android WebView. Esta é apenas uma classe Android que permite renderizar sites que são interativos dentro de um aplicativo Android sem carregar tudo no navegador. Basicamente, é para que você possa manter os usuários em seu aplicativo. A primeira coisa a fazer é ver se alguém fez um plugin de unidade para isso que é de código aberto. Primeiro tento este plugin:

github.com/gree/unity-webview

mas ele apenas renderiza um WebView para a camada GUI do Unity, então isso não vai funcionar. Então encontro este plugin para VR:

github.com/IanPhilips/UnityAndroidVRBrowse…

isso permite que você renderize um WebView em uma textura e seja até mesmo interativo, o que é ótimo. Achei que essa fosse a resposta até que tentei e descobri que estava bloqueando todos os meus cliques da unidade.

Etapa 5: Voltar para a prancheta de desenho

Vou tentar fazer meu plugin on para isso, porque tudo que preciso mesmo é enviar uma imagem do site para a unidade. Fazendo alguma pesquisa sobre isso, descobri que posso salvar uma tela de Android em um bitmap e, em seguida, codificá-la em um-p.webp

Finalmente funcionou.

Agora eu consigo uma captura de tela de um site, então vamos ver como funciona com o arcore …

Não importa.

Quer dizer, estou usando um galaxy s7 que não é o telefone mais novo, mas esse material do WebView ainda está congelando o aplicativo inteiro e basicamente inutilizável. Estou assumindo que é porque o WebView e o ARCore estão sobrecarregando o thread principal, mas eu realmente não sei. De volta à prancheta. Se quisermos fazer isso funcionar, teremos que descarregar o trabalho pesado para algum tipo de servidor. Depois de pesquisar no Google, descobrimos que você pode tirar uma captura de tela de um site com uma biblioteca para Node.js chamada WebShot, que usa Phantom JS, que é um navegador sem cabeça com script.

Etapa 6: Finalmente estamos chegando a algum lugar

Agora eu tenho que descobrir como diabos usar o Node.js….

Acontece que você pode fazer um script Node.js que escuta em um número de porta específico e quando é atingido nessa porta, pode retornar algumas informações. Podemos testar isso criando um pequeno script hello world que escuta na porta 3000. Podemos entrar no diretório com o script e executá-lo executando node e depois o nome do script. Se navegarmos para nosso endereço IP e, em seguida, para a porta 3000 em nosso navegador, podemos ver o retorno de hello world. Agora que tenho uma pequena compreensão do nó, posso fazê-lo funcionar no meu servidor que hospedo meus sites, que é hawkhost.com. I SSH em meu servidor e tento executar alguns scripts Node.js hello world… e nada está funcionando. Depois de mais algumas horas de confusão, descobri que meu servidor de hospedagem em particular tem apenas duas portas abertas para uso, que é 3000 e 12001.

Então, usando essas portas e o IP dos meus servidores de hospedagem, posso fazer com que um exemplo Hello World funcione. Em seguida, instalo o módulo WebShot e crio um pequeno script que posso passar uma URL e ele me retornará uma imagem do site naquele endereço da web. Agora posso iniciar esse script de nó e enviar uma solicitação HTTP POST do Unity para o IP específico e o número da porta do meu servidor que me retornará um array de bytes que é a imagem desse site. Obrigado, DEUS. Agora, outro problema é que quando fecho meu terminal o processo termina e para de escutar. Eu faço mais pesquisas e encontro um módulo chamado para sempre. NPM install forever e agora eu posso navegar para forever and make forever, iniciar o script e ele continuará em execução até que eu faça o login e pare novamente.

Etapa 7: Funciona

Excelente. Mas não é legal o suficiente.

Quando penso sobre o valor de navegar na web em RA, vem a adição de espaço. Não estamos mais confinados a uma única tela, então quero fazer algo que me permita visualizar meu rastro de busca bem na minha frente. Então, vamos carregar a primeira página de pesquisa e, em seguida, rastrear essa página e extrair todos os resultados da pesquisa como um link, que podemos carregar como uma imagem acima de nossa tela principal. Podemos fazer isso com outro script Node.js que raspa a primeira página dos resultados do Google e o executa continuamente para sempre. Isso poderia ser feito de forma muito mais eficiente com a API de pesquisa do Google, mas a regra número dois para este projeto não era uma API paga, então, vamos fazer assim por enquanto. Agora que temos as imagens para cada link, podemos carregá-las em uma tela maior cada vez que clicamos nelas e boom, temos um pequeno navegador agradável aqui. Não é totalmente funcional, mas vou pegá-lo. Tudo bem, se você quiser executar este projeto sozinho, vá para o meu Github e baixe o projeto expressVPN:

github.com/MatthewHallberg/ARBrowserExpres…

Etapa 8: Fazendo tudo funcionar

Abra-o no Unity e deixe tudo rodando localmente em sua máquina. Primeiro você precisa encontrar o endereço IP da sua máquina, então se você estiver no mac apenas segure a opção e clique no símbolo wi-fi para revelar seu IP.

Volte para a unidade e abra o script do controlador do navegador e coloque seu endereço IP lá e copie-o para a área de transferência. Encontre a pasta nodeScripts e coloque-a em sua área de trabalho, abra a pasta e mude ambas as extensões para.js. Abra cada script e altere o endereço IP para o seu IP. Agora abra o terminal e temos que instalar algumas coisas. Instale o HomeBrew se ainda não o tiver feito.

-brew install node

-npm install webshot

-npm instal flatiron

-npm instalar união

-npm install cheerio

Agora podemos iniciar os dois scripts, então faça cd na pasta nodescripts e execute node getimage.js. Em seguida, abra uma nova janela de terminal e execute node getlinks.js. Deixe as duas janelas de terminal em execução e volte para o editor. Se pressionarmos o play, tudo funcionará bem. Também podemos acessar o arquivo, criar configurações e clicar em construir e executar para obtê-lo em nosso telefone! Se você quiser parar os servidores, basta apertar control c ou command q para fechar todo o terminal.

É ISSO!