Соси кошек вместе с кодом! Эта статья участвует【Эссе "Мяу Звезды"】
Начнем с превью рендеринга:
Предисловие: просматривая официальный веб-сайт Apple, вы увидите, что каждое устройство имеет эту строку текста в нижней части вводной страницы: «Посмотрите на это с дополненной реальностью». После нажатия устройством Apple, устройство может быть помещено в поле зрения сцены пользователя.При вращении камеры мобильного телефона также можно увидеть разные ракурсы объектов и предметов.Такое ощущение, что мобильный телефон действительно помещен перед тобой. (Эффект показан ниже. Примечание. Поскольку эта технология использует собственную технологию Apple arkit, телефоны Android не могут ее просматривать)
Умный, вы, возможно, подумали, почему его можно просматривать только с помощью мобильного телефона Apple, существует ли общая технология веб-AR, реализованная на чистом интерфейсе?
Чистое внешнее решение
Внедрение чистой фронтенд-технологии можно резюмировать на следующем рисунке:
Возьмите JSARToolKit в качестве примера:
- Используйте WebRTC для получения информации о камере, а затем нарисуйте исходное изображение на холсте;
- JSARToolKit вычисляет матрицу отношения, а затем отображает виртуальную информацию
Реализуйте основные шаги
- (Идентификация) WebRTC получает видеопоток с камеры;
- (Отслеживание) Tracking.js, JSFeat, ConvNetJS, deeplearn.js, keras.js;
- (рендеринг) A-Frame, Three.js, Pixi.js, Babylon.js
Более зрелый фреймворк: AR.js
Например, в каждой области есть соответствующая основная среда разработки.Более зрелой средой в области веб-дополненной реальности является AR.js, который в основном обеспечивает следующие три функции в дополненной реальности:
- Отслеживание изображений. Когда камера видит 2D-изображение, она может отображать что-то на нем или рядом с ним. Контентом могут быть 2D-изображения, гифки, 3D-модели (также анимация) и 2D-видео. Примеры: произведения искусства, учебные материалы (книги), листовки, рекламные объявления и т. д.
- AR на основе местоположения. Эта технология «дополненной реальности» использует реальные местоположения для отображения содержимого дополненной реальности на устройстве пользователя. Разработчики могут использовать эту библиотеку, чтобы пользователи могли испытать реальный опыт на основе местоположения. Пользователи могут ходить (предпочтительно на открытом воздухе) и просматривать AR-контент из любой точки реального мира со своего смартфона. Если пользователь перемещает и поворачивает телефон, контент дополненной реальности также реагирует синхронно (поэтому некоторый контент дополненной реальности «привязывается» к реальному местоположению и соответствующим образом изменяется в зависимости от расстояния до пользователя). Такое решение позволяет нам делать интерактивные путеводители, например, когда туристы приезжают в новый город, туристам будет удобнее посещать достопримечательности, музеи, рестораны, отели и т.д. Мы также можем улучшить учебный процесс, такой как охота за мусором, игры по изучению биологии или истории и т. д., и мы можем использовать технологию для ситуационного искусства (визуальное искусство в сочетании с конкретными координатами реального мира).
- отслеживание маркеров. Когда камера находит маркер, что-то может быть отображено (это то же самое, что и отслеживание изображения). Стабильность знака не является проблемой, ограничениями являются форма, цвет и размер. Может применяться к опыту, который требует большого количества различной разметки и различного контента, например: (расширенные книги), листовки, рекламные объявления и т. д.
Начните работу с AR.js
Разработка и отладка открытых https
Из-за использования конфиденциальных разрешений камеры, для правильной работы его необходимо включить на основе среды https во время отладки. В прошлом ручная настройка среды https для отладки по-прежнему была трудоемкой и отнимала много времени у многих новичков.К счастью, последний проект, основанный на скаффолдинге vite+vue3, может легко открыть доступ по https с помощью одной строки команды. После инициализации кода с помощью формирования шаблонов сначала измените файл package.json и добавьте --host в команду dev, чтобы указать адрес сетевого запроса (по умолчанию не включен), как показано ниже:
Затем выполните следующую команду, чтобы включить https:
npm run dev -- --https
Сначала запустите официальную демоверсию, чтобы увидеть эффект
Лучший способ изучить новый фреймворк или язык — запустить официальную демо-версию, чтобы испытать его.
Ниже приведен эффект случая, показанный официальным кодом (Примечание: анимация записи относительно большая, пожалуйста, подождите загрузки)
вау~ разве это не интересно? Далее мы официально войдем в тему статьи и начнем играть в котиков🐱
Начинать
Как упоминалось ранее, AR.js отображает контент тремя способами.Отслеживание изображенийспособ достижения. Как следует из названия, отслеживание изображения основано на изображении, идентифицируя изображение в соответствии с характерными точками изображения, а также отслеживая и отображая содержимое AR.Например, когда камера захватывает изображение, может отображаться отображаемый контент. в верхней части изображения.
импортировать библиотеку зависимостей
Начиная с версии 3, Ar.js принял новую архитектуру, используяjsartoolkit5Для отслеживания и позиционирования в библиотеке рендеринга есть два варианта: A-Frame или Three.js. Метод A-Frame упрощает создание материалов сцены с помощью тегов html, таких как отображение изображения, которое можно использовать напрямую. <a-image></a-image>способ показать.
Изменить файл index.html:
Сначала закомментируйте инъекцию кода vue
Затем импортируйте зависимости:
<script src='./src/sdk/ar-frame/aframe-master.min.js'></script>
<script src='./src/sdk/ar-frame/aframe-ar-nft.js'></script>
Pussy Cat Pose 1: Показать фотографии кошек
<body>
<a-scene embedded arjs>
<a-assets>
<img id="my-image" src="./src/assets/cat.jpg">
</a-assets>
<a-marker preset="hiro">
<a-image rotation="90 0 0" src="#my-image"></a-image>
<!-- <a-box position="0 0.5 0" material="color: green;"></a-box> -->
</a-marker>
<a-entity camera></a-entity>
</a-scene>
</body>
Кратко объясните приведенный выше код:
-
<a-scene>Чтобы объявить сцену, вы можете понять, что она эквивалентна элементу тела с другими элементами тега, встроенными в него; -
<a-marker>Метка объявляет изображение логотипа, то есть, когда камера распознает изображение логотипа, она выполнит соответствующую обработку; здесь используется предустановленное плагином изображение hiro, а анимацию эффекта можно увидеть ниже. - использовать
<a-assets>Материал, используемый в упаковке, эквивалентен декларированию импортного материала, а затем в<a-marker>используется в
Взгляните на эффект:
Pussy Cat Pose 2: Воспроизвести видео
Помимо показа картинок, вы также можете показывать видео, сначала посмотрите на эффект:
код показывает, как показано ниже:
<a-scene vr-mode-ui="enabled: false;" renderer='antialias: true; alpha: true; precision: mediump;' embedded
arjs='trackingMethod: best; sourceType: webcam; debugUIEnabled: false;'>
<a-assets>
<video
src="https://ugcydzd.qq.com/uwMROfz2r57CIaQXGdGnC2ddPkb5Wzumid6GMsG9ELr7HeBy/szg_52471341_50001_d4615c1021084c03ad0df73ce2e898c8.f622.mp4?sdtfrom=v1010&guid=951847595ac28f04306b08161bb6d1f7&vkey=3A19FB37CFE7450C64A889F86411FC6CE939A42CCDAA6B177573BBCB3791A64C441EFF5B3298E3ED4E99FFA22231772796F5E8A1FCC33FE4CAC487680A326980FFCC5C56EB926E9B4D20E8740C913D1F7EBF59387012BEC78D2816B17079152BC19FCEF09976A248C4B24D3A5975B243614000CAA333F06D850034DA861B01DCA1D53B546120B74F%22"
preload="auto" id="vid" response-type="arraybuffer" loop crossorigin webkit-playsinline muted playsinline>
</video>
</a-assets>
<a-nft videohandler type='nft' url='./src/assets/dataNFT/pinball' smooth="true" smoothCount="10"
smoothTolerance="0.01" smoothThreshold="5">
<a-video src="#vid" position='50 150 -100' rotation='90 0 180' width='300' height='175'>
</a-video>
</a-nft>
<a-entity camera></a-entity>
</a-scene>
<script>
window.onload = function () {
AFRAME.registerComponent('videohandler', {
init: function () {
var marker = this.el;
this.vid = document.querySelector("#vid");
marker.addEventListener('markerFound', function () {
// 识别到标识图，开始播放视频
this.vid.play();
}.bind(this));
marker.addEventListener('markerLost', function () {
// 丢失标识图，停止播放视频
this.vid.pause();
this.vid.currentTime = 0;
}.bind(this));
}
});
};
</script>
🐱: Мяу~ Стало круче и веселее?
Поза облизывания кошки 3: с помощью звуковой сетевой технологии кричите вместе с кошкой в воздух
Если вы фронтенд-разработчик, я считаю, что вы должны знать Ruan Yifeng. Однажды я увидел такую интересную вещь в его еженедельнике Science and Technology Weekly: в тропическом лесу Амазонки было установлено записывающее устройство для передачи перехваченных птичьих криков на веб-сайт в режиме реального времени, и вы можете открыть веб-сайт, чтобы услышать фильм Птичьи крики в тропическом лесу в реальном времени, проще говоря, веб-сайт может услышать «птичьи крики в прямом эфире» из тропического леса. (К сожалению, я некоторое время не могу найти URL-адрес веб-сайта)
Как рабочая группа и любители кошек, у нас могут быть те же эмоциональные потребности, что и выше: нам нужно уехать на несколько дней, а о кошке дома нельзя позаботиться какое-то время.Что мне делать, если я хочу увидеть кот дома в реальном времени?
купить камеру наблюдения
Конечно, откройте звуковую сеть, чтобы найти решение:видеозвонок(Здесь я ставлю большой палец вверх документу Shengwang. Планирование классификации документов всего продукта особенно четкое, в отличие от некоторых документов продукта облачных сервисов, которые похожи на рыться в мусоре)
Используйте запись vue3, чтобы преобразовать демонстрационный документ
Сначала установите зависимости:
"agora-rtc-sdk-ng": "latest"
Код в app.vue:
<script setup>
import AgoraRTC from "agora-rtc-sdk-ng";
import { ref } from "vue";
const joinBtn = ref(null);
const leaveBtn = ref(null);
let rtc = {
localAudioTrack: null,
client: null,
};
let options = {
appId: "2e76ff53e8c349528b5d05783d53f53c",
channel: "test",
token:
"0062e76ff53e8c349528b5d05783d53f53cIADkwbufdA1BIXWsCZ1oFKLEfyPRrCbL3ECbUg71dsv8HQx+f9gAAAAAEAACwxdSy/6RYQEAAQDK/pFh",
uid: 123456,
};
rtc.client = AgoraRTC.createClient({ mode: "rtc", codec: "vp8" });
rtc.client.on("user-published", async (user, mediaType) => {
await rtc.client.subscribe(user, mediaType);
console.log("subscribe success");
if (mediaType === "video") {
const remoteVideoTrack = user.videoTrack;
const remotePlayerContainer = document.createElement("div");
remotePlayerContainer.id = user.uid.toString();
remotePlayerContainer.textContent = "Remote user " + user.uid.toString();
remotePlayerContainer.style.width = "640px";
remotePlayerContainer.style.height = "480px";
document.body.append(remotePlayerContainer);
remoteVideoTrack.play(remotePlayerContainer);
}
if (mediaType === "audio") {
const remoteAudioTrack = user.audioTrack;
remoteAudioTrack.play();
}
rtc.client.on("user-unpublished", (user) => {
const remotePlayerContainer = document.getElementById(user.uid);
remotePlayerContainer.remove();
});
});
// 加入通话
const handleJoin = async () => {
await rtc.client.join(
options.appId,
options.channel,
options.token,
options.uid
);
rtc.localAudioTrack = await AgoraRTC.createMicrophoneAudioTrack();
rtc.localVideoTrack = await AgoraRTC.createCameraVideoTrack();
await rtc.client.publish([rtc.localAudioTrack, rtc.localVideoTrack]);
const localPlayerContainer = document.createElement("div");
localPlayerContainer.id = options.uid;
localPlayerContainer.textContent = "Local user " + options.uid;
localPlayerContainer.style.width = "640px";
localPlayerContainer.style.height = "480px";
document.body.append(localPlayerContainer);
rtc.localVideoTrack.play(localPlayerContainer);
console.log("publish success!");
};
// 离开通话
const handleLeave = async () => {
rtc.localAudioTrack.close();
rtc.localVideoTrack.close();
rtc.client.remoteUsers.forEach((user) => {
const playerContainer = document.getElementById(user.uid);
playerContainer && playerContainer.remove();
});
await rtc.client.leave();
};
</script>
<template>
<div>
<button ref="joinBtn" @click="handleJoin" type="button" id="join">
加入
</button>
<button ref="leaveBtn" @click="handleLeave" type="button" id="leave">
离开
</button>
</div>
</template>
<style></style>
Эффект бега:
В настоящее время это эквивалентно установке камеры дома.Если нам нужно просматривать ее удаленно, мы можем использовать ту, которая предоставляется официальной звуковой сетью.тестовый адресприсоединиться к вызову
Откройте приведенный выше URL-адрес на мобильном телефоне, введите appId и токен вашего проекта, и вы увидите, что вызов успешно добавлен:
Картинка ниже - это снимок, сделанный камерой мобильного телефона, простите, что заменил его на фото кота😂
Пусть видеоэкран работает на экране AR.js
Из-за личных нехватки времени это пока не будет изучаться и реализовываться. Вот идея: Простая видеокартинка выглядит несколько однообразно, ведь можноКот не появляется в кадре видео, в сочетании сКиска кошка поза одинУпомянутые изображения дисплея, на самом деле, мы можем расположить фотостену или другие классные предметы вокруг области видео в ар-сцене, чтобы мы могли открывать видео, даже если мы не видим кошачью звезду, мы можем видеть ее фотографии и т. д. взаимодействуют.
заключительные замечания
В этой статье я использовал призыв к эссе, чтобы просто начать понимать связанные знания о веб-AR. В процессе обучения в последние несколько дней я думаю, что это довольно весело. Эту статью также следует использовать в качестве руководства. Я надеюсь, что больше разработчиков смогут понять знания, связанные с AR.
AR действительно крут в плане опыта, и в будущее стоит с нетерпением ждать.
В последние годы Apple стремится продвигать технологии дополненной реальности и предлагать сопутствующие продукты, такие как радиолокационное сканирование и функции пространственного звука, чтобы расширить возможности дополненной реальности. Стоит отметить, что на Apple Autumn Conference в этом году в пригласительном письме Apple также использовалась технология пространственного звука AR +.Даже если вы не являетесь поклонником яблок, когда вы на самом деле испытаете это своими руками, вы все равно почувствуете это сердцем. : вау ~ круто. МогуЩелкните это видеоСмотрите, чтобы учиться.
В настоящее время технология Web AR по сравнению с собственной технологией Apple ARkit все еще имеет некоторые пробелы (например, проблемы с производительностью, идентификация нестабильности) в опыте и отсутствие надежды на экосистему. В конце концов, технология Web AR быстро развивается в будущем. веб-конец кросс-платформенные общие характеристики, так что каждый может запустить терминал является необходимым условием для достижения крупномасштабного применения сцены AR.
Концепция метавселенной, на которую делает ставку Facebook, на самом деле также включает технологию AR, поэтому до появления мира метавселенной технология AR достойна внимания и изучения каждого фронтенд-разработчика.
пасхальные яйца
Если вы спросите меня, какой кот мой любимый, я скажу - "хозяйский кот", ～хахаха🐱～
использованная литература
Документ перевода AR.js на китайский язык
Мобильный веб-ключ ключевой технологии Введение и кроссплатформенные приложения