Comments (8)
I know that it's not ideal, currently I'm trying to implement it in a angular app with Typescript.
I apologize in advance if I can't be clear enougth explaining.
So, I've created a composable which is basically a wrapper to override the getEyeFeats method inside util.
import { WebGazer, WebGazerParams } from 'webgazer';
export async function useWebgazer(
params: Partial<WebGazerParams> = {}
): Promise<WebGazer> {
const webgazer = (await import('webgazer')).default;
const resizeWidth = 10;
const resizeHeight = 6;
webgazer.util.getEyeFeats = (eyes: any) => {
const process = (eye: any) => {
const resized = webgazer.util.resizeEye(eye, resizeWidth, resizeHeight);
if (!resized) return;
const gray = webgazer.util.grayscale(
resized.data,
resized.width,
resized.height
);
let hist: any = [];
webgazer.util.equalizeHistogram(gray, 5, hist);
return hist;
};
if (webgazer.params.trackEye == 'left') {
return process(eyes.left);
} else if (webgazer.params.trackEye == 'right') {
return process(eyes.right);
} else {
return [].concat(process(eyes.left), process(eyes.right));
}
};
webgazer.params = {
...webgazer.params,
...params,
};
return webgazer;
}
To make the intelisense work better I've also created a webgazer.d.ts and added to tsconfig.app.json imported types
declare module 'webgazer' {
export interface GazeData {
x: number;
y: number;
}
export interface WebGazerParams {
applyKalmanFilter: boolean;
camConstraints: WebGazerParamsCamConstraints;
dataTimestep: number;
faceFeedbackBoxId: string;
faceFeedbackBoxRatio: number;
faceOverlayId: string;
gazeDotId: string;
getEventTypes: () => string[];
mirrorVideo: boolean;
moveTickSize: number;
saveDataAcrossSessions: boolean;
showFaceFeedbackBox: boolean;
showFaceOverlay: boolean;
showGazeDot: boolean;
showVideo: boolean;
showVideoPreview: boolean;
storingPoints: number;
trackEye: 'left' | 'right' | 'both';
videoContainerId: string;
videoElementCanvasId: string;
videoElementId: string;
videoViewerHeight: number;
videoViewerWidth: number;
}
export interface WebGazerParamsCamConstraints {
video: WebGazerParamsCamConstraintsVideo;
}
export interface WebGazerParamsCamConstraintsVideo {
width: WebGazerParamsCamConstraintsVideoSize;
height: WebGazerParamsCamConstraintsVideoSize;
}
export interface WebGazerParamsCamConstraintsVideoSize {
min: number;
ideal: number;
max: number;
}
export interface WebGazerUtil extends any {
getEyeFeats: (eye: any) => any;
resizeEye: (
eye: any,
resizeWidth: number,
resizeHeight: number
) => ImageData;
grayscale: (data: Uint8ClampedArray, width: number, height: number) => any;
equalizeHistogram: (src: any, step: any, dst: any) => any;
}
export interface WebGazer {
webgazer: WebGazer;
setGazeListener(
callback: (data: GazeData | null, elapsedTime: number) => void
): WebGazer;
begin(): Promise<WebGazer>;
pause(): WebGazer;
resume(): WebGazer;
resetCalibration(): WebGazer;
showPredictionPoints(show: boolean): WebGazer;
showVideo(show: boolean): WebGazer;
showFaceOverlay(show: boolean): WebGazer;
isReady(): boolean;
params: WebGazerParams;
util: WebGazerUtil;
}
const webgazer: WebGazer;
export default webgazer;
export = webgazer;
}
And here is how I start it in my component page
async startWebGazer() {
// don't forget to import your composable
const webgazer = await useWebgazer();
await webgazer
.setGazeListener((data, elapsedTime) => {
if (!data) return;
this.eyePosition = {
x: data.x,
y: data.y,
};
})
.begin();
}
This way at least everything that I need for now is working, and if I need to change anything else I can just create an override to the desired method and use the current imported webgazer instance.
from webgazer.
I'm traveling and not able to test this right now, but what about importing the default module
import webgazer from 'webgazer'
from webgazer.
Yup, adding that line to utils.mjs fixes it!
from webgazer.
Great, if you could submit a PR, I'll take a look when I'm back home
from webgazer.
Given the simplicity of the fix, I think it makes more sense for an existing contributor (with a fork) to make this change.
from webgazer.
@Skylion007 the import webgazer from 'webgazer'
line breaks the webpack build npm run build
because well, it doesn't exist when it's building. Any idea of the usual workaround, so that it can also be imported?
from webgazer.
any update ?
from webgazer.
@Bmastaz the fix doesn't work (see my message above), so there isn't a good solution right now. If anyone proposes a solution, we can consider it, but right now this is still an open issue.
from webgazer.
Related Issues (20)
- It does not catch when user closed their eyes! it should make the border red when eyes are closed.
- Webgazer stop collecting data on tab change
- Negative viewport coordinates HOT 1
- Failed to fetch saved models in example HOT 4
- showVideo() causing loss of tracking when switched repeatedly on Firefox v116 HOT 3
- How to use removeMouseEventListeners HOT 2
- a question/help needed! HOT 1
- Error caused by not importing files with the ".mjs" extension
- Defining gaze prediction rate? HOT 1
- Attempting to nest WebGazer into a Win32 program to help people with hand defects, encountered some issues
- `getStoredPoints` returning empty lists HOT 3
- Programmatical Click calibration not as good as manual
- Minimal working example of webgazer HOT 5
- Webgazer runs laggy on Android native code HOT 1
- CORS Policy Error
- Multiple mistakes appeared in the code while I was trying to refactor it and enforce type checking. Can someone just answer those questions? HOT 2
- Styles in angular component
- Error fetching tensorflow models HOT 4
- Unexpected Fetch TypeError in WebGazer HOT 3
- webgazer not work
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from webgazer.