React WebRTC Video Call Dashboard

Реальный проект с интеграцией WebRTC. Подключается к вашему серверу и позволяет совершать видео/аудио звонки через WebSocket.

О проекте

🛠 Технологии

  • React 18 (без create-react-app)
  • WebRTC для видео/аудио
  • WebSocket для сигнализации
  • STUN/TURN серверы

🎯 Возможности

  • Видеозвонки в реальном времени
  • Включение/отключение камеры
  • Включение/отключение микрофона
  • Лог событий соединения

🔧 Особенности реализации

  • Ручная загрузка React из CDN
  • Без использования create-react-app
  • Полный контроль над сборкой
  • Интеграция с WordPress

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

React компонент находится в /assets/js/react-app.js и подключается через functions.php

Ключевые части кода:


// 1. Создание peer connection с ICE серверами
const iceConfig = {
    iceServers: [
        { urls: 'stun:stun.l.google.com:19302' },
        {
            urls: 'turn:77.41.177.55:3478',
            username: 'DUSTBG',
            credential: 'DUSTISROOT'
        }
    ]
};

// 2. Получение доступа к камере/микрофону
const stream = await navigator.mediaDevices.getUserMedia({
    video: true,
    audio: true
});

// 3. Отправка WebSocket сигналов
ws.send(JSON.stringify({
    type: 'call_offer',
    sdp: offer.sdp,
    callId: Date.now().toString()
}));