דפדפן אינטרנט מציאות רבודה: 9 שלבים

2024 מְחַבֵּר: John Day | [email protected]. שונה לאחרונה: 2024-01-30 09:15

היום אנו הולכים להכין דפדפן אינטרנט מציאות רבודה עבור אנדרואיד.

הרעיון הזה התחיל כאשר ExpressVPN ביקש ממני לעשות סרטון YouTube ממומן. מכיוון שזהו הראשון שלי, רציתי לעשות משהו שרלוונטי למוצר שלהם. די מייד חשבתי, אה פשוט אעשה דפדפן אינטרנט של מציאות רבודה כדי שנוכל לגלוש באינטרנט ב- AR ב- VPN. זה לא יכול להיות כל כך קשה, נכון? שגוי. הצבתי לעצמי כמה מגבלות לפרויקט הזה כיוון שרציתי להשתמש בו כדי ללמוד כמה דברים חדשים.

מספר אחת רציתי שזה יהיה עבור אנדרואיד כי אני תמיד עושה דברים עם IOS.

מספר שתיים לא רציתי להשתמש בשום API בתשלום, רציתי שכולם יוכלו פשוט להוריד את הפרויקט הזה ולהריץ אותו מבלי לשלם על דברים ברשת. אז אין IBM ווטסון, אין Google API, ושום דבר מחנות Unity Asset.

בואו נתחיל!

שלב 1: דבר ראשון

הדבר הראשון שרציתי להתחיל לעבוד הוא פתרון טוב לדיבור לטקסט כדי שנוכל לבצע את החיפושים המקוונים באמצעות הקול שלנו. אני גם חושב שקול היא שיטה מצוינת לאינטראקציה ב- AR, לפחות עד שיהיה לנו פתרון טוב למעקב אחר ידיים. אני יודע שלאנדרואיד יש פונקציונליות של שפת אם לטקסט, כך שחיפוש מהיר בגוגל יעזור לנו למצוא כמה תוספים ל- Unity.

לראשונה נתקלתי בתוסף הזה לאחדות:

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

ניסיתי את זה וזה עבד מצוין. הבעיה היחידה הייתה שכאשר אתה משתמש בו עם ARCore הוא יוצר תיבת קופץ מקורית ונראה שמדובר ברקע של אחדות ובסופו של דבר אתה מאבד מעקב.

זה היה פחות מאידיאלי.

שלב 2: העברת דיבור לטקסט עבור Android

אז התחלתי לחפש כמה תוספים שלא העלו את תיבת הקופץ המקורית ולא הצלחתי למצוא הרבה אבל בסופו של דבר מצאתי את ספריית האנדרואיד הזו:

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

עכשיו אני ממש לא יודע כלום על פיתוח אנדרואיד יליד אבל רציתי לאתגר את עצמי אז חשבתי שאנסה לכתוב קוד גשר לספרייה הזו ולהפוך אותו לתוסף אנדרואיד לשימוש ב- Unity. שוב, זו הייתה טעות והובלה לשעות של תסכול.

ואז סוף סוף זה עבד…

שלב 3: לקחים

אז יש שני דברים שלמדתי בתהליך זה, שלא ניכרים מיד מעצם חיפוש בגוגל כיצד להכין תוסף לאנדרואיד לאחדות.

מספר אחד הוא שכנראה תצטרך לקבל התייחסות להקשר האפליקציה של Android אם התוסף שלך יעשה משהו מעניין. תוכל לעשות זאת על ידי הוספת קובץ class.jar מהתקנת Unity שלך לפרויקט Android שלך כספרייה. אז עבור אל מבנה פרויקט הקבצים ולאחר מכן בחר בכרטיסייה התלות של מודול האפליקציה. כאן תוכל ללחוץ על כפתור הפלוס כדי להוסיף את קובץ ה- jar. עבור אל בניית Unity שלך, מנועי השמעה, Androidplayer, וריאציות, מונו, פיתוח, שיעורים ולבסוף class.jar. שנה את ההיקף לקומפילה בלבד. כעת, בקובץ java חדש אתה יכול לעשות:

UnityPlayer.currentActivity.getApplicationContext ();

והשתמש בהפניה הזו בכל מקום שתזדקק לה.

הבעיה המוזרה הבאה היא שניתן להפעיל פונקציונליות קולית זו רק בשרשור הראשי, אחרת תקבל שגיאות. על מנת לעשות זאת ב- Unity עליך לספר לפונקציות ולתוסף לפעול ב- Thread UI כ- AndroidJavaRunnable כמו בתמונה למעלה.

שלב 4: מאבקים

בשלב זה אני חושב שאני מומחה לאנדרואיד, אני מגיש מועמדות מקוונת למשרות אנדרואיד, אני מזמין מדבקות וחולצות אנדרואיד. החיים טובים. כעת אני מוכן להמשיך ולברר כיצד לעבד דף אינטרנט ב- Unity. לאחר שעשיתי קצת מחקר אני רואה שהפתרון המקובל הוא שימוש ב- Android WebView. זוהי רק שיעור אנדרואיד המאפשר לך להציג אתרים הניתנים לפעולה בתוך אפליקציית אנדרואיד מבלי לטעון הכל בדפדפן. ביסודו של דבר, זה כדי שתוכל להשאיר משתמשים באפליקציה שלך. סדר העסקים הראשון הוא לבדוק אם מישהו יצר תוסף אחדות עבור קוד פתוח זה. אני מנסה לראשונה את התוסף הזה:

github.com/gree/unity-webview

אבל זה רק מעביר WebView לשכבת Unity GUI כך שזה לא יעבוד. ואז אני מוצא את התוסף הזה ל- VR:

github.com/IanPhilips/UnityAndroidVRBrowse…

זה מאפשר לך לעבד WebView למרקם ואפילו אינטראקציה שלו, וזה נהדר. חשבתי שזו התשובה עד שניסיתי את זה וגיליתי שזה חוסם את כל הקליקים שלי מאחדות.

שלב 5: חזרה ללוח השרטוט

אני רק אנסה להפעיל את הפלאגין שלי בשביל זה, כי כל מה שאני באמת צריך זה לשלוח תמונה של האתר לאחדות. לאחר שעשיתי מחקר בנושא, אני מגלה שאני יכול לשמור קנבס של אנדרואיד במפת סיביות ואז לקודד אותו ל--p.webp

סוף סוף זה עבד.

אז עכשיו אני יכול לקבל צילום מסך מאתר אינטרנט, אז בואו נראה איך זה עובד עם ארקור …

זה לא.

כלומר, אני משתמש ב- Galaxy S7 שהוא לא הטלפון החדש ביותר, אבל החומר הזה ב- WebView עדיין מקפיא את כל האפליקציה ובעצם אינו שמיש. אני מניח שזה בגלל ש- WebView ו- ARCore מעמיסים שניהם על החוט הראשי אבל אני לא ממש יודע. בחזרה ללוח הציור. אם נרצה לגרום לזה לעבוד, נצטרך להוריד את ההרמה הכבדה לאיזה שרת. לאחר שעשית קצת גוגל מסתבר שאתה יכול לצלם צילום מסך של אתר עם ספרייה עבור Node.js בשם WebShot המשתמש Phantom JS שהוא דפדפן נטול ראש.

שלב 6: סוף סוף אנחנו מגיעים לאיזשהו מקום

עכשיו אני צריך להבין איך לעזאזל להשתמש ב- Node.js …

מסתבר שאתה יכול ליצור סקריפט Node.js שמאזין למספר יציאה מסוים וכאשר הוא יכה אותו ביציאה זו הוא יכול להחזיר קצת מידע. אנחנו יכולים לבדוק את זה על ידי יצירת סקריפט עולם שלום קטן שמאזין ליציאה 3000. אנחנו יכולים להכניס לספרייה עם הסקריפט ולהריץ אותו על ידי ביצוע צומת ולאחר מכן את שם התסריט. אם ניווט לכתובת ה- IP שלנו ולאחר מכן נצא 3000 בדפדפן שלנו נוכל לראות אותה מחזירה שלום עולם. עכשיו כשיש לי הבנה קטנה על הצומת אני יכול לגרום לזה לעבוד על השרת שלי שאני מארח את אתרי שבו הוא hawkhost.com. אני נכנסת לשרת שלי ומנסה להריץ כמה סקריפטים של node.js בעולם שלום … ושום דבר לא עובד. לאחר עוד כמה שעות של הסתבכויות אני מגלה כי לשרת האחסון המסוים שלי יש רק שתי יציאות פתוחות לשימוש, כלומר 3000 ו 12001.

אז באמצעות יציאות אלה ו- IP של שרתי האחסון שלי אני יכול לקבל דוגמא עולמית לשלום עובדת. לאחר מכן אני מתקין את מודול WebShot ויוצר סקריפט קטן שאוכל להעביר כתובת URL והוא יחזיר לי תמונה של האתר בכתובת האינטרנט הזו. עכשיו אני יכול להתחיל את סקריפט הצומת הזה ולשלוח בקשת http POST מאוניטי למספר ה- IP ולמספר היציאה של השרת שלי שיחזיר לי מערך בתים שהוא התמונה של אותו אתר. תודה לאל. עכשיו בעיה נוספת היא כשאני סוגר את הטרמינל שלי התהליך מסתיים ומפסיק להאזין. אני עושה עוד מחקר ומוצא מודול שנקרא לנצח. NPM להתקין לנצח ועכשיו אני יכול לנווט לנצח ולעשות לנצח את התסריט וזה ימשיך לפעול עד שאכנס ואעצור אותו שוב.

שלב 7: זה עובד

גדול. אבל זה לא מספיק מגניב.

כשאני חושב על ערך הגלישה באינטרנט ב- AR זה נובע מתוספת שטח. אנחנו כבר לא מוגבלים למסך אחד ולכן אני רוצה ליצור משהו שמאפשר לי לדמיין את שובל החיפוש שלי מולי. אז בואו נטען את דף החיפוש הראשון ואז נסרוק את הדף ונחלץ כל תוצאת חיפוש כקישור, שאנו יכולים לטעון כתמונה מעל המסך הראשי שלנו. אנו יכולים לעשות זאת בעזרת סקריפט אחר של Node.js המגרד את העמוד הראשון של תוצאות Google ומריץ אותו ברציפות לנצח. ניתן היה לעשות זאת בצורה יעילה הרבה יותר עם ממשק ה- API של חיפוש Google, אך חוק מספר 2 לפרויקט זה לא היה ממשק API בתשלום ולכן, אנו הולכים לעשות זאת כך לעת עתה. כעת, כשיש לנו את התמונות לכל קישור, נוכל לטעון אותן על מסך גדול יותר בכל פעם שנלחץ עליהן ובום, יש לנו כאן דפדפן קטן ונחמד. זה לא מתפקד במלואו אבל אני אקח את זה. בסדר, אז אם אתה רוצה להריץ את הפרויקט הזה בעצמך עבור אל Github שלי והורד את פרויקט expressVPN:

github.com/MatthewHallberg/ARBrowserExpres…

שלב 8: לגרום להכל לעבוד

פתח אותו ב- Unity ובואו נפעיל הכל במחשב שלך באופן מקומי. ראשית עליך למצוא את כתובת ה- IP של המכונה שלך, כך שאם אתה נמצא ב- mac, החזק את האפשרות ולחץ על סמל ה- wifi כדי לחשוף את ה- IP שלך.

חזור לאחדות ופתח את סקריפט בקר הדפדפן והכנס שם את כתובת ה- IP שלך והעתק אותה ללוח שלך. מצא את התיקייה nodeScripts והניח אותה על שולחן העבודה שלך, פתח את התיקיה ושנה את שתי הסיומות ל-.js. פתח כל סקריפט ושנה את כתובת ה- IP שלך ל- IP שלך. עכשיו פתח מסוף ועלינו להתקין כמה דברים. התקן את HomeBrew אם אין לך אותו עדיין.

צומת התקנה מבושלת

-npm להתקין את צילום האינטרנט

-npm התקנה flatiron

-npm להתקין איגוד

-npm להתקין cheerio

עכשיו נוכל להפעיל את שני הסקריפטים אז תקליטור בתיקיית nodescripts ולעשות צומת getimage.js ואז לפתוח חלון מסוף חדש ולעשות צומת getlinks.js השאר את שני חלונות הטרמינל פועלים וחזור לעורך. אם נלחץ על play הכל אמור לעבוד בסדר. אנחנו יכולים גם ללכת לקובץ, לבנות הגדרות וללחוץ על build and run כדי לקבל אותו בטלפון שלנו! אם אתה רוצה לעצור את השרתים פשוט לחץ על שליטה c או פקודה q כדי לסגור את כל הטרמינל.

זהו זה!