Merge branch 'main' of https://github.com/ruxailab/web-eye-tracker-front

Author: jvJUCA

package.json

@@ -13,29 +13,29 @@
     "@tensorflow/tfjs-backend-wasm": "^3.10.0",
     "@tensorflow/tfjs-converter": "^3.10.0",
     "@tensorflow/tfjs-core": "^3.10.0",
-    "axios": "^0.21.1",
+    "axios": "^1.7.9",
     "core-js": "^3.6.5",
-    "firebase": "^8.6.3",
+    "firebase": "^8.10.1",
     "heatmap.js": "^2.0.5",
     "vue": "^2.6.11",
     "vue-router": "^3.2.0",
     "vuetify": "^2.4.0",
     "vuex": "^3.4.0"
   },
   "devDependencies": {
-    "@vue/cli-plugin-babel": "~4.5.0",
-    "@vue/cli-plugin-eslint": "~4.5.0",
-    "@vue/cli-plugin-router": "~4.5.0",
-    "@vue/cli-plugin-vuex": "~4.5.0",
-    "@vue/cli-service": "~4.5.0",
-    "babel-eslint": "^10.1.0",
-    "eslint": "^6.7.2",
-    "eslint-plugin-vue": "^6.2.2",
-    "sass": "~1.32.6",
-    "sass-loader": "^10.0.0",
-    "vue-cli-plugin-vuetify": "~2.3.1",
-    "vue-template-compiler": "^2.6.11",
-    "vuetify-loader": "^1.7.0"
+    "@vue/cli-plugin-babel": "~5.0.0",
+    "@vue/cli-plugin-eslint": "~5.0.0",
+    "@vue/cli-plugin-router": "~5.0.0",
+    "@vue/cli-plugin-vuex": "~5.0.0",
+    "@vue/cli-service": "~5.0.0",
+    "@babel/eslint-parser": "^7.16.0",
+    "eslint": "^7.32.0",
+    "eslint-plugin-vue": "^8.0.3",
+    "sass": "~1.32.0",
+    "sass-loader": "^12.0.0",
+    "vue-cli-plugin-vuetify": "~2.5.8",
+    "vue-template-compiler": "^2.7.16",
+    "vuetify-loader": "^1.9.2"
   },
   "eslintConfig": {
     "root": true,
@@ -47,9 +47,12 @@
       "eslint:recommended"
     ],
     "parserOptions": {
-      "parser": "babel-eslint"
+      "parser": "@babel/eslint-parser"
     },
-    "rules": {}
+    "rules": {
+      "vue/multi-word-component-names": "off",
+      "vue/no-mutating-props": "off"
+    }
   },
   "browserslist": [
     "> 1%",

src/main.js

@@ -5,6 +5,7 @@ import store from './store'
 import vuetify from './plugins/vuetify';
 import './services/axios'
 import firebase from 'firebase/app'
+import 'firebase/firestore'
 
 Vue.config.productionTip = false
 

src/store/calibration.js

@@ -1,6 +1,7 @@
-import axios from "axios";
-import firebase from "firebase/app";
-import router from "@/router";
+import axios from 'axios';
+import firebase from 'firebase/app';
+import 'firebase/firestore';
+import router from '@/router';
 export default {
   state: {
     calibName: "",

src/views/DoubleCalibrationRecord.vue

@@ -705,8 +705,14 @@ export default {
 
           // Init record webcam
           this.recordWebCam.start();
-          video.onloadeddata = () => {
-            this.detectFace();
+          
+          // Wait for video to be fully ready with proper dimensions
+          video.onloadedmetadata = async () =>{
+            // Additional wait to ensure video renders properly
+            await new Promise(resolve => setTimeout(resolve, 200));
+            if (video.videoWidth > 0 && video.videoHeight > 0) {
+              this.detectFace();
+            }
           }
         })
         .catch((e) => {
@@ -737,8 +743,18 @@ export default {
     },
 
     async detectFace() {
+      const video = document.getElementById("video-tag");
+      
+      // Ensure video has valid dimensions before processing
+      if (!video || video.videoWidth === 0 || video.videoHeight === 0) {
+        console.warn('Video not ready yet, waiting...');
+        // Wait a bit and try again
+        await new Promise(resolve => setTimeout(resolve, 100));
+        return this.detectFace(); // Retry
+      }
+      
       const lastPrediction = await this.model.estimateFaces({
-        input: document.getElementById("video-tag"),
+        input: video,
       });
       return lastPrediction
     },