Table of Contents

Web-пример облачного распознавания изображений

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

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

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

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

  • Имя изображения распознавания: задайте цели распознавания имя, например demo.
  • Загрузка изображения распознавания: выберите и загрузите изображение. В этом sample используется изображение: https://www.easyar.cn/assets/images/webar/xiaoxiongmao.png.
  • Ширина: ширина изображения распознавания (cm). Высота изображения распознавания будет автоматически рассчитана системой на основе загруженного изображения. Размер изображения распознавания соответствует размеру виртуального контента, в этом sample он не используется.
  • Meta: дополнительная информация, обычно используемая для хранения информации AR-контента. В этом sample используется содержимое: {"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, чтобы получить исходную информацию meta.

// 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

    Конфигурация облачного распознавания и бизнес-обработка после успешного распознавания.

Ожидаемый эффект

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

Ожидаемый эффект

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

Ожидаемый эффект

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

Ожидаемый эффект

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

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

Совет

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

В качестве примера мы используем TokenThreeJsExample (рендеринг 3D-моделей), чтобы представить описание основного исходного кода в sample.

Обработка бизнес-логики

The main methods in TokenThreeJsExample/asset/js/app.js are described below.

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

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

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

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

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

Обработка Cloud Recognition

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

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

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