Table of Contents

Руководство для веб-разработчиков по облачному распознаванию изображений

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

Шаги разработки

Разные браузеры реализуют обработку камеры по-разному. Примеры кода в этой статье не охватывают всех проблем совместимости браузеров. Рекомендуется адаптировать их под конкретную среду.

Процесс:

flowchart LR

A((Инициализация камеры)) --> B[Захват изображения с камеры] --> C{Вызов API облачного распознавания}
C ----> |Цель не распознана| B
C ----> |Цель распознана| D((Обработка бизнес-логики))

Предварительная настройка

Добавьте следующие элементы в HTML-страницу:

<video id="video"></video>
<canvas id="canvas"></canvas>

Добавьте в JS-код следующее для получения необходимых объектов:

const videoEl = document.querySelector('#video');
const canvasEl = document.querySelector('#canvas');
const canvasCtx = canvasEl.getContext('2d');
  • videoEl — элемент video, поток камеры привязывается к video для предпросмотра
  • canvasEl — элемент canvas
  • canvasCtx — контекст 2d объекта canvas

Инициализация камеры

const constraints = {
    audio: false,
    video: true,
};
navigator.mediaDevices.getUserMedia(constraints).then((stream) => {
    videoEl.srcObject = stream;
    videoEl.play();
}).catch((err) => {
    console.error(err);
    alert('Ошибка открытия камеры');
});
  • Настройки параметров камеры:
    • constraints.video как true — автоматический выбор камеры
    • constraints.video как {facingMode: {exact: 'user'}} — использование фронтальной камеры
    • constraints.video как {facingMode: {exact: 'environment'}} — использование тыловой камеры
Совет

Дополнительные параметры камеры см. в Параметрах настройки камеры.

Захват изображения с камеры

canvasCtx.drawImage(videoEl, 0, 0, videoEl.offsetWidth, videoEl.offsetWidth);
const image = canvasElement.toDataURL('image/jpeg', 0.8).split('base64,').pop();

Вызов API облачного распознавания

// Client-end URL вашей облачной библиотеки изображений
const clientendUrl = 'Ваш Client-end URL облачной библиотеки изображений';
// Cloud Token вашей облачной библиотеки изображений
const token = 'Здесь Cloud Token облачной библиотеки изображений';
// CRS AppId вашей облачной библиотеки изображений
const appId = 'Здесь CRS AppId облачной библиотеки изображений';
// image — изображение, захваченное на предыдущем шаге
const image = '/9j/4AAQSkZJRgABAQ......';

fetch(`${clientendUrl}/search`, {
    method: 'POST',
    body: `{ "image": "${image}", "appId": "${appId}", "notracking": true }`,
    headers: {
        'Content-Type': 'application/json;Charset=UTF-8',
        'Authorization': token
    }
}).then(res => res.json()).then(data => {
    console.info(data);
    // TODO: Обработка результатов распознавания
});
Совет

Для отправки сетевых запросов можно использовать fetch, XMLHttpRequest, библиотеку axois и т.д.

Обработка результатов распознавания

API сервиса облачного распознавания при получении запроса возвращает результат распознавания при успешном распознавании цели; если цель не распознана, возвращает код состояния; при других ошибках возвращает соответствующий код ошибки и сообщение.

Цель не распознана

Если цель не распознана, statusCode равен 17, результат возвращается в виде:

{
  "statusCode" : 17,
  "result" : {
    "message" : "No result: there is no matching."
  },
  "date" : "2026-01-05T05:49:02.651Z",
  "timestamp" : 1767592142651
}

Цель распознана

Если цель распознана, statusCode равен 0, результат возвращается в виде:

{
  "statusCode" : 0,
  "result" : {
    "target" : {
      "targetId" : "375a4c2e********915ebc93c400",
      "allowSimilar" : "0",
      "detectableDistinctiveness" : 1,
      "detectableFeatureCount" : 3,
      "type" : "ImageTarget",
      "trackableDistinctiveness" : 0,
      "detectableFeatureDistribution" : 1,
      "trackableFeatureCount" : 3,
      "detectableRate" : 2,
      "trackableFeatureDistribution" : 1,
      "size" : "1",
      "trackablePatchContrast" : 0,
      "meta" : "eyJ2aWRlb1VybCI6Im********pL0Vhc3lBUi1NZWdhLm1wNCJ9",
      "grade" : "2",
      "trackablePatchAmbiguity" : 3,
      "name" : "Mega video",
      "appKey" : "f7ff497********f8068c",
      "trackableRate" : 2,
      "active" : "1",
      "date" : "1746609056804",
      "modified" : 1746609056804
    }
  },
  "date" : "2026-01-05T05:50:36.484Z",
  "timestamp" : 1767592236484
}

Описание основных полей:

  • targetId: идентификатор цели
  • meta: закодированная в base64 дополнительная информация, например URL 3D-контента или видео, добавленные при загрузке изображения для распознавания
  • name: название цели
  • active: "1" — активное состояние, "0" — отключено
Совет

Полную информацию о полях см. в Справочнике API

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

Вы можете использовать информацию из meta для обработки последующей бизнес-логики, например воспроизведения видео, рендеринга 3D-моделей и т.д.

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