https://github.com/ath31st/cam_stream_manager
A web service for managing camera streams. Making new ones, editing, tracking the status of streams.
https://github.com/ath31st/cam_stream_manager
antd biomejs docker-compose dockerfile feature-sliced-design fsd full-stack jwt-authentication nginx node-cron nodejs prisma prisma-orm react refresh-token sqlite3 typescript zustand
Last synced: 9 months ago
JSON representation
A web service for managing camera streams. Making new ones, editing, tracking the status of streams.
- Host: GitHub
- URL: https://github.com/ath31st/cam_stream_manager
- Owner: ath31st
- License: mit
- Created: 2024-09-10T15:07:42.000Z (over 1 year ago)
- Default Branch: main
- Last Pushed: 2025-07-06T07:46:24.000Z (9 months ago)
- Last Synced: 2025-07-06T08:37:51.122Z (9 months ago)
- Topics: antd, biomejs, docker-compose, dockerfile, feature-sliced-design, fsd, full-stack, jwt-authentication, nginx, node-cron, nodejs, prisma, prisma-orm, react, refresh-token, sqlite3, typescript, zustand
- Language: TypeScript
- Homepage:
- Size: 58.4 MB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# Stream manager/player
Это фулл-стек приложение для просмотра и управления потоковыми видео.
---
## Оглавление
1. [Описание проекта](#описание-проекта)
2. [Пример работы](#пример-работы)
3. [Технологии](#технологии)
4. [Установка](#установка)
5. [Использование](#использование)
6. [Архитектура проекта](#архитектура-проекта)
7. [Автор](#автор)
8. [Лицензия](#лицензия)
---
## Описание проекта
Это полнофункциональное **full-stack приложение** для просмотра и управления потоковыми видео. Оно включает в себя:
1. **Видеоплеер** для воспроизведения потокового видео.
2. **Администраторский интерфейс**, который позволяет:
- Создавать, обновлять и удалять информацию о видеопотоках.
- Мониторить состояние потоков в реальном времени.
3. **Систему управление группами**:
- Создавать, обновлять и удалять группы, которые определяют доступ к тем или иным плейлистам.
4. **Систему управления пользователями**:
- Регистрацию и управление учетными записями пользователей.
- Назначение ролей и прав доступа (например, администраторы, ответственные лица и т.д.).
5. **Управление ответственными лицами**:
- Указание сотрудников, отвечающих за работоспособность потоков.
Приложение обеспечивает удобный и интуитивно понятный интерфейс для всех пользователей, а также надежную систему управления контентом и доступом.
---
## Пример работы
Видео-демонстрация работы приложения:
[Пример работы](https://github.com/user-attachments/assets/48b19a4f-5859-4b8e-b85a-27fd662e524b)
---
## Технологии
Список основных технологий и инструментов, использованных в проекте:
- Backend: TypeScript, Node.js, Express, Prisma, Sqlite.
- Frontend: TypeScript, React, Ant Design.
- Дополнительные: Zustand, JWT, Docker Compose, Nginx.
---
## Установка
Для запуска проекта необходимо установить зависимости как для клиентской, так и для серверной части.
### Клиентская часть
1. Перейдите в папку `client`:
```bash
cd client
```
2. Установите зависимости:
```bash
npm install
```
3. Запустите клиентскую часть в режиме разработки:
```bash
npm start
```
4. Для сборки проекта:
```bash
npm run build
```
### Серверная часть
1. Перейдите в папку `server`:
```bash
cd server
```
2. Установите зависимости:
```bash
npm install
```
3. Запустите сервер в режиме разработки:
```bash
npm run dev
```
4. Для сборки и запуска в production-режиме:
```bash
npm run deploy
npm run start:prod
```
### Настройка окружения
1. Создайте файлы `.env.dev` и `.env.prod` в папке `server` для настройки переменных окружения. Пример содержимого:
```env
DATABASE_URL="file:./name_for_db.db" // путь к базе данных
PORT=3001 // порт сервера
JWT_SECRET="secret_phrase" // секретная фраза для аксес токена (придумайте свою)
JWT_REFRESH_SECRET="refresh_secret_phrase" // секретная фраза для токена обновления (придумайте свою)
TOKEN_EXPIRATION="1h" // время жизни токена
REFRESH_TOKEN_EXPIRATION="1d" // время жизни токена обновления
CRON_SCHEDULE="*/1 * * * *" // частота запуска пингера видео потоков
STREAM_PING_TIMEOUT=2000 // время ожидания ответа от потока, в данном случае - 2 секунды
```
2. Для клиентской части создайте файл `.env` в папке `client` для настройки переменных окружения. Пример содержимого:
```env
REACT_APP_API_URL=http://localhost:3001 // адрес сервера (указывате в формате IP адреса:порт)
REACT_APP_HEALTH_CHECK_INTERVAL=5000 // время ожидания ответа от сервера, в данном случае - 5 секунд
```
### Миграции и база данных
1. Для применения миграций в режиме разработки:
```bash
npm run dbr:dev
```
2. Для применения миграций в production-режиме:
```bash
npm run dbr:prod
```
### Линтинг и форматирование
- Для проверки кода на соответствие стандартам:
```bash
npm run lint
```
- Для автоматического форматирования кода:
```bash
npm run format
```
## Использование
1. Подготовьте конфигурационные файлы.
2. Запустите контейнеры приложения:
```bash
cd cam_stream_manager && docker-compose up -d
```
3. Откройте браузер и перейдите по адресу:
```url
http://localhost:80
```
---
## Архитектура проекта
Краткое описание структуры проекта:
Клиентская часть была построена с применением FSD (Feature Sliced Design) архитектуры.
- `/client` — папка с фронтенд-частью приложения.
- **`/public`** — публичная папка, содержит статические файлы (`index.html`, favicon, изображения и т.д.).
- **`/src`** — папка с кодом приложения.
- **`/app`** — слой инициализации приложения.
- **`/layouts`** — компоненты макетов (header, footer, sider).
- **`/providers`** — провайдеры для управления состоянием и контекстом (auth, axios, global styles).
- **`/routes`** — конфигурация маршрутов приложения.
- **`/stores`** — глобальное состояние приложения (Zustand).
- **`/styles`** — глобальные стили и темы.
- **`/App.tsx`** — корневой компонент приложения.
- **`/entities`** — бизнес-сущности приложения.
- **`/features`** — фичи приложения (авторизация, статус сервера).
- **`/pages`** — страницы приложения (главная страница, админ-панель, 401, 403).
- **`/shared`** — переиспользуемые компоненты и утилиты.
- **`/widgets`** — самостоятельные блоки интерфейса.
- `/server` — папка с бэкенд-частью приложения:
- **`/prisma`** — схема базы данных и миграции.
- **`/src`** — основной код приложения.
- **`/config`** — конфигурационные файлы.
- **`/controller`** — контроллеры для обработки HTTP-запросов.
- **`/cron`** — конфигурация cron-задач для запуска пингера видео потоков.
- **`/database`** — создание объекта клиента призмы и сиды.
- **`/mappers`** — мапперы для преобразования объектов приложения.
- **`/midlware`** — auth-мидлвар для обработки HTTP-запросов.
- **`/repositories`** — репозитории для работы с базой данных.
- **`/routes`** — конфигурация маршрутов.
- **`/services`** — сервисы приложения (передача данных, бизнес-логика).
- **`/types`** — типы данных серверной части.
- **`/utils`** — вспомогательные функции и утилиты.
- **`/validators`** — валидаторы данных.
- `/shared` — папка с общими типами и интерфейсами для сервера и клиента.
- `docker-compose.yml` — композ-файл Docker Compose, который определяет конфигурацию контейнеров
приложения для сборки образов когда есть интернет.
- `docker-compose.offline.yml` — композ-файл Docker Compose, который определяет конфигурацию контейнеров
приложения для поднятия готовых образов, когда нет доступа к интернету.
- `Dockerfile.server` — Dockerfile для сборки образа сервера приложения.
- `Dockerfile.client` — Dockerfile для сборки образа клиента приложения.
---
## Автор
- **Владимир Оленников**
- [GitHub](https://github.com/ath31st) | [LinkedIn](https://www.linkedin.com/in/ath31st/)
---
## Лицензия
Этот проект лицензируется в соответствии с лицензией MIT.
Подробнее в файле [LICENSE](LICENSE).