Artırılmış Gerçeklik Web Tarayıcısı: 9 Adım

2024 Yazar: John Day | [email protected]. Son düzenleme: 2024-01-30 13:19

Bugün Android için bir Artırılmış Gerçeklik web tarayıcısı yapmaya başlayacağız.

Bu fikir, ExpressVPN sponsorlu bir YouTube videosu yapmamı istediğinde başladı. Bu benim ilkim olduğu için ürünleriyle alakalı bir şey yapmak istedim. Hemen düşündüm, ohh, bir artırılmış gerçeklik web tarayıcısı yapacağım, böylece bir VPN'de AR'de web'e göz atabiliriz. O kadar zor olamaz, değil mi? Yanlış. Bu proje için kendime bazı sınırlamalar koydum çünkü onu yeni şeyler öğrenmek için kullanmak istedim.

Birincisi, Android için olmasını istedim çünkü her zaman IOS ile bir şeyler yaparım.

İkincisi, herhangi bir ücretli API kullanmak istemedim, herkesin bu projeyi indirebilmesini ve çevrimiçi herhangi bir şey için ödeme yapmak zorunda kalmadan çalıştırabilmesini istedim. Yani IBM Watson yok, Google API yok ve Unity Asset mağazasından hiçbir şey yok.

BAŞLAYALIM!

Adım 1: Önce İlk Şeyler

Çalışmak istediğim ilk şey, sesimizi kullanarak çevrimiçi aramaları yapabilmemiz için konuşmayı metne dönüştürmek için iyi bir çözümdü. Ayrıca, en azından iyi bir el izleme çözümümüz olana kadar, sesin AR'de harika bir etkileşim yöntemi olduğunu düşünüyorum. Android'in bazı yerel konuşma metin işlevlerine sahip olduğunu biliyorum, bu nedenle hızlı bir google araması Unity için bazı eklentiler bulmamıza yardımcı olacaktır.

Birlik için ilk önce bu eklentiye rastladım:

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

Bunu denedim ve harika çalıştı. Tek sorun, ARCore ile kullandığınızda yerel bir açılır kutu oluşturması ve Unity'nin arka planı gibi görünmesi ve sonunda izlemeyi kaybetmenizdi.

Bu idealden daha azdı.

Adım 2: Android için Çalışan Metne Konuşmayı Alma

Bu yüzden yerel açılır kutuyu getirmeyen ve fazla bir şey bulamadığım bazı eklentileri aramaya başladım ama sonunda bu Android kitaplığını buldum:

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

Şimdi tam anlamıyla yerel Android geliştirme hakkında hiçbir şey bilmiyorum ama kendime meydan okumak istedim, bu yüzden bu kitaplık için bir köprü kodu yazmaya ve Unity'de kullanım için bir Android eklentisine dönüştürmeye çalışacağımı düşündüm. Yine, bu bir hataydı ve yol açtı. saatlerce süren hayal kırıklığı için.

Sonra nihayet işe yaradı…

Adım 3: Alınan Dersler

Dolayısıyla, bu süreçte öğrendiğim ve birlik için bir Android eklentisinin nasıl yapıldığını Google'da aramaktan hemen anlaşılmayan iki şey var.

Birincisi, eklentiniz ilginç bir şey yapacaksa, muhtemelen Android uygulama bağlamına bir referans almanız gerekecek. Unity kurulumunuzdan class.jar dosyasını kitaplık olarak Android projenize ekleyerek bunu yapabilirsiniz. Dosya proje yapısına gidin ve ardından uygulama modülü için bağımlılıklar sekmesini seçin. Burada jar dosyasını eklemek için artı düğmesine tıklayabilirsiniz. Unity derlemenize, oynatma motorlarınıza, android oynatıcınıza, varyasyonlara, mono, geliştirme, sınıflara ve son olarak class.jar'a gidin. Kapsamı yalnızca derlemek için değiştirin. Şimdi, yeni bir Java dosyasında şunları yapabilirsiniz:

UnityPlayer.currentActivity.getApplicationContext();

ve bu referansı ihtiyaç duyduğunuz her yerde kullanın.

Bir sonraki garip sorun, bu ses işlevinin yalnızca ana iş parçacığında çalıştırılabilmesidir, aksi takdirde hata alırsınız. Bunu Unity'de yapabilmek için, yukarıdaki resimdeki gibi bir AndroidJavaRunnable olarak UI Thread'da çalışacak fonksiyonları ve eklentiyi söylemelisiniz.

Adım 4: Mücadeleler

Bu noktada bir Android uzmanı olduğumu düşünüyorum, Android geliştirici işleri için çevrimiçi başvuruyorum, android çıkartmalar ve tişörtler sipariş ediyorum. Hayat güzel. Artık Unity'de bir web sayfasının nasıl oluşturulacağını bulmaya hazırım. Biraz araştırma yaptıktan sonra kabul edilen çözümün bir Android WebView kullanmak olduğunu görüyorum. Bu yalnızca, tarayıcıya her şeyi yüklemeden bir Android uygulaması içinde etkileşimli web siteleri oluşturmanıza olanak tanıyan bir Android sınıfıdır. Temel olarak, kullanıcıları uygulamanızda tutabilmeniz içindir. İlk iş, bunun için açık kaynak kodlu bir birlik eklentisi yapıp yapmadığını görmek. İlk önce bu eklentiyi denerim:

github.com/gree/unity-webview

ancak Unity GUI katmanına yalnızca bir Web Görünümü oluşturur, böylece bu işe yaramaz. Sonra VR için bu eklentiyi buluyorum:

github.com/IanPhilips/UnityAndroidVRBrowse…

bu, bir WebView'ı bir dokuya ve hatta etkileşime girebilir hale getirmenize izin verir, ki bu harika. Deneyene ve tüm tıklamalarımı birlikten engellediğini öğrenene kadar cevabın bu olduğunu düşündüm.

Adım 5: Çizim Tahtasına Geri Dönün

Bunun için kendi eklentimi yapmaya çalışacağım, çünkü gerçekten ihtiyacım olan tek şey web sitesinin bir görüntüsünü birliğe göndermek. Bununla ilgili biraz araştırma yaparak, bir android tuvalini bir bitmap'e kaydedebileceğimi ve ardından bir png'ye kodlayabileceğimi ve bu baytları Unity'ye gönderebileceğimi öğrendim, orada bu bayt dizisiyle yeni bir doku oluşturdum ve iyiyim. Birkaç saat daha hüsrana uğrayıp varlığımı sorguladıktan sonra…

Sonunda işe yaradı.

Şimdi bir web sitesinden ekran görüntüsü alabiliyorum, o halde arcore ile nasıl çalıştığını görelim…

Öyle değil.

Demek istediğim, en yeni telefon olmayan bir galaxy s7 kullanıyorum, ancak bu WebView özelliği hala tüm uygulamayı donduruyor ve temelde kullanılamaz durumda. Bunun WebView ve ARCore'un ana iş parçacığını aşırı yüklemesinden kaynaklandığını varsayıyorum ama gerçekten bilmiyorum. Çizim tahtasına geri dön. Bu işi yapmak istiyorsak, bir tür sunucuya ağır yükleri kaldırmamız gerekecek. Biraz Googling yaptıktan sonra, komut dosyası yazılabilir bir başsız tarayıcı olan Phantom JS kullanan WebShot adlı Node.js kitaplığına sahip bir web sitesinin ekran görüntüsünü alabileceğiniz ortaya çıktı.

Adım 6: Sonunda Bir Yere Geliyoruz

Şimdi Node.js'yi nasıl kullanacağımı bulmam gerekiyor….

Belli bir bağlantı noktası numarasını dinleyen bir Node.js betiği oluşturabileceğiniz ve bu bağlantı noktasında isabet aldığında bazı bilgileri döndürebileceği ortaya çıktı. Bunu port 3000'de dinleyen küçük bir merhaba dünya scripti oluşturarak test edebiliriz. script ile dizine cd girebilir ve node ve ardından script adını yaparak çalıştırabiliriz. IP adresimize ve ardından tarayıcımızda 3000 numaralı bağlantı noktasına gidersek, merhaba dünyaya döndüğünü görebiliriz. Artık düğüm üzerinde küçük bir kavrayışa sahip olduğum için, hawkhost.com olan web sitelerimi barındırdığım sunucumda çalışmasını sağlayabilirim. Sunucuma SSH yapıyorum ve birkaç merhaba dünya node.js betiği çalıştırmayı deniyorum… ve hiçbir şey çalışmıyor. Birkaç saat daha uğraştıktan sonra, belirli barındırma sunucumun kullanıma açık yalnızca iki bağlantı noktası olduğunu, yani 3000 ve 12001 olduğunu öğrendim.

Bu bağlantı noktalarını ve barındırma sunucularımın IP'sini kullanarak, merhaba dünya örneğini çalıştırabilirim. Sonra WebShot modülünü kuruyorum ve bir URL iletebileceğim küçük bir komut dosyası oluşturuyorum ve bu bana o web adresindeki web sitesinin bir görüntüsünü döndürecek. Şimdi bu düğüm komut dosyasını başlatabilir ve Unity'den sunucumun belirli IP ve bağlantı noktası numarasına bir http POST isteği gönderebilirim, bu bana o web sitesinin görüntüsü olan bir bayt dizisi döndürecek. Şimdi başka bir sorun, terminalimi kapattığımda işlem bitiyor ve dinlemeyi bırakıyor. Biraz daha araştırma yapıyorum ve sonsuza kadar adlı bir modül buluyorum. NPM sonsuza kadar yüklenir ve şimdi sonsuza kadar gidebilir ve komut dosyasını sonsuza kadar başlatabilirim ve oturum açıp tekrar durdurana kadar çalışmaya devam edecek.

Adım 7: Çalışıyor

Harika. Ama yeterince havalı değil.

AR'de web'de gezinmenin değerini düşündüğümde, alan eklenmesinden geliyor. Artık tek bir ekranla sınırlı değiliz, bu yüzden arama izimi tam önümde görselleştirmeme izin veren bir şey yapmak istiyorum. Öyleyse ilk arama sayfasını yükleyelim ve ardından o sayfayı tarayalım ve her arama sonucunu bir bağlantı olarak çıkaralım, ardından ana ekranımızın üzerine resim olarak yükleyebiliriz. Bunu, Google sonuçlarının ilk sayfasını kazıyan ve sonsuza kadar sürekli çalıştıran başka bir Node.js betiği ile yapabiliriz. Bu, Google arama API'sı ile çok daha verimli bir şekilde yapılabilir, ancak bu projenin ikinci kuralı ücretli API'ler değildi, bu yüzden şimdilik böyle yapacağız. Artık her bağlantı için resimlere sahip olduğumuza göre, onları her tıkladığımızda daha büyük bir ekrana yükleyebiliriz ve patlar, burada güzel bir küçük tarayıcımız var. Tam olarak işlevsel değil ama alacağım. Pekala, bu projeyi kendiniz yürütmek istiyorsanız Github'uma gidin ve expressVPN projesini indirin:

github.com/MatthewHallberg/ARBrowserExpres…

Adım 8: Her Şeyi Çalıştırmak

Unity'de açın ve her şeyin makinenizde yerel olarak çalışmasını sağlayalım. Öncelikle makinenizin IP adresini bulmanız gerekir, bu nedenle mac kullanıyorsanız sadece seçeneği basılı tutun ve IP'nizi ortaya çıkarmak için wifi sembolüne tıklayın.

Birliğe geri dönün ve tarayıcı denetleyici komut dosyasını açın ve IP adresinizi oraya girin ve panonuza kopyalayın. nodeScripts klasörünü bulun ve masaüstünüze koyun, klasörü açın ve her iki uzantıyı da.js olarak değiştirin. Her komut dosyasını açın ve IP adresini IP'nize değiştirin. Şimdi terminali açın ve bazı şeyleri yüklememiz gerekiyor. Henüz sahip değilseniz HomeBrew'u yükleyin.

-brew yükleme düğümü

-npm web görüntüsünü yükle

-npm kurulum düzlüğü

-npm kurulum birliği

-npm Cheerio'yu kurun

Şimdi her iki betiği de başlatabiliriz, böylece cd nodescripts klasörüne girebilir ve getimage.js düğümünü yapabiliriz. Ardından yeni bir terminal penceresi açıp getlinks.js düğümünü yapabiliriz. Her iki terminal penceresini de çalışır durumda bırakın ve düzenleyiciye geri dönün. Oynat'a basarsak her şey yolunda gitmeli. Ayrıca dosyaya gidebilir, ayarları oluşturabilir ve telefonumuza almak için oluştur ve çalıştır'a basabiliriz! Sunucuları durdurmak istiyorsanız, tüm terminali kapatmak için c kontrolüne veya q komutuna basmanız yeterlidir.

BU KADAR!