brownhci / WebGazer

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

Import WebGazer in Angular #183

Open paulSerre opened 3 years ago

paulSerre commented 3 years ago

Hi,

I have an angular application in a "front-end" folder. I tested everything: -I cloned the "WebGazer" repo and built it. Next, I put it in scripts in angular.json: it didn't work. -I used the "npm install webgazer" and used import webgazer from 'webgazer"

And nothing work... Have you ever imported webgazer in an app?

Furthermore, with the npm i webgazer command I have a lot of issue:

npm WARN @angular/animations@10.1.4 requires a peer of @angular/core@10.1.4 but none is installed. You must install peer dependencies yourself. npm WARN @angular/router@10.1.4 requires a peer of @angular/core@10.1.4 but none is installed. You must install peer dependencies yourself. npm WARN @angular/router@10.1.4 requires a peer of @angular/common@10.1.4 but none is installed. You must install peer dependencies yourself. npm WARN @angular/router@10.1.4 requires a peer of @angular/platform-browser@10.1.4 but none is installed. You must install peer dependencies yourself.
npm WARN @swimlane/ngx-charts@14.0.0 requires a peer of @angular/animations@~9.1.1 but none is installed. You must install peer dependencies yourself. npm WARN @swimlane/ngx-charts@14.0.0 requires a peer of @angular/cdk@^9.2.0 but none is installed. You must install peer dependencies yourself. npm WARN @swimlane/ngx-charts@14.0.0 requires a peer of @angular/core@~9.1.1 but none is installed. You must install peer dependencies yourself. npm WARN @swimlane/ngx-charts@14.0.0 requires a peer of @angular/common@~9.1.1 but none is installed. You must install peer dependencies yourself. npm WARN @swimlane/ngx-charts@14.0.0 requires a peer of @angular/forms@~9.1.1 but none is installed. You must install peer dependencies yourself.
npm WARN @swimlane/ngx-charts@14.0.0 requires a peer of @angular/platform-browser@~9.1.1 but none is installed. You must install peer dependencies yourself. npm WARN @swimlane/ngx-charts@14.0.0 requires a peer of @angular/platform-browser-dynamic@~9.1.1 but none is installed. You must install peer dependencies yourself. npm WARN @swimlane/ngx-charts@14.0.0 requires a peer of tslib@^1.10.0 but none is installed. You must install peer dependencies yourself. npm WARN angular2-toaster@8.0.0 requires a peer of @angular/common@^8.0.0 but none is installed. You must install peer dependencies yourself. npm WARN angular2-toaster@8.0.0 requires a peer of @angular/compiler@^8.0.0 but none is installed. You must install peer dependencies yourself. npm WARN angular2-toaster@8.0.0 requires a peer of @angular/core@^8.0.0 but none is installed. You must install peer dependencies yourself. npm WARN bootstrap@4.3.1 requires a peer of popper.js@^1.14.7 but none is installed. You must install peer dependencies yourself. npm WARN ng2-smart-table@1.6.0 requires a peer of @angular/common@^9.0.0 but none is installed. You must install peer dependencies yourself. npm WARN ng2-smart-table@1.6.0 requires a peer of @angular/core@^9.0.0 but none is installed. You must install peer dependencies yourself. npm WARN ng2-smart-table@1.6.0 requires a peer of @angular/forms@^9.0.0 but none is installed. You must install peer dependencies yourself. npm WARN ng2-smart-table@1.6.0 requires a peer of tslib@^1.9.0 but none is installed. You must install peer dependencies yourself. npm WARN ngx-echarts@5.1.2 requires a peer of tslib@^1.10.0 but none is installed. You must install peer dependencies yourself. npm WARN ngx-matomo@0.1.4 requires a peer of @angular/core@>=5.0.0 <9.0.0 but none is installed. You must install peer dependencies yourself. npm WARN tslint-language-service@0.9.9 requires a peer of typescript@>= 2.3.1 < 3 but none is installed. You must install peer dependencies yourself. npm WARN tslint-language-service@0.9.9 requires a peer of tslint@>= 4 < 6 but none is installed. You must install peer dependencies yourself. npm WARN @tensorflow-models/facemesh@0.0.3 requires a peer of @tensorflow/tfjs-converter@^1.6.1 but none is installed. You must install peer dependencies yourself. npm WARN @tensorflow-models/facemesh@0.0.3 requires a peer of @tensorflow/tfjs-core@^1.6.1 but none is installed. You must install peer dependencies yourself. npm WARN @tensorflow-models/blazeface@0.0.5 requires a peer of @tensorflow/tfjs-core@^1.5.2 but none is installed. You must install peer dependencies yourself. npm WARN @tensorflow-models/blazeface@0.0.5 requires a peer of @tensorflow/tfjs-converter@^1.5.2 but none is installed. You must install peer dependencies yourself. npm WARN SOB_2020@0.0.0 No license field. npm WARN optional SKIPPING OPTIONAL DEPENDENCY: fsevents@1.2.13 (node_modules\live-server\node_modules\fsevents): npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for fsevents@1.2.13: wanted {"os":"darwin","arch":"any"} (current: {"os":"win32","arch":"x64"}) npm WARN optional SKIPPING OPTIONAL DEPENDENCY: fsevents@2.1.3 (node_modules\fsevents): npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for fsevents@2.1.3: wanted {"os":"darwin","arch":"any"} (current: {"os":"win32","arch":"x64"}) npm WARN optional SKIPPING OPTIONAL DEPENDENCY: fsevents@1.2.13 (node_modules\webpack-dev-server\node_modules\fsevents): npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for fsevents@1.2.13: wanted {"os":"darwin","arch":"any"} (current: {"os":"win32","arch":"x64"}) npm WARN optional SKIPPING OPTIONAL DEPENDENCY: fsevents@1.2.13 (node_modules\watchpack-chokidar2\node_modules\fsevents): npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for fsevents@1.2.13: wanted {"os":"darwin","arch":"any"} (current: {"os":"win32","arch":"x64"})

paulSerre commented 3 years ago

Hi,

I "fixed" the problem, but it confirms that the new version have isssues. To make it works, I had to:

If you set that to true and you don't want to see the video, don't forget to set

.showFaceOverlay(false)
.showVideo(false)
.showFaceFeedbackBox(false) 
xanderkoo commented 3 years ago

Hi, I think I've addressed the webgazer.params.showVideoPreview issue in the latest PR #184. Apologies for that bug.

We haven't tested WebGazer with Angular on our end before -- would you be able to show your repo/how to replicate this issue?

paulSerre commented 3 years ago

Hi,

It stills doesn't work. I still have to set webgazer.params.showVideoPreview to true.

However, I use webgazer.commonjs2 from npm install. Maybe that's why it doesn't work?

Edit: It actually works if we clone directly the repo. Don't use npm instal webgazer.

Now i'm gonna see about the angular integration. First, a simple "import { webgazer } from 'webgazer'" still doesn't work. A "import webgazer from node_modules/webgazer.commonjs2.js" is required. Secondly, it would be better setting a webgazer param for saving data across session since the "window" isn't very well accessible in angular.