Веб-браузер с дополненной реальностью: 9 шагов

2024 Автор: John Day | [email protected]. Последнее изменение: 2024-01-30 11:52

Сегодня мы займемся созданием веб-браузера дополненной реальности для Android.

Эта идея возникла, когда ExpressVPN попросил меня сделать спонсируемое видео на YouTube. Поскольку это мой первый проект, я хотел сделать что-то, что имело отношение к их продукту. Практически сразу я подумал: о, я просто сделаю веб-браузер с дополненной реальностью, чтобы мы могли просматривать веб-страницы в AR через VPN. Это не может быть так сложно, правда? Неправильный. Я установил некоторые ограничения для этого проекта, потому что хотел использовать его, чтобы узнать что-то новое.

Во-первых, я хотел, чтобы это было для Android, потому что я всегда что-то делаю с IOS.

Во-вторых, я не хотел использовать какие-либо платные API, я хотел, чтобы каждый мог просто загрузить этот проект и запустить его, не платя за какие-либо материалы в Интернете. Так что ни IBM Watson, ни Google API, ни ничего из Unity Asset store.

ДАВАЙТЕ НАЧНЕМ!

Шаг 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 для Unity.

Во-первых, вам, вероятно, понадобится ссылка на контекст приложения Android, если ваш плагин собирается делать что-нибудь интересное. Вы можете сделать это, добавив файл classes.jar из вашей установки Unity в свой проект Android в качестве библиотеки. Итак, перейдите в структуру файлового проекта, а затем выберите вкладку зависимостей для модуля приложения. Здесь вы можете нажать кнопку «плюс», чтобы добавить файл jar. Перейдите к своей сборке Unity, движкам воспроизведения, androidplayer, вариациям, моно, разработке, классам и, наконец, classes.jar. Измените область видимости только на компиляцию. Теперь в новом java-файле вы можете:

UnityPlayer.currentActivity.getApplicationContext ();

и используйте эту ссылку там, где она вам нужна.

Следующая странная проблема заключается в том, что эту голосовую функцию можно запустить только в основном потоке, иначе вы получите ошибки. Чтобы сделать это в Unity, вы должны указать функциям и плагину, чтобы они запускались в потоке пользовательского интерфейса как AndroidJavaRunnable, как на картинке выше.

Шаг 4: борьба

На данный момент я думаю, что я эксперт по Android, Я онлайн подаю заявку на вакансию разработчика Android, я заказываю наклейки и футболки для Android. Жизнь хороша. Теперь я готов перейти к выяснению того, как визуализировать веб-страницу в Unity. Проведя небольшое исследование, я понял, что приемлемым решением является использование Android WebView. Это просто класс Android, который позволяет отображать веб-сайты, которые взаимодействуют между собой в приложении Android, не загружая все в браузере. По сути, это делается для того, чтобы вы могли удерживать пользователей в своем приложении. Первым делом нужно посмотреть, создал ли кто-нибудь для этого плагин Unity с открытым исходным кодом. Я сначала пробую этот плагин:

github.com/gree/unity-webview

но он только отображает WebView на уровне графического интерфейса Unity, так что это не сработает. Затем я нахожу этот плагин для VR:

github.com/IanPhilips/UnityAndroidVRBrowse…

это позволяет отображать WebView в текстуру и даже взаимодействовать с ней, и это здорово. Я думал, что это был ответ, пока не попробовал и не обнаружил, что он блокирует все мои клики от единства.

Шаг 5: Вернуться к доске для рисования

Я просто попытаюсь сделать свой плагин для этого, потому что все, что мне действительно нужно, - это отправить изображение веб-сайта в unity. Проведя небольшое исследование по этому поводу, я обнаружил, что могу сохранить холст Android в растровое изображение, а затем закодировать его в-p.webp

Наконец-то это сработало.

Итак, теперь я могу сделать снимок экрана с веб-сайта, так что давайте посмотрим, как это работает с arcore …

Это не так.

Я имею в виду, что я использую galaxy s7, который не является новейшим телефоном, но этот материал WebView по-прежнему замораживает все приложение и в основном непригоден для использования. Я предполагаю, что это связано с тем, что WebView и ARCore перегружают основной поток, но я точно не знаю. Вернуться к доске для рисования. Если мы хотим, чтобы это работало, нам придется переложить тяжелую работу на какой-то сервер. После некоторого поиска в Google выясняется, что вы можете сделать снимок экрана веб-сайта с библиотекой для Node.js под названием WebShot, которая использует Phantom JS, который представляет собой безголовый браузер с поддержкой сценариев.

Шаг 6: наконец-то мы к чему-то приближаемся

Теперь мне нужно выяснить, как, черт возьми, использовать Node.js….

Оказывается, вы можете создать сценарий Node.js, который прослушивает определенный номер порта, и когда он попадает в этот порт, он может возвращать некоторую информацию. Мы можем проверить это, создав небольшой скрипт hello world, который прослушивает порт 3000. Мы можем войти в каталог со скриптом и запустить его, выполнив команду node, а затем имя скрипта. Если мы перейдем к нашему IP-адресу, а затем к порту 3000 в нашем браузере, мы увидим, что он возвращает hello world. Теперь, когда я немного разбираюсь в узле, я могу заставить его работать на моем сервере, на котором я размещаю свои веб-сайты, на котором находится hawkhost.com. Я подключаюсь к своему серверу по SSH и пытаюсь запустить несколько скриптов hello world node.js… и ничего не работает. После еще нескольких часов возни я обнаружил, что на моем конкретном хостинг-сервере только два открытых порта, то есть 3000 и 12001.

Итак, используя эти порты и IP-адрес моих хостинговых серверов, я могу получить рабочий пример hello world. Затем я устанавливаю модуль WebShot и создаю небольшой сценарий, в который я могу передать URL-адрес, и он вернет мне изображение веб-сайта по этому веб-адресу. Теперь я могу запустить этот скрипт узла и отправить HTTP-запрос POST из Unity на конкретный IP-адрес и номер порта моего сервера, который вернет мне массив байтов, который является изображением этого веб-сайта. Слава Богу. Теперь другая проблема заключается в том, что когда я закрываю свой терминал, процесс завершается и прекращает прослушивание. Я провожу еще несколько исследований и нахожу модуль под названием forever. NPM установил навсегда, и теперь я могу переходить к бесконечности и всегда запускать скрипт, и он будет продолжать работать, пока я не войду в систему и не остановлю его снова.

Шаг 7: Работает

Большой. Но этого недостаточно.

Когда я думаю о ценности просмотра веб-страниц в AR, я понимаю, что это связано с добавлением места. Мы больше не ограничены одним экраном, поэтому я хочу сделать что-то, что позволяет мне визуализировать мой поисковый след прямо перед собой. Итак, давайте загрузим эту первую страницу поиска, а затем просканируем эту страницу и извлечем каждый результат поиска в виде ссылки, которую мы затем можем загрузить как изображение над нашим главным экраном. Мы можем сделать это с помощью другого скрипта Node.js, который очищает первую страницу результатов Google и запускает ее постоянно. Это можно было бы сделать гораздо эффективнее с помощью API поиска Google, но правилом номер два для этого проекта было отсутствие платных API, поэтому пока мы сделаем это так. Теперь, когда у нас есть изображения для каждой ссылки, мы можем загружать их на большем экране каждый раз, когда мы нажимаем на них и бум, у нас здесь есть симпатичный маленький браузер. Он не полностью функционален, но я возьмусь за него. Хорошо, если вы хотите запустить этот проект самостоятельно, перейдите на мой Github и загрузите проект expressVPN:

github.com/MatthewHallberg/ARBrowserExpres…

Шаг 8: Все заработало

Откройте его в Unity, и пусть все работает локально на вашем компьютере. Сначала вам нужно найти IP-адрес вашего компьютера, поэтому, если вы используете Mac, просто удерживайте опцию и щелкните значок Wi-Fi, чтобы отобразить свой IP.

Вернитесь к единству и откройте скрипт контроллера браузера, введите туда свой IP-адрес и скопируйте его в буфер обмена. Найдите папку nodeScripts и поместите ее на рабочий стол, откройте папку и измените оба расширения на.js. Откройте каждый сценарий и измените IP-адрес на свой IP. Теперь откройте терминал, и нам нужно кое-что установить. Установите HomeBrew, если у вас его еще нет.

-brew install node

-npm установить webshot

-npm установить утюг

-npm установить союз

-npm установить cheerio

Теперь мы можем запустить оба сценария, поэтому перейдите в папку nodecripts и выполните node getimage.js. Затем откройте новое окно терминала и выполните команду node getlinks.js. Оставьте оба окна терминала запущенными и вернитесь в редактор. Если нажать кнопку воспроизведения, все должно работать нормально. Мы также можем перейти к файлу, настройкам сборки и нажать build и запустить, чтобы получить его на нашем телефоне! Если вы хотите остановить серверы, просто нажмите элемент управления c или команду q, чтобы закрыть весь терминал.

ЭТО ОНО!