Trình duyệt web thực tế tăng cường: 9 bước

2024 Tác giả: John Day | [email protected]. Sửa đổi lần cuối: 2024-01-30 13:34

Hôm nay chúng ta sẽ hướng dẫn tạo một trình duyệt web Thực tế tăng cường cho Android.

Ý tưởng này bắt đầu khi ExpressVPN yêu cầu tôi làm một video YouTube được tài trợ. Vì đây là lần đầu tiên của tôi, tôi muốn làm điều gì đó có liên quan đến sản phẩm của họ. Khá nhiều ngay lập tức tôi nghĩ, ồ, tôi sẽ chỉ tạo một trình duyệt web thực tế tăng cường để chúng tôi có thể duyệt web bằng AR trên VPN. Nó không thể khó như vậy, phải không? Sai lầm. Tôi tự đặt ra một số giới hạn cho dự án này vì tôi muốn sử dụng nó để học một số điều mới.

Số một tôi muốn nó dành cho Android vì tôi luôn làm mọi thứ với IOS.

Thứ hai, tôi không muốn sử dụng bất kỳ API trả phí nào, tôi muốn mọi người có thể tải xuống dự án này và chạy nó mà không cần phải trả tiền cho bất kỳ thứ gì trực tuyến. Vì vậy, không có IBM Watson, không có API Google và không có gì từ cửa hàng Unity Asset.

BẮT ĐẦU NÀO!

Bước 1: Điều đầu tiên Đầu tiên

Điều đầu tiên tôi muốn làm là một giải pháp tốt để chuyển lời nói thành văn bản để chúng tôi có thể thực hiện các tìm kiếm trực tuyến bằng giọng nói của mình. Ngoài ra, tôi nghĩ giọng nói là một phương pháp tương tác tuyệt vời trong AR, ít nhất là cho đến khi chúng tôi có một giải pháp theo dõi bàn tay tốt. Tôi biết rằng Android có một số chức năng chuyển giọng nói thành văn bản, vì vậy tìm kiếm nhanh trên google sẽ giúp chúng tôi tìm thấy một số plugin cho Unity.

Lần đầu tiên tôi đến với plugin này vì sự thống nhất:

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

Tôi đã thử điều này và nó hoạt động tuyệt vời. Vấn đề duy nhất là khi bạn sử dụng nó với ARCore, nó tạo ra một hộp bật lên gốc và dường như làm nền cho Unity và cuối cùng bạn sẽ mất theo dõi.

Điều này ít hơn lý tưởng.

Bước 2: Chuyển giọng nói thành văn bản hoạt động cho Android

Vì vậy, tôi bắt đầu tìm kiếm một số plugin không hiển thị hộp bật lên gốc và không thể tìm thấy nhiều nhưng cuối cùng tôi đã tìm thấy thư viện android này:

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

Bây giờ tôi thực sự không biết gì về phát triển Android gốc nhưng tôi muốn thử thách bản thân vì vậy tôi nghĩ rằng tôi sẽ cố gắng viết một số mã cầu nối cho thư viện này và biến nó thành một plugin Android để sử dụng trong Unity. đến hàng giờ thất vọng.

Cuối cùng thì nó cũng hoạt động…

Bước 3: Bài học kinh nghiệm

Vì vậy, có hai điều tôi học được trong quá trình này không rõ ràng ngay lập tức từ việc chỉ tìm kiếm trên Google cách tạo một plugin Android cho sự thống nhất.

Thứ nhất là bạn có thể cần tham chiếu đến ngữ cảnh ứng dụng Android nếu plugin của bạn sẽ làm bất kỳ điều gì thú vị. Bạn có thể thực hiện việc này bằng cách thêm tệp class.jar từ cài đặt Unity vào dự án Android của bạn dưới dạng thư viện. Vì vậy, hãy chuyển đến cấu trúc dự án tệp và sau đó chọn tab phụ thuộc cho mô-đun ứng dụng. Tại đây bạn có thể nhấp vào nút dấu cộng để thêm tệp jar. Chuyển đến bản dựng Unity, công cụ phát lại, androidplayer, các biến thể, mono, phát triển, các lớp và cuối cùng là class.jar. Thay đổi phạm vi thành chỉ biên dịch. Bây giờ, trong một tệp java mới, bạn có thể thực hiện:

UnityPlayer.currentActivity.getApplicationContext ();

và sử dụng tham chiếu đó bất cứ khi nào bạn cần.

Vấn đề kỳ lạ tiếp theo là chức năng thoại này chỉ có thể chạy trên chuỗi chính, nếu không bạn sẽ gặp lỗi. Để làm được điều này trong Unity, bạn phải yêu cầu các chức năng và plugin chạy trên UI Thread dưới dạng AndroidJavaRunnable như hình trên.

Bước 4: Đấu tranh

Tại thời điểm này, tôi nghĩ Tôi là một chuyên gia Android, Tôi đang trực tuyến xin việc cho nhà phát triển Android, tôi đang đặt hàng áo phông và nhãn dán android. Cuộc sống là tốt. Bây giờ tôi đã sẵn sàng chuyển sang tìm cách hiển thị trang web trong Unity. Sau khi thực hiện một nghiên cứu nhỏ, tôi thấy rằng giải pháp được chấp nhận là sử dụng Android WebView. Đây chỉ là một lớp Android cho phép bạn hiển thị các trang web có thể hoạt động lẫn nhau bên trong ứng dụng Android mà không cần tải mọi thứ trong trình duyệt. Về cơ bản, đó là để bạn có thể giữ chân người dùng trong ứng dụng của mình. Đơn hàng đầu tiên của công việc kinh doanh là xem liệu có ai đã tạo một plugin thống nhất cho cái này là mã nguồn mở hay không. Lần đầu tiên tôi thử plugin này:

github.com/gree/unity-webview

nhưng nó chỉ hiển thị một WebView tới lớp Unity GUI để điều đó không hoạt động. Sau đó, tôi tìm thấy plugin này cho VR:

github.com/IanPhilips/UnityAndroidVRBrowse…

điều này cho phép bạn hiển thị một WebView thành một kết cấu và thậm chí nó có thể tương tác được, điều này thật tuyệt.

Bước 5: Quay lại Bảng vẽ

Tôi sẽ cố gắng tạo plugin trên của mình cho việc này, bởi vì tất cả những gì tôi thực sự cần là gửi một hình ảnh của trang web đến sự thống nhất. Thực hiện một số nghiên cứu về điều đó, tôi phát hiện ra rằng tôi có thể lưu canvas android thành bitmap và sau đó mã hóa nó thành-p.webp

Cuối cùng nó đã hoạt động.

Vì vậy, bây giờ tôi có thể nhận được ảnh chụp màn hình từ một trang web, vì vậy hãy xem nó hoạt động như thế nào với arcore…

Nó không.

Ý tôi là tôi đang sử dụng galaxy s7 không phải là điện thoại mới nhất, nhưng nội dung WebView này vẫn đóng băng toàn bộ ứng dụng và về cơ bản không thể sử dụng được. Tôi cho rằng đó là do WebView và ARCore đều đang làm quá tải chuỗi chính nhưng tôi thực sự không biết. Trở lại với bản vẽ. Nếu chúng tôi muốn làm cho việc này hoạt động, chúng tôi sẽ phải giảm tải các công việc nặng nhọc đối với một số loại máy chủ. Sau khi thực hiện một số thao tác trên Google, hóa ra bạn có thể chụp ảnh màn hình của một trang web có thư viện cho Node.js có tên là WebShot sử dụng Phantom JS, một trình duyệt không có tập lệnh.

Bước 6: Cuối cùng thì chúng ta cũng đến được một nơi nào đó

Bây giờ tôi phải tìm ra cái quái gì để sử dụng Node.js….

Hóa ra bạn có thể tạo một tập lệnh Node.js lắng nghe trên một số cổng cụ thể và khi nó tấn công vào cổng đó, nó có thể trả về một số thông tin. Chúng ta có thể kiểm tra điều này bằng cách tạo một tập lệnh hello world lắng nghe trên cổng 3000. Chúng ta có thể cd vào thư mục có tập lệnh và chạy nó bằng cách thực hiện nút và sau đó là tên tập lệnh. Nếu chúng tôi điều hướng đến địa chỉ IP của mình và sau đó cổng 3000 trong trình duyệt của chúng tôi, chúng tôi có thể thấy nó trả về hello world. Bây giờ tôi đã có một chút hiểu biết về nút, tôi có thể làm cho nó hoạt động trên máy chủ của tôi, nơi tôi lưu trữ các trang web của mình trên đó là hawkhost.com. Tôi SSH vào máy chủ của mình và cố gắng chạy một vài tập lệnh hello world node.js… và không có gì hoạt động. Sau một vài giờ lộn xộn, tôi phát hiện ra rằng máy chủ lưu trữ cụ thể của tôi chỉ có hai cổng mở để sử dụng, đó là 3000 và 12001.

Vì vậy, bằng cách sử dụng các cổng đó và IP máy chủ lưu trữ của tôi, tôi có thể nhận được một ví dụ hello world đang hoạt động. Tiếp theo, tôi cài đặt mô-đun WebShot và tạo một tập lệnh nhỏ mà tôi có thể chuyển một URL và nó sẽ trả về cho tôi hình ảnh của trang web tại địa chỉ web đó. Bây giờ tôi có thể bắt đầu tập lệnh nút đó và gửi một yêu cầu ĐĂNG http từ Unity đến IP và số cổng cụ thể của máy chủ của tôi, điều này sẽ trả về cho tôi một mảng byte là hình ảnh của trang web đó. Cảm ơn GOD. Bây giờ một vấn đề khác là khi tôi đóng thiết bị đầu cuối của mình, quá trình kết thúc và thoát khỏi việc nghe. Tôi thực hiện thêm một số nghiên cứu và tìm thấy một mô-đun được gọi là mãi mãi. Cài đặt NPM mãi mãi và bây giờ tôi có thể điều hướng đến mãi mãi và làm mãi mãi bắt đầu tập lệnh và nó sẽ tiếp tục chạy cho đến khi tôi đăng nhập và dừng lại.

Bước 7: Nó hoạt động

Tuyệt vời. Nhưng nó không đủ tuyệt.

Khi tôi nghĩ về giá trị của việc duyệt web trong AR, nó đến từ việc bổ sung không gian. Chúng tôi không còn bị giới hạn trong một màn hình duy nhất nên tôi muốn tạo ra thứ gì đó cho phép tôi trực quan hóa đường tìm kiếm của mình ngay trước mặt tôi. Vì vậy, hãy tải trang tìm kiếm đầu tiên đó, sau đó thu thập dữ liệu trang đó và trích xuất mọi kết quả tìm kiếm dưới dạng liên kết, sau đó chúng tôi có thể tải dưới dạng hình ảnh phía trên màn hình chính của mình. Chúng tôi có thể làm điều này với một tập lệnh Node.js khác để quét trang đầu tiên của kết quả Google và chạy nó liên tục mãi mãi. Điều này có thể được thực hiện hiệu quả hơn nhiều với API tìm kiếm của Google nhưng quy tắc số hai cho dự án này không phải là API trả phí, chúng tôi sẽ làm như vậy ngay bây giờ. Bây giờ chúng ta có hình ảnh cho mỗi liên kết, chúng ta có thể tải chúng trên màn hình lớn hơn mỗi khi chúng ta nhấp vào chúng và bùng nổ, chúng ta có một trình duyệt nhỏ xinh xắn ở đây. Nó không hoạt động đầy đủ nhưng tôi sẽ sử dụng nó. Được rồi, vì vậy nếu bạn muốn tự chạy dự án này, hãy truy cập Github của tôi và tải xuống dự án expressVPN:

github.com/MatthewHallberg/ARBrowserExpres…

Bước 8: Bắt mọi thứ hoạt động

Mở nó trong Unity và để mọi thứ chạy cục bộ trên máy của bạn. Trước tiên, bạn cần tìm địa chỉ IP của máy tính của mình, vì vậy nếu bạn đang sử dụng mac, chỉ cần giữ tùy chọn và nhấp vào biểu tượng wifi để hiển thị IP của bạn.

Quay lại thống nhất và mở tập lệnh trình điều khiển trình duyệt và nhập địa chỉ IP của bạn vào đó và sao chép nó vào khay nhớ tạm của bạn. Tìm thư mục nodeScripts và đặt nó trên màn hình của bạn, mở thư mục và thay đổi cả hai phần mở rộng thành.js. Mở từng tập lệnh và thay đổi địa chỉ IP thành IP của bạn. Bây giờ hãy mở thiết bị đầu cuối và chúng ta phải cài đặt một số thứ. Cài đặt HomeBrew nếu bạn chưa có.

nút cài đặt -brew

-npm cài đặt webshot

-npm instal flatiron

-npm cài đặt công đoàn

-npm cài đặt cheerio

Bây giờ chúng ta có thể khởi động cả hai script để cd vào thư mục nodecripts và thực hiện node getimage.js Sau đó mở một cửa sổ terminal mới và thực hiện node getlinks.js Để cả hai cửa sổ terminal chạy và quay lại trình soạn thảo. Nếu chúng tôi nhấn play, mọi thứ sẽ hoạt động tốt. Chúng tôi cũng có thể đi tới tệp, cài đặt xây dựng và nhấn xây dựng và chạy để tải nó trên điện thoại của mình! Nếu bạn muốn dừng các máy chủ, chỉ cần nhấn điều khiển c hoặc lệnh q để đóng toàn bộ thiết bị đầu cuối.

ĐÓ LÀ NÓ!