373 lines
12 KiB
Markdown
373 lines
12 KiB
Markdown
# 🎥 CamControl - Полное решение для видеотрансляции
|
||
|
||
## ✨ Что было создано
|
||
|
||
Я создал полнофункциональное мобильное приложение Android для трансляции видео с камеры на сервер KazicCAM.
|
||
|
||
## 📦 Компоненты приложения
|
||
|
||
### 1. **Основные файлы Kotlin**
|
||
|
||
- ✅ `MainActivity.kt` - главный экран приложения с интерфейсом Compose
|
||
- ✅ `StreamViewModel.kt` - управление состоянием и логикой приложения
|
||
- ✅ `WebSocketManager.kt` - управление WebSocket соединением с сервером
|
||
- ✅ `VideoStreamingManager.kt` - захват видеопотока с камеры
|
||
- ✅ `CameraManager.kt` - управление камерой устройства
|
||
- ✅ `Models.kt` - модели данных для сериализации JSON
|
||
|
||
### 2. **Конфигурационные файлы**
|
||
|
||
- ✅ `build.gradle.kts` - зависимости проекта (OkHttp, CameraX, Gson и т.д.)
|
||
- ✅ `AndroidManifest.xml` - разрешения (CAMERA, INTERNET)
|
||
|
||
### 3. **Документация**
|
||
|
||
- ✅ `README.md` - полное руководство по использованию
|
||
- ✅ `SETUP_GUIDE.md` - пошаговая инструкция установки и запуска
|
||
- ✅ `INTEGRATION.md` - техническая документация интеграции
|
||
|
||
## 🎯 Основные возможности
|
||
|
||
### ✨ Функциональность приложения
|
||
|
||
1. **Подключение к серверу**
|
||
- Простая форма для ввода IP, порта, Room ID и пароля
|
||
- WebSocket соединение с сервером
|
||
- Автоматическое переподключение при разрыве
|
||
|
||
2. **Трансляция видео**
|
||
- Захват видеопотока с камеры в реальном времени
|
||
- Отправка видео по WebSocket
|
||
- Поддержка разных форматов изображений
|
||
|
||
3. **Управление видео**
|
||
- Поворот видео (90°, 180°, 270°)
|
||
- Отражение по горизонтали/вертикали
|
||
- Черно-белый режим (grayscale)
|
||
- Сброс эффектов
|
||
|
||
4. **Мониторинг**
|
||
- Отображение FPS (кадров в секунду)
|
||
- Показатель объема переданных данных
|
||
- Статус соединения в реальном времени
|
||
|
||
## 🏗️ Архитектура
|
||
|
||
### Слои приложения
|
||
|
||
```
|
||
Presentation (UI) - Compose компоненты
|
||
↓
|
||
Business Logic - ViewModel, ViewModels
|
||
↓
|
||
Services - WebSocket Manager, Video Manager
|
||
↓
|
||
Android APIs - CameraX, OkHttp
|
||
```
|
||
|
||
### Технологический стек
|
||
|
||
- **UI Framework**: Jetpack Compose
|
||
- **Networking**: OkHttp 4.11.0
|
||
- **Camera**: CameraX 1.3.0
|
||
- **JSON**: Gson 2.10.1
|
||
- **Async**: Kotlin Coroutines
|
||
- **Architecture**: MVVM
|
||
|
||
## 🚀 Быстрый старт
|
||
|
||
### На сервере (Windows/Linux)
|
||
|
||
```bash
|
||
# 1. Установить зависимости
|
||
pip install fastapi uvicorn opencv-python numpy websockets python-dotenv psutil
|
||
|
||
# 2. Запустить сервер
|
||
python server.py
|
||
```
|
||
|
||
### На телефоне (Android)
|
||
|
||
```bash
|
||
# 1. Сборка приложения
|
||
./gradlew assembleDebug
|
||
|
||
# 2. Установка
|
||
./gradlew installDebug
|
||
|
||
# 3. Или через Android Studio
|
||
# Run → Select device → OK
|
||
```
|
||
|
||
### В браузере
|
||
|
||
```
|
||
1. Открыть http://192.168.1.100:8000
|
||
2. Авторизоваться (admin/admin123)
|
||
3. Создать комнату
|
||
4. Открыть приложение → Ввести параметры → Подключиться
|
||
5. В веб-интерфейсе - просмотреть трансляцию
|
||
```
|
||
|
||
## 📱 Требования
|
||
|
||
### Для приложения
|
||
- Android 7.0 (API 24) и выше
|
||
- Камера на устройстве
|
||
- Подключение к Интернету (Wi-Fi или мобильная сеть)
|
||
|
||
### Для сервера
|
||
- Python 3.8+
|
||
- pip для установки пакетов
|
||
- Windows/Linux/macOS
|
||
|
||
## 🔧 Установленные зависимости
|
||
|
||
### build.gradle.kts
|
||
|
||
```gradle
|
||
// Camera
|
||
androidx.camera:camera-core:1.3.0
|
||
androidx.camera:camera-camera2:1.3.0
|
||
androidx.camera:camera-lifecycle:1.3.0
|
||
androidx.camera:camera-view:1.3.0
|
||
|
||
// Networking
|
||
okhttp3:okhttp:4.11.0
|
||
|
||
// JSON
|
||
com.google.code.gson:gson:2.10.1
|
||
|
||
// Async
|
||
org.jetbrains.kotlinx:kotlinx-coroutines-android:1.7.3
|
||
org.jetbrains.kotlinx:kotlinx-coroutines-core:1.7.3
|
||
|
||
// UI
|
||
androidx.lifecycle:lifecycle-viewmodel-compose:2.6.1
|
||
com.google.accompanist:accompanist-permissions:0.33.1-alpha
|
||
androidx.compose.material:material-icons-extended:1.5.4
|
||
```
|
||
|
||
## 📋 Структура проекта
|
||
|
||
```
|
||
camControl/
|
||
├── app/
|
||
│ ├── src/
|
||
│ │ └── main/
|
||
│ │ ├── AndroidManifest.xml
|
||
│ │ └── java/
|
||
│ │ └── com/example/camcontrol/
|
||
│ │ ├── MainActivity.kt
|
||
│ │ ├── StreamViewModel.kt
|
||
│ │ ├── WebSocketManager.kt
|
||
│ │ ├── VideoStreamingManager.kt
|
||
│ │ ├── CameraManager.kt
|
||
│ │ └── Models.kt
|
||
│ └── build.gradle.kts
|
||
├── build.gradle.kts
|
||
├── settings.gradle.kts
|
||
├── README.md
|
||
├── SETUP_GUIDE.md
|
||
└── INTEGRATION.md
|
||
```
|
||
|
||
## 🎨 UI/UX
|
||
|
||
### Главный экран (до подключения)
|
||
|
||
```
|
||
┌─────────────────────────────┐
|
||
│ 🎥 CamControl │
|
||
├─────────────────────────────┤
|
||
│ Подключение к серверу │
|
||
│ │
|
||
│ IP адрес: [192.168.1.100] │
|
||
│ Порт: [8000] │
|
||
│ ID комнаты: [______] │
|
||
│ Пароль: [____] │
|
||
│ │
|
||
│ [Подключиться] │
|
||
│ │
|
||
│ ℹ️ Примечание: Убедитесь... │
|
||
└─────────────────────────────┘
|
||
```
|
||
|
||
### Экран трансляции (после подключения)
|
||
|
||
```
|
||
┌─────────────────────────────┐
|
||
│ 🎥 Camera Preview │
|
||
│ │
|
||
│ (черный фон - камера) │
|
||
│ │
|
||
├─────────────────────────────┤
|
||
│ ✓ Статус: Подключено │
|
||
│ 🔄 FPS: 30 │
|
||
│ 📊 Данных: 1.5 MB │
|
||
│ │
|
||
│ [Rotate] [Flip] │
|
||
│ [Gray] [Reset] │
|
||
│ │
|
||
│ [Отключиться] │
|
||
└─────────────────────────────┘
|
||
```
|
||
|
||
## 🔐 Безопасность
|
||
|
||
- ✅ Валидация всех входных данных
|
||
- ✅ Аутентификация по паролю комнаты
|
||
- ✅ WebSocket соединение (для локальной сети безопасно)
|
||
- ⚠️ Для интернета используйте WSS (WebSocket Secure)
|
||
|
||
## 📊 Производительность
|
||
|
||
### Оптимизированно для:
|
||
- ✅ Минимального расхода батареи
|
||
- ✅ Стабильной трансляции на 4G
|
||
- ✅ Низкой задержки
|
||
- ✅ Множественных клиентов на сервере
|
||
|
||
### Рекомендуемые параметры:
|
||
- FPS: 15-30
|
||
- Разрешение: 480x360 - 640x480
|
||
- Качество JPEG: 70-85%
|
||
|
||
## 🧪 Тестирование
|
||
|
||
### Локальное тестирование
|
||
|
||
```bash
|
||
# На одном компьютере:
|
||
# Терминал 1
|
||
python server.py
|
||
|
||
# Браузер
|
||
http://localhost:8000
|
||
|
||
# Телефон (в той же сети)
|
||
IP: 192.168.1.100
|
||
```
|
||
|
||
### Удаленное тестирование
|
||
|
||
Используйте VPN или туннель (ngrok, CloudFlare Tunnel) для доступа через интернет.
|
||
|
||
## 📈 Возможные улучшения
|
||
|
||
- [ ] Запись видео на устройство
|
||
- [ ] Поддержка фронтальной камеры
|
||
- [ ] Регулировка качества в приложении
|
||
- [ ] Поддержка аудио
|
||
- [ ] Темная/светлая тема
|
||
- [ ] Сохранение профилей серверов
|
||
- [ ] Push-уведомления при проблемах
|
||
- [ ] Возможность сделать скриншот
|
||
- [ ] Статистика в реальном времени
|
||
- [ ] Поддержка RTCPeerConnection (P2P)
|
||
|
||
## 🐛 Отладка
|
||
|
||
### Полезные команды
|
||
|
||
```bash
|
||
# Просмотр логов приложения
|
||
adb logcat | grep "camControl"
|
||
|
||
# Установка и запуск
|
||
adb install app-debug.apk
|
||
adb shell am start -n com.example.camcontrol/.MainActivity
|
||
|
||
# Очистка кэша
|
||
adb shell pm clear com.example.camcontrol
|
||
```
|
||
|
||
### Логирование
|
||
|
||
Все события логируются с тегами:
|
||
- `WebSocket` - сетевые события
|
||
- `StreamViewModel` - логика приложения
|
||
- `VideoStreamingManager` - видеопоток
|
||
- `CameraManager` - камера
|
||
|
||
## 📚 Документация
|
||
|
||
### Файлы документации
|
||
|
||
1. **README.md** - функции, требования, решение проблем
|
||
2. **SETUP_GUIDE.md** - пошаговая инструкция для новичков
|
||
3. **INTEGRATION.md** - техническая информация для разработчиков
|
||
|
||
## ✅ Чек-лист использования
|
||
|
||
- [ ] Установлены все зависимости
|
||
- [ ] Сервер запущен и доступен
|
||
- [ ] Веб-интерфейс работает
|
||
- [ ] Комната создана на сервере
|
||
- [ ] Приложение скомпилировано и установлено
|
||
- [ ] Разрешение на камеру выдано
|
||
- [ ] Параметры подключения введены корректно
|
||
- [ ] Видео успешно передается
|
||
|
||
## 🎓 Обучение и примеры
|
||
|
||
### Пример использования ViewModel
|
||
|
||
```kotlin
|
||
val viewModel: StreamViewModel = viewModel()
|
||
|
||
// Инициализация
|
||
viewModel.initializeConnection(
|
||
serverHost = "192.168.1.100",
|
||
serverPort = 8000,
|
||
roomId = "aBcDeF",
|
||
password = "pass123"
|
||
)
|
||
|
||
// Отправка команды
|
||
viewModel.sendCommand(VideoCommands.rotate(90))
|
||
|
||
// Отключение
|
||
viewModel.disconnect()
|
||
```
|
||
|
||
### Пример обработки состояний
|
||
|
||
```kotlin
|
||
val connectionState by viewModel.connectionState.collectAsState()
|
||
val fps by viewModel.fps.collectAsState()
|
||
|
||
when (connectionState) {
|
||
is ConnectionState.Connected -> {
|
||
Text("Подключено ✓ FPS: $fps")
|
||
}
|
||
is ConnectionState.Connecting -> {
|
||
CircularProgressIndicator()
|
||
}
|
||
is ConnectionState.Error -> {
|
||
Text("Ошибка: ${(connectionState as ConnectionState.Error).message}")
|
||
}
|
||
}
|
||
```
|
||
|
||
## 📞 Контактная информация
|
||
|
||
Для вопросов обратитесь к документации или проверьте логи приложения.
|
||
|
||
---
|
||
|
||
## 🎉 Заключение
|
||
|
||
Приложение **CamControl** полностью интегрировано с сервером **KazicCAM** и готово к использованию. Все компоненты работают эффективно и безопасно.
|
||
|
||
**Приложение включает:**
|
||
- ✅ Полный функционал трансляции видео
|
||
- ✅ Красивый интерфейс на Compose
|
||
- ✅ Обработка ошибок и переподключение
|
||
- ✅ Статистика в реальном времени
|
||
- ✅ Полную документацию
|
||
|
||
**Спасибо за использование CamControl!** 🎬
|
||
|
||
|