¶ Selfio Studio Website
¶ Запуск проекта
Перед началом работы с проектом необходимо установить среду Node.JS и менеджер пакетов npm.
¶ Установка пакетов
npm install
¶ Запуск проекта в режиме разработки
npm run serve
¶ Компиляция для публикации
npm run build
¶ Проверка синтаксиса в файлах проекта
npm run lint
Перед запуском приложения вы должны указать параметры в файлах
.env.development и .env.production.
VUE_APP_API_URL=https://studio.dev.selfio.me
VUE_APP_AUTH_URL=https://auth.dev.selfio.me
VUE_APP_BACKEND_CLIENT_ID=b8b3e2a7-52fc-4dcc-aa47-a9f92d989de4
VUE_APP_PP_PROTOCOL=ws
VUE_APP_OBS_PROTOCOL=ws
VUE_APP_OBS_DEFAULT_ADDRESS=localhost:4455
VUE_APP_OBS_DEFAULT_PASSWORD=password1111
VUE_APP_PP_DEFAULT_ADDRESS=localhost:9000
VUE_APP_PP_DEFAULT_PASSWORD=
VUE_APP_PROMPTER_URL=wss://studio.dev.selfio.me/wsapp
VUE_APP_API_URL=https://app.selfio.me
VUE_APP_AUTH_URL=https://auth.selfio.me
VUE_APP_BACKEND_CLIENT_ID=bda2bd56-4c54-4d0d-919a-af89fd9d2d85
VUE_APP_PP_PROTOCOL=ws
VUE_APP_OBS_PROTOCOL=ws
VUE_APP_OBS_DEFAULT_ADDRESS=localhost:4455
VUE_APP_OBS_DEFAULT_PASSWORD=password1111
VUE_APP_PP_DEFAULT_ADDRESS=localhost:9000
VUE_APP_PP_DEFAULT_PASSWORD=
VUE_APP_PROMPTER_URL=wss://app.selfio.me/dev/prompter
¶ Язык и технологии
Веб-сервис написан на языке Javascript с использованием фреймворка VueJs
Основные библиотеки, использующиеся в приложении:
- vuex - для управления состоянием приложения
- obs-websocket-js - для взаимодействия с плагином OBS obs-websocket
- vue-yandex-metrika - для сбора статистики
- vuetify - для стилизации пользовательского интерфейса
- @vue-hero-icons/solid - набор svg иконок
- axios - помогает обращаться к ресурсу через HTTP-клиент
¶ Структура проекта
- public - содержит в себе статистические файлы, которые будут использоваться для дальнейшей публикации при компиляции проекта
- src - код, реализующий функционал
- assets - статические файлы, которые используются в приложении
- components - vue-компоненты и файлы стилей, которые описывают функционал веб-приложения
- modules - модули для вставки в Vue проекты Selfio
- plugins - созданные плагины
- router - маршрутизация веб-приложения
- services - вспомогательные сервисы
- store - описание состояния приложения, реализация vuex в рамках приложения
- utils - тесты
- views - страницы приложения
- stub - тестовый сервер для имитации запросов при разработке
- wrappers - реализация websocket-клиента для управления OBS
¶ Класс - обертка wrappers
Для реализации websocket-клиента для управления OBS в веб-приложении используется плагин obs-websocket-js. Для использования данного websocket-клиента и реализации функций, необходимых для работы веб-сервиса студии самозаписи, был написан класс-обертка src/wrappers/obs_wrapper.js, содержащий следующие методы взаимодействия с OBS:
● createConnection – метод для открытия подключения к websocket-серверу по ip-адресу и паролю, если он необходим
● startRecording – метод для старта записи видео
● stopRecording – метод для остановки записи видео
● pauseRecording – метод для приостановки записи видео
● resumeRecording – метод для возобновления записи видео
● getScenes – метод для получения сцен из OBS для последующей настройки сценария работы студии
● setCurrentScene – метод для смены текущей сцены в OBS для переключения компоновки во время записи видео
● getTransitions – метод для получения списка доступных анимаций перехода между сценами для последующей настройки сценария работы студии
● setTransitionForScene – метод для установки перехода для определенной сцены при настройке сценария работы студии
● getCurrentSceneScreenshot – метод для получения текущей картинки из OBS для отображения превью изображения в студии
● deleteConnection – метод для закрытия подключения к websocket-серверу
Websocket-клиент для управления презентацией реализован вручную силами языка Javascript, без использования плагинов. Для этого был написан класс PPClient, содержащий следующие методы для обмена сообщениями с websocket-сервером:
● connect – для подключения к websocket-серверу по ip-адресу
● startSlideshow – для запуска слайд-шоу презентации
● stopSlideshow – для остановки слайд-шоу презентации
● goToSlide – для переключения слайда презентации по номеру
● close – для закрытия подключения к websocket-серверу.
¶ Selfio Prompter Website
¶ Запуск проекта
Перед началом работы с проектом, необходимо установить среду Node.JS и менеджер пакетов npm.
¶ Установка пакетов
npm install
¶ Запуск проекта в режиме разработки
npm run serve
¶ Компиляция для публикации
npm run build
¶ Проверка синтаксиса в файлах проекта
npm run lint
А также необходимо указать параметры в файле .env.
VUE_APP_PROMPTER_URL=wss://app.selfio.me/wsapp
VUE_APP_MULTIPROMPTER_BROKER_HOST=rabbitmq.selfio.me
VUE_APP_MULTIPROMPTER_BROKER_PORT=15675
VUE_APP_MULTIPROMPTER_BROKER_PATH='/ws'
¶ Язык и технологии
Веб-сервис написан на языке Javascript с использованием фреймворка VueJs
Основной список зависимостей для библиотек, использующиеся в приложении:
¶ Структура проекта
- public - содержит в себе статистические файлы, которые будут использоваться для дальнейшей публикации при компиляции проекта
- src - код, реализующий функционал
- assets - статические файлы, которые используются в приложении
- components - vue-компоненты и файлы стилей, которые описывают функционал веб-приложения
- modules - модули для вставки в Vue проекты Selfio
- plugins - созданные плагины
- router - маршрутизация веб-приложения
- store - описание состояния приложения, реализация vuex в рамках приложения
- views - страницы приложения
¶ Модуль для вставки в Vue проекты Selfio
Модуль для вставки в Vue проекты Selfio требует, чтобы проект уже использовал:
- Vue 3
- Vuetify 3
- Vuex
Для использования добавить этот репозиторий как сабмодуль в директорию src/modules
git submodule add https://git.miem.hse.ru/19107/web_modules/vue-prompter.git src/modules/prompter
Установить с помощью npm:
npm i --save ./src/modules/prompter
¶ Использование виджета
<!-- YourComponent.vue -->
<template>
<prompter-widget />
</template>
<script>
import PrompterWidget from '@/modules/prompter/components/PrompterWidget/index.vue'
export default {
components: { PrompterWidget }
}
</script>
// store/index.js
import prompter from '@/modules/prompter/store/prompter'
export default Vuex.createStore({
state: {
},
getters: {
},
mutations: {
},
actions: {
init ({ dispatch }) {
dispatch('prompter/init')
}
},
modules: {
prompter
}
¶ Prompter на Android
¶ Язык и технологии
Проект написан на языке Kotlin с использованием библиотек, которые представлены далее.
- _ base – предназначен для абстрактных классов и интерфейсов, которые будут наследоваться по всему приложению.
- BaseFragment – абстрактный класс фрагментов.
- di – предназначен для модулей и компонентов, участвующих в dependency injection.
- AppComponent -компонент приложения.
- fragment_prompter – предназначен для файлов, которые использует главный фрагмент приложения.
- PrompterFragment – главный фрагмент приложения.
- audio – предназначен для файлов, связанных с записью аудиодорожки.
- AudioRecordController – класс осуществляющий контроль над записью (удобная обертка над AudioRecord).
- network – для файлов, связанных с работой с сетью.
- WebSocketController – осуществляет соединение с сервером с помощью Okhttp по WebSocket.
- view – для файлов, связанных с кастомными вью.
- InvertingEditText – класс, наследник AppCompatEditText, который дополняется возможностью, выделять выбранную строчку текста, возвращать ее номер и прочее.
- MyScrollView – класс, наследник NestedSctollView, который дополняется возможностью автоматического плавного скроллинга с регулируемой скоростью.
- TextContainerView – класс, наследник FrameLayout, в который последовательно вложены экземпляры MyScrollView и InvertingEditText, осуществляет взаимодействие между ними и прокидывает возможность влиять на них извне.
- MainActivity – главное активити приложения.
- PrompterApp – App приложения.
- Utils – для утилит, использующихся по всему приложению (например для Kotlin extensions).
¶ Модуль автоподстройки скорости
Модуль, позволяющий интерфейсу телесуфлера использовать технологию распознавания речи для прокрутки пользовательского текста по мере его чтения.
¶ Как запустить
Код модуля находится здесь
Пошаговая инструкция по сборке проекта находится в README
Для удобства, на GitHub-е настроены action-s, собирающие докер-контейнер. Таким образом, сервер можно поднять в одну команду:
docker run -d --restart always -p 0.0.0.0:8888:8080 --name prompter --pull always ghcr.io/ayles/trueprompter:master
Чтобы запустить конкретную версию, вместо master указывается нужный тег. Также доступна новая версия в ветке test_onnx_inference, которую также является валидной меткой для пулла контейнера.
¶ Как использовать
В репозитории есть таргет trueprompter_client, который является простым cli-клиентом к данному серверу и пригоден для простого тестирования нового функционала.
Протокол запроса и ответа описан здесь и хорошо документирован.
¶ PTZ Tracker
ПО, предназначенное для наведения onvif-камеры на человека
¶ Требования для запуска
- Nvidia Jetson Nano/CPU Server(Размещение трекера)
- Control CPU Server(Можно разместить там же, где и трекер)
- Onvif-камеры
¶ Установка
- Загрузите репозиторий
git clone git.miem.hse.ru/592/ptz-tracker.git
- Перейдите в папку трекера
cd ptz-tracker
- Перейдите в директорию установочных файлов
cd setup_files
- Запустите установочный файл
CPU:
. ./setup.sh
Jetson:
. ./setup.sh {JetPack version}
¶ Запуск
Control Server:
. ./venv/bin/activate
python3 control_server.py
Tracker Server:
. ./venv/bin/activate
python3 flask_server.py
¶ Установка сервиса
Для работы сервера трекера в фоновом режиме необходимо установить сервис трекера, предварительно изменив поля WorkingDirectory, ExecStart с правильными путями в файле tracker.service
sudo mv tracker.service /etc/systemd/system/tracker.service
sudo systemctl enable tracker
sudo systemctl restart tracker
¶ DPTZ Tracker
Программа для обрезания изображение с веб-камеры таким образом, чтобы человек всегда был в кадре. Обрезка должна происходить под заданное соотношение сторон.
Условия работы программы:
- Человек в кадре один
- Хорошее освещение
- 2 кейса: человек сидит перед камерой или стоит и снимается по пояс
- Человек не уходит из кадра
- Движение человека в кадре происходит только по горизонтали
- Программа работает локально на компьютере пользователя (не на сервере)
Требуется модуль obs_module.py, а также cropper. py, которым он пользуется. Для детекции необходим .yml.
Для работы необходимо:
- Включить obs.
сервис -> настройки obs-websocket -> включить сервер obs-websocket (порт: 4444, пароль: secret) - В obs_module.py прописать какая сцена и название камеры.
- Там же задать параметры (пропорции, какую часть от исходной высоты будет иметь окошко - alpha).
¶ Tally система
Tally система для ASB под управлением Raspberry Pi 4
¶ Зависимости
- JDK11
- Pi4j v1.4
¶ Порядок установки зависимостей
Установить jdk
sudo apt-get install openjdk-11-jdk
Установить WiringPi Native Library для Pi4j
sudo apt-get remove wiringpi -y
sudo apt-get --yes install git-core gcc make
cd ~
git clone https://github.com/WiringPi/WiringPi --branch master --single-branch wiringpi
cd ~/wiringpi
sudo ./build
Или, если Pi4j уже установлен:
sudo pi4j --wiringpi
Установить Pi4j
curl -sSL https://pi4j.com/install | sudo bash
Подробнее можно посмотреть на странице Pi4j
¶ Установка Tally системы
Запустить скрипт build
¶ Документация серверного приложения
Документация серверного приложения находится тут