proctoring 2.0.2

checksums.yaml

@@ -0,0 +1,7 @@
+---
+SHA256:
+  metadata.gz: 1538bea9746b16c243ab12d9b56e2abc8c795fa67b8af462f0a4149a5d227cf3
+  data.tar.gz: d95a3fee4ba698352726450c0717f457b9fab77ea9555e10e08b0716cbad1986
+SHA512:
+  metadata.gz: a920b708cd41965880803a0b27590b538a61b9099b1ffc52e795522202b141a5cd335e053ad80487780a510ec6a942562ec9d8a001e4104fbf376fe90831415a
+  data.tar.gz: 4955dd9368b5ad72e304cecb28639a8f372bd75d487e294fb37ea24666c2beabfa708d0f15bbe73c61257bee2ec87a218ae2567da456217dd39267f2e58cf3ec

data/MIT-LICENSE

@@ -0,0 +1,20 @@
+Copyright 2025 Shireesh Jayashetty
+
+Permission is hereby granted, free of charge, to any person obtaining
+a copy of this software and associated documentation files (the
+"Software"), to deal in the Software without restriction, including
+without limitation the rights to use, copy, modify, merge, publish,
+distribute, sublicense, and/or sell copies of the Software, and to
+permit persons to whom the Software is furnished to do so, subject to
+the following conditions:
+
+The above copyright notice and this permission notice shall be
+included in all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
+EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF
+MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND
+NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE
+LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION
+OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION
+WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.

data/README.md

@@ -0,0 +1,245 @@
+## About Knights Watch
+
+![Open issues](https://img.shields.io/github/issues/elitmus/knights-watch)
+![Commit activity](https://img.shields.io/github/commit-activity/m/elitmus/knights-watch)
+
+### Introduction
+
+:wave: Welcome to the eLitmus Knights Watch.  Knights Watch is a open source project providing a platform suitable for creating modular applications with live video proctoring capabillites. 
+
+It provides the following feature:
+
+* Video Proctoring Client side integration for services:
+  
+  1. [Kurento Media Server](https://www.kurento.org)
+  2. [100ms](https://www.100ms.live/)
+
+* Option to configure the video recording.
+
+Future plans:
+
+* Face detection
+* AI video proctoring
+* AI image proctoring
+* Proctor can see candidate live screen
+* Proctor can chat with candidate
+* Auto Proctoring
+
+***This Gem is currently under development and API can change in future***
+
+### Usage
+
+This section demonstrates how to use this engine with the RubyOnRails application to build web-based video proctoring application.
+
+**100ms Example**
+
+#### Set Up Variables
+
+1. Add this line to your application's Gemfile:
+
+```ruby
+gem 'proctoring', '=1.0.0', git: 'https://github.com/elitmus/knights-watch.git'
+```
+
+2. And then execute:
+```bash
+$ bundle install
+```
+
+3. Mount in application
+
+```ruby
+mount Proctoring::Engine => '/proctoring'
+```
+
+3. Create initializer file `proctoring.rb`
+
+```ruby
+Proctoring.setup do |config|
+  config.app_name = 'app_name'
+  config.hundred_ms_app_access_key = '' #Generate the app accccess key from the 100ms dashboard
+  config.hundred_ms_app_secret = '' #Generae the app secret from the 100ms dashboard
+  config.hundred_ms_template_id = '' #Generate template id from 100ms dashboard
+  config.hundred_ms_s3_bucket = '' #S3 bucket to store the recording fo candidates
+  config.hundred_ms_s3_access_key = '' #S3 access key
+  config.hundred_ms_s3_access_secret = '' #S3 access secret
+  config.hundred_ms_s3_region = '' #S3 region
+  config.hundred_ms_auth_secret = '' #32 bit random string
+end
+```
+
+#### Available API's for Candidate Side:
+
+HTML for showing the candidate video element
+
+```ruby
+<div id="videoreplay">
+  <video id="vid" autoplay loop ></video>
+</div>
+<%= render template: 'proctoring/video_streamings/_video_recording100ms.html.erb'%>
+<%= content_tag :div, '', id: 'proctoring-user-data', data: { event_id: 'event_code', user: 'user_id', hundred_ms_proctoring_service: true, max_candidate_allowed: '10' } %>
+```
+
+Javascript for the application
+
+```Javascript
+  const proctoringData = document.getElementById('proctoring-user-data');
+  const {
+    hundredMsProctoringService, eventId, user, maxCandidateAllowed,
+  } = proctoringData.dataset;
+  if (proctoringData && hundredMsProctoringService === 'true') {
+    const options = {
+      userId: user,
+      eventId,
+      maxPeopleAllowed: maxCandidateAllowed,
+      userRole: 'candidates',
+    };
+    connectToCandidateRoom(options);
+  }
+```
+
+#### Avaliable API's for the proctor side
+
+HTML for proctor side
+
+```ruby
+  <%= render template: 'proctoring/video_player/live_video_proctoring_100ms.html.erb'%>
+  <%= content_tag :div, '', id: 'proctoring-user-data', data: { 'user-id': 'user_id', 'event-id': 'event_code', 'max-proctor-allowed': '2' } %>
+```
+
+Javascript is written in engine itself for proctor. So need to add javascript on the main application.
+
+---
+
+**Kurento Media Server Example**
+
+#### Set Up Variables
+
+1. Execute the first three steps mentioned in the 100ms Example.
+
+2. Create initializer file `proctoring.rb`
+
+```ruby
+Proctoring.setup do |config|
+  config.app_name = 'your_name'
+  config.media_server_url = 'server-url without protocol and no extra forward slashes'
+  config.turn_secret = 'turn_server_secret'
+end
+```
+
+##### Available API's for Candidate Side:
+
+HTML if want to show video to user ids can be passed to Object.
+```ruby
+<div
+  id="vid-btn"
+  title="Monitoring Video"
+  data-signaling-server-url = "<%= signaling_server_url %>"
+  data-event-id = "<%= event_id %>"
+  data-user-id = "<%= user_id %>"
+  data-video-proctoring="<%= video_proctoring %>"
+></div>
+
+<div id="videoreplay">
+  <video id="vid" autoplay loop ></video>
+</div>
+
+<%= render template: 'proctoring/video_streamings/_video_recording.html.erb'%>
+```
+
+Integrate Javascript into the main application.
+```Javascript
+const connectToScocket = (url, evnt, app, user) => {
+  var socket = io(url);
+
+  socket.on('authorization',function(data){
+    socket.emit('authorization', {"event_id": evnt, "app_name": app, "user_id": user});
+  });
+  socket.on('disconnect', function(){
+  });
+  return socket;
+}
+
+const {
+  signalingServerUrl,
+  eventId,
+  userId
+} = document.getElementById('vid-btn').dataset;
+
+const socket = connectToScocket(
+  signalingServerUrl,
+  eventId,
+  'app_name',
+  userId,
+);
+
+const options = {
+  event: eventId,
+  user: userId,
+  socket: socket,
+};
+
+videoRecordingUsingSignalingServer(options);
+```
+
+#### Available API's for Proctor Side:
+
+HTML to integrate proctor side screen.
+
+```ruby
+<%= render template: 'proctoring/video_player/live_video_proctoring.html.erb'%>
+<%= content_tag :div, '', id: 'proctoring-user-data', data: { 'signaling-server-url': 'singaling_server_url', 'event': 'event_id', 'user': 'user_id', 'assigned_user_ids': [] }%>
+```
+
+Javascript for proctor side:
+
+```Javascript
+const connectToScocketAsAdmin = (url, app) => {
+  var socket = io(url);
+
+  socket.on('authorization',function(data){
+    socket.emit('admin-authorization', {"app_name": app});
+  });
+  socket.on('disconnect', function(){
+  });
+  return socket;
+}
+
+document.addEventListener('DOMContentLoaded', () => {
+  const userData = document.getElementById('proctoring-user-data');
+  const { signalingServerUrl, event, user, assignedUserIds } = userData.dataset;
+  const socket = connectToScocketAsAdmin(signalingServerUrl, 'app_name');
+  liveVideoUsingSignalingServer({ socket, event, user, assignedUserIds });
+});
+```
+
+### Documentation
+
+#### Architecture
+
+1. Check the Knights Watch [100ms Architecture](https://docs.google.com/presentation/d/1_CebvXEStUtx8m4Hw9DLQPK6AD8gxBKU/edit?usp=sharing&ouid=100590295233713204603&rtpof=true&sd=true) to get better understanding.
+
+
+### Prerequisites
+
+Check our prerequisites to get started.
+
+1. [100ms Prerequisites](./docs/100ms/prerequisites.md)
+
+### Installation
+
+Use our installation guidelines to setup the project on your local
+
+1. [100ms Installation Guidelines](./docs/100ms/installation.md)
+
+### Useful Links
+
+- [Development Guidelines](./docs/development.md)
+- [Code of Conduct](./docs/code_of_conduct.md)
+
+### New Contributor?
+
+If you are a new contributor, visit our [Contributing Guidelines](./docs/contributing.md) to get started.
+
+## License
+The gem is available as open source under the terms of the [MIT License](https://opensource.org/licenses/MIT).

data/Rakefile

@@ -0,0 +1,32 @@
+begin
+  require 'bundler/setup'
+rescue LoadError
+  puts 'You must `gem install bundler` and `bundle install` to run rake tasks'
+end
+
+require 'rdoc/task'
+
+RDoc::Task.new(:rdoc) do |rdoc|
+  rdoc.rdoc_dir = 'rdoc'
+  rdoc.title    = 'Proctoring'
+  rdoc.options << '--line-numbers'
+  rdoc.rdoc_files.include('README.md')
+  rdoc.rdoc_files.include('lib/**/*.rb')
+end
+
+APP_RAKEFILE = File.expand_path("test/dummy/Rakefile", __dir__)
+load 'rails/tasks/engine.rake'
+
+load 'rails/tasks/statistics.rake'
+
+require 'bundler/gem_tasks'
+
+require 'rake/testtask'
+
+Rake::TestTask.new(:test) do |t|
+  t.libs << 'test'
+  t.pattern = 'test/**/*_test.rb'
+  t.verbose = false
+end
+
+task default: :test

data/app/assets/config/100ms_manifest.js

@@ -0,0 +1 @@
+//= link_directory ../javascripts/100ms .js

data/app/assets/config/knights_watch_manifest.js

@@ -0,0 +1,4 @@
+//= link proctoring_manifest.js
+//= link 100ms_manifest.js
+//= link kurento_manifest.js
+//= link videojs_manifest.js

data/app/assets/config/kurento_manifest.js

@@ -0,0 +1 @@
+//= link_directory ../javascripts/kurento .js

data/app/assets/config/proctoring_manifest.js

@@ -0,0 +1,3 @@
+//= link_directory ../stylesheets/proctoring .css
+//= link_directory ../javascripts/proctoring .js
+//= link_directory ../images/proctoring .png

data/app/assets/config/videojs_manifest.js

@@ -0,0 +1,2 @@
+//= link_directory ../stylesheets/videojs .css
+//= link_directory ../javascripts/videojs .js

data/app/assets/javascripts/100ms/examine.js

@@ -0,0 +1,27 @@
+//= require 100ms/hundred_ms
+
+import { HMSReactiveStore } from "https://cdn.skypack.dev/@100mslive/hms-video-store";
+
+const connectToCandidateRoom = (props) => {
+  const hms = new HMSReactiveStore();
+  const hmsStore = hms.getStore();
+  const hmsActions = hms.getHMSActions();
+  const hmsNotifications = hms.getNotifications();
+
+  const renderCandidateStream = (peers) => {
+    const video = document.getElementById('vid');
+    peers.forEach((peer) => {
+      if((peer.isLocal || peer.name === props.userId) && peer.videoTrack){
+        hmsActions.attachVideo(peer.videoTrack, video);
+      }
+    })
+  }
+
+  const onConnectionCandidate = (isConnected) => {
+    console.log(isConnected);
+  }
+
+  connectToRoom(props, renderCandidateStream, onConnectionCandidate, hmsStore, hmsActions, hmsNotifications);
+}
+
+window.connectToCandidateRoom = connectToCandidateRoom;

data/app/assets/javascripts/100ms/hundred_ms.js

@@ -0,0 +1,143 @@
+import { selectIsConnectedToRoom, selectPeers } from "https://cdn.skypack.dev/@100mslive/hms-video-store";
+
+const errorCodes = {
+  CAPTURE_DEVICE: '3002',
+  ICE_CONNECTION_FAILED: '4005'
+}
+
+const connectToRoom = (props, renderPeers, onConnection, hmsStore, hmsActions, hmsNotifications) => {
+  const setLocalStorageWithExpiry = (key, value, expiry) => {
+    const data = {
+      authToken: value,
+      ttl: Date.now() + (expiry * 1000),
+    }
+
+    localStorage.setItem(key, JSON.stringify(data));
+  }
+
+  const getLocalStorageItem = (key) => {
+    const data = localStorage.getItem(key);
+
+    if(!data) {
+      return null;
+    }
+
+    const item = JSON.parse(data);
+
+    if(Date.now() > item.ttl){
+      localStorage.removeItem(key);
+      return null;
+    }
+
+    return item.authToken;
+  }
+
+  const isAudioMuted = (userRole) => {
+    switch(userRole) {
+      case 'candidates':
+        return false;
+      default:
+        return true;
+    }
+  }
+
+  const isVideoMuted = (userRole) => {
+    switch(userRole) {
+      case 'candidates':
+        return false;
+      default:
+        return true;
+    }
+  }
+
+  hmsNotifications.onNotification((notification) => {
+    switch(notification.data.code){
+      case errorCodes.CAPTURE_DEVICE:
+      case errorCodes.ICE_CONNECTION_FAILED:
+        joinVideoProctoring(props);
+        break;
+      default:
+        return null;
+    }
+  });
+
+  const joinRoom = async (props) => {
+    await hmsActions.join(
+      {
+        userName: props.userId,
+        authToken: props.authToken,
+        settings: {
+          isAudioMuted: isAudioMuted(props.userRole),
+          isVideoMuted: isVideoMuted(props.userRole)
+        },
+        metadata: JSON.stringify({
+          user_id: props.userId,
+        }),
+        rememberDeviceSelection: true
+      }
+    )
+  }
+
+  const fetchAuthenticationToken = (props) => {
+    const url = '/proctoring/api/v1/authentication';
+    const csrfMeta = document.getElementsByName('csrf-token');
+    const token = csrfMeta[0] ? csrfMeta[0].content : '';
+    const data = {
+      user_id: props.userId,
+      role: props.userRole,
+      event_id: props.eventId,
+      max_people_allowed: props.maxPeopleAllowed
+    }
+    const applicationToken = document.getElementById('application-token');
+
+    return fetch(url, {
+      method: 'POST',
+      headers: {
+        'X-CSRF-TOKEN': token,
+        'Token': applicationToken.dataset.token,
+        Accept: 'application/json',
+        'Content-Type': 'application/json'
+      },
+      body: JSON.stringify(data)
+    })
+    .then((response) => response.json())
+    .then((result) => result)
+    .catch((error) => console.log(error))
+  }
+
+  const setEventId = (props) => {
+    const connectedEvent = document.getElementById('connected-event');
+    connectedEvent.innerHTML = props.eventId;
+  }
+
+  const joinVideoProctoring = (props) => {
+    const authTokenKey = `authToken-${props.eventId}-${props.userId}`;
+    const authToken = getLocalStorageItem(authTokenKey);
+
+    if(props.userRole === 'proctor') setEventId(props);
+
+    if(authToken){
+      joinRoom({ userId: props.userId, authToken: authToken, userRole: props.userRole });
+    } else {
+      fetchAuthenticationToken(props).then((result) => {
+        if(result.success){
+          setLocalStorageWithExpiry(authTokenKey, result.authentication_token, 2 * 60 * 60);
+          joinRoom({ userId: props.userId, authToken: result.authentication_token, userRole: props.userRole });
+        }
+      })
+    }
+  }
+
+  joinVideoProctoring(props);
+
+  const leaveRoom = () => {
+    hmsActions.leave();
+  }
+
+  window.onunload = leaveRoom;
+
+  hmsStore.subscribe(renderPeers, selectPeers);
+  hmsStore.subscribe(onConnection, selectIsConnectedToRoom);
+}
+
+window.connectToRoom = connectToRoom;

data/app/assets/javascripts/100ms/join_proctor_room.js

@@ -0,0 +1,17 @@
+/* eslint-disable no-undef */
+document.getElementById('join-proctoring-room-btn').addEventListener(
+  'click', () => {
+    document.getElementById('join-proctoring-room-btn').classList.add('d-none');
+    document.getElementById('loader').classList.remove('d-none');
+
+    const userData = document.getElementById('proctoring-user-data');
+    const {
+      userId,
+      eventId,
+      maxProctorAllowed,
+    } = userData.dataset;
+    connectToVideoProctoringRoom({
+      userId, eventId, maxPeopleAllowed: maxProctorAllowed, userRole: 'proctor'
+    });
+  },
+);

data/app/assets/javascripts/100ms/proctor.js

@@ -0,0 +1,152 @@
+//= require 100ms/join_proctor_room
+//= require 100ms/hundred_ms
+
+import { HMSReactiveStore, selectPeerByID, selectAudioTrackVolume } from "https://cdn.skypack.dev/@100mslive/hms-video-store";
+
+const connectToVideoProctoringRoom = (props) => {
+  const hms = new HMSReactiveStore();
+  const hmsStore = hms.getStore();
+  const hmsActions = hms.getHMSActions();
+  const hmsNotifications = hms.getNotifications();
+
+  const htmlElement = (tag, attrs = {}, ...children) => {
+    const newElement = document.createElement(tag);
+  
+    Object.keys(attrs).forEach((key) => {
+      newElement.setAttribute(key, attrs[key]);
+    })
+  
+    children.forEach((child) => {
+      newElement.append(child);
+    })
+  
+    return newElement;
+  }
+
+  const toggleCandidateSound = (candidateId) => {
+    const buttonEle = document.getElementById(`sound-btn-${candidateId}`);
+    const peer = hmsStore.getState(selectPeerByID(candidateId));
+
+    if(peer && peer.audioTrack) {
+      const presentVolume = hmsStore.getState(selectAudioTrackVolume(peer.audioTrack));
+      if(presentVolume === 0) {
+        buttonEle.innerHTML = 'Stop Sound';
+        hmsActions.setVolume(100, peer.audioTrack);
+      } else {
+        buttonEle.innerHTML = 'Start Sound';
+        hmsActions.setVolume(0, peer.audioTrack);
+      }
+    }
+  }
+
+  const renderPeers = (peers) => {
+    const divMeetingRoom = document.getElementById("proctoring-videos");
+    divMeetingRoom.innerHTML = '';
+
+    const proctorSet = new Set();
+    const candidateSet = new Set();
+
+    peers.forEach((peer) => {
+      if(peer.roleName === 'candidates'){
+        const participantVideoPeer = document.getElementById(`participant-video-${peer.name}`);
+
+        candidateSet.add(peer.name);
+
+        if(participantVideoPeer) {
+          participantVideoPeer.remove();
+        }
+
+        const video = htmlElement('video', {
+            autoplay: true,
+            muted: true,
+            playsinline: true,
+            controls: true,
+            id: `video-element-${peer.name}`
+        });
+
+        if(peer.videoTrack) {
+          hmsActions.attachVideo(peer.videoTrack, video);
+        }
+
+        if (peer && peer.audioTrack) {
+          hmsActions.setVolume(0, peer.audioTrack); //initial keep all the peer volume to the 0 not auidble.
+        }
+  
+        const peerContainer = htmlElement(
+          'div', 
+          {
+            class: 'video-container rounded-0 card',
+            id: `participant-video-${peer.name}`
+          },
+          video,
+          htmlElement(
+            'div',
+            {
+              class: 'card-body p-2'
+            },
+            htmlElement(
+              'span',
+              {
+                class: 'text-dark m-0'
+              },
+              htmlElement(
+                'strong',
+                {},
+                `CandidateId: `
+              ),
+              htmlElement(
+                'strong',
+                {
+                  class: 'video-user-id'
+                },
+                peer.name
+              ),
+            ),
+            htmlElement(
+              'span',
+              {
+                class: 'status-online text-success'
+              },
+              '(Online)'
+            ),
+            htmlElement(
+              'button',
+              {
+                class: 'float-right btn btn-sm btn-rounded btn-primary my-0 p-0 px-1 sound-btn',
+                onclick: `toggleCandidateSound('${peer.id}')`,
+                id: `sound-btn-${peer.id}`
+              },
+              'Start Sound',
+            )
+          )
+        )
+  
+        divMeetingRoom.append(peerContainer);
+      } else {
+        proctorSet.add(peer.name);
+      }
+    });
+
+    document.getElementById('assigned-candidates').innerHTML = candidateSet.size;
+    document.getElementById('connected-recruiters').innerHTML = proctorSet.size;
+  }
+  
+  const onConnection = (isConnected) => {
+    const loader = document.getElementById('loader');
+    const joinVideoProctoringBtn = document.getElementById('join-proctoring-room-btn');
+    const proctoringDataComponent = document.getElementById('proctoring-data-component');
+
+    if(isConnected){
+      loader.classList.add('d-none');
+      joinVideoProctoringBtn.classList.add('d-none');
+      proctoringDataComponent.classList.remove('d-none');
+    } else {
+      loader.classList.remove('d-none');
+    }
+  }
+  
+  window.toggleCandidateSound = toggleCandidateSound;
+  connectToRoom(props, renderPeers, onConnection, hmsStore, hmsActions, hmsNotifications);
+}
+window.connectToVideoProctoringRoom = connectToVideoProctoringRoom;
+