image cloud recognition Web 개발자 가이드

Web에서 image cloud recognition을 구현하는 핵심 프로세스는 몇 가지 주요 단계로 구성됩니다. 먼저 브라우저를 통해 카메라를 호출하여 실시간 화면을 캡처하고, 이어서 수집한 이미지 데이터를 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 stream을 video에 바인딩하여 실시간 preview를 제공합니다
canvasEl은 canvas 요소입니다
canvasCtx는 canvas의 context 2d 객체입니다

카메라 초기화

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을 인식하지 못한 경우 미인식 status code를 반환하며, 기타 오류인 경우 해당 error code와 메시지를 반환합니다.

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: target id
meta: base64로 인코딩된 추가 정보로, recognition 이미지를 업로드할 때 추가한 3D 콘텐츠 또는 video URL 등의 내용
name: target 이름
active: "1"은 활성 상태, "0"은 비활성 상태를 의미합니다

팁

전체 fields 정보는 API reference를 참조하십시오

비즈니스 로직 처리

meta의 정보를 사용해 비디오 재생, 3D 모델 렌더링 등 후속 비즈니스 로직을 처리할 수 있습니다.

Table of Contents