Skip to content

Iskr/try_git

BranchesTags

Repository files navigation

📞 Calling Service WebApp

Современное веб-приложение для видеозвонков с поддержкой WebRTC, оптимизированное для Telegram WebView и native wrappers (iOS/Android).

🌟 Основные возможности

🎥 Видеозвонки

  • ✅ Групповые звонки - до 5 участников одновременно
  • ✅ WebRTC (P2P) - прямое соединение для минимальной задержки
  • ✅ Адаптивные раскладки - автоматический выбор оптимального отображения
  • ✅ Быстрое создание - звонки по ссылкам с 6-значным кодом

🔒 Безопасность

  • ✅ End-to-End шифрование - AES-GCM 128-bit шифрование видео/аудио потоков
  • ✅ Insertable Streams API - шифрование на уровне кадров
  • ✅ Синхронизация ключей - автоматическая передача ключей новым участникам
  • ✅ Индикатор шифрования - визуальное подтверждение защищенного соединения

🎨 Режимы отображения

  • Grid (Сетка) - все участники равного размера
  • Spotlight (Фокус) - один большой, остальные миниатюрами снизу
  • Sidebar (Сайдбар) - основное видео слева, миниатюры справа
  • Auto (Авто) - автоматический выбор в зависимости от количества участников

🎭 Система реакций

  • ✅ 10 эмодзи - ❤️ 👍 😂 😮 😢 🔥 🎉 👏 💯 🚀
  • ✅ Летающая анимация - красивые эффекты появления
  • ✅ Звуковые уведомления - приятные звуки при отправке
  • ✅ Счетчики популярности - отслеживание самых используемых реакций
  • ✅ Сортировка - автоматическая сортировка по популярности

🔊 Управление звуком

  • ✅ Индивидуальная громкость - настройка громкости для каждого участника (0-200%)
  • ✅ Вертикальный слайдер - компактный дизайн регулятора
  • ✅ Сохранение настроек - запоминание уровня громкости в localStorage
  • ✅ Визуальные индикаторы - бейджи с текущим уровнем громкости
  • ✅ Web Audio API - маршрутизация через gain nodes для точного контроля

📱 Адаптивный дизайн

  • ✅ Полная ширина на десктопе - использование всего экрана на больших мониторах
  • ✅ Мобильная оптимизация - удобный интерфейс на смартфонах
  • ✅ Адаптивные сетки - от 2 до 4 колонок в зависимости от ширины экрана
  • ✅ Увеличенные элементы - большие кнопки и шрифты на десктопе
  • ✅ Breakpoints: 768px (mobile), 1024px (desktop), 1440px (wide desktop)

🌐 Интеграция

  • ✅ Telegram WebView - оптимизация для работы в Telegram
  • ✅ Шаринг в Telegram - встроенная кнопка для отправки ссылок
  • ✅ Темная тема - автоматическая поддержка темной темы
  • ✅ PWA-ready - готовность к установке как Progressive Web App

🚀 Быстрый старт

Установка зависимостей

npm install

Запуск сервера

# Production
npm start

# Development (с авто-перезагрузкой)
npm run dev

# Health check
npm run health

Сервер запустится на http://localhost:3000

📦 Структура проекта

.
├── server.js              # WebSocket signaling server
├── package.json           # Зависимости и скрипты
├── public/
│   ├── index.html        # Основной интерфейс
│   ├── app.js            # WebRTC логика + шифрование + реакции
│   └── style.css         # Адаптивные стили
├── .env.example          # Пример переменных окружения
├── Procfile              # Конфигурация для Heroku
├── railway.json          # Конфигурация для Railway
├── render.yaml           # Конфигурация для Render
└── README.md

🔧 Технологии

Backend

  • Node.js - серверная платформа
  • Express - веб-фреймворк
  • WebSocket (ws) - двунаправленная связь для сигнализации

Frontend

  • Vanilla JavaScript - без зависимостей
  • WebRTC API - P2P видео/аудио связь
  • Web Crypto API - E2E шифрование
  • Insertable Streams API - шифрование на уровне кадров
  • Web Audio API - управление громкостью

Стили

  • CSS3 - современные возможности
  • CSS Variables - динамическая кастомизация
  • Media Queries - адаптивный дизайн
  • Flexbox & Grid - гибкие раскладки

🎯 Как использовать

Создание звонка

  1. Откройте приложение
  2. Нажмите "Создать звонок"
  3. Разрешите доступ к камере/микрофону
  4. Скопируйте код комнаты или ссылку
  5. Поделитесь ссылкой с участниками

Присоединение к звонку

  1. Откройте приложение
  2. Нажмите "Присоединиться"
  3. Введите 6-значный код комнаты
  4. Или откройте полученную ссылку напрямую

Управление во время звонка

Основные кнопки

  • 🎤 Микрофон - включение/выключение аудио
  • 📹 Видео - включение/выключение камеры
  • 🔒 Шифрование - включение E2E шифрования
  • 😊 Реакции - отправка эмодзи-реакций
  • 📱 Раскладка - выбор режима отображения
  • 📞 Завершить - выход из звонка

Дополнительные функции

  • 🔊 Громкость - клик на видео участника для настройки громкости
  • 📋 Копировать ссылку - быстрое копирование в буфер обмена
  • ✈️ Telegram - отправка приглашения в Telegram

Включение шифрования

  1. Нажмите кнопку 🔒 во время звонка
  2. Шифрование включится для всех участников
  3. Индикатор "Защищено E2EE" подтвердит активацию
  4. Новые участники автоматически получат ключ

Отправка реакций

  1. Нажмите кнопку 😊
  2. Выберите эмодзи из списка
  3. Реакция появится у всех участников с анимацией
  4. Популярные реакции поднимутся в топ списка

Настройка громкости

  1. Кликните на видео участника
  2. Нажмите на появившуюся кнопку 🔊
  3. Настройте громкость слайдером (0-200%)
  4. Настройки сохранятся автоматически

🌐 Деплой

Вариант 1: Railway.app (рекомендуется)

  1. Создайте аккаунт на Railway.app
  2. Нажмите "New Project" → "Deploy from GitHub repo"
  3. Выберите этот репозиторий
  4. Railway автоматически развернет приложение
  5. Готово! ✅

Вариант 2: Render.com

  1. Создайте аккаунт на Render.com
  2. Нажмите "New" → "Web Service"
  3. Подключите GitHub репозиторий
  4. Render автоматически обнаружит конфигурацию из render.yaml
  5. Деплой! ✅

Вариант 3: Heroku

# Установите Heroku CLI
# https://devcenter.heroku.com/articles/heroku-cli

# Создайте приложение
heroku create your-app-name

# Деплой
git push heroku main

# Откройте приложение
heroku open

Вариант 4: VPS/Облачный сервер

# Установите Node.js на сервере
curl -fsSL https://deb.nodesource.com/setup_18.x | sudo -E bash -
sudo apt-get install -y nodejs

# Склонируйте репозиторий
git clone <your-repo-url>
cd try_git

# Установите зависимости
npm install

# Используйте PM2 для автозапуска
npm install -g pm2
pm2 start server.js
pm2 startup
pm2 save

Важно для production:

  1. HTTPS обязателен - WebRTC требует HTTPS для доступа к камере/микрофону
  2. WebSocket - Убедитесь, что ваш хостинг поддерживает WebSocket
  3. Порты - Настройте через process.env.PORT (по умолчанию 3000)
  4. TURN серверы - Уже настроены несколько бесплатных TURN серверов
  5. CORS - Сервер настроен на работу с любым origin

🤖 Интеграция с Telegram Bot

Создание Telegram бота

  1. Создайте бота через @BotFather
  2. Получите токен бота
  3. Создайте файл telegram-bot.js:
const TelegramBot = require('node-telegram-bot-api');

const TOKEN = 'YOUR_BOT_TOKEN';
const WEB_APP_URL = 'https://your-domain.com'; // URL вашего веб-приложения

const bot = new TelegramBot(TOKEN, { polling: true });

bot.onText(/\/start/, (msg) => {
  const chatId = msg.chat.id;

  bot.sendMessage(chatId, '📞 Добро пожаловать в сервис видеозвонков!\n\n' +
    '✨ Возможности:\n' +
    '• Групповые звонки (до 5 человек)\n' +
    '• End-to-End шифрование\n' +
    '• Реакции и эмодзи\n' +
    '• Индивидуальная громкость\n\n' +
    'Нажмите кнопку ниже для начала:', {
    reply_markup: {
      inline_keyboard: [[
        {
          text: '📞 Создать звонок',
          web_app: { url: WEB_APP_URL }
        }
      ]]
    }
  });
});

bot.onText(/\/call/, (msg) => {
  const chatId = msg.chat.id;

  bot.sendMessage(chatId, 'Запуск звонка...', {
    reply_markup: {
      inline_keyboard: [[
        {
          text: '📞 Открыть',
          web_app: { url: WEB_APP_URL }
        }
      ]]
    }
  });
});
  1. Установите зависимости и запустите:
npm install node-telegram-bot-api
node telegram-bot.js

🔒 Безопасность и шифрование

E2E шифрование

Приложение использует AES-GCM 128-bit шифрование через Insertable Streams API:

  1. Генерация ключа - используется Web Crypto API
  2. Шифрование кадров - каждый видео/аудио кадр шифруется индивидуально
  3. Уникальные IV - для каждого кадра генерируется уникальный вектор инициализации
  4. Обмен ключами - ключи безопасно передаются через WebSocket
  5. Синхронизация - все участники используют один ключ

Безопасность кодов комнат

  • Случайная генерация 6-значных кодов (A-Z, 0-9)
  • 36^6 = 2,176,782,336 возможных комбинаций
  • Рекомендуется использовать комнаты разово
  • Автоматическая очистка при выходе последнего участника

Рекомендации

  • Включайте шифрование для конфиденциальных звонков
  • Не делитесь кодами комнат публично
  • Используйте HTTPS в production
  • Разверните собственные TURN серверы для критичных применений

🎨 Кастомизация

Изменение цветов

Отредактируйте CSS переменные в public/style.css:

:root {
    --primary-color: #667eea;       /* Основной цвет */
    --primary-hover: #5a67d8;       /* Цвет при наведении */
    --primary-gradient: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    --danger-color: #f56565;        /* Цвет завершения звонка */
    --success-color: #48bb78;       /* Успешное подключение */
    --bg-color: #f7fafc;            /* Фон (светлая тема) */
    --surface-color: #ffffff;       /* Поверхности */
    --text-color: #2d3748;          /* Цвет текста */
}

Настройка TURN серверов

В файле public/app.js настроены несколько бесплатных TURN серверов. Для production рекомендуется использовать собственные:

const config = {
    iceServers: [
        // STUN server
        { urls: 'stun:stun.l.google.com:19302' },

        // Ваш TURN server
        {
            urls: [
                'turn:your-turn-server.com:3478',
                'turn:your-turn-server.com:443?transport=tcp'
            ],
            username: 'your-username',
            credential: 'your-password'
        }
    ],
    iceCandidatePoolSize: 10,
    iceTransportPolicy: 'all'
};

Настройка максимального числа участников

В файле public/app.js:

const MAX_PARTICIPANTS = 5; // Измените на нужное значение

Примечание: Большее количество участников требует больше ресурсов.

Добавление новых реакций

В файле public/app.js:

this.reactions = ['❤️', '👍', '😂', '😮', '😢', '🔥', '🎉', '👏', '💯', '🚀', '🎵', '⭐'];

🐛 Отладка и решение проблем

Проверка WebRTC соединения

Откройте Chrome DevTools → Console:

// Проверка доступа к медиа устройствам
navigator.mediaDevices.enumerateDevices()
  .then(devices => console.log(devices));

// Проверка WebRTC
console.log(RTCPeerConnection);

// Проверка поддержки Insertable Streams
const sender = new RTCRtpSender();
console.log('Insertable Streams:', !!sender.createEncodedStreams);

Проблемы с доступом к камере/микрофону

  1. ✅ Убедитесь, что используется HTTPS (или localhost)
  2. ✅ Проверьте разрешения в браузере (Settings → Privacy → Camera/Microphone)
  3. ✅ Проверьте, не блокирует ли браузер доступ к медиа
  4. ✅ Попробуйте другой браузер (рекомендуется Chrome/Edge)

WebSocket не подключается

  1. ✅ Проверьте, что сервер запущен (npm start)
  2. ✅ Проверьте порт (по умолчанию 3000)
  3. ✅ Убедитесь, что WebSocket не блокируется firewall
  4. ✅ Проверьте консоль браузера на ошибки

ICE connection failed

  1. ✅ Проверьте доступность TURN серверов
  2. ✅ Попробуйте другую сеть (возможно блокировка корпоративным firewall)
  3. ✅ Используйте iceTransportPolicy: 'relay' для принудительного использования TURN

Шифрование не работает

  1. ✅ Проверьте поддержку браузером Insertable Streams API
  2. ✅ Используйте Chrome 86+ или Edge 86+
  3. ✅ Проверьте консоль на ошибки шифрования/дешифрования
  4. ✅ Убедитесь, что все участники получили ключ

📱 Native Wrappers (iOS/Android)

Capacitor (рекомендуется)

# Установите Capacitor
npm install @capacitor/core @capacitor/cli
npx cap init

# Добавьте платформы
npx cap add ios
npx cap add android

# Скопируйте веб-файлы
npx cap copy

# Откройте в IDE
npx cap open ios      # Xcode
npx cap open android  # Android Studio

Требуемые разрешения

iOS (Info.plist):

<key>NSCameraUsageDescription</key>
<string>Требуется для видео звонков</string>
<key>NSMicrophoneUsageDescription</key>
<string>Требуется для аудио звонков</string>

Android (AndroidManifest.xml):

<uses-permission android:name="android.permission.CAMERA" />
<uses-permission android:name="android.permission.RECORD_AUDIO" />
<uses-permission android:name="android.permission.MODIFY_AUDIO_SETTINGS" />
<uses-permission android:name="android.permission.INTERNET" />

🌟 Roadmap

Планируемые функции

  • Запись звонков
  • Виртуальные фоны
  • Текстовый чат
  • Демонстрация экрана
  • Отдельные комнаты (breakout rooms)
  • Аутентификация пользователей
  • История звонков
  • Календарь/планирование звонков
  • Интеграция с календарями (Google Calendar, etc.)
  • Whiteboard (виртуальная доска)

В разработке

  • Групповые звонки (до 5 участников)
  • E2E шифрование
  • Система реакций
  • Индивидуальная громкость
  • Адаптивный дизайн
  • Множественные раскладки

📊 Технические детали

WebRTC Configuration

{
    iceServers: [...],              // STUN/TURN серверы
    iceCandidatePoolSize: 10,       // Предварительный сбор ICE кандидатов
    iceTransportPolicy: 'all',      // Использовать все типы соединений
    bundlePolicy: 'max-bundle',     // Объединение медиа потоков
    rtcpMuxPolicy: 'require'        // Мультиплексирование RTCP
}

Медиа настройки

{
    video: {
        width: { ideal: 1280 },
        height: { ideal: 720 },
        facingMode: 'user'
    },
    audio: {
        echoCancellation: true,    // Подавление эха
        noiseSuppression: true,    // Шумоподавление
        autoGainControl: true      // Автоматическая регулировка усиления
    }
}

Responsive Breakpoints

  • Mobile: ≤ 768px - вертикальная раскладка, ограничение 600px
  • Tablet: 769px - 1023px - переходный режим
  • Desktop: ≥ 1024px - полная ширина, большие элементы
  • Wide: ≥ 1440px - 4-колоночные сетки, расширенный sidebar

📝 Changelog

v2.5.0 (2024-11-14)

  • ✨ Добавлен адаптивный дизайн для десктопа и мобильных устройств
  • 🔧 Уменьшена ширина панели управления громкостью

v2.4.0

  • ✨ Добавлена индивидуальная регулировка громкости для каждого участника
  • 🔊 Web Audio API для точного контроля звука
  • 💾 Сохранение настроек громкости в localStorage

v2.3.0

  • ✨ Добавлена система реакций с 10 эмодзи
  • 🎭 Летающая анимация реакций
  • 🔔 Звуковые уведомления при отправке реакций
  • 📊 Автоматическая сортировка по популярности

v2.2.0

  • 🔒 Добавлено E2E шифрование (AES-GCM 128-bit)
  • 🔐 Insertable Streams API для шифрования кадров
  • 🔑 Автоматический обмен ключами с новыми участниками

v2.1.0

  • 📐 Добавлены режимы отображения: Grid, Spotlight, Sidebar, Auto
  • 🎨 Улучшен дизайн интерфейса

v2.0.0

  • 👥 Поддержка групповых звонков (до 5 участников)
  • 🔄 Динамическая сетка видео
  • ⚡ Улучшена обработка ICE кандидатов

v1.2.0

  • 🌐 Добавлены TURN серверы
  • 🔧 Исправлены race conditions в WebRTC
  • 🏥 Добавлен health check endpoint

v1.0.0

  • 🎉 Первый релиз
  • 📞 P2P видеозвонки
  • 🎨 Адаптивный дизайн
  • ✈️ Интеграция с Telegram

📝 Лицензия

MIT License - свободное использование в коммерческих и некоммерческих проектах.

🤝 Вклад

Pull requests приветствуются! Для крупных изменений, пожалуйста, сначала откройте issue для обсуждения.

Процесс разработки

  1. Fork репозиторий
  2. Создайте feature branch (git checkout -b feature/AmazingFeature)
  3. Commit изменения (git commit -m 'Add some AmazingFeature')
  4. Push в branch (git push origin feature/AmazingFeature)
  5. Откройте Pull Request

📧 Поддержка

Если у вас возникли вопросы или проблемы:

  • 🐛 Создайте Issue
  • 💬 Обсудите в Discussions
  • 📧 Напишите в поддержку

🙏 Благодарности

  • WebRTC API
  • Web Crypto API
  • Insertable Streams API
  • Бесплатные TURN серверы
  • Open Source сообщество

Сделано с ❤️ для открытого и безопасного общения

Примечание: Для работы в России убедитесь, что используете STUN/TURN серверы, доступные в вашем регионе, или разверните собственные.

About

try-git.onrender.com

Resources

Readme
Activity

Stars

0 stars

Watchers

2 watching

Forks

0 forks
Report repository

Releases

No releases published

Packages

No packages published

Contributors 2

  •  
  •  

Languages