Data

Tools

Indexes

Applications

Experiments

Awesome

An open API service indexing awesome lists of open source software.

https://github.com/moevm/mse1h2025-prctr

Локальное средство записи экрана, микрофона и камеры на основе расширения браузера с поддержкой серверного обмена данными. Студенческий прокторинг СПбГЭТУ "ЛЭТИ" [WIP].
https://github.com/moevm/mse1h2025-prctr

Last synced: 10 months ago
JSON representation

Локальное средство записи экрана, микрофона и камеры на основе расширения браузера с поддержкой серверного обмена данными. Студенческий прокторинг СПбГЭТУ "ЛЭТИ" [WIP].

Awesome Lists containing this project

README 

          
# Локальный прокторинг



![Alt text](client/assets/docs/newPopupDesign.png)



## Поддерживаемые браузеры

### Расширение предназначено для работы с браузером Google Chrome. Требуемая версия браузера Google Chrome 134 и выше.



Узнать свою версию браузера Google Chrome можно по адресу `chrome://version`, где после слов Google Chrome указаны четыре числа и первое из них и является нужным для сравнения.



Поскольку расширение разработано на базе браузера Google Chrome, который основан на Chromium, потенциально оно должно работать на других браузерах, основанных так же на Chromium. В их числе Microsoft Edge, Yandex Browser, Opera и другие. ОДНАКО на данный момент НЕТ официальной поддержки браузеров кроме Google Chrome, поскольку тестирование НЕ проводилось.



## Поддерживаемые операционные системы

### Расширение предназначено для работы с Linux и Windows.



В ближайшее время НЕ планируется поддержка MacOS ввиду отсутствия возможности разработки и тестирования под данную систему. Потенциально расширение может работать в данной системе из-за привязки к браузеру, однако браузер в свою очередь связан с системой, что может привести к возникновению ошибок и других некорректных ситуаций.



## Замечания:

- В версиях 1.4.* и ниже выбирайте только основной экран для работы и браузера в случае, когда вы имеете больше одного монитора.



- Данная инструкция является ознакомительной и не избавляет пользователя от обязанности внимательно читать уведомления на экране. Текст уведомлений может иметь немного отличий от представленного на изображениях ниже.



# Инструкция по использованию системы локального прокторинга



## Подготовка папки расширения



1. Скачайте zip архив расширения. Имя архива будет `client_v1.2.2.zip` или при более новых версиях меняется комбинация чисел после v. Чтобы получить последнюю версию расширения, Вам нужно перейти на страницу релизов по ссылке https://github.com/moevm/mse1h2025-prctr/releases/latest и скачать архив с названием `client_v*.*.*.zip`, где вместо * стоят числа версии. Прямая ссылка на скачивание архива расширения версии 1.2.2 https://github.com/moevm/mse1h2025-prctr/releases/download/v1.2.2/client_v1.2.2.zip.



2. Распакуйте архив расширения. Архиваторы работают по-разному. Если при распаковке Вы получили папку `client`, то это папка с расширением. Если вы получили папку с названием как у архива, то папка `client` находится внутри.



## Установка расширения в Google Chrome



1. Откройте раздел "Управление расширениями" в браузере.



    ![Alt text](client/assets/docs/managingExtensions.png)



2. Активируйте режим разработчика.



    ![Alt text](client/assets/docs/developerMode.png)



3. Нажмите "Load unpacked" (Загрузить распакованное расширение) и выберите папку расширения `client`.



    ![Alt text](client/assets/docs/loadUnpacked.png)



4. После успешной загрузки расширение должно появиться среди остальных установленных расширений.

    ![Alt text](client/assets/docs/loadedExtension.png)



5. Для удобства закрепите расширение на панели инструментов.



    ![Alt text](client/assets/docs/pinnedExtension.png)



## Работа с клиентской частью расширения

Для начала работы с расширением Вам необходимо выполнить следующие действия:

1. **Откройте интерфейс расширения**:

   - Нажмите на значок расширения на панели инструментов браузера (правый верхний угол), если вы его закрепили.

   - Или нажмите на значок "Пазл" $\rightarrow$ выберите "Local proctoring" из списка расширений.



2. **Заполните обязательные данные**:

   - **Группа**: введите ровно 4 цифры (например, `1234`).

   - **Фамилия**, **Имя**, **Отчество**: укажите свои данные, начиная с заглавной буквы (допустимы русские/латинские буквы и тире).

   - **Ссылка на экзаменационную "комнату"**: введите корректный URL. Выдается преподавателем.



3. **Настройте разрешения**:

   - Нажмите кнопку "Разрешения".

   - Последовательно предоставьте доступ к:

     1. Записи экрана

     2. Использованию микрофона

     3. Использованию камеры



4. **Приступите к записи**:

   - После успешной настройки разрешений нажмите "Начать запись".

   - Для завершения нажмите "Остановить запись" - файлы сохранятся в папку загрузок браузера, выставленную в настройка самого браузера. По умолчанию данная папка "Загрузки", или "Downloads" и др. в зависимости от локализации. Поддерживается случай настройки загрузок в браузере, запрашивающий подтверждение скачивания: в таком случае система выводит системное окно с подтверждением скачивания.



### **Важно**: Перед началом работы обязательно ознакомьтесь с полной инструкцией ниже - это поможет избежать распространённых ошибок.



## Подробные инструкции:

### 1. Открытие popup-расширения



1. Если ранее расширение было закреплено на панели инструментов браузера (правый верхний угол, рядом со строкой адреса), то для открытия интерфейса popup-расширения (popup - всплывающее окно) нажмите на значок расширения.



    ![Alt text](client/assets/docs/openPinnedPopup.png)



2. Иначе нажмите на значок "Пазл" на панели инструментов браузера (правый верхний угол, рядом со строкой адреса).



    ![Alt text](client/assets/docs/popupLocation.png)



3. В открывшемся окне нажмите по области рядом с иконкой/названием расширения, чтобы открыть интерфейс popup-расширения.



    ![Alt text](client/assets/docs/openPopup.png)



### 2. Интерфейс popup-расширения



![Alt text](client/assets/docs/popupInterface.png)



- Поля:

 - Группа

 - Фамилия

 - Имя

 - Отчество

 - Ссылка на экзаменационную "комнату". 

 

 **Важно:** В прокторинге есть сущность, которая отвечает за "комнаты". Запись привязана к комнате (ссылка на экзамен). Ссылка выдается преподавателем перед началом экзамена.



- Чекбокс для пользователей без Отчества

- Информация о текущих статусах разрешений (✓ – предоставлено, ✗ – не предоставлено):

  - Микрофон

  - Камера

  - Экран

- Дата начала последней записи

- Время записи

- Кнопки:

  - Разрешения – запрашивает доступ к необходимым разрешениям

  - Начать запись – начинает записи

  - Остановить запись – заканчивает записи, сохраняя их у пользователя локально



### 3. Заполнение данных



В форме необходимо указать:

- **Группа**: ровно 4 цифры (например, `1234`).

- **Фамилия, Имя, Отчество**: должны начинаться с заглавной буквы и содержать только русские/латинские буквы и тире (например, `Иванов` или `Albus-Severus`). 

- **Ссылка на экзаменационную "комнату"**: поле не должно быть пустым.



    ![Alt text](client/assets/docs/popupInterface.png)



Примечания:

- Система автоматически проверяет корректность ввода и предоставляет подсказки при ошибках.

    - Ошибки:

    

        ![Alt text](client/assets/docs/inputErrors.png)

    

    - Подсказки:

    

        ![Alt text](client/assets/docs/inputHints.png)



### 4. Настройка разрешений

1. Нажмите кнопку **"Разрешения"**, которая находится во всплывающем окне, для перехода в системную вкладку расширения.



    Системная вкладка закрепится в начале всех вкладок. 



    ![Alt text](client/assets/docs/pinnedTab.png)



    **Важно:** Для корректной работы прокторинга системную вкладку закрывать, обновлять - нельзя! (Закрыть можно только ПОСЛЕ окончания прокторинга)



    Система уведомляет о необходимости предоставления разрешений, а также просит не прерывать их для корректной работы приложения.



    ![Alt text](client/assets/docs/permissionsCue.png)



    Чтобы открыть всплывающее окно, нужно нажать на закреплённый значок нашего расширения в панеле инструментов.



    ![Alt text](client/assets/docs/openPinnedPopup.png)



    Если вы не закрепили его, то нужно нажать значок расширений браузера в панеле инструментов и там нажать по расширению Local proctoring, однако рекомендуется в таком случае вернуться на шаг закрепления расширения в панеле инструментов.



    ![Alt text](client/assets/docs/popupLocation.png)



    ![Alt text](client/assets/docs/openPopup.png)



3. Нажав на кнопку "Хорошо. Я прочитал(а).", система предложит выдать разрешение на запись экрана:



    ![Alt text](client/assets/docs/permissionScreen.png)



    ### Прерывание записи

    При отмене предоставления доступа к экрану система сообщит, об отмене разрешения для экрана:



    ![Alt text](client/assets/docs/permissionErrorScreenCue.png)



    Повторно нажмите **"Разрешения"**.



3. После предоставления экрана система попросит выдать разрешение на использование микрофона и камеры. 

- "Разрешить в этот раз". Расширение будет запрашивать у Вас разрешение каждый раз при записи. 

- "Разрешить при нахождении на сайте". Вы соглашаетесь с тем, что расширение всегда использует либо микрофон, либо камеру. 

 

    ![Alt text](client/assets/docs/permissionsCamMic.png)



    ### Прерывание записи



    При запрете разрешений на использование микрофона и камеры система сообщит, что доступ к микрофону или камере запрещен:



    ![Alt text](client/assets/docs/permissionErrorMicCue.png) ![Alt text](client/assets/docs/permissionErrorCamCue.png)



 



    После чего система попросит убедиться, что доступ к микрофону и камере разрешены.



    ![Alt text](client/assets/docs/permissionNotification.png)



    Нажав на кнопку "Хорошо. Я прочитал(а).", система закроет системную вкладку расширения и перенаправит Вас на вкладку настроек безопасности расширения. Для камеры и микрофона необходимо поменять статус "Блокировать" на "Разрешить" или "Спрашивать (по умолчанию)". 



    ![Alt text](client/assets/docs/permissionsCamMicStatus.png)



    Примечание:

    - В случае со статусом "Спрашивать (по умолчанию)" расширение будет запрашивать у Вас разрешение каждый раз при записи.



    Повторно нажмите **"Разрешения"**.



4. После выдачи всех разрешений система сообщит о готовности к записи с небольшой информацией о работе расширения.



    ![Alt text](client/assets/docs/readyToRecordCue.png)

    

    Также на вкладке появится предпросмотр: экрана и камеры. Предпросмотр работает в режиме live трансляции. В правом окошке - предпросмотр камеры, в левом - предпросмотр экрана.

        

    * Пожалуйста не пугайтесь страшной рекурсии на экране, это предпросмотр Вашего экрана, так и должно быть.

    * Не волнуйтесь, Ваши действия до нажатия "Начать запись" не записываются.



    ![Alt text](client/assets/docs/extensionPreview.png)



    ### Прерывание записи

    Если закрыть доступ к экрану, камере или микрофону после предоставления разрешений, то система уведомит о том, что соответствующее разрешение было заблокировано и нужно повторно нажать кнопку "Разрешения" после предоставления недостающих разрешений.



    ![Alt text](client/assets/docs/permissionLoseScreenCue.png)

    ![Alt text](client/assets/docs/permissionLoseCamCue.png)

    ![Alt text](client/assets/docs/permissionLoseMicCue.png)



### 5. Начало записи



1. Нажмите кнопку **"Начать запись"**. Система:

- Запустит запись.

- Отключит предпросмотр.

- Уведомит о начале процесса.



    ![Alt text](client/assets/docs/startRecord.png)



2. Во время записи можно включить и выключить предпросмотр через системную вкладку.

 

    ![Alt text](client/assets/docs/previewOn.png)

    ![Alt text](client/assets/docs/previewDown.png)



    ### Прерывание записи



    При отзыве разрешений во время записи:

    1. Система уведомит о блокировке доступа попросит выдать разрешения и начать запись заново.

    2. Нажмите **"Хорошо. Я согласен(а)."** для остановки записи.

    3. Файлы сохранятся в папку загрузок браузера, выставленную в настройка самого браузера. По умолчанию данная папка **Загрузки**, или **Downloads** и др. в зависимости от локализации. Поддерживается случай настройки загрузок в браузере, запрашивающий подтверждение скачивания: в таком случае система выводит системное окно с подтверждением скачивания. Далее система предоставит статистику:

    - Начало записи

    - Конец записи

    - Длительность записи

    - Куда сохранены файлы записи экрана и камеры

    - Название файла записи экрана (его размер)

    - Название файла записи камеры (его размер):

    - Куда сохранен файл логов



        ![Alt text](client/assets/docs/stopRecord.png)



### 6. Конец записи

1. Нажмите "Остановить запись".

2. Записи остановятся и сохранятся в папку загрузок браузера, выставленную в настройка самого браузера. По умолчанию данная папка **Загрузки**, или **Downloads** и др. в зависимости от локализации. Поддерживается случай настройки загрузок в браузере, запрашивающий подтверждение скачивания: в таком случае система выводит системное окно с подтверждением скачивания.

3. Система предоставит статистику:

- Начало записи

- Конец записи

- Длительность записи

- Куда сохранены файлы записи экрана и камеры

- Название файла записи экрана (его размер)

- Название файла записи камеры (его размер):

- Куда сохранен файл логов



## Просмотр записей



Кодеки: H264 - MPEG-4 AVC (part 10) (avc1) и OPUS

Видеоплеер должен работать с этими кодеками. Чтобы решить проблему отображения, искать решение на стороне видеоплеера. 



Full support:



- Linux: 



    1. Chrome

    2. Microsoft Edge

    3. Totem

    4. Haruna



- Windows:



    1. Chrome

    2. Microsoft Edge

    3. Vivaldi



Half support: 



- Linux:



    1. VLC (Смотреть локально "Кодеки->Декодирование с аппаратным ускорением" и пробовать другие, если по умолчанию не работает. На Fedora 41 работают VA-API, VA-API DRM, отключено, не работает VDPAU) Звук в левом наушнике.

    2. Firefox - нет длительности и не работает перемотка.

    3. Dragon Player - работает, но после перемотки накладывается инверсия на изображение.



- Windows:



    1. Кино и ТВ - работает перемотка только кнопками, нет длительности.

    2. Фотографии - работает перемотка только кнопками, длительность некорректная.

    3. Медиаплеер -  нет длительности и не работает перемотка.

    4. Firefox - нет длительности и не работает перемотка.

    5. VLC - работает с автоматическим модулем демультиплексора, при перемотке возможны искажения изображения на несколько секунд.



## Сервер расширения

### CLI

Для запуска сервера в папке server ввести следующую команду:

```bash

docker-compose up --build || docker compose up --build

```



### GUI

При вводе адреса `http://localhost:5000/` открывается страница с пятью окнами ввода: “Группа”, “Фамилия”, “Имя”, “Отчество”, “Дата” – для фильтрации, и кнопкой “Поиск” для вывода записей в базе данных по заданному фильтру (по умолчанию показываются все записи). Поля участвуют в поиске по принципу “И”, и если поля пустые, то выводится вся база данных. База данных работает в UTC0 серверном формате. Метаданные прокторинга в формате локального для пользователя времени. Логирование осуществляется в UTC0 клиентском формате, вместе с этим в логировании есть поле с часовым поясом клиента.



Вывод записей базы данных происходит на странице `http://localhost:5000/results`. Страница работает только при переадресации с главной страницы поиска.



Также все результаты выводятся в неприведенном виде по адресе `http://localhost:5000/get_sessions`