brownhci/WebGazer

Integrating WebGazer with React

Open

#101 opened on Dec 19, 2018

View on GitHub
 (7 comments) (0 reactions) (0 assignees)HTML (3,412 stars) (520 forks)batch import
help wanted

Description

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!

Contributor guide

Tech stack
javascriptreact
Domain
frontend
Issue type
documentation
DifficultyEstimated implementation difficulty for a new contributor, from 1 for very small changes to 5 for expert-level work.
3
Estimated timeA rough time range for an experienced contributor to investigate, implement, test, and prepare a pull request.
1-3 hours
Activity statusHow available the issue appears right now: fresh, active, stale, blocked, or waiting on maintainer input.
stale
ClarityHow clearly the issue explains the expected change, acceptance criteria, and next step.
clear
Prerequisites
ReactJavaScript modulesWebGazer library
Newbie friendlinessA 1-100 score estimating how approachable this issue is for first-time contributors.
20
Research direction
Review the webgazer.js source code to identify global variables and module exports that need to be defined for React compatibility. Check if there is a need for a proper npm package or a wrapper component. Look at comments in the issue for suggestions from the community. Possibly create a React wrapper component that initializes webgazer and handles lifecycle.