Skip to content

omerrbbulut/ViewDeck

BranchesTags

Repository files navigation

<<<<<<< HEAD

ViewDeck

A modern web UI for live video preview and camera controls, inspired by IP camera panels.

🎥 Professional Camera Control System

Modern Kamera Kontrol Sistemi

Modern, modüler ve genişletilebilir kamera kontrol sistemi. Çoklu transport protokolü (TCP, UDP, Serial, UART, VISCA) ve dinamik UI konfigürasyonu desteği.

💡 Not: Bu proje generic bir template'tir. İsimleri ve branding'i kendi ihtiyaçlarınıza göre özelleştirebilirsiniz.

📋 İçindekiler

✨ Özellikler

🎯 Temel Özellikler

  • ✅ Çoklu Kamera Desteği - Sınırsız sayıda kamera
  • ✅ Canlı İzleme - HLS streaming ile düşük gecikme
  • ✅ PTZ Kontrolü - Pan/Tilt/Zoom kontrolü
  • ✅ Kayıt - Sürekli, hareket algılama, manuel kayıt
  • ✅ Hareket Algılama - OpenCV tabanlı hareket algılama
  • ✅ Kullanıcı Yönetimi - Rol tabanlı yetkilendirme
  • ✅ Dinamik UI - YAML ile yapılandırılabilir arayüz

🔌 Transport Protokolleri

  • TCP - Ethernet kameralar için güvenilir bağlantı
  • UDP - Düşük gecikme gerektiren uygulamalar
  • Serial (RS-232/RS-485) - Seri port iletişimi
  • UART - Gömülü sistemler için
  • VISCA - Sony profesyonel kameralar

🎨 Modern Arayüz

  • Dark/Light Theme - Tema desteği
  • Responsive Design - Mobil uyumlu
  • Grid Layouts - 1x1, 2x2, 3x3, 4x4, özel düzenler
  • Real-time Updates - WebSocket ile anlık güncellemeler

🏗️ Mimari

┌─────────────────────────────────────────────────────────────┐
│                     Frontend (React)                         │
│  • Vite + TypeScript + Tailwind CSS                         │
│  • Dynamic UI from YAML configuration                       │
└────────────────────────┬────────────────────────────────────┘
                         │ REST API / WebSocket
┌────────────────────────▼────────────────────────────────────┐
│                   Backend (FastAPI)                          │
│  • JWT Authentication                                        │
│  • Camera Manager (Singleton)                               │
│  • Dynamic configuration loading                            │
└────────┬──────────────────────────────┬─────────────────────┘
         │                              │
┌────────▼──────────┐         ┌─────────▼──────────┐
│  Protocol Layer   │         │  Transport Layer    │
│  • BinaryProtocol │         │  • TCPTransport     │
│  • VISCAProtocol  │         │  • UDPTransport     │
│  • ONVIFProtocol  │         │  • SerialTransport  │
│                   │         │  • VISCATransport   │
└───────────────────┘         └─────────────────────┘

Design Patterns:

  • Strategy Pattern (Transport seçimi)
  • Factory Pattern (Transport oluşturma)
  • Bridge Pattern (Transport/Protocol ayrımı)
  • Facade Pattern (CameraClient)
  • Singleton Pattern (CameraManager)

Detaylı mimari için: ARCHITECTURE.md

🚀 Kurulum

Gereksinimler

  • Docker & Docker Compose
  • (Opsiyonel) Node.js 20+ (frontend geliştirme için)
  • (Opsiyonel) Python 3.11+ (backend geliştirme için)

Hızlı Başlangıç

# 1. Repository'yi klonla
git clone <repo-url>
cd VKI

# 2. Docker ile başlat
docker compose up -d

# 3. Tarayıcıda aç
# Frontend: http://localhost:3000
# Backend API: http://localhost:8000
# API Docs: http://localhost:8000/docs

Manuel Kurulum

Backend

cd backend
pip install -r requirements.txt
uvicorn app.main:app --reload --host 0.0.0.0 --port 8000

Frontend

cd frontend
npm install
npm run dev

📖 Kullanım

1. Giriş Yapma

Varsayılan Kullanıcılar:

  • Admin: admin / admin123 (Tam yetki)
  • Operator: operator / operator123 (Kamera kontrolü)
  • Viewer: viewer / viewer123 (Sadece izleme)

⚠️ Production'da şifreleri değiştirin!

2. Kamera Ekleme

cameras.yaml dosyasını düzenleyin:

cameras:
  - id: "cam-1"
    name: "Front Door"
    type: "daylight"
    enabled: true
    
    stream:
      protocol: "rtsp"
      url: "rtsp://192.168.1.100:554/stream1"
      username: "admin"
      password: "password"
    
    capabilities:
      ptz: true
      zoom: true
      audio: true
    
    ptz:
      protocol: "tcp"  # tcp, udp, serial, visca
      host: "192.168.1.100"
      port: 4000

3. PTZ Kontrolü

# Python API örneği
from backend.app.camera import CameraClient, CameraConfig

config = CameraConfig(
    camera_id="cam-1",
    name="Front Door",
    transport_type="tcp",
    protocol_type="binary",
    host="192.168.1.100",
    port=4000
)

async with CameraClient(config) as client:
    # Brightness ayarla
    await client.execute_command("set_brightness", {
        "brightness": 5,
        "region": "C1"
    })
    
    # Zoom
    await client.execute_command("set_digital_zoom", {
        "zoom_level": "2x"
    })

4. REST API Kullanımı

# Login
TOKEN=$(curl -X POST http://localhost:8000/auth/login \
  -H "Content-Type: application/json" \
  -d '{"username":"admin","password":"admin123"}' \
  | jq -r '.access_token')

# Kamera listesi
curl http://localhost:8000/api/cameras \
  -H "Authorization: Bearer $TOKEN"

# PTZ komutu gönder
curl -X POST http://localhost:8000/api/cameras/cam-1/ptz \
  -H "Authorization: Bearer $TOKEN" \
  -H "Content-Type: application/json" \
  -d '{"command":"set_brightness","params":{"brightness":5}}'

⚙️ Konfigürasyon

Konfigürasyon Dosyaları

VKI/
├── config.yaml        # Sistem ayarları
├── cameras.yaml       # Kamera tanımlamaları
└── ui_layout.yaml     # UI düzeni

config.yaml

Ana sistem konfigürasyonu:

system:
  name: "Universal Camera Control"
  version: "2.0.0"

server:
  host: "0.0.0.0"
  port: 8000

users:
  - username: "admin"
    password: "admin123"
    role: "admin"

streaming:
  hls:
    enabled: true
    segment_duration: 2

recording:
  enabled: true
  path: "/data/recordings"
  retention_days: 7

cameras.yaml

Kamera tanımlamaları:

cameras:
  - id: "cam-front"
    name: "Front Camera"
    type: "daylight"
    enabled: true
    
    stream:
      url: "rtsp://192.168.1.100:554/stream1"
    
    ptz:
      protocol: "tcp"
      host: "192.168.1.100"
      port: 4000

ui_layout.yaml

UI düzeni ve tema:

branding:
  app_name: "COMPANY A"
  theme_color: "#f59e0b"

theme:
  mode: "dark"
  primary_color: "amber"

navigation:
  - id: "live"
    label: "Live View"
    icon: "📹"

📚 API Dokümantasyonu

Swagger UI

API dokümantasyonuna erişim: http://localhost:8000/docs

Temel Endpoint'ler

Authentication

POST /auth/login           # Login
GET  /auth/me              # Kullanıcı bilgisi

Cameras

GET  /api/cameras          # Kamera listesi
GET  /api/cameras/{id}     # Kamera detayı
POST /api/cameras/{id}/ptz # PTZ komutu
POST /api/cameras/{id}/snapshot # Snapshot al

Streaming

GET /api/stream/{id}/hls/playlist.m3u8  # HLS playlist

System

GET /api/system/health     # Health check
GET /api/system/stats      # Sistem istatistikleri

Configuration

GET /api/config            # Sistem konfigürasyonu
GET /api/config/ui         # UI konfigürasyonu
GET /api/config/cameras    # Kamera konfigürasyonu

🛠️ Geliştirme

📁 Proje Yapısı

Camera-Control-System/
├── backend/                # Backend (FastAPI)
├── frontend/               # Frontend (React)
├── config/                 # Konfigürasyon dosyaları
├── data/                   # Runtime data (git ignore)
├── docs/                   # Dokümantasyon
├── scripts/                # Yardımcı script'ler
├── docker-compose.yml
├── Makefile
├── README.md
└── PROJECT_STRUCTURE.md    # Detaylı proje yapısı

Detaylı yapı için: PROJECT_STRUCTURE.md

Yeni Transport Ekleme

from backend.app.transport.base import NetworkTransport

class WebSocketTransport(NetworkTransport):
    async def connect(self):
        # WebSocket connection logic
        pass
    
    async def send(self, data: bytes):
        # Send implementation
        pass
    
    async def receive(self, size: int):
        # Receive implementation
        pass

# Factory'ye kaydet
from backend.app.transport import TransportFactory, TransportType

TransportFactory.register_transport(
    TransportType.WEBSOCKET,
    WebSocketTransport
)

Test Çalıştırma

# Transport testleri
python3 test_transport.py

# Backend testleri (gelecek)
cd backend
pytest

# Frontend testleri (gelecek)
cd frontend
npm test

Docker Build

# Backend build
docker compose build backend

# Frontend build
docker compose build frontend

# Tümü
docker compose build

# No-cache build
docker compose build --no-cache

Makefile Komutları

make up          # Start containers
make down        # Stop containers
make restart     # Restart containers
make logs        # View logs
make build       # Build images
make clean       # Clean everything
make health      # Health check

🔒 Güvenlik

Production Checklist

  • config.yaml'daki JWT secret'ı değiştir
  • Tüm kullanıcı şifrelerini değiştir
  • HTTPS/SSL aktif et
  • CORS origin'leri güncelle
  • Rate limiting aktif et
  • IP whitelist/blacklist yapılandır
  • Firewall kurallarını ayarla
  • Log seviyesini WARNING'e çek

📊 Performans

Sistem Gereksinimleri

Minimum:

  • CPU: 2 core
  • RAM: 2 GB
  • Disk: 20 GB

Önerilen:

  • CPU: 4+ core
  • RAM: 4+ GB
  • Disk: 100+ GB (kayıt için)

Optimizasyon İpuçları

  1. Hardware Acceleration - FFmpeg için GPU kullan
  2. Stream Buffer - Buffer boyutunu ayarla
  3. Worker Threads - CPU core sayısına göre ayarla
  4. Cache - Redis cache kullan (gelecek)
  5. Database - PostgreSQL kullan (gelecek)

🐛 Sorun Giderme

Backend başlamıyor

# Logları kontrol et
docker compose logs backend

# Config dosyalarını kontrol et
python3 -c "import yaml; yaml.safe_load(open('config.yaml'))"

Frontend bağlanamıyor

# CORS ayarlarını kontrol et
# config.yaml -> server.cors_origins

# Backend health check
curl http://localhost:8000/api/system/health

Kamera görüntüsü gelmiyor

# RTSP URL'i test et
ffmpeg -i rtsp://camera-ip:554/stream1 -frames:v 1 test.jpg

# Kamera konfigürasyonunu kontrol et
curl http://localhost:8000/api/cameras/cam-id \
  -H "Authorization: Bearer $TOKEN"

📝 Lisans

Bu proje open source olarak geliştirilmiştir.

👥 Katkıda Bulunanlar

  • Mimari & Backend: Modüler transport/protocol sistemi
  • Frontend: React + Vite + Tailwind
  • Dokümantasyon: Kapsamlı mimari ve kullanım kılavuzları

📞 Destek

🗺️ Roadmap

v2.1 (Yakında)

  • WebRTC desteği
  • ONVIF protokolü
  • Gelişmiş hareket algılama
  • Yüz tanıma
  • Mobile app

v2.2 (Gelecek)

  • AI tabanlı nesne algılama
  • Cloud backup
  • Multi-site yönetimi
  • Advanced analytics
  • Email/SMS bildirimleri

4b4a57f (🎉 Initial commit: Professional Camera Control System)

About

A modern web UI for live video preview and camera controls, inspired by IP camera panels.

Resources

Readme
Activity

Stars

0 stars

Watchers

0 watching

Forks

0 forks
Report repository

Releases

No releases published

Packages

 
 
 

Contributors

Languages