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 객체 초기화
// 클라우드 인식의 Client-end URL로 App 객체 초기화
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' // APIKey + APISecret으로 생성한 Token
});

// EasyAR에서 제공하는 통합 환경을 사용하는 경우
// app.useEasyAr();
  • 비즈니스 로직 처리
app.callback = (msg) => {
    // msg는 인식된 target의 정보입니다
    // 그 안의 meta 필드를 파싱하고 비즈니스 로직 처리
};

UI 및 Cloud Recognition 초기화

html/src/app.js 파일의 주요 메서드 설명입니다.

  • 카메라 선택 초기화
constructor(url = '') {
}
  • 사용자 지정 Token으로 Cloud Recognition 구성
setToken(token) {
}
  • EasyAR 통합 환경으로 Cloud Recognition 구성
useEasyAr() {
}

Cloud Recognition 처리

파일 html/src/webar.js의 주요 메서드 설명.

  • 카메라 screenshot 및 Cloud Recognition 구성
constructor(interval, recognizeUrl, token, container) {
}
  • 카메라를 열고 가로/세로 video stream preview 설정 감지
openCamera(constraints) {
}
  • recognition 시작
startRecognize(callback) {
}
  • screenshot
captureVideo() {
}
  • screenshot을 Cloud Recognition 서비스로 보내 recognition
httpPost(data) {
}

관련 주제