seeso_test
v0.1.76-beta5
Published
Eye traking module for browser and node.js
Downloads
8,926
Maintainers
Readme
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:
- Go to the path where you downloaded the SDK files.
There should be the following files below.
- SeeSo
- dist
- seeso.js
- easy-seeso.js
- dist
- SeeSo
- Go to the path where you downloaded the SDK files.
There should be the following files below.
Using npm:
$ 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 fordeployment
. 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.