დამატებითი რეალობის ვებ ბრაუზერი: 9 ნაბიჯი

2024 ავტორი: John Day | [email protected]. ბოლოს შეცვლილი: 2024-01-30 10:19

დღეს ჩვენ გავაგრძელებთ Android– ისთვის დამატებითი ბრაუზერის შექმნას.

ეს იდეა მაშინ დაიწყო, როდესაც ExpressVPN– მა მთხოვა, რომ გამეკეთებინა სპონსორი YouTube ვიდეო. ვინაიდან ეს ჩემი პირველია, მინდოდა გამეკეთებინა ის, რაც მათ პროდუქტს ეხებოდა. საკმაოდ მაშინვე ვიფიქრე, ოჰ, მე უბრალოდ შევქმნი დამატებით რეალობის ვებ ბრაუზერს, რათა შევძლოთ ვებ – გვერდების დათვალიერება 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: გაკვეთილები

ამრიგად, მე ორი რამ ვისწავლე ამ პროცესში, რომელიც არ არის აშკარად შესწავლილი, თუ როგორ უნდა გავაკეთო Android მოდული ერთიანობისთვის.

ნომერ პირველი არის ის, რომ თქვენ ალბათ გჭირდებათ Android აპლიკაციის კონტექსტზე მითითების მიღება, თუ თქვენი მოდული აპირებს რაიმე საინტერესო გააკეთოს. ამის გაკეთება შეგიძლიათ დაამატოთ class.jar ფაილი თქვენი Unity ინსტალაციიდან თქვენს Android პროექტში, როგორც ბიბლიოთეკა. ასე რომ, გადადით ფაილის პროექტის სტრუქტურაზე და შემდეგ შეარჩიეთ დამოკიდებულების ჩანართი აპლიკაციის მოდულისთვის. აქ შეგიძლიათ დააჭიროთ პლიუს ღილაკს jar ფაილის დასამატებლად. გადადით თქვენი Unity build, აღწარმოების ძრავები, androidplayer, ვარიაციები, მონო, განვითარება, კლასები და ბოლოს კლასები. Jjar. შეცვალეთ სფერო მხოლოდ შედგენისთვის. ახლა, ახალ java ფაილში შეგიძლიათ გააკეთოთ:

UnityPlayer.currentActivity.getApplicationContext ();

და გამოიყენეთ ეს მითითება იქ, სადაც გჭირდებათ.

შემდეგი უცნაური საკითხია, რომ ხმის ეს ფუნქცია შეიძლება მხოლოდ მთავარ თემაში გაუშვათ, წინააღმდეგ შემთხვევაში შეცდომებს მიიღებთ. Unity– ში ამის გასაკეთებლად თქვენ უნდა გითხრათ ფუნქციები და მოდული გაშვებული UI Thread როგორც AndroidJavaRunnable როგორც ზემოთ სურათზე.

ნაბიჯი 4: იბრძვის

ამ ეტაპზე მე ვფიქრობ, რომ მე ვარ Android ექსპერტი, მე ვარ ონლაინ განაცხადის android dev სამუშაოების, მე შეკვეთით android სტიკერები და მაისურები. Ცხოვრება კარგია. ახლა მე მზად ვარ გადავიდე იმაზე, თუ როგორ უნდა გავაკეთო ვებ გვერდი Unity– ში. მცირე კვლევის გაკეთების შემდეგ მე ვხედავ, რომ მიღებული გამოსავალი არის Android WebView– ის გამოყენება. ეს არის მხოლოდ ანდროიდის კლასი, რომელიც საშუალებას გაძლევთ გაეცნოთ ვებსაიტებს, რომლებიც ურთიერთდაკავშირებულია Android აპლიკაციაში ბრაუზერში ყველაფრის ჩატვირთვის გარეშე. ძირითადად, ეს ასეა, რომ თქვენ შეგიძლიათ შეინახოთ მომხმარებლები თქვენს აპლიკაციაში. ბიზნესის პირველი რიგი იმაში მდგომარეობს იმაში, რომ ვინმეს გაუკეთებია ერთიანობის მოდული, რომელიც ღია წყაროა. პირველად ვცდი ამ მოდულს:

github.com/gree/unity-webview

მაგრამ ის მხოლოდ WebView- ს ხდის Unity GUI ფენაში, ასე რომ ის არ იმუშავებს. შემდეგ ვპოულობ ამ მოდულს VR– სთვის:

github.com/IanPhilips/UnityAndroidVR დაათვალიერეთ ……

ეს გაძლევთ საშუალებას WebView გახადოთ ტექსტურა და მისი ურთიერთქმედებაც, რაც მშვენიერია. ვფიქრობდი, რომ ეს იყო პასუხი სანამ არ შევეცადე და აღმოვაჩინე, რომ ის ბლოკავს ჩემს ყველა დაწკაპუნებას ერთიანობისგან.

ნაბიჯი 5: ხატვის დაფაზე დაბრუნება

მე უბრალოდ შევეცდები ამის მოდული გამოვიყენო, რადგან ყველაფერი რაც მე მჭირდება არის ვებსაიტის სურათის გაგზავნა ერთიანობისთვის. ამის შესწავლისას, აღმოვაჩინე, რომ შემიძლია ანდროიდის ტილო შევინახო ბიტმაპზე და შემდეგ დავშიფრო png– ში და უბრალოდ გავაგზავნო ეს ბაიტები Unity– ში, იქ შეიქმნება ახალი ტექსტურა ბაიტების მასივით და მე კარგად ვარ. კიდევ რამდენიმე საათის იმედგაცრუების და ჩემი არსებობის კითხვის ნიშნის ქვეშ …

საბოლოოდ იმუშავა.

ახლა მე ვიღებ ეკრანის სურათს ვებგვერდიდან, ასე რომ ვნახოთ როგორ მუშაობს იგი arcore– ით…

ეს არ არის.

ვგულისხმობ იმას, რომ მე ვიყენებ galaxy s7- ს, რომელიც არ არის უახლესი ტელეფონი, მაგრამ ეს WebView პერსონალი მაინც ყინავს მთელ პროგრამას და ძირითადად გამოუსადეგარია. მე ვთვლი, რომ ეს იმიტომ ხდება, რომ WebView და ARCore ორივე გადატვირთავს მთავარ თემას, მაგრამ მე ნამდვილად არ ვიცი. დავუბრუნდეთ ხატვის დაფას. თუ ჩვენ გვსურს ამის გაკეთება, ჩვენ მოგვიწევს მძიმე ტვირთის გადატვირთვა რაიმე სახის სერვერზე. გუგლის გაკეთების შემდეგ აღმოჩნდება, რომ შეგიძლიათ გადაიღოთ ვებსაიტის ეკრანის ანაბეჭდი ბიბლიოთეკით Node.js- სთვის, რომელსაც ეწოდება WebShot, რომელიც იყენებს Phantom JS- ს, რომელიც არის სკრიპტირებადი უსათაურო ბრაუზერი.

ნაბიჯი 6: საბოლოოდ ჩვენ სადღაც მივდივართ

ახლა მე უნდა გავარკვიო, ჯანდაბა როგორ გამოვიყენო Node.js….

გამოდის, რომ თქვენ შეგიძლიათ შექმნათ Node.js სკრიპტი, რომელიც უსმენს კონკრეტულ პორტის ნომერს და როდესაც ის მოხვდება ამ პორტზე მას შეუძლია დააბრუნოს გარკვეული ინფორმაცია. ჩვენ შეგვიძლია გამოვცადოთ ეს პატარა გამარჯვების მსოფლიო დამწერლობის შექმნით, რომელიც უსმენს პორტს 3000. ჩვენ შეგვიძლია შევიტანოთ cd დირექტორიაში სკრიპტით და გავუშვათ კვანძის და შემდეგ სკრიპტის სახელის გამოყენებით. თუ ჩვენ მივდივართ ჩვენს IP მისამართზე და შემდეგ პორტს 3000 ჩვენს ბრაუზერში ვნახავთ, რომ ის ბრუნდება გამარჯობა მსოფლიოში. ახლა, როდესაც მე მაქვს მცირედი ცოდნა კვანძზე, შემიძლია ვიმუშაო ის ჩემს სერვერზე, სადაც ვმასპინძლობ ჩემს ვებსაიტებს, სადაც არის hawkhost.com. მე SSH ჩემს სერვერზე და ვცდილობ გაუშვა რამდენიმე hello world node.js სკრიპტები … და არაფერი მუშაობს. კიდევ რამდენიმე საათის არეულობის შემდეგ აღმოვაჩინე, რომ ჩემს კონკრეტულ ჰოსტინგის სერვერს აქვს მხოლოდ ორი პორტი გამოსაყენებლად, ეს არის 3000 და 12001.

ამ პორტებისა და ჩემი ჰოსტინგის სერვერების IP- ის გამოყენებით შემიძლია მივიღო გამარჯვების მსოფლიო მაგალითი. შემდეგ ვაინსტალირებ WebShot მოდულს და ვქმნი პატარა სკრიპტს, რომლითაც შემიძლია URL- ს გადაცემა და ის დამიბრუნებს ვებ – გვერდის სურათს იმ ვებ მისამართზე. ახლა შემიძლია დავიწყო ის კვანძის სკრიპტი და გავაგზავნო http POST მოთხოვნა Unity– დან ჩემი სერვერის კონკრეტულ IP– სა და პორტის ნომერზე, რომელიც დამიბრუნებს ბაიტის მასივს, რომელიც არის ამ ვებგვერდის სურათი. მადლობა ღმერთს. ახლა სხვა პრობლემაა, როდესაც ვხურავ ტერმინალს, პროცესი მთავრდება და ვწყვეტ მოსმენას. მე კიდევ რამდენიმე კვლევას ვაკეთებ და ვპოულობ მოდულს, რომელსაც სამუდამოდ ჰქვია. NPM ინსტალაცია სამუდამოდ და ახლა შემიძლია ნავიგაცია სამუდამოდ და სამუდამოდ დავიწყო სკრიპტი და ის გააგრძელებს მუშაობას სანამ არ შეხვალ და არ შევაჩერებ მას.

ნაბიჯი 7: მუშაობს

დიდი მაგრამ ეს არ არის საკმარისად მაგარი.

როდესაც ვფიქრობ ვებ – გვერდების დათვალიერებაზე AR– ში, ეს ხდება სივრცის დამატებით. ჩვენ აღარ ვართ შემოსაზღვრულნი ერთ ეკრანზე, ამიტომ მინდა გავაკეთო ისეთი რამ, რაც მომცემს საშუალებას ვიზუალიზებ ჩემს საძიებო ბილიკს ჩემს წინ. მოდით ჩავტვირთოთ ის პირველი საძიებო გვერდი და შემდეგ ჩავწეროთ ეს გვერდი და გამოვიღოთ ძიების ყველა შედეგი ბმულის სახით, რომელიც შემდეგ შეგვიძლია ჩავტვირთოთ როგორც გამოსახულება ჩვენს მთავარ ეკრანზე ზემოთ. ჩვენ შეგვიძლია ამის გაკეთება სხვა Node.js სკრიპტით, რომელიც აფუჭებს Google– ის შედეგების პირველ გვერდს და განუწყვეტლივ აწარმოებს მას სამუდამოდ. ეს შეიძლება ბევრად უფრო ეფექტურად გაკეთდეს Google საძიებო API– ით, მაგრამ ამ პროექტის წესი მეორე არ იყო ფასიანი API, ასე რომ, ჩვენ ამას ახლავე გავაკეთებთ. ახლა, როდესაც ჩვენ გვაქვს სურათები თითოეული ბმულისთვის, შეგვიძლია ჩავტვირთოთ ისინი უფრო დიდ ეკრანზე ყოველ ჯერზე, როდესაც მათ ვაწკაპუნებთ და ვხუმრობთ, ჩვენ გვაქვს ლამაზი პატარა ბრაუზერი. ის სრულად არ ფუნქციონირებს, მაგრამ მე მას ავიღებ. კარგი, თუ თქვენ გსურთ ამ პროექტის გაშვება, გადადით ჩემს Github– ში და ჩამოტვირთეთ expressVPN პროექტი:

github.com/MatthewHallberg/ARBrowserExpres…

ნაბიჯი 8: ყველაფერი მუშაობს

გახსენით იგი Unity– ში და მოდით ყველაფერი გააქტიურდეს ადგილობრივად თქვენს აპარატზე. ჯერ უნდა მოძებნოთ თქვენი აპარატის IP მისამართი, ასე რომ, თუ mac- ზე ხართ, უბრალოდ დააჭირეთ ღილაკს და დააწკაპუნეთ wifi სიმბოლოზე თქვენი IP- ის გამოსავლენად.

დაუბრუნდით ერთიანობას და გახსენით ბრაუზერის კონტროლერის სკრიპტი და ჩაწერეთ იქ თქვენი IP მისამართი და დააკოპირეთ თქვენს ბუფერში. იპოვეთ nodeScripts საქაღალდე და განათავსეთ იგი თქვენს სამუშაო მაგიდაზე, გახსენით საქაღალდე და შეცვალეთ ორივე გაფართოება.js. გახსენით თითოეული სკრიპტი და შეცვალეთ IP მისამართი თქვენს IP– ზე. ახლა გახსენით ტერმინალი და ჩვენ უნდა დავაინსტალიროთ რაღაცეები. დააინსტალირეთ HomeBrew, თუ ის უკვე არ გაქვთ.

-brew ინსტალაციის კვანძი

-npm დააინსტალირეთ ვებ -სურათი

-npm დააინსტალირეთ flatiron

-npm ინსტალაციის კავშირი

-npm დააინსტალირეთ cheerio

ახლა ჩვენ შეგვიძლია დავიწყოთ ორივე სკრიპტი cd შევიდა nodescripts საქაღალდეში და გავაკეთოთ node getimage.js და შემდეგ გავხსნათ ახალი ტერმინალის ფანჯარა და გავაკეთოთ კვანძი getlinks.js დატოვეთ ორივე ტერმინალის ფანჯარა გაშვებული და დავუბრუნდეთ რედაქტორს. თუ ჩვენ დააჭირეთ ღილაკს პიესა, ყველაფერი კარგად უნდა მუშაობდეს. ჩვენ ასევე შეგვიძლია გადავიდეთ ფაილზე, შევქმნათ პარამეტრები და დავაჭიროთ აწყობას და გაშვებას რომ მივიღოთ ის ჩვენს ტელეფონზე! თუ გსურთ სერვერების გაჩერება, უბრალოდ დააჭირეთ ღილაკს c ან ბრძანება q დახურეთ მთელი ტერმინალი.

ᲘᲡ ᲐᲠᲘᲡ!