@newtonschool/react_proctoring_library 0.0.13 → 0.0.14

package/dist/components/ProctorApp.js

@@ -21,6 +21,8 @@ var _permissions = require("./permissions");
 
 var _useWebcamData = _interopRequireDefault(require("../hooks/useWebcamData"));
 
+var _breachUtils = require("../utils/breachUtils");
+
 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); }
@@ -33,21 +35,29 @@ const ProctorApp = _ref => {
   let {
     proctoringIdentifier,
     children,
-    proctoringParams = {
-      userCount: true,
-      tabSwitch: true,
-      fullscreenExit: true,
-      lookedAway: true,
-      isWebcamDataReliable: true
-    },
-    sendData = () => {},
-    shouldSendDataOnBreach = false
+    config,
+    getProctorParamValues = () => {},
+    getWebcamSnapshot = () => {},
+    getScreengrab = () => {}
   } = _ref;
   const webcamReference = (0, _react.useRef)(null);
   const canvasReference = (0, _react.useRef)(null);
   const statistics = (0, _react.useRef)(_defaults.INITIAL_STATISTICS);
+  const {
+    proctorParams,
+    recurring = false,
+    recurringFetchInterval = 0,
+    trackScreenshare = false
+  } = config; // const {
+  //   userCount = true,
+  //   tabSwitch = true,
+  //   fullscreenExit = true,
+  //   lookedAway = true,
+  // } = proctorParams;
+
   const [audioPermission, setAudioPermission] = (0, _react.useState)(false);
   const [videoPermission, setVideoPermission] = (0, _react.useState)(false);
+  const [screensharePermission, setScreensharePermission] = (0, _react.useState)(!trackScreenshare);
   const firstFullScreenDone = (0, _react.useRef)(false);
   const {
     isFullscreen,
@@ -56,9 +66,23 @@ const ProctorApp = _ref => {
   } = (0, _hooks.useFullscreenData)(firstFullScreenDone);
   const [userCount, lookedAwayCount, isWebcamDataReliable] = (0, _useWebcamData.default)(webcamReference, canvasReference);
   const tabSwitchCount = (0, _hooks.useTabSwitchCount)(firstFullScreenDone);
+  let recurringFetchIntervalRef = (0, _react.useRef)(null);
   (0, _react.useEffect)(() => {
-    (0, _utils.removeStatsFromLocalStorage)(proctoringIdentifier);
-  }, [proctoringIdentifier]);
+    if (recurring) {
+      recurringFetchIntervalRef.current = setInterval(() => {
+        getProctorParamValues(proctoringIdentifier, statistics.current, false);
+        const webcamSnapshot = (0, _utils.captureWebcamSnapshot)(webcamReference);
+
+        if (webcamReference) {
+          getWebcamSnapshot(proctoringIdentifier, webcamSnapshot, false);
+        }
+      }, recurringFetchInterval);
+    }
+
+    return () => {
+      clearInterval(recurringFetchIntervalRef.current);
+    };
+  }, [proctoringIdentifier, recurring, recurringFetchInterval, getWebcamSnapshot, getProctorParamValues]);
   (0, _react.useEffect)(() => {
     const currentStats = {
       userCount,
@@ -67,14 +91,23 @@ const ProctorApp = _ref => {
       lookedAwayCount,
       isWebcamDataReliable: isWebcamProcessingReliable
     };
+    const breachData = (0, _breachUtils.getDataOnBreach)(statistics, currentStats, proctoringIdentifier);
 
-    if (shouldSendDataOnBreach) {
-      (0, _utils.sendDataOnBreach)(statistics, currentStats, proctoringIdentifier, sendData, webcamReference);
-    }
+    if (breachData) {
+      getProctorParamValues(breachData.proctoringIdentifier, breachData.data, true, breachData.breachedParam);
+
+      if (breachData.breachedParam === "LOOKED_AWAY_COUNT" || breachData.breachedParam === "USER_COUNT_MAX") {
+        const webcamSnapshot = (0, _utils.captureWebcamSnapshot)(webcamReference);
 
-    (0, _utils.updateStatistics)(statistics, currentStats);
-    (0, _utils.addOrUpdateStatsToLocalStorage)(proctoringIdentifier, statistics.current);
-  }, [userCount, tabSwitchCount, fullScreenExitCount, lookedAwayCount, isWebcamDataReliable, proctoringIdentifier, sendData, shouldSendDataOnBreach]);
+        if (webcamSnapshot) {
+          getWebcamSnapshot(breachData.proctoringIdentifier, webcamSnapshot, true, breachData.breachedParam);
+        }
+      } else {// getScreengrab();
+      }
+
+      (0, _utils.updateStatistics)(statistics, currentStats);
+    }
+  }, [userCount, tabSwitchCount, fullScreenExitCount, lookedAwayCount, isWebcamDataReliable, proctoringIdentifier, getProctorParamValues, getWebcamSnapshot]);
 
   if (proctoringIdentifier === undefined) {
     // todo
@@ -85,12 +118,16 @@ const ProctorApp = _ref => {
     isFullscreen: isFullscreen,
     audioPermisison: audioPermission,
     videoPermission: videoPermission,
+    screensharePermission: screensharePermission,
+    trackScreenshare: trackScreenshare,
     setFullscreen: setFullscreen
   }), /*#__PURE__*/_react.default.createElement(_.ActivityTracker, {
     setAudioPermission: setAudioPermission,
     setVideoPermission: setVideoPermission,
     webcamReference: webcamReference,
-    canvasReference: canvasReference
+    canvasReference: canvasReference,
+    trackScreenshare: trackScreenshare,
+    setScreensharePermission: setScreensharePermission
   }), isFullscreen && audioPermission && videoPermission && children);
 };
 

package/dist/components/activity-tracker/index.js

@@ -34,12 +34,20 @@ const ActivityTracker = _ref => {
     webcamReference,
     canvasReference,
     setAudioPermission,
-    setVideoPermission
+    setVideoPermission,
+    trackScreenshare,
+    setScreensharePermission
   } = _ref;
+  const videoReference = (0, _react.useRef)(null);
   (0, _react.useEffect)(() => {
     if (isChrome) {
       (0, _webcamMicrophoneUtils.updateVideoPermissions)(setVideoPermission);
       (0, _webcamMicrophoneUtils.updateAudioPermissions)(setAudioPermission);
+
+      if (trackScreenshare) {
+        (0, _webcamMicrophoneUtils.updateScreensharePermission)(setScreensharePermission, videoReference);
+      }
+
       (0, _webcamMicrophoneUtils.getVideoPermissionQuery)().then(status => {
         status.onchange = evt => {
           (0, _webcamMicrophoneUtils.updateVideoPermissions)(setVideoPermission);
@@ -55,7 +63,7 @@ const ActivityTracker = _ref => {
         (0, _webcamMicrophoneUtils.updateAudioPermissions)("Audio Permission", err);
       });
     }
-  }, [setVideoPermission, setAudioPermission]);
+  }, [setVideoPermission, setAudioPermission, setScreensharePermission, trackScreenshare]);
   return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_reactWebcam.default, {
     audio: true,
     muted: true,
@@ -138,6 +146,8 @@ const ActivityTracker = _ref => {
   }), /*#__PURE__*/_react.default.createElement("canvas", {
     ref: canvasReference,
     className: "captured-video-canvas"
+  }), /*#__PURE__*/_react.default.createElement("video", {
+    src: videoReference.current
   }));
 };
 

package/dist/components/permissions/index.js

@@ -30,6 +30,8 @@ const Permission = _ref => {
     isFullscreen,
     audioPermisison,
     videoPermission,
+    screensharePermission,
+    trackScreenshare,
     setFullscreen
   } = _ref;
   const showPermissionModal = !isFullscreen || !audioPermisison || !videoPermission;
@@ -58,7 +60,8 @@ const Permission = _ref => {
   }), text.VIDEO_UNSUPPORTED_IN_BROWSER)), /*#__PURE__*/_react.default.createElement(_permissionBody.PermissionBody, {
     showFullscreenText: !isFullscreen,
     showAudioPermissionText: !audioPermisison,
-    showVideoPermissionText: !videoPermission
+    showVideoPermissionText: !videoPermission,
+    showScreensharePermission: !screensharePermission && trackScreenshare
   }))), /*#__PURE__*/_react.default.createElement(_reactBootstrap.Modal.Footer, null, !isFullscreen && /*#__PURE__*/_react.default.createElement(_reactBootstrap.Button, {
     variant: "primary",
     onClick: () => {

package/dist/components/permissions/permission-body.js

@@ -25,11 +25,16 @@ const PermissionBody = _ref => {
   let {
     showFullscreenText,
     showAudioPermissionText,
-    showVideoPermissionText
+    showVideoPermissionText,
+    showScreensharePermission
   } = _ref;
   return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement("div", {
     className: "mb-2"
-  }, text.PERMISSION_GENERIC), showAudioPermissionText && showVideoPermissionText ? /*#__PURE__*/_react.default.createElement("div", {
+  }, text.PERMISSION_GENERIC), showScreensharePermission && /*#__PURE__*/_react.default.createElement("div", {
+    className: "mb-2"
+  }, /*#__PURE__*/_react.default.createElement("span", {
+    className: "pr-2 font-weight-bold"
+  }, "Screen Share:"), text.PERMISSION_SCREENSHARE), showAudioPermissionText && showVideoPermissionText ? /*#__PURE__*/_react.default.createElement("div", {
     className: "mb-2"
   }, /*#__PURE__*/_react.default.createElement("span", {
     className: "pr-2 font-weight-bold"

package/dist/constants/text.js

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.WATCHING_SCREEN = exports.VIDEO_UNSUPPORTED_IN_BROWSER = exports.USER_COUNT_LABEL = exports.REQUEST_VIDEO_AUDIO_PERMISSIONS_HEADING = exports.REQUEST_VIDEO_AUDIO_PERMISSIONS_DESC = exports.REQUEST_PERMISSION = exports.PERMISSION_VIDEO = exports.PERMISSION_TITLE = exports.PERMISSION_GENERIC = exports.PERMISSION_FULLSCREEN = exports.PERMISSION_AUDIO_VIDEO = exports.PERMISSION_AUDIO = exports.NO_CAMERA_AVAILABLE = exports.NO_AUDIO_DEVICE_AVAILABLE = exports.NOT_WATCHING_SCREEN = exports.MESSAGE = exports.FULLSCREEN_ERROR_MESSAGE = exports.DENY_FULLSCREEN = exports.CAMERA_UNAVAILABLE_INSECURE_CONN = exports.BROWSER_BLOCKED_PERMISSION_RESOLVED_RECHECK = exports.BROWSER_BLOCKED_PERMISSION_NEXT_STEP = exports.BROWSER_BLOCKED_PERMISSION_DIRECTION = exports.BROWSER_BLOCKED_PERMISSION_DIALOG = exports.BROWSER_BLOCKED_PERMISSION = exports.ALLOW_FULLSCREEN = void 0;
+exports.WATCHING_SCREEN = exports.VIDEO_UNSUPPORTED_IN_BROWSER = exports.USER_COUNT_LABEL = exports.REQUEST_VIDEO_AUDIO_PERMISSIONS_HEADING = exports.REQUEST_VIDEO_AUDIO_PERMISSIONS_DESC = exports.REQUEST_PERMISSION = exports.PERMISSION_VIDEO = exports.PERMISSION_TITLE = exports.PERMISSION_SCREENSHARE = exports.PERMISSION_GENERIC = exports.PERMISSION_FULLSCREEN = exports.PERMISSION_AUDIO_VIDEO = exports.PERMISSION_AUDIO = exports.NO_CAMERA_AVAILABLE = exports.NO_AUDIO_DEVICE_AVAILABLE = exports.NOT_WATCHING_SCREEN = exports.MESSAGE = exports.FULLSCREEN_ERROR_MESSAGE = exports.DENY_FULLSCREEN = exports.CAMERA_UNAVAILABLE_INSECURE_CONN = exports.BROWSER_BLOCKED_PERMISSION_RESOLVED_RECHECK = exports.BROWSER_BLOCKED_PERMISSION_NEXT_STEP = exports.BROWSER_BLOCKED_PERMISSION_DIRECTION = exports.BROWSER_BLOCKED_PERMISSION_DIALOG = exports.BROWSER_BLOCKED_PERMISSION = exports.ALLOW_FULLSCREEN = void 0;
 const WATCHING_SCREEN = "You are watching the screen";
 exports.WATCHING_SCREEN = WATCHING_SCREEN;
 const NOT_WATCHING_SCREEN = "You are not watching the screen";
@@ -48,6 +48,8 @@ const PERMISSION_GENERIC = "This screen requires following permissions for conti
 exports.PERMISSION_GENERIC = PERMISSION_GENERIC;
 const PERMISSION_FULLSCREEN = "Please allow us to switch your screen to fullscreen mode.";
 exports.PERMISSION_FULLSCREEN = PERMISSION_FULLSCREEN;
+const PERMISSION_SCREENSHARE = "Please choose to share the entire screen out of all the screen share options.";
+exports.PERMISSION_SCREENSHARE = PERMISSION_SCREENSHARE;
 const PERMISSION_AUDIO_VIDEO = "Your browser or system settings have disallowed Microphone and Camera permissions. Please permit this website to access microphone and camera. Refresh after you've given the permission to access the screen";
 exports.PERMISSION_AUDIO_VIDEO = PERMISSION_AUDIO_VIDEO;
 const PERMISSION_VIDEO = "Your browser or system settings have disallowed Camera permissions. Please permit this website to access the camera. Refresh after you've given the permission to access the screen";

package/dist/index.js

@@ -9,13 +9,5 @@ Object.defineProperty(exports, "ProctorApp", {
     return _components.ProctorApp;
   }
 });
-Object.defineProperty(exports, "getStatistics", {
-  enumerable: true,
-  get: function get() {
-    return _utils.getStatistics;
-  }
-});
-
-var _components = require("./components");
 
-var _utils = require("./utils");
+var _components = require("./components");

package/dist/utils/breachUtils.js

@@ -3,9 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.sendDataOnBreach = void 0;
-
-var _ = require(".");
+exports.getDataOnBreach = void 0;
 
 function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
 
@@ -13,7 +11,7 @@ function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { va
 
 function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
 
-const sendDataOnBreach = (statistics, currentData, proctoringIdentifier, sendData, webcamReference) => {
+const getDataOnBreach = (statistics, currentData, proctoringIdentifier) => {
   const {
     userCount,
     tabSwitchCount,
@@ -25,63 +23,59 @@ const sendDataOnBreach = (statistics, currentData, proctoringIdentifier, sendDat
   const data = statistics.current;
 
   if (data.IS_WEBCAM_DATA_RELIABLE !== isWebcamDataReliable) {
-    sendData({
+    return {
       proctoringIdentifier,
-      breach: "IS_WEBCAM_DATA_RELIABLE",
+      breachedParam: "IS_WEBCAM_DATA_RELIABLE",
       timestamp,
       data: _objectSpread(_objectSpread({}, data), {}, {
         IS_WEBCAM_DATA_RELIABLE: isWebcamDataReliable
       })
-    });
+    };
   }
 
   if (data.USER_COUNT_MAX < userCount) {
-    const webcamSnapshot = (0, _.captureWebcamSnapshot)(webcamReference);
-    sendData({
+    return {
       proctoringIdentifier,
-      breach: "USER_COUNT_MAX",
+      breachedParam: "USER_COUNT_MAX",
       timestamp,
       data: _objectSpread(_objectSpread({}, data), {}, {
         USER_COUNT_MAX: userCount
-      }),
-      webcamSnapshot
-    });
+      })
+    };
   }
 
   if (data.TAB_SWITCH_COUNT !== tabSwitchCount) {
-    sendData({
+    return {
       proctoringIdentifier,
-      breach: "TAB_SWITCH_COUNT",
+      breachedParam: "TAB_SWITCH_COUNT",
       timestamp,
       data: _objectSpread(_objectSpread({}, data), {}, {
         TAB_SWITCH_COUNT: tabSwitchCount
       })
-    });
+    };
   }
 
   if (data.FULLSCREEN_EXIT_COUNT !== fullScreenExitCount) {
-    sendData({
+    return {
       proctoringIdentifier,
-      breach: "FULLSCREEN_EXIT_COUNT",
+      breachedParam: "FULLSCREEN_EXIT_COUNT",
       timestamp,
       data: _objectSpread(_objectSpread({}, data), {}, {
         FULLSCREEN_EXIT_COUNT: fullScreenExitCount
       })
-    });
+    };
   }
 
   if (data.LOOKED_AWAY_COUNT !== lookedAwayCount) {
-    const webcamSnapshot = (0, _.captureWebcamSnapshot)(webcamReference);
-    sendData({
+    return {
       proctoringIdentifier,
-      breach: "LOOKED_AWAY_COUNT",
+      breachedParam: "LOOKED_AWAY_COUNT",
       timestamp,
       data: _objectSpread(_objectSpread({}, data), {}, {
         LOOKED_AWAY_COUNT: lookedAwayCount
-      }),
-      webcamSnapshot
-    });
+      })
+    };
   }
 };
 
-exports.sendDataOnBreach = sendDataOnBreach;
+exports.getDataOnBreach = getDataOnBreach;

package/dist/utils/index.js

@@ -3,12 +3,6 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-Object.defineProperty(exports, "addOrUpdateStatsToLocalStorage", {
-  enumerable: true,
-  get: function get() {
-    return _localStorageUtils.addOrUpdateStatsToLocalStorage;
-  }
-});
 Object.defineProperty(exports, "captureWebcamSnapshot", {
   enumerable: true,
   get: function get() {
@@ -45,12 +39,6 @@ Object.defineProperty(exports, "getIsDocumentVisible", {
     return _browserUtils.getIsDocumentVisible;
   }
 });
-Object.defineProperty(exports, "getStatistics", {
-  enumerable: true,
-  get: function get() {
-    return _localStorageUtils.getStatistics;
-  }
-});
 Object.defineProperty(exports, "getVideoPermission", {
   enumerable: true,
   get: function get() {
@@ -81,18 +69,6 @@ Object.defineProperty(exports, "isWebcamVideoValid", {
     return _webcamMicrophoneUtils.isWebcamVideoValid;
   }
 });
-Object.defineProperty(exports, "removeStatsFromLocalStorage", {
-  enumerable: true,
-  get: function get() {
-    return _localStorageUtils.removeStatsFromLocalStorage;
-  }
-});
-Object.defineProperty(exports, "retrieveStatsFromLocalStorage", {
-  enumerable: true,
-  get: function get() {
-    return _localStorageUtils.retrieveStatsFromLocalStorage;
-  }
-});
 Object.defineProperty(exports, "sendDataOnBreach", {
   enumerable: true,
   get: function get() {
@@ -106,8 +82,6 @@ Object.defineProperty(exports, "updateStatistics", {
   }
 });
 
-var _localStorageUtils = require("./localStorageUtils");
-
 var _webcamMicrophoneUtils = require("./webcamMicrophoneUtils");
 
 var _browserUtils = require("./browserUtils");

package/dist/utils/webcamMicrophoneUtils.js

@@ -3,7 +3,21 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.updateVideoPermissions = exports.updateStatistics = exports.updateAudioPermissions = exports.isWebcamVideoValid = exports.getVideoPermissionQuery = exports.getVideoPermission = exports.getGlancePercentage = exports.getAudioVideoPermission = exports.getAudioPermissionQuery = exports.getAudioPermission = exports.captureWebcamSnapshot = void 0;
+exports.updateVideoPermissions = exports.updateStatistics = exports.updateScreensharePermission = exports.updateAudioPermissions = exports.isWebcamVideoValid = exports.getVideoPermissionQuery = exports.getVideoPermission = exports.getGlancePercentage = exports.getAudioVideoPermission = exports.getAudioPermissionQuery = exports.getAudioPermission = exports.captureWebcamSnapshot = void 0;
+
+require("core-js/modules/es.regexp.exec.js");
+
+require("core-js/modules/es.string.split.js");
+
+require("core-js/modules/es.array-buffer.slice.js");
+
+require("core-js/modules/es.typed-array.uint8-array.js");
+
+require("core-js/modules/es.typed-array.set.js");
+
+require("core-js/modules/es.typed-array.sort.js");
+
+require("core-js/modules/es.typed-array.to-locale-string.js");
 
 var _ = require(".");
 
@@ -110,6 +124,22 @@ const updateVideoPermissions = setVideoPermission => {
 
 exports.updateVideoPermissions = updateVideoPermissions;
 
+const updateScreensharePermission = (setScreensharePermission, videoReference) => navigator.mediaDevices.getDisplayMedia({
+  video: true,
+  audio: true
+}).then(stream => {
+  if (stream.getTracks()[0].getSettings().displaySurface === "monitor") {
+    videoReference.current = stream;
+    setScreensharePermission(true);
+  } else {
+    setScreensharePermission(false);
+  }
+}).catch(() => {
+  setScreensharePermission(false);
+});
+
+exports.updateScreensharePermission = updateScreensharePermission;
+
 const getVideoPermissionQuery = () => navigator.permissions.query({
   name: "camera"
 });
@@ -122,8 +152,26 @@ const getAudioPermissionQuery = () => navigator.permissions.query({
 
 exports.getAudioPermissionQuery = getAudioPermissionQuery;
 
+const b64DataURItoBlob = dataURI => {
+  const byteString = window.atob(dataURI.split(",")[1]);
+  const mimeString = dataURI.split(",")[0].split(":")[1].split(";")[0];
+  const u8arr = new Uint8Array(byteString.length);
+
+  for (let i = 0; i < byteString.length; i += 1) {
+    u8arr[i] = byteString.charCodeAt(i);
+  }
+
+  return new Blob([u8arr], {
+    type: mimeString
+  });
+};
+
 const captureWebcamSnapshot = webcamReference => {
-  return webcamReference.current.getScreenshot();
+  try {
+    const b64Snapshot = webcamReference.current.getScreenshot();
+    return b64DataURItoBlob(b64Snapshot);
+  } catch (_unused) {// pass
+  }
 };
 
 exports.captureWebcamSnapshot = captureWebcamSnapshot;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@newtonschool/react_proctoring_library",
-  "version": "0.0.13",
+  "version": "0.0.14",
   "description": "Used to proctor online tests",
   "author": "ayushkagrawal,shreyachandra",
   "main": "dist/index.js",