@newtonschool/react_proctoring_library 0.0.1

package/README.md

@@ -0,0 +1,66 @@
+# Welcome to react_proctoring_library · [![GitHub license](https://img.shields.io/badge/license-MIT-blue.svg)](https://github.com/Newton-School/proctoring_react/blob/main/LICENSE) [![npm (scoped)](https://img.shields.io/npm/v/proctoring_react.svg)](https://www.npmjs.com/package/react_proctoring_library) [![npm bundle size (minified)](https://img.shields.io/bundlephobia/min/proctoring_react.svg)](https://www.npmjs.com/package/react_proctoring_library) [![CircleCI Status](https://circleci.com/gh/facebook/react.svg?style=shield&circle-token=:circle-token)](https://circleci.com/gh/facebook/react) [![PRs Welcome](https://img.shields.io/badge/PRs-welcome-brightgreen.svg)](https://reactjs.org/docs/how-to-contribute.html#your-first-pull-request)
+
+Hi! **react_proctoring_library** is a user friendly, easy to use and your _one-stop_ [npm library](https://www.npmjs.com/package/react_proctoring_library) which will provide you the ability to proctor all your exams, tests, quizzes, Playgrounds, almost everything you need to proctor with the minimum effort possible. We have used [body-pix](https://www.npmjs.com/package/@tensorflow-models/body-pix) model from [tensorflow](https://www.tensorflow.org/) library to detect if user is looking outside the screen, multiple people visible in camera. We have also implemented tab switching tracker and full screen exit tracker.
+
+## Why?
+
+- In these times when most of the exams are conducted online, a lot of us want some sort of mechanism which could make their life easy while taking online test and **react_proctoring_library** has done this for you.
+
+Future Plans?
+
+- Detection of multiple persons via Audio.
+
+
+## Installation
+
+You must have [React](https://reactjs.org/) v16.8 or above installed in your project to use this proctoring library.
+
+If you want, you can also [create a new react app](https://reactjs.org/docs/create-a-new-react-app.html) using `npx create-react-app my-new-app` command.
+
+Once you have a react app, just type
+`npm install react_proctoring_library` in your terminal and if everything goes fine, you are good to go.
+
+## Props
+
+| Props               | isRequired | ParamsType    | Description                                                                                                                              |
+| ------------------- | ---------- | ------------- | ---------------------------------------------------------------------------------------------------------------------------------------- |
+| `TestComponent`     | Yes        | JSX Component | The Component which you want to proctor                                                                                                  |
+| `testIdentifier`    | Yes        | String        | A unique string to identify every test                                                                                                   |
+| `fullScreenMessage` | Optional   | String        | If you want your test to run only in full screen mode, this message will appear instead of TestComponent whenever User exits Full Screen |
+
+## Documentation
+
+Currently, **react_proctoring_library** comes with 2 things:
+
+- `ProctorApp` - A Component which will help you in proctoring
+- `Object getStatistics(string: testIdentifier)` - A function which will return a data Object with all Statistics
+  about breaches.
+
+```
+import { ProctorApp, getStatistics } from  'react_proctoring_library';
+function  Test(props) {
+	return (
+		<div>
+			<h1>Proctoring Window</h1>
+		</div>
+	);
+}
+
+function  App() {
+	const testIdentifier = 'unique-proctoring-identifier';
+	const fullScreenMessage = 'This test can only be completed in Full Screen Mode, do you want to start this test?';
+	const  getStats = e  => {
+		e.preventDefault();
+		console.log(getStatistics(testIdentifier));
+	};
+	return (
+		<div className="App">
+			<ProctorApp TestComponent={Test} testIdentifier={testIdentifier} fullScreenMessage={fullScreenMessage} />
+		</div>
+		<button  onClick={getStats}>Get Statistics</button>
+	);
+}
+
+export default App;
+```
+

package/dist/ProctorApp.js

@@ -0,0 +1,186 @@
+"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/components/FullScreenTestInWebcam.js

@@ -0,0 +1,49 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _react = _interopRequireDefault(require("react"));
+
+var _reactWebcam = _interopRequireDefault(require("react-webcam"));
+
+var _reactBootstrap = require("react-bootstrap");
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+const FullScreenTestInWebcam = props => {
+  const webcamReference = props.webcamRef,
+        canvasReference = props.canvasRef;
+  return /*#__PURE__*/_react.default.createElement("div", null, /*#__PURE__*/_react.default.createElement(_reactBootstrap.Col, {
+    md: 6
+  }, /*#__PURE__*/_react.default.createElement(_reactWebcam.default, {
+    className: "canvas-video",
+    ref: webcamReference
+  }), /*#__PURE__*/_react.default.createElement("canvas", {
+    className: "canvas-video",
+    ref: canvasReference
+  })), /*#__PURE__*/_react.default.createElement(_reactBootstrap.Col, {
+    md: 6
+  }, /*#__PURE__*/_react.default.createElement("canvas", {
+    id: "glanceTrackerCanvas",
+    style: {
+      display: 'none'
+    }
+  })), /*#__PURE__*/_react.default.createElement("div", {
+    style: {
+      position: 'absolute',
+      marginLeft: 'auto',
+      marginRight: 'auto',
+      left: 0,
+      right: 0,
+      top: '35rem',
+      textAlign: 'center',
+      zindex: 9
+    }
+  }, "user count: ", props.userCount, /*#__PURE__*/_react.default.createElement("br", null), props.isWatching ? 'You are watching the screen' : 'You are not watching'));
+};
+
+var _default = FullScreenTestInWebcam;
+exports.default = _default;

package/dist/components/ResponseModal.js

@@ -0,0 +1,63 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = ResponseModal;
+
+require("core-js/modules/web.dom-collections.iterator.js");
+
+var _react = _interopRequireWildcard(require("react"));
+
+var _reactBootstrap = require("react-bootstrap");
+
+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; }
+
+function ResponseModal(props) {
+  const [show, setShow] = (0, _react.useState)(true);
+
+  const displayResponseModal = () => setShow(true);
+
+  const closeResponseModal = () => {
+    if (props.firstTimeFullScreen) {
+      props.setFirstTimeFullScreen(false);
+    }
+
+    setShow(false);
+  };
+
+  const handleNoOption = () => {
+    if (props.firstTimeFullScreen) {
+      props.setFullScreenExitCount(fullScreenExitCount => fullScreenExitCount + 1);
+    }
+
+    closeResponseModal();
+  };
+
+  const openFullscreen = () => {
+    closeResponseModal();
+    props.SetCanOpenFullScreen();
+  };
+
+  (0, _react.useEffect)(() => {
+    if (!props.canOpenFullScreen) {
+      displayResponseModal();
+    }
+  }, [props.canOpenFullScreen]);
+  return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_reactBootstrap.Modal, {
+    show: show,
+    onHide: closeResponseModal,
+    size: "lg",
+    backdrop: "static",
+    "aria-labelledby": "contained-modal-title-vcenter",
+    centered: true
+  }, /*#__PURE__*/_react.default.createElement(_reactBootstrap.Modal.Header, null, /*#__PURE__*/_react.default.createElement(_reactBootstrap.Modal.Title, null, "Full Screen Permission")), /*#__PURE__*/_react.default.createElement(_reactBootstrap.Modal.Body, null, props.fullScreenMessage), /*#__PURE__*/_react.default.createElement(_reactBootstrap.Modal.Footer, null, /*#__PURE__*/_react.default.createElement(_reactBootstrap.Button, {
+    variant: "secondary",
+    onClick: handleNoOption
+  }, "No"), /*#__PURE__*/_react.default.createElement(_reactBootstrap.Button, {
+    variant: "primary",
+    onClick: openFullscreen
+  }, "Yes"))));
+}

package/dist/index.js

@@ -0,0 +1,19 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+Object.defineProperty(exports, "ProctorApp", {
+  enumerable: true,
+  get: function get() {
+    return _ProctorApp.ProctorApp;
+  }
+});
+Object.defineProperty(exports, "getStatistics", {
+  enumerable: true,
+  get: function get() {
+    return _ProctorApp.getStatistics;
+  }
+});
+
+var _ProctorApp = require("./ProctorApp");

package/dist/utils/GetBrowserDocumentProp.js

@@ -0,0 +1,31 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = getBrowserDocumentProp;
+
+function getBrowserDocumentProp(type) {
+  let output = '';
+
+  if (typeof document.hidden !== 'undefined') {
+    output = '';
+  } else if (typeof document.msHidden !== 'undefined') {
+    output = 'ms';
+  } else if (typeof document.webkitHidden !== 'undefined') {
+    output = 'webkit';
+  }
+
+  if (type === 'Visibility') {
+    // Opera 12.10 and Firefox 18 and later support
+    output += 'visibilitychange';
+  } else if (type === 'hidden') {
+    if (typeof document.hidden !== 'undefined') {
+      output = 'hidden';
+    } else {
+      output += 'Hidden';
+    }
+  }
+
+  return output;
+}

package/dist/utils/GetIsDocumentHidden.js

@@ -0,0 +1,14 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = getIsDocumentHidden;
+
+var _GetBrowserDocumentProp = _interopRequireDefault(require("./GetBrowserDocumentProp"));
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+function getIsDocumentHidden() {
+  return !document[(0, _GetBrowserDocumentProp.default)('hidden')];
+}

package/dist/utils/TabVisibility.js

@@ -0,0 +1,32 @@
+"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/ValidityChecks.js

@@ -0,0 +1,19 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.isArrayValid = isArrayValid;
+exports.isWebcamVideoValid = isWebcamVideoValid;
+
+function isWebcamVideoValid(webcamReference) {
+  return webcamReference !== null && webcamReference !== undefined && typeof webcamReference.current !== 'undefined' && webcamReference.current !== null && webcamReference.current.video.readyState === 4;
+}
+
+function isArrayValid(array) {
+  if (!array || !(array instanceof Array) || array.length <= 0) {
+    return false;
+  }
+
+  return true;
+}

package/dist/utils/commonUtilConfigs.js

@@ -0,0 +1,21 @@
+"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/getGlancePercentage.js

@@ -0,0 +1,43 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.getGlancePercentage = void 0;
+
+var _ValidityChecks = require("./ValidityChecks");
+
+const getGlancePercentage = partSegmentation => {
+  if (!partSegmentation || !(partSegmentation instanceof Object) || !(0, _ValidityChecks.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;

package/dist/utils/index.js

@@ -0,0 +1,85 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+Object.defineProperty(exports, "addOrUpdateStatsToLocalStorage", {
+  enumerable: true,
+  get: function get() {
+    return _localStorageUtil.addOrUpdateStatsToLocalStorage;
+  }
+});
+Object.defineProperty(exports, "bodypixConfigs", {
+  enumerable: true,
+  get: function get() {
+    return _commonUtilConfigs.bodypixConfigs;
+  }
+});
+Object.defineProperty(exports, "getGlancePercentage", {
+  enumerable: true,
+  get: function get() {
+    return _getGlancePercentage.getGlancePercentage;
+  }
+});
+Object.defineProperty(exports, "glancePercentageToPass", {
+  enumerable: true,
+  get: function get() {
+    return _commonUtilConfigs.glancePercentageToPass;
+  }
+});
+Object.defineProperty(exports, "isArrayValid", {
+  enumerable: true,
+  get: function get() {
+    return _ValidityChecks.isArrayValid;
+  }
+});
+Object.defineProperty(exports, "isWebcamVideoValid", {
+  enumerable: true,
+  get: function get() {
+    return _ValidityChecks.isWebcamVideoValid;
+  }
+});
+Object.defineProperty(exports, "removeStatsFromLocalStorage", {
+  enumerable: true,
+  get: function get() {
+    return _localStorageUtil.removeStatsFromLocalStorage;
+  }
+});
+Object.defineProperty(exports, "retriveStatsFromLocalStorage", {
+  enumerable: true,
+  get: function get() {
+    return _localStorageUtil.retriveStatsFromLocalStorage;
+  }
+});
+Object.defineProperty(exports, "secondsToCheckUserCountAndGlance", {
+  enumerable: true,
+  get: function get() {
+    return _commonUtilConfigs.secondsToCheckUserCountAndGlance;
+  }
+});
+Object.defineProperty(exports, "useFullscreenStatus", {
+  enumerable: true,
+  get: function get() {
+    return _useFullScreenStatus.default;
+  }
+});
+Object.defineProperty(exports, "usePageVisibility", {
+  enumerable: true,
+  get: function get() {
+    return _TabVisibility.default;
+  }
+});
+
+var _useFullScreenStatus = _interopRequireDefault(require("./useFullScreenStatus"));
+
+var _TabVisibility = _interopRequireDefault(require("./TabVisibility"));
+
+var _ValidityChecks = require("./ValidityChecks");
+
+var _commonUtilConfigs = require("./commonUtilConfigs");
+
+var _getGlancePercentage = require("./getGlancePercentage");
+
+var _localStorageUtil = require("./localStorageUtil");
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }

package/dist/utils/initialSetup.js

@@ -0,0 +1,15 @@
+"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

@@ -0,0 +1,27 @@
+"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

@@ -0,0 +1,45 @@
+"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';
+  }
+}

package/package.json

@@ -0,0 +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"
+  }
+}