SeeSo SDK Web - NPM Module

Supported Environment

Browser Support


80+ ✔︎	ﾠLatest ✔︎︎	ﾠLatest ✔︎︎	15.2+ ✔︎︎

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
    - dist
      - seeso.js
    - easy-seeso.js
Using npm: shell script $ npm install seeso

Using CDN: It will be available soon.

<script src="https://cdn.seeso.io/seeso.js"></script>

Issue License key (Required)

Get a license key from the SeeSo Console

SIMD Setting (Chrome Optional)

* Using this setting improves the performance of the SDK.
* If SIMD option is off, high fps setting (ex: `30`) may drop CPU performance.

in chrome://flags/
WebAssembly SIMD support set Enabled

Sample App Implemetation

Import SDK module and Check SDK status

If "afterInitialized" function is called, it means SDK is ready to use.

// when SDK files download
import EasySeeSo from './seeso/easy-seeso.js'  

// when npm or cdn import
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!')
}

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
    }

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)
    }

Show Gaze Point


    import { TrackingState } from 'seeso';
    ... 

    //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();
        }
    }

Sample Project

Here is a sample VanillaJS Demo

Caution when deploying : 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.

Chrome: Optional, Soon Required after v91

See Chromium blog
Firefox, Edge: Required.

Some web APIs increase the risk of side-channel attacks like Spectre. To mitigate that risk, browsers offer an opt-in-based isolated environment called cross-origin isolated. With a cross-origin isolated state, the webpage will be able to use privileged features including SharedArrayBuffer
For cross-origin-isolation, please refer to the documents below.

Detalhes do pacote

seeso_test

readme (leia-me)