EasyProctor
O componente web EasyProctor permite que qualquer plataforma de execução de exames registre sessões de proctoring.
Instalação
Via NPM:
npm install --save easyproctorVia CDN
<script src="https://cdn.jsdelivr.net/npm/easyproctor/unpkg/easyproctor.min.js"></script>Utilização
Para utilizar o componente será necessário utilizar os seguintes parâmetros:
- examId: identificador do exame
- clientId: identificador do parceiro
- token: token de autenticação biométrica (utilizar SDK biométrico do EasyProctor)
Ao inicializar a sessão de proctoring através do método start do componente você receberá o objeto do tipo StartProctoringDTO que possui o identificador da sessão.
Após finalizar a sessão de proctoring através do método finish você poderá consultar os dados de proctoring através da nossa API.
https://proctoring-api.easyproctor.tech/index.html
Em um bundler
import { useProctoring } from "easyproctor";
const { start, finish, pause, resume, onFocus, onLostFocus, enumarateDevices, checkPermissions, checkIfhasMultipleMonitors, onStopSharingScreen } = useProctoring({
examId: "00001",
clientId: "000001",
token: "...",
});Via CDN: A função "useProctoring" é injetada para ser utilizada globalmente
<script src="https://cdn.jsdelivr.net/npm/easyproctor/unpkg/easyproctor.min.js"></script>
<script>
const { start, finish, pause, resume, onFocus, onLostFocus, enumarateDevices, checkPermissions, checkIfhasMultipleMonitors, onStopSharingScreen } = useProctoring({
examId: "00001",
clientId: "000001",
token: "...",
});
</script>Exemplo completo
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<script src="dist/unpkg/easyproctor.min.js"></script>
<script>
const {
start,
finish,
onFocus,
onLostFocus,
enumarateDevices,
checkPermissions,
} = useProctoring({
examId: "00001",
clientId: "000001",
token: "...",
});
async function startExam() {
try {
// Verificar se existem dispositívos disponíveis
if (devices.cameras.length == 0 || devices.microphones.length == 0) {
throw "Você precisa possuir ao menos uma câmera e um microfone";
}
// Verificar se foram setados
const selectedCamera = cameras.value;
const selectedMicrophone = microphones.value;
if (!selectedCamera || !selectedMicrophone) {
throw "Você precisa selecionar uma camera e um microfone";
}
startButton.innerHTML = "Carregando";
onFocus(() => generateAlert(false));
onLostFocus(() => generateAlert(true));
// Adicionar o dispositivo selecionado é opcional
const { cameraStream } = await start({
cameraId: selectedCamera,
microphoneId: selectedMicrophone,
});
} catch (error) {
alert(error);
}
}
async function finishExam() {
try {
await finish({ onProgress: (percentage) => console.log(percentage) });
console.log("EXAME FINALIZADO");
} catch (error) {
alert(error);
}
}
// Verificar permissões
let devices = { cameras: [], microphones: [] };
async function verifyPermissions() {
// Checar permissões
var hasPermissions = await checkPermissions();
if (!hasPermissions) {
window.alert("Para continuar você precisa conceder as permissões");
return;
}
// Listar os dispositivos
devices = await enumarateDevices();
const generateOption = (text, value) => {
const el = document.createElement("option");
el.setAttribute("value", value);
el.innerHTML = text;
return el;
};
devices.cameras.forEach((camera) => {
const option = generateOption(camera.label, camera.id);
cameras.appendChild(option);
});
devices.microphones.forEach((microphone) => {
const option = generateOption(microphone.label, microphone.id);
microphones.appendChild(option);
});
}
// Gerar alerta
function generateAlert(lostFocus) {
const p = document.createElement("p");
if (lostFocus) {
p.classList.add("text-red-500");
p.innerHTML = `Perdeu o foco em: ${new Date().toLocaleTimeString()}`;
} else {
p.classList.add("text-green-500");
p.innerHTML = `Retomou o foco em: ${new Date().toLocaleTimeString()}`;
}
alerts.appendChild(p);
}
</script>
</head>
<body>
<div
style="height: 100vh; display: flex; align-items: center; justify-content: center;"
>
<button onclick="startExam()">Iniciar</button>
<button onclick="finishExam()">Finalizar</button>
<button onclick="verifyPermissions()">Verificar permissões</button>
</div>
</body>
</html>API
const {
// Inicia a gravação da prova
start,
// Pausa a gravação
pause,
// Reinicia a gravação
resume,
// Finaliza a gravação da prova retornando os arquivos gerados
finish,
// Adiciona uma função callback para ser executada quando o usuário recupera o foco da tela
onFocus,
// Adiciona uma função callback para ser executada quando o usuário perde o foco da tela
onLostFocus,
// Adiciona uma função callback para ser executada quando o usuário cancela o compartilhamento de tela
onStopSharingScreen
// Enumera os dispositivos de camera e microfone
enumarateDevices,
// Checa as permissões de camera e microfone
checkPermissions,
// Checa se existe mais de um monitor
checkIfhasMultipleMonitors
} = useProctoring({
examId: "00001",
clientId: "000001",
token: "...",
});Release Note V 1.1.0
- Adicionado fotos durante a execução da prova
- Adicionado o modal de capturePhoto, para cadastramento e autenticação biométrica
- Correção de interface do modal checkDevices com problema no lts