Link Search Menu Expand Document

Hello, world!

Letsee WebAR SDK를 이용한 Hello, world! 입니다.

Table of contents

  1. Explain
    1. SDK 임포트
    2. 증강을 위한 Entity 설정
      1. 2D
      2. letsee-marker.json 내용
    3. 증강할 오브젝트 생성
    4. 어플리케이션 실행
  2. What you should see
  3. Final code
  4. Demo

Explain

SDK 임포트

Web AR 어플리케이션을 만들기 위한 Letsee Web AR SDK를 임포트 합니다.

<script src="https://developer.letsee.io/api/webar?key=YOUR_APP_KEY"></script>

증강을 위한 Entity 설정

Letsee Web AR SDK는 증강할 대상을 설정합니다.

2D

증강될 컨텐츠가 2D면 증강할 대상을 css를 통해 설정합니다. media="place"태그를 사용한 css를 통해 손쉽게 설정할 수 있습니다.

<style media="place" type="text/css">
  #container {
    -letsee-target: uri('letsee-marker.json');
  }
</style>

letsee-marker.json 내용

letsee-marker.json파일에는 증강할 대상의 정보가 담겨 있습니다.

{
  "physicalSize": {
    "width": 200,
    "height": 140
  },
  "image": "letsee-marker.jpg"
}

증강할 오브젝트 생성

Letsee Web AR SDK는 일반적인 HTML Element를 증강 합니다.

<div id="container"><h1 style="color: black">Hello, world!</h1></div>

어플리케이션 실행

어플리케이션 구동을 위해 init 함수를 통해 letsee 엔진의 초기화를 진행하고, ready 이벤트는 초기화 후 수행하는 callback 함수를 등록합니다. 이 후 letsee.start 실행을 통해 카메라 stream을 얻어옵니다.

letsee.init(); // letsee 엔진 초기화
letsee.ready(() => { // letsee 엔진 초기화 후 실행하는 콜백 함수 등록 
  letsee.start(); // 카메라 stream 얻어옴
});

What you should see






Final code

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Letsee WebAR Demo</title>
  <script src="https://developer.letsee.io/api/webar?key=YOUR_APP_KEY"></script>
  <style media="place" type="text/css">
      #container {
          -letsee-target: uri('letsee-marker.json');
      }
  </style>
</head>
<body>
<div id="container"><h1 style="color: black">Hello, world!</h1></div>
<script>
  letsee.init();
  letsee.ready(() => {
    letsee.start();
  });
</script>
</body>
</html>

Demo

모바일 디바이스로만 확인 가능합니다.
Demo link