Table of Contents

Руководство Web-разработчика по image cloud recognition

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

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

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

Процесс выглядит следующим образом:

flowchart LR

A((Инициализация камеры)) --> B[Захват изображения камеры] --> C{Вызов cloud recognition API}
C ----> |Target не распознан| B
C ----> |Target распознан| 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 для preview в реальном времени
  • canvasEl - элемент canvas
  • canvasCtx - объект context 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();

Вызов cloud recognition 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 и т. д.

Обработка результата recognition

После получения запроса cloud recognition service API, если target успешно распознан, возвращается результат recognition; если target не распознан, возвращается статус-код отсутствия распознавания; при других ошибках возвращаются соответствующий код ошибки и сообщение.

Target не распознан

Если target не распознан, statusCode равен 17, а возвращаемый результат выглядит так:

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

Target распознан

Если target распознан, 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
}

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

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

Полную информацию о fields см. в API reference

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

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

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