Table of Contents

Пример веб-распознавания изображений в облаке

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

Инструкции по загрузке и настройке образца можно найти в Быстром старте.

Настройка цели распознавания

В разделе управления облачным распознаванием загрузите изображение для распознавания.

  • Название изображения: задайте имя цели распознавания, например, demo.
  • Загрузка изображения: выберите и загрузите изображение. В данном примере используется: https://www.easyar.cn/assets/images/webar/xiaoxiongmao.png.
  • Ширина: ширина изображения в сантиметрах. Высота будет рассчитана автоматически на основе загруженного изображения. Размер изображения соответствует размеру виртуального содержимого, что в данном примере не используется.
  • Meta: дополнительная информация, обычно используется для хранения данных AR-контента. В этом примере используется: {"modelUrl": "asset/model/trex_v3.fbx", "scale": 0.02}.

crs sample

Получение цели распознавания

После вызова API облачного распознавания и успешного распознавания цели возвращается информация о ней в следующей структуре:

{
  "statusCode" : 0,
  "result" : {
    "target" : {
      "targetId" : "375a4c2e********915ebc93c400",
      "meta" : "eyJtb2RlbFVybCI6ICJhc3NldC9tb2RlbC90cmV4X3YzLmZieCIsICJzY2FsZSI6IDAuMDJ9",
      "name" : "demo",
      "modified" : 1746609056804
    }
  },
  "date" : "2026-01-05T05:50:36.484Z",
  "timestamp" : 1767592236484
}
Совет

Полное описание полей см. в Справочнике API

Декодируйте meta из base64, чтобы получить исходную информацию.

// data содержит полученные данные
const meta = data.result.target.meta;
const modelInfo = JSON.parse(atob(meta));

Описание основного кода

  • src/webar.js

    Инкапсулирует базовые операции: инициализацию камеры, захват изображения, вызов облачного распознавания.

  • src/app.js

    Инкапсулирует базовые операции интерфейса: переключение камеры, взаимодействие с пользователем, инициализацию WebAR.

  • TokenVideoExample/asset/js/app.js и TokenThreeJsExample/asset/js/app.js

    Настройка облачного распознавания и обработка результатов после успешного распознавания.

Ожидаемый результат

  • Интерфейс после инициализации камеры

Ожидаемый результат

  • Эффект воспроизведения видео

Ожидаемый результат

  • Эффект рендеринга модели

Ожидаемый результат

Глубокое понимание кода

Если вы хотите глубже изучить разработку для облачного распознавания, настоятельно рекомендуем прочитать исходный код примера. На его основе вы можете попробовать изменить и расширить его функциональность.

Совет

Следующий материал предполагает, что у вас уже есть опыт разработки на HTML и JavaScript. Если эти базовые навыки отсутствуют, рекомендуем сначала изучить их.

В качестве примера возьмем TokenThreeJsExample (рендеринг 3D-модели) и рассмотрим основные фрагменты кода.

Обработка бизнес-задач

Описание основных методов в файле TokenThreeJsExample/asset/js/app.js.

  • Инициализация объекта App
// Инициализация объекта App с использованием Client-end URL для облачного распознавания
const app = new App('https://af0c1ca3b........0601c74.cn1.crs.easyar.com:8443');
  • Настройка информации для облачного распознавания
// Установка AppId и токена для облачной библиотеки распознавания. Можно использовать только один из вариантов: app.setToken() или app.useEasyAr()
app.setToken({
    'crsAppId': 'f7ff4977......9984ef8068c', // CRS AppId облачной библиотеки распознавания
    'token': 'pQWnZo1Qt4drnc........QXUQambomdPWEj9So' // Токен, сгенерированный из APIKey + APISecret
});

// Если используется интегрированная среда от EasyAR
// app.useEasyAr();
  • Обработка бизнес-логики
app.callback = (msg) => {
    // msg содержит информацию о распознанной цели
    // Обработайте бизнес-логику, проанализировав поле meta
};

Ui и инициализация облачного распознавания

Файл html/src/app.js основные описания методов.

  • Инициализация выбора камеры
constructor(url = '') {
}
  • Использование пользовательского токена для настройки облачного распознавания
setToken(token) {
}
  • Использование интегрированной среды easyar для настройки облачного распознавания
useEasyAr() {
}

Обработка облачного распознавания

Описание основных методов в файле html/src/webar.js.

  • Снимок с камеры и конфигурация облачного распознавания
constructor(interval, recognizeUrl, token, container) {
}
  • Открытие камеры, определение ориентации и настройка предпросмотра потока видео в горизонтальной/вертикальной ориентации
openCamera(constraints) {
}
  • Запуск распознавания
startRecognize(callback) {
}
  • Создание снимка
captureVideo() {
}
  • Отправка снимка в сервис облачного распознавания
httpPost(data) {
}

Связанные темы