seeso v0.2.3
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.
2 months ago
2 months ago
2 months ago
2 months ago
2 months ago
2 months ago
2 months ago
2 months ago
2 months ago
2 months ago
2 months ago
7 months ago
7 months ago
11 months ago
11 months ago
11 months ago
11 months ago
11 months ago
11 months ago
11 months ago
11 months ago
11 months ago
11 months ago
10 months ago
10 months ago
11 months ago
11 months ago
11 months ago
11 months ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago