Peramban Web Augmented Reality: 9 Langkah

2024 Pengarang: John Day | [email protected]. Terakhir diubah: 2024-01-30 09:56

Hari ini kita akan membuat web browser Augmented Reality untuk Android.

Ide ini dimulai ketika ExpressVPN meminta saya untuk membuat video YouTube bersponsor. Karena ini adalah yang pertama, saya ingin melakukan sesuatu yang relevan dengan produk mereka. Segera saya berpikir, ohh saya hanya akan membuat browser web augmented reality sehingga kami dapat menjelajahi web dalam AR pada VPN. Tidak mungkin sesulit itu, kan? Salah. Saya menetapkan sendiri beberapa batasan untuk proyek ini karena saya ingin menggunakannya untuk mempelajari beberapa hal baru.

Nomor satu yang saya inginkan untuk Android karena saya selalu melakukan hal-hal dengan iOS.

Nomor dua Saya tidak ingin menggunakan API berbayar apa pun, saya ingin semua orang dapat mengunduh proyek ini dan menjalankannya tanpa harus membayar barang apa pun secara online. Jadi tidak ada IBM Watson, tidak ada Google API, dan tidak ada apa pun dari toko Unity Asset.

Mari kita mulai!

Langkah 1: Hal Pertama Pertama

Hal pertama yang saya inginkan untuk bekerja adalah solusi yang baik untuk pidato ke teks sehingga kami dapat melakukan pencarian online dengan suara kami. Juga saya pikir suara adalah metode interaksi yang hebat di AR, setidaknya sampai kami memiliki solusi pelacakan tangan yang baik. Saya tahu bahwa Android memiliki beberapa fungsi native speech to text sehingga pencarian google yang cepat akan membantu kami menemukan beberapa plugin untuk Unity.

Saya pertama kali menemukan plugin ini untuk kesatuan:

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

Saya mencoba ini dan itu bekerja dengan baik. Satu-satunya masalah adalah ketika Anda menggunakannya dengan ARCore, itu menghasilkan kotak sembulan asli dan tampaknya latar belakang Unity dan Anda akhirnya kehilangan pelacakan.

Ini kurang dari ideal.

Langkah 2: Membuat Ucapan ke Teks Berfungsi untuk Android

Jadi saya mulai mencari beberapa plugin yang tidak memunculkan kotak pop up asli dan tidak dapat menemukan banyak tetapi akhirnya saya menemukan perpustakaan Android ini:

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

Sekarang saya benar-benar tidak tahu apa-apa tentang pengembangan Android asli tetapi saya ingin menantang diri saya sendiri, jadi saya pikir saya hanya akan mencoba menulis beberapa kode jembatan untuk perpustakaan ini dan mengubahnya menjadi plugin Android untuk digunakan di Unity. Sekali lagi, ini adalah kesalahan dan memimpin sampai berjam-jam frustrasi.

Lalu akhirnya berhasil…

Langkah 3: Pelajaran yang Dipetik

Jadi ada dua hal yang saya pelajari dalam proses ini yang tidak langsung terlihat dari hanya googling cara membuat plugin Android untuk unity.

Nomor satu adalah Anda mungkin perlu mendapatkan referensi ke konteks aplikasi Android jika plugin Anda akan melakukan sesuatu yang menarik. Anda dapat melakukannya dengan menambahkan file class.jar dari instalasi Unity Anda ke proyek Android Anda sebagai perpustakaan. Jadi buka struktur proyek file dan kemudian pilih tab dependensi untuk modul aplikasi. Di sini Anda dapat mengklik tombol plus untuk menambahkan file jar. Buka Unity build, playback engine, androidplayer, variasi, mono, pengembangan, kelas, dan terakhir class.jar. Ubah cakupan menjadi kompilasi saja. Sekarang, dalam file Java baru yang dapat Anda lakukan:

UnityPlayer.currentActivity.getApplicationContext();

dan gunakan referensi itu di mana pun Anda membutuhkannya.

Masalah aneh berikutnya adalah fungsi suara ini hanya dapat dijalankan di utas utama atau Anda akan mendapatkan kesalahan. Untuk melakukan ini di Unity Anda harus memberi tahu fungsi dan plugin untuk berjalan di UI Thread sebagai AndroidJavaRunnable seperti gambar di atas.

Langkah 4: Perjuangan

Pada titik ini saya berpikir saya seorang ahli Android, Saya online melamar pekerjaan pengembang android, saya memesan stiker dan kaos android. Hidup itu baik. Sekarang saya siap untuk melanjutkan mencari tahu cara membuat halaman web di Unity. Setelah melakukan sedikit riset saya melihat bahwa solusi yang diterima adalah dengan menggunakan Android WebView. Ini hanyalah sebuah kelas Android yang memungkinkan Anda untuk merender situs web yang dapat dijalankan di dalam aplikasi Android tanpa memuat semuanya di browser. Pada dasarnya, ini agar Anda dapat mempertahankan pengguna di aplikasi Anda. Urutan bisnis pertama adalah melihat apakah ada yang membuat plugin unity untuk ini yang bersifat open source. Saya pertama kali mencoba plugin ini:

github.com/gree/unity-webview

tetapi itu hanya merender WebView ke lapisan GUI Unity sehingga itu tidak akan berfungsi. Kemudian saya menemukan plugin ini untuk VR:

github.com/IanPhilips/UnityAndroidVRJelajahi…

ini memungkinkan Anda untuk merender WebView ke tekstur dan bahkan dapat berinteraksi, yang sangat bagus. Saya pikir ini adalah jawabannya sampai saya mencobanya dan menemukan bahwa itu memblokir semua klik saya dari kesatuan.

Langkah 5: Kembali ke Papan Gambar

Saya hanya akan mencoba membuat plugin on saya untuk ini, karena yang saya butuhkan hanyalah mengirim gambar situs web ke unity. Melakukan penelitian tentang itu, saya menemukan bahwa saya dapat menyimpan kanvas Android ke bitmap dan kemudian menyandikannya ke-p.webp

Akhirnya berhasil.

Jadi sekarang saya bisa mendapatkan tangkapan layar dari sebuah situs web, jadi mari kita lihat cara kerjanya dengan arcor…

Tidak.

Maksud saya, saya menggunakan galaxy s7 yang bukan ponsel terbaru, tetapi hal-hal WebView ini masih membekukan seluruh aplikasi dan pada dasarnya tidak dapat digunakan. Saya berasumsi itu karena WebView dan ARCore sama-sama membebani utas utama tetapi saya tidak begitu tahu. Kembali ke papan gambar. Jika kita ingin membuat ini berhasil, kita harus melepas beban berat ke beberapa jenis server. Setelah melakukan beberapa Googling ternyata Anda bisa mengambil screenshot dari sebuah website dengan library untuk Node.js bernama WebShot yang menggunakan Phantom JS yang merupakan scriptable headless browser.

Langkah 6: Akhirnya Kami Mendapatkan Suatu Tempat

Sekarang saya harus mencari tahu bagaimana cara menggunakan Node.js….

Ternyata Anda dapat membuat skrip Node.js yang mendengarkan nomor port tertentu dan ketika mendapat hit di port itu, ia dapat mengembalikan beberapa informasi. Kita dapat mengujinya dengan membuat skrip hello world kecil yang mendengarkan pada port 3000. Kita dapat melakukan cd ke direktori dengan skrip dan menjalankannya dengan melakukan node dan kemudian nama skrip. Jika kita menavigasi ke alamat IP kita dan kemudian port 3000 di browser kita, kita dapat melihatnya kembali ke hello world. Sekarang saya memiliki sedikit pemahaman tentang node, saya bisa membuatnya bekerja di server saya yang meng-host situs web saya di hawkhost.com. Saya SSH ke server saya dan mencoba menjalankan beberapa skrip hello world node.js…dan tidak ada yang berhasil. Setelah beberapa jam bermain-main, saya menemukan bahwa server hosting khusus saya hanya memiliki dua port yang terbuka untuk digunakan, yaitu 3000 dan 12001.

Jadi dengan menggunakan port tersebut dan IP server hosting saya, saya bisa mendapatkan contoh hello world yang berfungsi. Selanjutnya saya menginstal modul WebShot dan membuat skrip kecil yang dapat saya lewati URL dan itu akan mengembalikan saya gambar situs web di alamat web itu. Sekarang saya dapat memulai skrip simpul itu dan mengirim permintaan http POST dari Unity ke IP spesifik dan nomor port server saya yang akan mengembalikan saya array byte yang merupakan gambar situs web itu. Terima kasih Tuhan. Sekarang masalah lain adalah ketika saya menutup terminal saya, prosesnya berakhir dan berhenti mendengarkan. Saya melakukan penelitian lebih lanjut dan menemukan modul yang disebut selamanya. Instal NPM selamanya dan sekarang saya dapat menavigasi ke selamanya dan melakukan selamanya memulai skrip dan itu akan terus berjalan sampai saya masuk dan menghentikannya lagi.

Langkah 7: Ini Bekerja

Besar. Tapi itu tidak cukup keren.

Ketika saya memikirkan nilai menjelajah web di AR, itu berasal dari penambahan ruang. Kami tidak lagi terbatas pada satu layar jadi saya ingin membuat sesuatu yang memungkinkan saya untuk memvisualisasikan jejak pencarian saya tepat di depan saya. Jadi mari kita muat halaman pencarian pertama itu lalu jelajahi halaman itu dan ekstrak setiap hasil pencarian sebagai tautan, yang kemudian dapat kita muat sebagai gambar di atas layar utama kita. Kita dapat melakukan ini dengan skrip Node.js lain yang menggores halaman pertama hasil Google dan menjalankannya terus menerus dengan selamanya. Ini bisa dilakukan jauh lebih efisien dengan API pencarian Google tetapi aturan nomor dua untuk proyek ini bukanlah API berbayar jadi, kami akan melakukannya seperti ini untuk saat ini. Sekarang kami memiliki gambar untuk setiap tautan, kami dapat memuatnya di layar yang lebih besar setiap kali kami mengkliknya dan boom, kami memiliki browser kecil yang bagus di sini. Ini tidak berfungsi penuh tetapi saya akan menerimanya. Baiklah jadi jika Anda ingin menjalankan proyek ini sendiri, buka Github saya dan unduh proyek expressVPN:

github.com/MatthewHallberg/ARBrowserExpres…

Langkah 8: Membuat Semuanya Bekerja

Buka di Unity dan biarkan semuanya berjalan secara lokal di mesin Anda. Pertama, Anda perlu menemukan alamat IP mesin Anda, jadi jika Anda menggunakan mac, tahan saja opsi dan klik simbol wifi untuk mengungkapkan IP Anda.

Kembali ke unity dan buka skrip pengontrol browser dan masukkan alamat IP Anda di sana dan salin ke clipboard Anda. Temukan folder nodeScripts dan letakkan di desktop Anda, buka folder dan ubah kedua ekstensi menjadi.js. Buka setiap skrip dan ubah alamat IP menjadi IP Anda. Sekarang buka terminal dan kita harus menginstal beberapa hal. Instal HomeBrew jika Anda belum memilikinya.

-brew install node

-npm instal webshot

-npm instal seterika

-npm instal serikat pekerja

-npm instal cheerio

Sekarang kita dapat memulai kedua skrip jadi cd ke folder nodescripts dan lakukan node getimage.js Dan kemudian buka jendela terminal baru dan lakukan node getlinks.js Biarkan kedua jendela terminal berjalan dan kembali ke editor. Jika kita menekan play semuanya akan bekerja dengan baik. Kami juga dapat membuka file, membangun pengaturan, dan menekan build and run untuk mendapatkannya di ponsel kami! Jika Anda ingin menghentikan server cukup tekan kontrol c atau perintah q untuk menutup seluruh terminal.

ITU DIA!