Skip to main content

Quick Start (Javascript)

Supported Environment

  • Browser Support
chromefirefoxsafariedge
✔︎✔︎︎ᅠᅠ✘︎︎✔︎︎

Sample Project

Please go to the sample project page for the purpose of using it rather than implementing it.

Download SDK (without npm)

  1. Environment Set-ups
  • Download SDK files directly. The Following files should exist:
    1. Go to the path where you downloaded the SDK files. There should be the following files below.
      • seeso-minjs
        • easy-seeso.js
        • seeso.min.js
    2. Place seeso-minjs folder into the project directory web-quick-start-1
  1. Import SDK module and Check SDK status

       import EasySeeSo from '${your project path}/seeso-minjs/easy-seeso';
    (async () => {
    const seeso = new EasySeeSo();
    // Don't forget to enter your license key.
    await seeso.init('YOUR_LICENSE_KEY', afterInitialized, afterFailed)
    })()

    function afterInitialized () {
    console.log('sdk init success!')
    }

    function afterFailed () {
    console.log('sdk init fail!')
    }

Using npm (node version < 16.11)

  1. Environment Set-ups

      $ npm install seeso
  2. Import SDK module and Check SDK status

       import EasySeeSo from 'seeso/easy-seeso';
    (async () => {
    const seeso = new EasySeeSo();
    // Don't forget to enter your license key.
    await seeso.init('YOUR_LICENSE_KEY', afterInitialized, afterFailed)
    })()

    function afterInitialized () {
    console.log('sdk init success!')
    }

    function afterFailed () {
    console.log('sdk init fail!')
    }

Show Gaze Point

    // when npm import
import {TrackingState} from 'seeso'
// when SDK download
import {TrackingState} from '${your project path}/seeso-minjs/seeso.min'
...

//GazeCallback implementation
function onGaze (gazeInfo) {
if (gazeInfo.trackingState === TrackingState.SUCCESS){
let canvas = document.getElementById("output")
canvas.width = window.innerWidth
canvas.height = window.innerHeight
let ctx = canvas.getContext("2d");
ctx.fillStyle = '#FF0000'
ctx.clearRect(0, 0, canvas.width, canvas.height )
ctx.beginPath();
ctx.arc(gazeInfo.x, gazeInfo.y, 10, 0, Math.PI * 2, true);
ctx.fill();
}
}

How to implement simple calibration

1. Call Calibration Page

    ...

function callCalibrationPage() {
// static function.
// Because the web page is moved. (https://calibration.seeso.io/#/service)
EasySeeSo.openCalibrationPage('YOUR_LICENSE_KEY', 'YOUR_USER_ID', 'YOUR_REDIRECT_URL', 5); // 5 is number of calibration points
}

2. Set Calibration Data


...

// in redirected page
function parseCalibrationDataInQueryString () {
const href = window.location.href
const decodedURI = decodeURI(href)
const queryString = decodedURI.split('?')[1];

if (!queryString) return undefined
const jsonString = queryString.slice("calibrationData="length, queryString.length)
return jsonString
}

function setCalibrationDataOnSeeSoSDK() {
const calibrationData = parseCalibrationDataInQueryString();
seeso.setCalibrationData(calibrationData)
}

Sample Project

Here is a sample VanillaJS Demo

Caution

Enable Cross-Origin Isolation

  • The content of this part is not necessary for development. However, it is required for deployment.

seeso.js uses SharedArrayBuffer Object.

Cross-Origin Isolation must be enabled to use SharedArrayBuffer in some browsers.