Penyemak Imbas Web Augmented Reality: 9 Langkah

2024 Pengarang: John Day | [email protected]. Diubah suai terakhir: 2024-01-30 11:10

Hari ini kita akan melalui membuat penyemak imbas web Augmented Reality untuk Android.

Idea ini bermula ketika ExpressVPN meminta saya membuat video YouTube yang ditaja. Oleh kerana ini adalah yang pertama, saya mahu melakukan sesuatu yang berkaitan dengan produk mereka. Segera saya fikir, ohh saya hanya akan membuat penyemak imbas web augmented reality sehingga kita dapat melayari web dalam AR pada VPN. Tidak sukar, bukan? Keliru. Saya menetapkan beberapa batasan untuk projek ini kerana saya mahu menggunakannya untuk mempelajari beberapa perkara baru.

Yang pertama saya mahukan untuk Android kerana saya selalu melakukan perkara dengan IOS.

Nombor dua saya tidak mahu menggunakan API berbayar, saya mahu semua orang dapat memuat turun projek ini dan menjalankannya tanpa perlu membayar sebarang barang dalam talian. Oleh itu, tidak ada IBM Watson, tidak ada API Google, dan tidak ada apa-apa dari kedai Unity Asset.

MARI KITA MULAKAN!

Langkah 1: Perkara Pertama Pertama

Perkara pertama yang saya mahu bekerja adalah penyelesaian yang baik untuk ucapan hingga teks supaya kami dapat melakukan carian dalam talian dengan suara kami. Saya juga berpendapat bahawa suara adalah kaedah interaksi yang hebat dalam AR, sekurang-kurangnya sehingga kita mempunyai penyelesaian penjejakan tangan yang baik. Saya tahu bahawa Android mempunyai beberapa fungsi pertuturan asli untuk teks sehingga carian google yang cepat akan membantu kami mencari beberapa pemalam untuk Unity.

Saya mula-mula menggunakan pemalam ini untuk kesatuan:

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

Saya mencuba ini dan berjaya. Satu-satunya masalah ialah apabila anda menggunakannya dengan ARCore, ia menghasilkan kotak pop timbul asli dan nampaknya berlatarbelakangkan Unity dan anda akhirnya kehilangan penjejakan.

Ini kurang ideal.

Langkah 2: Mendapatkan Ucapan ke Teks yang berfungsi untuk Android

Oleh itu, saya mula mencari beberapa pemalam yang tidak memunculkan kotak pop timbul asli dan tidak dapat menemui banyak tetapi akhirnya saya menemui perpustakaan android ini:

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

Sekarang saya tidak tahu apa-apa mengenai pembangunan Android asli tetapi saya ingin mencabar diri sendiri, jadi saya fikir saya hanya akan berusaha menulis beberapa kod jambatan untuk perpustakaan ini dan mengubahnya menjadi pemalam Android untuk digunakan di Unity. Sekali lagi, ini adalah kesilapan dan petunjuk hingga berjam-jam kekecewaan.

Akhirnya berjaya …

Langkah 3: Pelajaran yang Dipelajari

Oleh itu, ada dua perkara yang saya pelajari dalam proses ini yang langsung tidak jelas dari cara membuat Google plugin untuk kesatuan.

Yang pertama adalah anda mungkin perlu mendapatkan rujukan konteks aplikasi Android jika pemalam anda akan melakukan sesuatu yang menarik. Anda boleh melakukan ini dengan menambahkan fail class.jar dari pemasangan Unity anda ke projek Android anda sebagai perpustakaan. Oleh itu, pergi ke struktur projek fail dan kemudian pilih tab kebergantungan untuk modul aplikasi. Di sini anda boleh mengklik butang tambah untuk menambahkan fail balang. Pergi ke build Unity anda, mesin main balik, pemutar android, variasi, mono, pengembangan, kelas, dan akhirnya class.jar. Ubah skop untuk menyusun sahaja. Sekarang, dalam fail java baru anda boleh melakukan:

UnityPlayer.currentActivity.getApplicationContext ();

dan gunakan rujukan itu di mana sahaja anda memerlukannya.

Isu pelik seterusnya ialah fungsi suara ini hanya dapat dijalankan di utas utama, jika tidak, anda akan mendapat ralat. Untuk melakukan ini di Unity, anda harus memberitahu fungsi dan plugin untuk dijalankan pada UI Thread sebagai AndroidJavaRunnable seperti gambar di atas.

Langkah 4: Perjuangan

Pada ketika ini saya berfikir saya seorang pakar Android, Saya dalam talian memohon pekerjaan dev android, saya memesan stiker dan t-shirt android. Hidup ini indah. Sekarang saya bersedia untuk terus mencari cara membuat laman web di Unity. Setelah melakukan sedikit kajian, saya melihat bahawa penyelesaian yang diterima adalah menggunakan Android WebView. Ini hanya kelas Android yang membolehkan anda membuat laman web yang boleh saling bertindak di dalam aplikasi Android tanpa memuatkan semua perkara dalam penyemak imbas. Pada asasnya, anda boleh menyimpan pengguna dalam aplikasi anda. Urutan pertama perniagaan adalah untuk melihat apakah ada yang membuat plugin penyatuan untuk ini yang merupakan sumber terbuka. Saya mula-mula mencuba pemalam ini:

github.com/gree/unity-webview

tetapi hanya menjadikan WebView ke lapisan GUI Unity sehingga tidak berfungsi. Kemudian saya dapati pemalam ini untuk VR:

github.com/IanPhilips/UnityAndroidVRBrowse…

ini membolehkan anda menjadikan WebView menjadi tekstur dan bahkan boleh berinteraksi, yang bagus. Saya fikir ini adalah jawapannya sehingga saya mencubanya dan mendapat tahu bahawa ini menyekat semua klik saya daripada perpaduan.

Langkah 5: Kembali ke Papan Lukisan

Saya hanya akan berusaha membuat plugin saya untuk ini, kerana yang saya perlukan hanyalah menghantar gambar laman web ke perpaduan. Melakukan kajian mengenai perkara itu, saya dapati bahawa saya dapat menyimpan kanvas android ke bitmap dan kemudian mengekodkannya ke-p.webp

Akhirnya berjaya.

Jadi sekarang saya dapat tangkapan skrin dari laman web, jadi mari kita lihat bagaimana ia berfungsi dengan arcore …

Tidak.

Maksud saya, saya menggunakan galaksi s7 yang bukan merupakan telefon terbaru, tetapi perkara WebView ini masih membekukan keseluruhan aplikasi dan pada dasarnya tidak dapat digunakan. Saya menganggapnya kerana WebView dan ARCore sama-sama memuatkan utas utama tetapi saya tidak betul-betul tahu. Kembali ke papan lukisan. Sekiranya kita mahu membuat ini, kita mesti memuatkan beban berat ke beberapa jenis pelayan. Setelah melakukan beberapa Googling ternyata anda dapat mengambil tangkapan skrin dari laman web dengan perpustakaan untuk Node.js yang disebut WebShot yang menggunakan Phantom JS yang merupakan penyemak imbas tanpa skrip.

Langkah 6: Akhirnya Kami Ke suatu Tempat

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

Ternyata anda boleh membuat skrip Node.js yang mendengar nombor port tertentu dan apabila mendapat hit di port itu, ia dapat mengembalikan beberapa maklumat. Kita dapat mengujinya dengan membuat skrip hello world yang mendengarkan port 3000. Kita dapat memasukkan direktori dengan skrip dan menjalankannya dengan melakukan simpul dan kemudian nama skrip. Sekiranya kita menavigasi ke alamat IP kita dan kemudian port 3000 di penyemak imbas kita, kita dapat melihatnya kembali ke dunia. Sekarang kerana saya mempunyai sedikit pemahaman pada node, saya dapat menjadikannya berfungsi di pelayan saya sehingga saya menjadi hos laman web saya di mana hawkhost.com. Saya memasukkan SSH ke pelayan saya dan cuba menjalankan beberapa skrip node.js hello world … dan tidak ada yang berfungsi. Selepas beberapa jam lagi, saya mendapat tahu bahawa pelayan hosting saya hanya mempunyai dua port yang terbuka untuk digunakan, iaitu 3000 dan 12001.

Oleh itu, dengan menggunakan port tersebut dan IP pelayan hosting saya, saya boleh mendapatkan contoh dunia hello. Seterusnya saya memasang modul WebShot dan membuat skrip kecil yang dapat saya lalui URL dan ia akan mengembalikan gambar laman web kepada saya di alamat web itu. Sekarang saya dapat memulakan skrip simpul itu dan menghantar permintaan http POST dari Unity ke IP dan nombor port tertentu pelayan saya yang akan mengembalikan saya susunan bait yang merupakan gambar laman web itu. Terima kasih ALLAH. Masalah lain adalah ketika saya menutup terminal saya prosesnya berakhir dan berhenti mendengar. Saya melakukan lebih banyak penyelidikan dan mencari modul yang dipanggil selama-lamanya. NPM dipasang selama-lamanya dan sekarang saya dapat menavigasi ke selamanya dan mula-mula memulakan skrip dan ia akan terus berjalan sehingga saya log masuk dan menghentikannya lagi.

Langkah 7: Ia Berfungsi

Hebat. Tetapi ia tidak cukup sejuk.

Apabila saya memikirkan tentang nilai melayari web dalam AR, ia datang dari penambahan ruang. Kami tidak lagi terbatas pada satu skrin, jadi saya ingin membuat sesuatu yang membolehkan saya menggambarkan jejak carian saya tepat di hadapan saya. Oleh itu, mari muatkan halaman carian pertama dan kemudian merangkak halaman tersebut dan ekstrak setiap hasil carian sebagai pautan, yang kemudian kami muatkan sebagai gambar di atas skrin utama kami. Kita boleh melakukannya dengan skrip Node.js lain yang mengikis halaman pertama hasil Google dan menjalankannya secara berterusan dengan selamanya. Ini dapat dilakukan dengan lebih berkesan dengan API carian Google tetapi peraturan nombor dua untuk projek ini adalah API berbayar jadi, kami akan melakukannya seperti ini buat masa ini. Sekarang kita mempunyai gambar untuk setiap pautan, kita boleh memuatkannya pada skrin yang lebih besar setiap kali kita mengkliknya dan boom, kita mempunyai penyemak imbas kecil yang bagus di sini. Ia tidak berfungsi sepenuhnya tetapi saya akan menerimanya. Baiklah, jika anda mahu menjalankan projek ini, pergi ke Github saya dan muat turun projek expressVPN:

github.com/MatthewHallberg/ARBrowserExpres…

Langkah 8: Mendapatkan Semuanya Berfungsi

Buka di Unity dan mari semuanya berjalan di mesin anda secara tempatan. Mula-mula anda perlu mencari alamat IP mesin anda, jadi jika anda berada di mac, tekan terus pilihan dan klik simbol wifi untuk mendedahkan IP anda.

Kembali ke kesatuan dan buka skrip pengawal penyemak imbas dan masukkan alamat IP anda di sana dan salin ke papan keratan anda. Cari folder nodeScripts dan letakkan di desktop anda, buka folder tersebut dan ubah kedua-dua sambungan tersebut ke.js. Buka setiap skrip dan ubah alamat IP ke IP anda. Sekarang buka terminal dan kita mesti memasang beberapa perkara. Pasang HomeBrew jika anda belum memilikinya.

-buat pemasangan nod

-npm pasang tangkapan web

-npm instal flatiron

-npm pasang kesatuan

-npm pasang cheerio

Sekarang kita boleh memulakan kedua-dua skrip itu sehingga masuk ke folder nodescripts dan lakukan get getageage.js simpul Dan kemudian buka tetingkap terminal baru dan lakukan getlinks.js simpul Biarkan kedua-dua tetingkap terminal berjalan dan kembali ke editor. Sekiranya kita tekan main semuanya mesti berjalan lancar. Kita juga boleh pergi ke fail, tetapan build, dan tekan build dan jalankan untuk mendapatkannya di telefon kita! Sekiranya anda mahu menghentikan pelayan, tekan control c atau perintah q untuk menutup keseluruhan terminal.

ITU ITU!