search

brownhci / WebGazer

WebGazer.js: Scalable Webcam EyeTracking Using User Interactions
https://webgazer.cs.brown.edu
Other
3.54k stars 536 forks source link

How to use WebGazer in React #231

Closed fakeharahman closed 2 years ago

fakeharahman commented 3 years ago

I have tried using npm install webgazer and importing at at the top of the file but I got the same error as mentioned in issue #196. I tried using the script load method as given in issue #178 but that gave me an error that says :

DevTools failed to load source map: Could not load content for https://webgazer.cs.brown.edu/webgazer.js.map: HTTP error: status code 404, net::ERR_HTTP_RESPONSE_CODE_FAILURE

and a few seconds later I get this error:

webgazer.js:112880 Uncaught (in promise) TypeError: backend.incRef is not a function at identity (webgazer.js:112880) at Object.cast [as kernelFunc] (webgazer.js:116555) at kernelFunc (engine.ts:562) at engine.ts:619 at Engine.scopedRun (engine.ts:436) at Engine.runKernelFunc (engine.ts:616) at cast_ (array_ops.ts:114) at Module.cast (operation.ts:45) at Tensor.asType (tensor.ts:464) at Tensor.toFloat (tensor.ts:584) at webgazer.js:50952 at engine.ts:425 at Engine.scopedRun (engine.ts:436) at Engine.tidy (engine.ts:423) at Module.tidy (webgazer.js:15877) at FaceMesh.estimateFaces (webgazer.js:50948) at TFFaceMesh.getEyePatches (webgazer.js:137058) at async getPrediction (webgazer.js:138717) at async loop (webgazer.js:138780) at async init (webgazer.js:139060)

In both the ways, on adding webgazer.params.showVideoPreview = true;, the video and the bounding box gets displayed but it makes no prediction. Is there anything I am missing here?

karthik-Gopalan commented 3 years ago

We still use the scriptload method in react and it works fine. I did not use the webgazer from the site. I cloned the repos and compiled my own. Works fine. Can you share your code as to how you are loading it ?

fakeharahman commented 3 years ago

I copied the exact code from the issue you opened. I didn't clone the repo but loaded the script from the webgazer website like this: script.src = "https://webgazer.cs.brown.edu/webgazer.js"

Could this be the issue?

jeffhuang commented 2 years ago

I think this is resolved in https://github.com/brownhci/WebGazer/issues/231 but if not, please reopen. The missing map file is not a big deal, you can just put the map file in the appropriate folder.

Maybe it's an issue with setting the showVideoPreview param directly instead of webgazer.showVideoPreview(true). You can take a look at the calibration example and just copy what is done there.