[WebAR] Letsee で HelloWorld!

Sadao Tokuyama

2020年12月3日 01:16

韓国スタートアップ Letseeから「Letsee WebAR SDK」が提供されました。早速、Hello Worldをサクッと試してみたいと思います！詳細については以下の記事をご参照ください。

体験版を申し込む

以下から体験版を申し込みます。

利用規約の同意

プライバシーポリシーの同意

名前とメールアドレスを入力後、「WebAR SDKの無料体験版を申し込む」ボタンをクリック。

以下のようなメッセージが表示されます。

LetSeeから自動メールが届きます。

何故か2020年5月30日までの有効期限となっていますが、誤った情報のようです。（正しい情報版のメールがLetSeeから届いていました。）appKeyは問題なく使用できます。

HelloWorldのサンプルプロジェクトを入手

githubにHelloWorldのサンプルプロジェクトがあります。

https://github.com/letsee/tutorials/tree/master/hello-world

HelloWorldプロジェクトをHTTPSサーバにアップロード

カメラ機能を利用するためHTTPSサーバにアップロードする必要があります。私は「GitHub」でWebページを公開しました。

appkeyの設定について

LetseeのHelloWorldに含まれている「index.html」は、appKeyを直接埋め込んでますが、私は「GitHub」のWebページとして公開しているため、埋め込みを行わず、GetでappKeyを取得して設定するように修正しました。

<!DOCTYPE html>
<html lang="en">
<head>
   <meta charset="UTF-8">
   <title>Letsee WebAR Demo</title>
   
   <!-- Adding Letsee WebAR SDK -->
   <script src="https://cdn.letsee.io/webar/letsee-0.9.18.min.js"></script>
   
   <!-- Adding configuration .JSON file.
		1. The .JSON file MUST BE in the same folder hierarchy
		with your .html and planar image target.
		2. media="place" is required. -->
   <style media="place" type="text/css">
       #container  {
           -letsee-target: uri('letsee-marker.json');
       }
   </style>
</head>
<body>

   <!-- The id of this div tag MUST be the same with id defined in media="place" style. -->
   <div id="container">
       <h2 style="color: white">Hello, world!</h2>
   </div>

   <!-- Loading the Letsee WebAR Engine -->
   <script>
       const key = ((new URL(document.location)).searchParams).get('key');
       const config = {
           "appKey": key,   // Replace the app key here with your own app key
           "trackerType": "IMAGE",     // For planar image tracking, trackerType should be IMAGE
       };
       const letsee = new Letsee(config);
   </script>
</body>
</html>

keyというGetパラメータから取得した文字列をappKeyに設定しています。

スマホから起動

スマホのブラウザから、アップロードした「index.html」ファイルにアクセスします。（カメラのアクセスが聞かれます。「許可」をタップ。）

カメラが起動します。HelloWorldプロジェクトに含まれていた「letsee-marker.jpg」を平面に置いた状態で映し出すとHello Worldの文字が浮かび上がります。

まとめ

フリー版は月1,000views且つ透かしありですが、お試し期間がなくいつまでも利用できそうです。Letseeが提供している機能に物足りなさも感じますが、月々30ドルから商用の利用もできそうなので、導入コストがあまり高くないところが魅力的に感じました。

最後に

OnePlanetは、AR技術をベースに未来のユーザー体験/ユースケースを創造することに挑戦しているARスタートアップです。
様々なテクノロジーにより現実とバーチャルの境界は日々曖昧になり、すでに信じられないような感動体験ができる世の中になりつつあります。

そんなOnePlanetでは、参加してくれるメンバーを募集中です！

よりインタラクティブでパーソナライズされた次の時代のユーザー体験を一緒に創造しませんか？

OnePlanet Tech Magazine

弊社のテックマガジン公開中！この記事以外にも技術記事を配信中！！

#AR #3D #WebAR #Letsee