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.