A headless proctoring system that is built for React
npm install react-proctoring-1#### !NOTICE: This is majorly Ansh Saini's work. I only added the cam detection bit. Major credit goes to him. I'm only publishing this for ease of use
react-devtools works (mostly), but it also gives false positives. It determines if Developer Tools are open by checking the window width, which as you might already guess, is not a very accurate way.
tsx
import { useProctoring } from 'react-proctoring'
function App() {
const proctoringData = useProctoring({
forceFullScreen: true,
preventTabSwitch: true,
preventContextMenu: true,
preventUserSelection: true,
preventCopy: true,
})
const hideExam =
proctoringData.fullScreen.status === 'off' || proctoringData.tabFocus.status === false
return (
<>
{hideExam ? : }
{/ Setup alert dialogs based on proctoringData /}
>
)
}
`
$3
1. We cannot force the browser to enter full screen mode automatically. We need to do it on a user gesture (for example: a button click). Once you have identified the gesture that you want to use, you can use the following handler to request full screen mode.
`tsx
import { useProctoring, triggerFullScreen } from 'react-proctoring'
function App() {
const { fullScreen } = useProctoring({
forceFullScreen: true,
})
return
}
`
2. By default, browsers have a black background for fullscreen pages. You can override those default styles by adding the following lines in your global CSS file.
`css
:fullscreen,
::backdrop {
background-color: white;
}
`
Contributing
$3
1. Clone this repository
2. Run yarn install to install dependencies
3. Run yarn dev to run the example application
$3
yarn dev: Run the example application in your browser
yarn build:example: Build the example app
yarn build: Build react-proctoring` library