@newtonschool/react_proctoring_library 0.0.44 → 0.0.46

package/dist/components/proctor-app/index.js

@@ -49,7 +49,8 @@ const ProctorApp = _ref => {
     actions,
     permissions,
     references,
-    permissionSetter
+    permissionSetter,
+    screenshareStream
   } = context;
   const CustomPermissionView = customPermissionView;
   const proctorParams = (0, _react.useMemo)(() => _objectSpread(_objectSpread({}, _defaults.defaultConfig), config.proctorParams), [config.proctorParams]);
@@ -115,8 +116,6 @@ const ProctorApp = _ref => {
     className: "".concat(proctorParams.copyPasteProctoring ? "disable-copy-paste fullwidth fullheight" : "fullwidth fullheight")
   }, shouldShowProctoredComponent && children, !shouldShowProctoredComponent && customPermissionView && /*#__PURE__*/_react.default.createElement(CustomPermissionView, _extends({
     permissions: permissions,
-    hasAllPermission: actions.hasAllPermission,
-    askPermission: actions.askPermission,
     references: references,
     actions: actions,
     browserDetails: (0, _browserUtils.getBrowserDetails)()
@@ -132,6 +131,7 @@ const ProctorApp = _ref => {
     webcamReference: references.webcamReference,
     canvasReference: references.canvasReference
   }), /*#__PURE__*/_react.default.createElement(_screenshareActivityTracker.ScreenshareActivityTracker, {
+    screenshareStream: screenshareStream,
     ref: references.screenshareReference
   }));
 };

package/dist/components/proctor-context-app/index.js

@@ -38,10 +38,11 @@ const ProctoredContextApp = _ref => {
   const webcamReference = (0, _react.useRef)(null);
   const canvasReference = (0, _react.useRef)(null);
   const screenshareReference = (0, _react.useRef)(null);
+  const [screenshareStream, setScreenshareStream] = (0, _react.useState)(null);
   const Context = contextProvider;
   const askPermissionAction = (0, _react.useMemo)(() => ({
     screenshare: () => {
-      (0, _webcamMicrophoneUtils.setupScreensharePermission)(setScreensharePermission, screenshareReference);
+      (0, _webcamMicrophoneUtils.setupScreensharePermission)(setScreensharePermission, screenshareReference, setScreenshareStream);
     },
     fullscreen: () => {
       setFullscreen();
@@ -86,7 +87,8 @@ const ProctoredContextApp = _ref => {
         webcamReference,
         canvasReference,
         screenshareReference
-      }
+      },
+      screenshareStream
     })
   }, children);
 };

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

@@ -11,10 +11,13 @@ var _dom = require("../../constants/dom");
 var _webcamMicrophoneUtils = require("../../utils/webcamMicrophoneUtils");
 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 ScreenshareActivityTracker = /*#__PURE__*/(0, _react.forwardRef)((props, screenshareReference) => {
+const ScreenshareActivityTracker = /*#__PURE__*/(0, _react.forwardRef)((_ref, screenshareReference) => {
+  let {
+    screenshareStream
+  } = _ref;
   (0, _react.useEffect)(() => {
-    if (screenshareReference.stream) {
-      (0, _webcamMicrophoneUtils.collectScreenshare)(screenshareReference);
+    if (screenshareStream) {
+      (0, _webcamMicrophoneUtils.collectScreenshare)(screenshareReference, screenshareStream);
     }
   }, []);
   return /*#__PURE__*/_react.default.createElement("video", {

package/dist/utils/webcamMicrophoneUtils.js

@@ -12,9 +12,7 @@ require("core-js/modules/es.typed-array.sort.js");
 require("core-js/modules/es.typed-array.to-locale-string.js");
 require("core-js/modules/es.promise.js");
 var _ = require(".");
-var _html2canvas = _interopRequireDefault(require("html2canvas"));
 var _defaults = require("../constants/defaults");
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 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, currentStats, proctorParams) => {
@@ -109,21 +107,21 @@ const updateVideoPermissions = setVideoPermission => {
   });
 };
 exports.updateVideoPermissions = updateVideoPermissions;
-const setupScreensharePermission = (setScreensharePermission, screenshareReference) => navigator.mediaDevices.getDisplayMedia({
+const setupScreensharePermission = (setScreensharePermission, screenshareReference, setScreenshareStream) => navigator.mediaDevices.getDisplayMedia({
   video: true
 }).then(stream => {
   const track = stream.getTracks()[0];
   if (track.getSettings().displaySurface === "monitor") {
     setScreensharePermission(true);
-    screenshareReference.stream = stream;
-    collectScreenshare(screenshareReference);
+    setScreenshareStream(stream);
+    collectScreenshare(screenshareReference, stream);
     track.onended = e => {
       setScreensharePermission(false);
       screenshareReference.current.srcObject = null;
     };
   } else {
     track.stop();
-    screenshareReference.current = null;
+    resetScreenshotReference(screenshareReference);
     setScreensharePermission(false);
   }
 }).catch(e => {
@@ -131,8 +129,8 @@ const setupScreensharePermission = (setScreensharePermission, screenshareReferen
   setScreensharePermission(false);
 });
 exports.setupScreensharePermission = setupScreensharePermission;
-const collectScreenshare = screenshareReference => {
-  screenshareReference.current.srcObject = screenshareReference.stream;
+const collectScreenshare = (screenshareReference, stream) => {
+  screenshareReference.current.srcObject = stream;
   screenshareReference.current.onloadedmetadata = e => {
     screenshareReference.current.play();
   };
@@ -176,9 +174,13 @@ const captureWebcamSnapshot = webcamReference => {
 exports.captureWebcamSnapshot = captureWebcamSnapshot;
 const captureScreenshot = async elementIdSelector => {
   try {
-    const canvas = await (0, _html2canvas.default)(document.querySelector(elementIdSelector));
-    const b64Snapshot = canvas.toDataURL("image/jpeg");
-    return b64DataURItoBlob(b64Snapshot);
+    const canvas = document.createElement("canvas");
+    const video = document.querySelector(elementIdSelector);
+    canvas.width = video.videoWidth;
+    canvas.height = video.videoHeight;
+    canvas.getContext("2d").drawImage(video, 0, 0, video.videoWidth, video.videoHeight);
+    const blob = await new Promise(resolve => canvas.toBlob(resolve));
+    return blob;
   } catch (e) {
     // pass
   }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@newtonschool/react_proctoring_library",
-  "version": "0.0.44",
+  "version": "0.0.46",
   "description": "Used to proctor online tests",
   "author": "ayushkagrawal,shreyachandra,weastel",
   "main": "dist/index.js",
@@ -17,7 +17,6 @@
     "@tensorflow/tfjs": "^3.9.0",
     "bootstrap": "^5.1.3",
     "core-js": "^3.22.7",
-    "html2canvas": "^1.4.1",
     "react-bootstrap": "^2.0.4",
     "react-webcam": "^6.0.0"
   },