Integrating WebGazer with React

[ianboru]

I was trying to build some gaze tracking models for use in js when I stumbled on your project. I am currently trying to incorporate webgazer.js into a React App and later into a chrome extension if the proof of concept works. I built webgazer from source, then moved the /src directory into my app and imported webgazer into my app.

First I receive a bunch of errors that many variables are not defined. I assume that this is because react expects every variable to be explicitly defined with var, const or let.

I fixed all of those issues but then got this error

This got me wondering if I am not correctly incorporating the library. Do you have any suggestions on this integration or idea why it's not working out of box?

Thanks in advance!

[christoph-clouds]

@ianboru have you found a solution to this? I'm trying to import webgazer like you, but am getting the same TypeError. Too bad that the documentation is quite unexplanatory.

[ianboru]

@christoph-clouds I ended up putting that project on hold but no i never solved the issue.

[christoph-clouds]

@ianboru too bad! I guess i'll just keep on trying or start looking for alternatives.

[ianboru]

@christoph-clouds I started to train my own neural net using face tracking points but it wasn't that great. I used posenet facepoints, but openpose may have more points and thus better relationship to on screen eye position.

[jeffhuang]

Making it work with React would probably require some modest amount of effort to change some of the names. I think the issue is that React treats capitalized classes as Components. We currently don't have time to make these edits, so if someone else would like to, that would be really cool.

[majklovec]

put / eslint-disable / as a first line to disable eslint

[innhyu]

FYI, you can use react-script-load and load the script using a link instead. This bypasses the errors that occur from compiling the script.