🎥 Локальний Стрімінг Екрану

Сервіс для стрімінгу екрану в реальному часі через веб-браузер з використанням WebRTC технологій.

✨ Можливості

• 📺 Стрімінг екрану в реальному часі - низька затримка завдяки WebRTC
• 👥 Підтримка до 8 глядачів - оптимізовано для стабільної роботи
• 🎮 Простий веб-інтерфейс - без необхідності встановлення додаткових програм
• 🎛️ Адаптивна якість - автоматичне зниження при збільшенні глядачів
• 🎤 Опціональне аудіо - можливість включення/вимкнення звуку
• 📱 Респонсивний дизайн - працює на всіх пристроях
• 🔄 Автоматична синхронізація - для зменшення накопиченої затримки
• ⚠️ Обмеження навантаження - захист від перевантаження сервера

🚀 Швидкий старт

Вимоги

• Node.js 16+
• Сучасний браузер (Chrome, Firefox, Edge, Safari)
• HTTPS або localhost (для роботи Screen Capture API)

Встановлення

1. Клонуйте або завантажте проект

   git clone <url> WebStreamerLocal
   cd WebStreamerLocal

2. Встановіть залежності

   npm install

3. Запустіть сервер

   npm start

4. Відкрийте браузер

   • Головна сторінка: http://localhost:3000
   • Стрімінг: http://localhost:3000/stream
   • Перегляд: http://localhost:3000/view

📖 Як використовувати

🎯 Для стрімера

1. Відкрийте http://localhost:3000/stream
2. Натисніть "Почати Стрім"
3. Дозвольте браузеру доступ до екрану
4. Оберіть вікно або екран для трансляції
5. Скопіюйте посилання і поділіться з глядачами
6. Керуйте стрімом через панель управління

👀 Для глядача

1. Отримайте посилання від стрімера
2. Відкрийте http://localhost:3000/view
3. Оберіть доступний стрім зі списку
4. Натисніть "Переглянути" для підключення
5. Користуйтеся елементами керування відео

🎛️ Функції стрімера

• Контроль якості: 480p, 720p, 1080p
• Аудіо: Включення/вимкнення системного звуку
• Моніторинг: Кількість глядачів в реальному часі
• Попередній перегляд: Бачите те, що транслюєте
• Швидке поділення: Одним кліком скопіювати посилання

👁️ Функції глядача

• Повноекранний режим: Для кращого перегляду
• Керування звуком: Увімкнення/вимкнення звуку
• Статистика з'єднання: Перегляд якості та швидкості
• Автоматичне перепідключення: При втраті з'єднання

🛠️ Технічні деталі

Архітектура

• Backend: Node.js + Express + Socket.io
• Frontend: Vanilla JavaScript + CSS3
• WebRTC: Для peer-to-peer передачі відео
• Signaling: Socket.io для координації з'єднань

Підтримувані браузери

Браузер	Стрімінг	Перегляд
Chrome 72+	✅	✅
Firefox 66+	✅	✅
Edge 79+	✅	✅
Safari 11+	✅	✅

Мережеві вимоги

• STUN сервери: Використовуються Google STUN сервери
• Локальна мережа: Працює без додаткових налаштувань
• Інтернет: Може знадобитися TURN сервер для роботи через NAT

🔧 Налаштування

Зміна порту

// У server.js
const PORT = process.env.PORT || 3000;

Додавання TURN серверів

// У static/stream.js та static/view.js
const pc = new RTCPeerConnection({
    iceServers: [
        { urls: 'stun:stun.l.google.com:19302' },
        { 
            urls: 'turn:your-turn-server.com:3478',
            username: 'user',
            credential: 'pass'
        }
    ]
});

🎯 Інтеграція з OBS Studio

Для розширених можливостей можна додати інтеграцію з OBS:

1. Встановіть OBS WebSocket плагін
2. Використайте obs-websocket-js для керування
3. Створіть сцени та джерела програмно
4. Керуйте стрімом через веб-інтерфейс

⚠️ Обмеження та рекомендації

Масштабування:

• 1-5 глядачів: Відмінна якість та стабільність
• 6-8 глядачів: Автоматичне зниження якості до 720p/480p
• 9+ глядачів: Підключення блокується для збереження стабільності
• 30+ глядачів: Потрібно SFU рішення (див. SCALING-SOLUTIONS.md)

Синхронізація:

• Автоматичне оновлення стріму кожні 5 хвилин
• Зменшує накопичену затримку
• Всі глядачі отримують свіжий стрім одночасно

🐛 Усунення проблем

Не працює захоплення екрану

• Переконайтеся, що використовуєте HTTPS або localhost
• Перевірте дозволи браузера
• Спробуйте інший браузер

"Стрім переповнений"

• Максимум 8 глядачів для стабільності
• Спробуйте підключитися пізніше
• Для більших аудиторій розгляньте SFU рішення

Проблеми з з'єднанням

• Перевірте файрвол
• Переконайтеся, що порт 3000 доступний
• Перевірте консоль браузера на помилки

Низька якість відео

• Якість автоматично знижується при 4+ глядачах
• Це нормально для забезпечення стабільності
• Для кращої якості зменшіть кількість глядачів

📝 Скрипти

npm start          # Запуск продакшн сервера
npm run dev        # Запуск з автоперезавантаженням

🤝 Розвиток

Проект готовий до розширення:

• Додавання аутентифікації
• Запис стрімів
• Чат для глядачів
• Інтеграція з OBS Studio
• Мультистрімінг на платформи

📄 Ліцензія

MIT License - використовуйте у своїх проектах freely!

---

Створено для локального стрімінгу екрану з мінімальною затримкою 🚀