Getting Started

About Letsee WebAR SDK

Letsee WebAR SDK is a technology that enables AR Contents Running on the Web Browser fast and easy. You can conveniently create AR experiences that interact realistically with objects and environments using WebGL-based 3D content and/or operable HTML elements.

Requirements

Letsee WebAR SDK requires a mobile browser that supports the following features:

• WebGL (canvas.getContext(‘webgl’) or canvas.getContext(‘webgl2’))
• getUserMedia (navigator.mediaDevices.getUserMedia)
• deviceorientation (window.DeviceOrientationEvent)
• Web-Assembly/WASM (window.WebAssembly)

Note: Running Letsee WebAR SDK is only possible through **https**. This is necessary for the browser to access the camera.

The above applies both to iOS and Android devices

• iOS
  • OS Version: iOS 11 and later
  • Supported browsers:
    • Safari
      • Note: In Safari, the call to getUserMedia directly returns the video input device, not a UIWebView or WKWebView.
    • Chrome
      • iOS 14.4 and later
      • Chrome 87.0.4280.77 and later
• Android
  • Supported browsers
    • Chrome
    • Chrome-variants (e.g. Samsung Browser)
    • Firefox

Sample Project

You can find simple to follow-up sample project in the Letsee's public GitHub repository

letsee/webar-tutorials-example

Authentication Key

Authentication Key is required for the project development and distribution.

Sign up and log in to the Letsee for Developers site and create a project to get an Authentication Key.

Letsee for Developers

Add the Authentication Key to the web project and load the SDK engine

Create a project on the Letsee for Developers site and load the Web AR SDK using the issued authentication key. When loading, the registered domain is checked, so the web content must be executed in the same domain(URL) you input when starting a new project.

After the SDK script is loaded, you need to register the ready callback function so that the AR contents features can be operated when the engine is ready. The sample project above shows how to register a callback function for content operation after loading the SDK.

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

<script>
	letsee.ready(callback);
	letsee.init({ trackerType: 'Type of supported trackers(image | marker | qrcode)'};
	letsee.onTrackStart((e) => {
		// describe the contents of the callback function to be operated when tracking starts
	});
  letsee.onTrackMove((e) => {
    // describe the contents of the callback function to be operated when tracking starts
	});
  letsee.onTrackEnd((e) => {
	  // describe the contents of the callback function to be operated when tracking starts
  });
	const callback = () => {
		letsee.start(); 
		// After engine preparation is complete, be sure to execute the start() method to enable AR mode to operate.
	};
</script>