Table of Contents

이미지 클라우드 인식 web 샘플

이 문서는 샘플 코드를 심층 분석하여 여러분이 이해하고 자신만의 인스턴스를 개발할 수 있도록 도와줍니다.

샘플 다운로드 및 구성 방법은 빠른 시작을 참조하세요.

인식 대상 설정

클라우드 인식 관리에서 인식 이미지를 업로드합니다.

  • 인식 이미지 이름: 인식 대상에 이름을 지정합니다(예: demo).
  • 인식 이미지 업로드: 이미지를 선택하여 업로드합니다. 이 샘플에서 사용된 이미지는 다음과 같습니다: https://www.easyar.cn/assets/images/webar/xiaoxiongmao.png.
  • 너비: 인식 이미지의 너비(cm). 인식 이미지의 높이는 업로드한 이미지를 기반으로 시스템에서 자동으로 계산됩니다. 인식 이미지의 크기는 가상 콘텐츠의 크기와 일치하며, 이 샘플에서는 사용되지 않습니다.
  • Meta: 추가 정보로 일반적으로 AR 콘텐츠 정보를 저장하는 데 사용됩니다. 이 샘플에서 사용된 내용은 다음과 같습니다: {"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

    클라우드 인식 구성 및 인식 성공 후 비즈니스 처리.

예상 효과

  • 카메라 초기화 후 인터페이스

예상 효과

  • 비디오 재생 효과

예상 효과

  • 모델 렌더링 효과

예상 효과

코드 심층 이해

클라우드 인식 개발을 더 깊이 학습하고자 한다면 샘플 소스 코드를 읽어보는 것을 강력히 권장합니다. 이를 기반으로 소스 코드를 수정하고 확장할 수 있습니다.

팁

다음 내용은 HTML 및 JavaScript 개발 능력이 어느 정도 있다는 전제하에 설명됩니다. 이러한 기본 기술을 아직 습득하지 못했다면 관련 지식을 먼저 체계적으로 학습하는 것이 좋습니다.

TokenThreeJsExample(3D 모델 렌더링)을 예로 들어 샘플의 주요 소스 코드 설명을 소개합니다.

비즈니스 처리

파일 TokenThreeJsExample/asset/js/app.js 주요 메소드 설명.

  • App 객체 초기화
// 클라우드 인식 Client-end URL을 사용하여 App 객체 초기화
const app = new App('https://af0c1ca3b........0601c74.cn1.crs.easyar.com:8443');
  • 클라우드 인식 관련 정보 설정
// 클라우드 인식 라이브러리 AppId와 token 설정, app.useEasyAr() 중 하나만 사용 가능
app.setToken({
    'crsAppId': 'f7ff4977......9984ef8068c', // 클라우드 인식 라이브러리의 CRS AppId
    'token': 'pQWnZo1Qt4drnc........QXUQambomdPWEj9So' // APIKey + APISecret으로 생성된 Token
});

// EasyAR가 제공하는 통합 환경을 사용하는 경우
// app.useEasyAr();
  • 비즈니스 로직 처리
app.callback = (msg) => {
    // msg는 인식된 대상의 정보
    // 내부 meta 필드를 파싱하여 비즈니스 로직 처리
};

UI 및 초기화 클라우드 인식

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

  • 카메라 선택 초기화
constructor(url = '') {
}
  • 사용자 정의 Token으로 클라우드 인식 구성
setToken(token) {
}
  • EasyAR 통합 환경으로 클라우드 인식 구성
useEasyAr() {
}

클라우드 인식 처리

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

  • 카메라 스크린샷과 클라우드 인식 설정
constructor(interval, recognizeUrl, token, container) {
}
  • 카메라 열기, 가로/세로 화면 비디오 스트림 미리보기 설정 감지
openCamera(constraints) {
}
  • 인식 시작
startRecognize(callback) {
}
  • 스크린샷
captureVideo() {
}
  • 스크린샷을 클라우드 인식 서비스로 전송하여 인식
httpPost(data) {
}

관련 주제