¶ Часы для студии
¶ Установка и запуск
Для установки приложения необходимо склонировать репозиторий, на котором вы хотите запустить часы. Для этого понадобится git.
- Перейдите в директорию для приложения
- Выполните команду git clone https://git.miem.hse.ru/246/studioclock.git
- Выполните команду cd studioclock.
- Выполните команду git checkout origin/mvp.
Далее последуйте инструкции из README.
На выбор предлагается два способа запуска: через Docker или локально. Первый рекомендуется для обычного использования. Второй для отладки или разработки.
¶ 1.1. Запуск через Docker
В корневой директории выполните команду docker−compose up −d. После сборки обзразов и запуска контейнеров, приложение запустится по адресу FRONTEND_URL:80.
¶ 1.2. Запуск локально
Для запуска локально понадобится npm и nodejs. Далее см. пункт ''Запуск локально'' в README.md.
¶ Использование
Для использования приложения необходимо:
- Зайти в OBS и во вкладке ''Сервис''(Tools) сверху, нажать ''Настройки obs-websocket''.
- В открывшемся окне поставьте галочку напротив пункта ''Включить сервер WebSocket''.
- Нажать кнопку ''Применить''.
- Нажать кнопку ''Показать сведения о подключении''.
- Скопировать значения полей ''IP сервера'', ''Порт сервера” и вставить в поля ''IP-address OBS'', ''Port OBS'' на страничке приложения соответственно.
- При необходимости установить пароль (для этого надо поставить галочку ''Включить аутентификацию'' в настройках obs-websocket) и вставить его в поле ''Password OBS''.
- Нажать на кнопку ''Send'' на страничке приложения.
Если все данные были введены верны верно, то перед вами откроется окно на рисунке 1. Для правильного отображения элементов рекомендуется нажатием клавиши ''F11'' развернуть приложение на полный экран.
Далее вся информация будет отображаться при работе в OBS.
Для запуска секундомера (секция “С начала блока”) нажмите на зеленую кнопку. Для приостановки секундомера нажмите на красную кнопку. Для сброса секундомера нажмите на серую кнопку.
Чтобы поменять значение “Подсказка” на нужное вам, нажмите кнопку “Изменить” слева, введите значение и нажмите “Отправить”.
Чтобы изменить статус источника звука, выберите нужный из списка “OBS Audio Source”.
Все примененные изменения будут отображаться на всех открытых клиентах.
API приложения можно посмотреть, нажав кнопку “View API” внизу приложения, либо по адресу /api.
¶ Инструкция разработчика
Приложение состоит из двух контейнеров: frontend и backend. Они общаются при помощи библиотеки SocketIO.
¶ Backend
На backend сервере работает библиотека express.js, взаимодействие с OBS происходит с помощью самописного сервиса OBSService, использующего библиотеку obs-websocket-js (файл obs.js). В файле config.json можно задать начальную конфигурацию OBS WebSocket.
¶ Frontend
Frontend - React приложение, запускаемое на сервере nginx. Подключение к backend серверу происходит в компоненте WebSocket. В остальных компонентах сокет используется через react-hook useContext.
Подробнее см. репозиторий в GitLab.