Easyproctor NPM

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 easyproctor

Via 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