เว็บเบราว์เซอร์ Augmented Reality: 9 ขั้นตอน

2024 ผู้เขียน: John Day | [email protected]. แก้ไขล่าสุด: 2024-01-30 13:06

วันนี้เราจะมาทำเว็บเบราว์เซอร์ Augmented Reality สำหรับ Android

แนวคิดนี้เริ่มต้นเมื่อ ExpressVPN ขอให้ฉันทำวิดีโอ YouTube ที่ได้รับการสนับสนุน เนื่องจากนี่เป็นครั้งแรกของฉัน ฉันจึงอยากทำอะไรบางอย่างที่เกี่ยวข้องกับผลิตภัณฑ์ของพวกเขา แทบจะในทันทีที่ฉันคิดว่า โอ้ ฉันจะสร้างเว็บเบราว์เซอร์เสมือนจริง เพื่อให้เราสามารถท่องเว็บใน AR บน VPN ได้ มันคงไม่ยากขนาดนั้นใช่ไหม? ผิด. ฉันตั้งข้อ จำกัด บางประการสำหรับโครงการนี้เพราะฉันต้องการใช้มันเพื่อเรียนรู้สิ่งใหม่

อันดับหนึ่งที่ฉันอยากให้มันเป็นสำหรับ Android เพราะฉันทำสิ่งต่าง ๆ กับ IOS เสมอ

ข้อที่สอง ฉันไม่ต้องการใช้ API แบบชำระเงินใดๆ ฉันต้องการให้ทุกคนสามารถดาวน์โหลดโปรเจ็กต์นี้และเรียกใช้โดยไม่ต้องเสียค่าใช้จ่ายใดๆ ทางออนไลน์ ดังนั้นจึงไม่มี IBM Watson ไม่มี Google API และไม่มีอะไรจากร้าน Unity Asset

มาเริ่มกันเลย!

ขั้นตอนที่ 1: สิ่งแรกก่อน

สิ่งแรกที่ฉันต้องการจะทำงานคือวิธีแก้ปัญหาที่ดีในการพูดเป็นข้อความ เพื่อให้เราสามารถทำการค้นหาออนไลน์ด้วยเสียงของเรา นอกจากนี้ ฉันคิดว่าเสียงเป็นวิธีการโต้ตอบที่ยอดเยี่ยมใน AR อย่างน้อยก็จนกว่าเราจะมีโซลูชันการติดตามมือที่ดี ฉันรู้ว่า Android มีฟังก์ชันคำพูดเป็นภาษาแม่สำหรับข้อความ ดังนั้นการค้นหาโดย Google อย่างรวดเร็วจะช่วยให้เราค้นหาปลั๊กอินสำหรับ Unity ได้

ครั้งแรกที่ฉันมาที่ปลั๊กอินนี้เพื่อความสามัคคี:

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

ฉันลองสิ่งนี้และใช้งานได้ดี ปัญหาเดียวคือเมื่อคุณใช้กับ ARCore มันจะสร้างกล่องป๊อปอัปดั้งเดิมและดูเหมือนว่าจะเป็นพื้นหลังของ Unity และคุณจะสูญเสียการติดตาม

นี่น้อยกว่าอุดมคติ

ขั้นตอนที่ 2: การรับเสียงพูดเป็นข้อความสำหรับ Android

ดังนั้นฉันจึงเริ่มค้นหาปลั๊กอินบางตัวที่ไม่ได้เปิดกล่องป๊อปอัปดั้งเดิมและไม่พบมากนัก แต่สุดท้ายฉันก็พบห้องสมุด Android นี้:

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

ตอนนี้ฉันไม่รู้อะไรเลยเกี่ยวกับการพัฒนา Android แบบเนทีฟ แต่ฉันต้องการที่จะท้าทายตัวเอง ดังนั้นฉันคิดว่าฉันจะลองเขียนโค้ดบริดจ์สำหรับไลบรารีนี้และเปลี่ยนเป็นปลั๊กอิน Android สำหรับใช้ใน Unity อีกครั้ง นี่เป็นความผิดพลาดและนำไปสู่ ถึงชั่วโมงแห่งความหงุดหงิด

แล้วในที่สุดก็ได้ผล…

ขั้นตอนที่ 3: บทเรียนที่ได้รับ

มีสองสิ่งที่ฉันเรียนรู้ในกระบวนการนี้ซึ่งไม่ชัดเจนในทันทีจากการเพียงแค่ googling วิธีสร้างปลั๊กอิน Android เพื่อความสามัคคี

อันดับแรก คุณอาจต้องอ้างอิงบริบทของแอป Android หากปลั๊กอินของคุณจะทำอะไรที่น่าสนใจ คุณสามารถทำได้โดยเพิ่มไฟล์ class.jar จากการติดตั้ง Unity ลงในโปรเจ็กต์ Android ของคุณเป็นไลบรารี ไปที่โครงสร้างไฟล์โครงการแล้วเลือกแท็บการพึ่งพาสำหรับโมดูลแอป ที่นี่คุณสามารถคลิกปุ่มบวกเพื่อเพิ่มไฟล์ jar ไปที่บิลด์ Unity, เอ็นจิ้นการเล่น, androidplayer, ตัวแปร, โมโน, การพัฒนา, คลาส และสุดท้ายคือคลาส.jar เปลี่ยนขอบเขตให้คอมไพล์เท่านั้น ในไฟล์ java ใหม่ คุณสามารถทำได้:

UnityPlayer.currentActivity.getApplicationContext();

และใช้ข้อมูลอ้างอิงนั้นได้ทุกที่ที่คุณต้องการ

ปัญหาแปลกๆ ต่อไปคือ ฟังก์ชันเสียงนี้สามารถเรียกใช้ได้บนเธรดหลักเท่านั้น มิฉะนั้น คุณจะได้รับข้อผิดพลาด ในการทำสิ่งนี้ใน Unity คุณต้องบอกฟังก์ชั่นและปลั๊กอินให้ทำงานบน UI Thread เป็น AndroidJavaRunnable เหมือนภาพด้านบน

ขั้นตอนที่ 4: การต่อสู้

ณ จุดนี้ฉันคิดว่าฉันเป็นผู้เชี่ยวชาญ Android

ฉันกำลังสมัครงาน Android dev กำลังสั่งซื้อสติ๊กเกอร์และเสื้อยืด Android ชีวิตเป็นสิ่งที่ดี. ตอนนี้ฉันพร้อมแล้วที่จะหาวิธีแสดงผลหน้าเว็บใน Unity หลังจากทำการค้นคว้าเล็กน้อย ฉันเห็นว่าวิธีแก้ปัญหาที่ยอมรับคือการใช้ Android WebView นี่เป็นเพียงคลาส Android ที่ให้คุณแสดงผลเว็บไซต์ที่สามารถโต้ตอบได้ภายในแอพ Android โดยไม่ต้องโหลดทุกอย่างในเบราว์เซอร์ โดยพื้นฐานแล้ว คุณสามารถเก็บผู้ใช้ไว้ในแอปของคุณได้ ลำดับแรกของธุรกิจคือการดูว่ามีใครทำปลั๊กอิน unity สำหรับสิ่งนี้ที่เป็นโอเพ่นซอร์สหรือไม่ ฉันลองใช้ปลั๊กอินนี้ก่อน:

github.com/gree/unity-webview

แต่มันแสดงผล WebView ไปยังเลเยอร์ Unity GUI เท่านั้นจึงจะไม่ทำงาน จากนั้นฉันก็พบปลั๊กอินนี้สำหรับ VR:

github.com/IanPhilips/UnityAndroidVRBrowse…

สิ่งนี้ช่วยให้คุณแสดง WebView เป็นพื้นผิวและสามารถโต้ตอบได้ ซึ่งเยี่ยมมาก ฉันคิดว่านี่เป็นคำตอบจนกว่าฉันจะลองและพบว่ากำลังบล็อกการคลิกทั้งหมดของฉันจากความสามัคคี

ขั้นตอนที่ 5: กลับไปที่กระดานวาดภาพ

ฉันแค่จะพยายามสร้างปลั๊กอินสำหรับสิ่งนี้ เพราะทั้งหมดที่ฉันต้องการคือส่งรูปภาพของเว็บไซต์สู่ความสามัคคี จากการค้นคว้าเกี่ยวกับเรื่องนั้น ฉันพบว่าฉันสามารถบันทึกผืนผ้าใบ Android ลงในบิตแมปแล้วเข้ารหัสเป็น-p.webp

ในที่สุดก็ทำงาน

ตอนนี้ฉันได้ภาพหน้าจอจากเว็บไซต์แล้ว มาดูกันว่ามันทำงานอย่างไรกับ arcore…

มันไม่ได้

ฉันหมายถึงฉันกำลังใช้ galaxy s7 ซึ่งไม่ใช่โทรศัพท์รุ่นใหม่ล่าสุด แต่เนื้อหา WebView นี้ยังคงค้างทั้งแอปและไม่สามารถใช้งานได้โดยทั่วไป ฉันคิดว่าเป็นเพราะ WebView และ ARCore ใช้งานเธรดหลักมากเกินไป แต่ฉันไม่รู้จริงๆ กลับไปที่กระดานวาดภาพ หากเราต้องการทำให้สิ่งนี้สำเร็จ เราจะต้องยกเลิกการยกของหนักไปยังเซิร์ฟเวอร์บางประเภท หลังจากทำ Googling แล้ว ปรากฎว่าคุณสามารถจับภาพหน้าจอของเว็บไซต์ที่มีไลบรารีสำหรับ Node.js ที่เรียกว่า WebShot ที่ใช้ Phantom JS ซึ่งเป็นเบราว์เซอร์หัวขาดที่เขียนสคริปต์ได้

ขั้นตอนที่ 6: ในที่สุดเราก็มาถึงที่ใดที่หนึ่ง

ตอนนี้ฉันต้องคิดออกว่าจะใช้ Node.js ได้อย่างไร….

กลายเป็นว่าคุณสามารถสร้างสคริปต์ Node.js ที่รับฟังหมายเลขพอร์ตเฉพาะ และเมื่อได้รับการโจมตีบนพอร์ตนั้น จะสามารถส่งคืนข้อมูลบางอย่างได้ เราสามารถทดสอบสิ่งนี้ได้โดยการสร้างสคริปต์ Hello World ขนาดเล็กที่รับฟังบนพอร์ต 3000 เราสามารถ cd ลงในไดเร็กทอรีด้วยสคริปต์และเรียกใช้โดยทำโหนดแล้วตามด้วยชื่อสคริปต์ หากเรานำทางไปยังที่อยู่ IP ของเราแล้วพอร์ต 3000 ในเบราว์เซอร์ของเรา เราจะเห็นว่ามันกลับมาสวัสดีชาวโลก ตอนนี้ฉันมีความเข้าใจเล็กน้อยเกี่ยวกับโหนดแล้ว ฉันจึงสามารถทำให้มันทำงานบนเซิร์ฟเวอร์ของฉันได้ โดยที่ฉันโฮสต์เว็บไซต์ของฉันซึ่งก็คือ hawkhost.com ฉัน SSH เข้าสู่เซิร์ฟเวอร์ของฉันและพยายามเรียกใช้สคริปต์ node.js สวัสดีชาวโลกสองสามตัว…และไม่มีอะไรทำงาน หลังจากยุ่งวุ่นวายอีกสองสามชั่วโมง ฉันพบว่าเซิร์ฟเวอร์โฮสต์เฉพาะของฉันมีเพียงสองพอร์ตที่เปิดให้ใช้งาน นั่นคือ 3000 และ 12001

ดังนั้นการใช้พอร์ตเหล่านั้นและ IP ของเซิร์ฟเวอร์โฮสต์ของฉัน ฉันจะได้รับตัวอย่างสวัสดีชาวโลกที่ทำงาน ต่อไป ฉันติดตั้งโมดูล WebShot และสร้างสคริปต์ขนาดเล็กที่ฉันสามารถส่ง URL ได้ และจะส่งคืนรูปภาพของเว็บไซต์ตามที่อยู่เว็บนั้นให้ฉัน ตอนนี้ฉันสามารถเริ่มสคริปต์โหนดนั้นและส่งคำขอ http POST จาก Unity ไปยัง IP เฉพาะและหมายเลขพอร์ตของเซิร์ฟเวอร์ของฉัน ซึ่งจะส่งคืนอาร์เรย์ไบต์ที่เป็นภาพของเว็บไซต์นั้นให้ฉัน ขอบคุณพระเจ้า ตอนนี้ปัญหาอีกอย่างคือเมื่อฉันปิดเทอร์มินัล กระบวนการจะสิ้นสุดลงและหยุดฟัง ฉันค้นคว้าเพิ่มเติมและพบโมดูลที่เรียกว่าตลอดไป NPM ติดตั้งแบบถาวร และตอนนี้ฉันสามารถนำทางไปยังแบบถาวรและเริ่มสคริปต์ได้ตลอดไป และสคริปต์จะทำงานต่อไปจนกว่าฉันจะเข้าสู่ระบบและหยุดการทำงานอีกครั้ง

ขั้นตอนที่ 7: ใช้งานได้

ยอดเยี่ยม. แต่มันไม่เจ๋งพอ

เมื่อฉันคิดถึงคุณค่าของการท่องเว็บใน AR มันมาจากการเพิ่มพื้นที่ เราไม่ได้ถูกจำกัดอยู่แค่หน้าจอเดียวอีกต่อไป ดังนั้นฉันจึงต้องการสร้างบางสิ่งที่ทำให้ฉันเห็นภาพเส้นทางการค้นหาที่อยู่ตรงหน้าฉัน ให้โหลดหน้าการค้นหาแรกนั้นแล้วรวบรวมข้อมูลหน้านั้นและแยกผลการค้นหาทั้งหมดเป็นลิงก์ ซึ่งเราสามารถโหลดเป็นรูปภาพเหนือหน้าจอหลักของเราได้ เราสามารถทำได้ด้วยสคริปต์ Node.js อื่นที่ขูดหน้าแรกของผลลัพธ์ของ Google และเรียกใช้อย่างต่อเนื่องตลอดไป สิ่งนี้สามารถทำได้อย่างมีประสิทธิภาพมากขึ้นด้วย Google Search API แต่กฎข้อที่สองสำหรับโปรเจ็กต์นี้ไม่ใช่ API แบบชำระเงิน ดังนั้นเราจะทำสิ่งนี้ในตอนนี้ ตอนนี้เรามีรูปภาพสำหรับแต่ละลิงก์แล้ว เราสามารถโหลดมันบนหน้าจอที่ใหญ่ขึ้นทุกครั้งที่เราคลิกและบูม เรามีเบราว์เซอร์เล็กๆ ที่ดีที่นี่ มันใช้งานไม่ได้เต็มที่แต่ฉันจะรับไว้ เอาล่ะ ถ้าคุณต้องการรันโปรเจ็กต์นี้ด้วยตัวเอง ไปที่ Github ของฉัน และดาวน์โหลดโปรเจ็กต์ expressVPN:

github.com/MatthewHallberg/ARBrowserExpres…

ขั้นตอนที่ 8: ทำให้ทุกอย่างทำงานได้

เปิดใน Unity แล้วให้ทุกอย่างทำงานบนเครื่องของคุณ ก่อนอื่นคุณต้องค้นหาที่อยู่ IP ของเครื่องของคุณ ดังนั้นหากคุณใช้ Mac ให้กดตัวเลือกค้างไว้แล้วคลิกสัญลักษณ์ wifi เพื่อแสดง IP ของคุณ

กลับไปที่ความสามัคคีและเปิดสคริปต์ตัวควบคุมเบราว์เซอร์และใส่ที่อยู่ IP ของคุณที่นั่นแล้วคัดลอกไปยังคลิปบอร์ดของคุณ ค้นหาโฟลเดอร์ nodeScripts และวางไว้บนเดสก์ท็อป เปิดโฟลเดอร์และเปลี่ยนส่วนขยายทั้งสองเป็น.js เปิดแต่ละสคริปต์และเปลี่ยนที่อยู่ IP เป็น IP ของคุณ ตอนนี้เปิดเทอร์มินัลแล้วเราต้องติดตั้งบางสิ่ง ติดตั้ง HomeBrew หากคุณยังไม่มี

-brew ติดตั้งโหนด

-npm ติดตั้ง webshot

-npm ติดตั้ง flatiron

-npm ติดตั้งยูเนี่ยน

-npm ติดตั้ง Cheerio

ตอนนี้ เราสามารถเริ่มสคริปต์ทั้งสองดังนั้น cd ลงในโฟลเดอร์ nodescripts และทำ node getimage.js จากนั้นเปิดหน้าต่างเทอร์มินัลใหม่ และทำโหนด getlinks.js ปล่อยให้หน้าต่างเทอร์มินัลทั้งสองทำงานและกลับไปที่โปรแกรมแก้ไข หากเรากดเล่นทุกอย่างน่าจะทำงานได้ดี นอกจากนี้เรายังสามารถไปที่ไฟล์ สร้างการตั้งค่า และกดสร้างและเรียกใช้เพื่อรับมันบนโทรศัพท์ของเรา! หากคุณต้องการหยุดเซิร์ฟเวอร์เพียงแค่กด control c หรือ command q เพื่อปิดเทอร์มินัลทั้งหมด

แค่นั้นแหละ!