@newtonschool/react_proctoring_library 0.0.1 → 0.0.2

package/dist/utils/webcamUtils.js

@@ -0,0 +1,79 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.updateStatistics = exports.isWebcamVideoValid = exports.getVideoPermission = exports.getGlancePercentage = exports.getAudioVideoPermission = exports.getAudioPermission = void 0;
+
+var _ = require(".");
+
+const isWebcamVideoValid = webcamReference => webcamReference !== null && webcamReference !== undefined && typeof webcamReference.current !== "undefined" && webcamReference.current !== null && webcamReference.current.video.readyState === 4;
+
+exports.isWebcamVideoValid = isWebcamVideoValid;
+
+const updateStatistics = (statistics, tabSwitchCount, fullScreenExitCount, lookedAwayCount, userCount) => {
+  statistics.current.TAB_SWITCH_COUNT = tabSwitchCount;
+  statistics.current.FULLSCREEN_EXIT_COUNT = fullScreenExitCount;
+  statistics.current.LOOKED_AWAY_COUNT = lookedAwayCount;
+  statistics.current.USER_COUNT_MAX = Math.max(userCount, statistics.current.USER_COUNT_MAX);
+};
+
+exports.updateStatistics = updateStatistics;
+
+const getGlancePercentage = partSegmentation => {
+  if (!partSegmentation || !(partSegmentation instanceof Object) || !(0, _.isArrayValid)(partSegmentation.allPoses)) {
+    return 0.0;
+  }
+
+  const allPoses = partSegmentation.allPoses;
+  let totalScoreLeftEye = 0.0,
+      totalScoreRightEye = 0.0,
+      totalScoreNose = 0.0,
+      totalScoreLeftEar = 0.0,
+      totalScoreRightEar = 0.0;
+  let noseIndex = 0,
+      leftEyeIndex = 1,
+      rightEyeIndex = 2,
+      leftEarIndex = 3,
+      rightEarIndex = 4;
+  allPoses.forEach(poseArray => {
+    let keypointsArray = poseArray.keypoints;
+    totalScoreNose += keypointsArray[noseIndex].score;
+    totalScoreLeftEye += keypointsArray[leftEyeIndex].score;
+    totalScoreRightEye += keypointsArray[rightEyeIndex].score;
+    totalScoreLeftEar += keypointsArray[leftEarIndex].score;
+    totalScoreRightEar += keypointsArray[rightEarIndex].score;
+  });
+  const avgScoreLeftEye = totalScoreLeftEye / allPoses.length,
+        avgScoreRightEye = totalScoreRightEye / allPoses.length,
+        avgScoreNose = totalScoreNose / allPoses.length,
+        avgScoreLeftEar = totalScoreLeftEar / allPoses.length,
+        avgScoreRightEar = totalScoreRightEar / allPoses.length;
+  const avgPercentage = 100 * (avgScoreLeftEye + avgScoreRightEye + avgScoreNose + avgScoreLeftEar + avgScoreRightEar) / 5;
+  return Math.ceil(avgPercentage);
+};
+
+exports.getGlancePercentage = getGlancePercentage;
+
+const getVideoPermission = function getVideoPermission(stream) {
+  let exludeTrackId = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : "";
+  return stream.getVideoTracks().filter(track => track.enabled && track.label && track.id !== exludeTrackId).length > 0;
+};
+
+exports.getVideoPermission = getVideoPermission;
+
+const getAudioPermission = function getAudioPermission(stream) {
+  let exludeTrackId = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : "";
+  return stream.getAudioTracks().filter(track => track.enabled && track.label && !track.muted && track.id !== exludeTrackId).length > 0;
+};
+
+exports.getAudioPermission = getAudioPermission;
+
+const getAudioVideoPermission = stream => {
+  return {
+    audio: getAudioPermission(stream),
+    video: getVideoPermission(stream)
+  };
+};
+
+exports.getAudioVideoPermission = getAudioVideoPermission;

package/package.json

@@ -1,55 +1,55 @@
-{
-  "name": "@newtonschool/react_proctoring_library",
-  "version": "0.0.1",
-  "description": "Used to proctor online tests",
-  "author": "ayushkagrawal",
-  "main": "dist/index.js",
-  "module": "dist/index.js",
-  "files": [
-    "dist",
-    "README.md"
-  ],
-  "keywords": [
-    ""
-  ],
-  "dependencies": {
-    "@tensorflow-models/body-pix": "^2.2.0",
-    "@tensorflow/tfjs": "^3.9.0",
-    "bootstrap": "^5.1.3",
-    "react-bootstrap": "^2.0.4",
-    "react-webcam": "^6.0.0"
-  },
-  "peerDependencies": {
-    "react": ">=16.8.0",
-    "react-dom": ">=16.8.0"
-  },
-  "scripts": {
-    "build": "babel src/lib --out-dir dist --copy-files",
-    "test": "react-scripts test",
-    "eject": "react-scripts eject"
-  },
-  "eslintConfig": {
-    "extends": [
-      "react-app",
-      "react-app/jest"
-    ]
-  },
-  "browserslist": {
-    "production": [
-      ">0.2%",
-      "not dead",
-      "not op_mini all"
-    ],
-    "development": [
-      "last 1 chrome version",
-      "last 1 firefox version",
-      "last 1 safari version"
-    ]
-  },
-  "devDependencies": {
-    "react-scripts": ">=5.0.0",
-    "@babel/cli": "^7.16.7",
-    "@babel/core": "^7.16.7",
-    "@babel/preset-env": "^7.16.7"
-  }
-}
+{
+  "name": "@newtonschool/react_proctoring_library",
+  "version": "0.0.2",
+  "description": "Used to proctor online tests",
+  "author": "ayushkagrawal",
+  "main": "dist/index.js",
+  "module": "dist/index.js",
+  "files": [
+    "dist",
+    "README.md"
+  ],
+  "keywords": [
+    ""
+  ],
+  "dependencies": {
+    "@tensorflow-models/body-pix": "^2.2.0",
+    "@tensorflow/tfjs": "^3.9.0",
+    "bootstrap": "^5.1.3",
+    "react-bootstrap": "^2.0.4",
+    "react-webcam": "^6.0.0"
+  },
+  "peerDependencies": {
+    "react": ">=16.8.0",
+    "react-dom": ">=16.8.0"
+  },
+  "scripts": {
+    "build": "babel src --out-dir dist --copy-files",
+    "test": "react-scripts test",
+    "eject": "react-scripts eject"
+  },
+  "eslintConfig": {
+    "extends": [
+      "react-app",
+      "react-app/jest"
+    ]
+  },
+  "browserslist": {
+    "production": [
+      ">0.2%",
+      "not dead",
+      "not op_mini all"
+    ],
+    "development": [
+      "last 1 chrome version",
+      "last 1 firefox version",
+      "last 1 safari version"
+    ]
+  },
+  "devDependencies": {
+    "@babel/cli": "^7.16.7",
+    "@babel/core": "^7.16.7",
+    "@babel/preset-env": "^7.16.7",
+    "react-scripts": ">=5.0.0"
+  }
+}

package/dist/ProctorApp.js

@@ -1,186 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.ProctorApp = ProctorApp;
-exports.getStatistics = exports.default = void 0;
-
-require("core-js/modules/web.dom-collections.iterator.js");
-
-require("core-js/modules/es.promise.js");
-
-var _react = _interopRequireWildcard(require("react"));
-
-var tf = _interopRequireWildcard(require("@tensorflow/tfjs"));
-
-var bodyPix = _interopRequireWildcard(require("@tensorflow-models/body-pix"));
-
-var _ResponseModal = _interopRequireDefault(require("./components/ResponseModal"));
-
-var _FullScreenTestInWebcam = _interopRequireDefault(require("./components/FullScreenTestInWebcam"));
-
-var _index = require("./utils/index");
-
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-
-function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
-
-function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
-
-const defaultValues = {
-  tabSwitchCount: 0,
-  isTabSwitched: false,
-  userCount: 0,
-  isWatching: true,
-  canOpenFullScreen: false,
-  fullScreenExitCount: 0,
-  lookedAwayCount: 0,
-  firstTimeFullScreen: true
-};
-
-function ProctorApp(props) {
-  const webcamReference = (0, _react.useRef)(null);
-  const canvasReference = (0, _react.useRef)(null);
-  let Statistics = (0, _react.useRef)({
-    TAB_SWITCH_AWAY: 0,
-    FULL_SCREEN_EXIT: 0,
-    LOOKED_AWAY: 0,
-    CHANGE_IN_NUMBER_OF_PEOPLE_IN_CAMERA: 0
-  });
-  const fullScreenElement = (0, _react.useRef)(document.documentElement);
-
-  const tabSwitchingCheck = isTabVisible => {
-    if (isTabSwitched !== isTabVisible) {
-      if (!isTabVisible) {
-        setTabSwitchCount(tabSwitchCount + 1);
-      }
-
-      setIsTabSwitched(isTabVisible);
-    }
-  };
-
-  const setValues = () => {
-    Statistics.current.TAB_SWITCH_AWAY = tabSwitchCount;
-    Statistics.current.FULL_SCREEN_EXIT = fullScreenExitCount;
-    Statistics.current.LOOKED_AWAY = lookedAwayCount;
-    Statistics.current.CHANGE_IN_NUMBER_OF_PEOPLE_IN_CAMERA = Math.max(userCount, Statistics.current.CHANGE_IN_NUMBER_OF_PEOPLE_IN_CAMERA);
-  };
-
-  const [isTabSwitched, setIsTabSwitched] = (0, _react.useState)(defaultValues.isTabSwitched);
-  const [tabSwitchCount, setTabSwitchCount] = (0, _react.useState)(defaultValues.tabSwitchCount);
-  const [userCount, setUserCount] = (0, _react.useState)(defaultValues.userCount);
-  const [isWatching, setIsWatching] = (0, _react.useState)(defaultValues.isWatching);
-  const [lookedAwayCount, setLookedAwayCount] = (0, _react.useState)(defaultValues.lookedAwayCount);
-  const [fullScreenExitCount, setFullScreenExitCount] = (0, _react.useState)(defaultValues.fullScreenExitCount);
-  const [firstTimeFullScreen, setFirstTimeFullScreen] = (0, _react.useState)(defaultValues.firstTimeFullScreen);
-  const [canOpenFullScreen, SetCanOpenFullScreen] = (0, _index.useFullscreenStatus)(fullScreenElement);
-  const isTabVisible = (0, _index.usePageVisibility)();
-
-  const setInitialStates = () => {
-    setTabSwitchCount(defaultValues.tabSwitchCount);
-    setIsTabSwitched(defaultValues.isTabSwitched);
-    setUserCount(defaultValues.userCount);
-    setIsWatching(defaultValues.isWatching);
-    setLookedAwayCount(defaultValues.lookedAwayCount);
-    setFullScreenExitCount(defaultValues.fullScreenExitCount);
-  };
-
-  const init = () => {
-    setInitialStates();
-    setValues();
-    (0, _index.addOrUpdateStatsToLocalStorage)(props.testIdentifier, Statistics.current);
-  };
-
-  (0, _react.useEffect)(() => {
-    (0, _index.removeStatsFromLocalStorage)(props.testIdentifier);
-    init();
-    loadBodyPixModel();
-  }, []);
-  (0, _react.useEffect)(() => {
-    if (!isWatching) {
-      setLookedAwayCount(lookedAwayCount => lookedAwayCount + 1);
-    }
-  }, [isWatching]);
-  (0, _react.useEffect)(() => {
-    tabSwitchingCheck(isTabVisible);
-  }, [isTabVisible]);
-  (0, _react.useEffect)(() => {
-    if (!canOpenFullScreen && !firstTimeFullScreen) {
-      setFullScreenExitCount(fullScreenExitCount => fullScreenExitCount + 1);
-    }
-  }, [canOpenFullScreen]);
-  (0, _react.useEffect)(() => {
-    setValues();
-    (0, _index.addOrUpdateStatsToLocalStorage)(props.testIdentifier, Statistics.current);
-  }, [userCount, tabSwitchCount, fullScreenExitCount, lookedAwayCount, props.testIdentifier, isWatching]);
-
-  if (props.TestComponent === undefined || props.testIdentifier === undefined) {
-    return;
-  }
-
-  const multipleUserCount = async (network, video) => {
-    try {
-      const body = await network.segmentMultiPerson(video, _index.bodypixConfigs);
-      setUserCount(body ? body.length : 0);
-
-      if (!(0, _index.isArrayValid)(body)) {
-        setIsWatching(false);
-      }
-    } catch (err) {
-      console.log('Error Trace:', err);
-      return;
-    }
-  };
-
-  const glanceChecker = async (network, video) => {
-    try {
-      const partSegmentation = await network.segmentPersonParts(video, _index.bodypixConfigs);
-      const currentPercentage = (0, _index.getGlancePercentage)(partSegmentation);
-      setIsWatching(currentPercentage >= _index.glancePercentageToPass);
-    } catch (err) {
-      console.log('Error Trace:', err);
-      return;
-    }
-  };
-
-  const loadBodyPixModel = async () => {
-    const network = await bodyPix.load();
-    setInterval(() => {
-      if ((0, _index.isWebcamVideoValid)(webcamReference) && fullScreenElement) {
-        const video = webcamReference.current.video;
-        const videoWidth = webcamReference.current.video.videoWidth;
-        const videoHeight = webcamReference.current.video.videoHeight;
-        webcamReference.current.video.width = videoWidth;
-        webcamReference.current.video.height = videoHeight;
-        canvasReference.current.width = videoWidth;
-        canvasReference.current.height = videoHeight;
-        multipleUserCount(network, video);
-        glanceChecker(network, video);
-      }
-    }, _index.secondsToCheckUserCountAndGlance * 1000);
-  };
-
-  return /*#__PURE__*/_react.default.createElement("div", {
-    className: "ProctorApp"
-  }, !canOpenFullScreen ? /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement("h1", null, "Test can run only in Full Screen Mode"), /*#__PURE__*/_react.default.createElement(_ResponseModal.default, {
-    SetCanOpenFullScreen: SetCanOpenFullScreen,
-    setFirstTimeFullScreen: setFirstTimeFullScreen,
-    firstTimeFullScreen: firstTimeFullScreen,
-    setFullScreenExitCount: setFullScreenExitCount,
-    fullScreenMessage: props.fullScreenMessage
-  })) : /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_FullScreenTestInWebcam.default, {
-    webcamRef: webcamReference,
-    canvasRef: canvasReference,
-    userCount: userCount,
-    isWatching: isWatching
-  })));
-}
-
-const getStatistics = testIdentifier => {
-  return JSON.parse((0, _index.retriveStatsFromLocalStorage)(testIdentifier));
-};
-
-exports.getStatistics = getStatistics;
-var _default = ProctorApp;
-exports.default = _default;

package/dist/utils/TabVisibility.js

@@ -1,32 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = usePageVisibility;
-
-require("core-js/modules/web.dom-collections.iterator.js");
-
-var _react = _interopRequireDefault(require("react"));
-
-var _GetBrowserDocumentProp = _interopRequireDefault(require("./GetBrowserDocumentProp"));
-
-var _GetIsDocumentHidden = _interopRequireDefault(require("./GetIsDocumentHidden"));
-
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-
-function usePageVisibility() {
-  const [isVisible, setIsVisible] = _react.default.useState((0, _GetIsDocumentHidden.default)());
-
-  const onVisibilityChange = () => setIsVisible((0, _GetIsDocumentHidden.default)());
-
-  _react.default.useEffect(() => {
-    const visibilityChange = (0, _GetBrowserDocumentProp.default)('Visibility');
-    document.addEventListener(visibilityChange, onVisibilityChange, false);
-    return () => {
-      document.removeEventListener(visibilityChange, onVisibilityChange);
-    };
-  });
-
-  return isVisible;
-}

package/dist/utils/commonUtilConfigs.js

@@ -1,21 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.secondsToCheckUserCountAndGlance = exports.glancePercentageToPass = exports.bodypixConfigs = void 0;
-const bodypixConfigs = {
-  flipHorizontal: false,
-  internalResolution: 'medium',
-  segmentationThreshold: 0.4,
-  maxDetections: 10,
-  scoreThreshold: 0.2,
-  nmsRadius: 20,
-  minKeypointScore: 0.3,
-  refineSteps: 10
-};
-exports.bodypixConfigs = bodypixConfigs;
-const glancePercentageToPass = 60;
-exports.glancePercentageToPass = glancePercentageToPass;
-const secondsToCheckUserCountAndGlance = 0.5;
-exports.secondsToCheckUserCountAndGlance = secondsToCheckUserCountAndGlance;

package/dist/utils/initialSetup.js

@@ -1,15 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = void 0;
-const defaultValues = {
-  tabSwitchCount: 0,
-  isTabSwitched: false,
-  userCount: 0,
-  isWatching: true,
-  canOpenFullScreen: null
-};
-var _default = defaultValues;
-exports.default = _default;

package/dist/utils/localStorageUtil.js

@@ -1,27 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.retriveStatsFromLocalStorage = exports.removeStatsFromLocalStorage = exports.addOrUpdateStatsToLocalStorage = void 0;
-
-require("core-js/modules/es.json.stringify.js");
-
-const addOrUpdateStatsToLocalStorage = (testIdentifier, data) => {
-  const stringifiedData = JSON.stringify(data);
-  localStorage.setItem(testIdentifier, stringifiedData);
-};
-
-exports.addOrUpdateStatsToLocalStorage = addOrUpdateStatsToLocalStorage;
-
-const retriveStatsFromLocalStorage = testIdentifier => {
-  return localStorage.getItem(testIdentifier);
-};
-
-exports.retriveStatsFromLocalStorage = retriveStatsFromLocalStorage;
-
-const removeStatsFromLocalStorage = testIdentifier => {
-  localStorage.removeItem(testIdentifier);
-};
-
-exports.removeStatsFromLocalStorage = removeStatsFromLocalStorage;

package/dist/utils/useFullScreenStatus.js

@@ -1,45 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = useFullscreenStatus;
-
-require("core-js/modules/web.dom-collections.iterator.js");
-
-var _react = _interopRequireDefault(require("react"));
-
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-
-function useFullscreenStatus(elRef) {
-  const [isFullscreen, setIsFullscreen] = _react.default.useState(document[getBrowserFullscreenElementProp()] != null);
-
-  const setFullscreen = () => {
-    if (!elRef || !elRef.current) return;
-    elRef.current.requestFullscreen().then(() => {
-      setIsFullscreen(document[getBrowserFullscreenElementProp()] != null);
-    }).catch(() => {
-      setIsFullscreen(false);
-    });
-  };
-
-  _react.default.useEffect(() => {
-    document.onfullscreenchange = () => setIsFullscreen(document[getBrowserFullscreenElementProp()] != null);
-
-    return () => document.onfullscreenchange = undefined;
-  }, []);
-
-  return [isFullscreen, setFullscreen];
-}
-
-function getBrowserFullscreenElementProp() {
-  if (typeof document.fullscreenElement !== 'undefined') {
-    return 'fullscreenElement';
-  } else if (typeof document.mozFullScreenElement !== 'undefined') {
-    return 'mozFullScreenElement';
-  } else if (typeof document.msFullscreenElement !== 'undefined') {
-    return 'msFullscreenElement';
-  } else if (typeof document.webkitFullscreenElement !== 'undefined') {
-    return 'webkitFullscreenElement';
-  }
-}