Для чего нужен WebRTC?

Для чего нужен WebRTC

WebRTC (Web Real-Time Communication) — это открытый стандарт и набор APIs для организации прямого (peer-to-peer) общения между браузерами и мобильными приложениями через Интернет в реальном времени. Это технология для видеоконференций, аудиочатов и обмена данными.

Основное назначение WebRTC

WebRTC позволяет двум или более участникам общаться напрямую без посредника (сервера), обмениваясь видео, аудио и данными в реальном времени.

Пользователь A         Пользователь B
    (Browser)          (Browser)
         |
         |-- WebRTC --|
         (P2P connection)
      Напрямую, без сервера
      (кроме сигнализации)

Как работает WebRTC

1. Три основных компонента

// 1. RTCPeerConnection: P2P соединение
const peerConnection = new RTCPeerConnection();

// 2. RTCDataChannel: канал для данных
const dataChannel = peerConnection.createDataChannel('chat');

// 3. MediaStream: поток видео/аудио
navigator.mediaDevices.getUserMedia({
    video: true,
    audio: true
})
.then(stream => {
    peerConnection.addStream(stream);
});

2. Процесс подключения

// Шаг 1: Создаём peer connection
const pc = new RTCPeerConnection();

// Шаг 2: Добавляем локальный видеопоток
navigator.mediaDevices.getUserMedia({ video: true, audio: true })
    .then(stream => {
        stream.getTracks().forEach(track => {
            pc.addTrack(track, stream);
        });
    });

// Шаг 3: Создаём SDP offer (описание сессии)
const offer = await pc.createOffer();
await pc.setLocalDescription(offer);

// Шаг 4: Отправляем offer другому пользователю через сервер
socket.emit('offer', offer);

// Шаг 5: Получаем ответ (answer)
socket.on('answer', async (answer) => {
    await pc.setRemoteDescription(new RTCSessionDescription(answer));
});

// Шаг 6: Получаем удалённый видеопоток
pc.ontrack = (event) => {
    const video = document.getElementById('remote-video');
    video.srcObject = event.streams[0];
};

Три типа медиа в WebRTC

1. Видео

// Получить видеопоток
navigator.mediaDevices.getUserMedia({ video: true })
    .then(stream => {
        const video = document.getElementById('local-video');
        video.srcObject = stream;
        
        // Добавить в P2P connection
        stream.getTracks().forEach(track => {
            pc.addTrack(track, stream);
        });
    });

// Применить фильтры через Canvas
const video = document.getElementById('video');
const canvas = document.getElementById('canvas');
const ctx = canvas.getContext('2d');

function drawVideo() {
    ctx.drawImage(video, 0, 0, canvas.width, canvas.height);
    
    // Получить медиапоток из canvas
    const stream = canvas.captureStream(30); // 30 FPS
    stream.getTracks().forEach(track => {
        pc.addTrack(track, stream);
    });
}

2. Аудио

// Получить аудиопоток
navigator.mediaDevices.getUserMedia({ audio: true })
    .then(stream => {
        // Добавить в P2P
        stream.getTracks().forEach(track => {
            pc.addTrack(track, stream);
        });
    });

// Анализ звука (Audio Analysis)
const audioContext = new AudioContext();
const analyser = audioContext.createAnalyser();
const source = audioContext.createMediaStreamSource(stream);
source.connect(analyser);

const dataArray = new Uint8Array(analyser.frequencyBinCount);
function analyze() {
    analyser.getByteFrequencyData(dataArray);
    console.log('Sound level:', Math.max(...dataArray));
    requestAnimationFrame(analyze);
}

3. Общие данные (Data Channel)

// Создать канал данных
const dataChannel = pc.createDataChannel('myChannel');

dataChannel.onopen = () => {
    console.log('Data channel opened');
};

dataChannel.onmessage = (event) => {
    const message = JSON.parse(event.data);
    console.log('Received:', message);
};

// Отправить данные
function sendMessage(text) {
    if (dataChannel.readyState === 'open') {
        dataChannel.send(JSON.stringify({
            type: 'message',
            text: text,
            timestamp: Date.now()
        }));
    }
}

// Получить канал данных (инициатор сигнализации)
pc.ondatachannel = (event) => {
    const dc = event.channel;
    dc.onmessage = (msg) => {
        console.log('Received:', msg.data);
    };
};

Полный пример: видеочат

class VideoChat {
    constructor(config) {
        this.config = {
            iceServers: [
                { urls: ['stun:stun.l.google.com:19302'] }
            ]
        };
        this.pc = null;
        this.localStream = null;
    }
    
    async start() {
        // Получить локальный поток
        this.localStream = await navigator.mediaDevices.getUserMedia({
            video: true,
            audio: true
        });
        
        const localVideo = document.getElementById('local-video');
        localVideo.srcObject = this.localStream;
        
        // Создать peer connection
        this.pc = new RTCPeerConnection(this.config);
        
        // Добавить видеопоток
        this.localStream.getTracks().forEach(track => {
            this.pc.addTrack(track, this.localStream);
        });
        
        // Обработать удалённый поток
        this.pc.ontrack = (event) => {
            const remoteVideo = document.getElementById('remote-video');
            remoteVideo.srcObject = event.streams[0];
        };
        
        // Обработать ICE кандидаты
        this.pc.onicecandidate = (event) => {
            if (event.candidate) {
                // Отправить на другую сторону через сервер
                socket.emit('ice-candidate', event.candidate);
            }
        };
    }
    
    async createOffer() {
        const offer = await this.pc.createOffer();
        await this.pc.setLocalDescription(offer);
        return offer;
    }
    
    async handleAnswer(answer) {
        await this.pc.setRemoteDescription(
            new RTCSessionDescription(answer)
        );
    }
    
    addIceCandidate(candidate) {
        this.pc.addIceCandidate(new RTCIceCandidate(candidate));
    }
    
    stop() {
        this.localStream.getTracks().forEach(t => t.stop());
        this.pc.close();
    }
}

// Использование
const chat = new VideoChat();
await chat.start();

const offer = await chat.createOffer();
socket.emit('offer', offer);

socket.on('answer', (answer) => chat.handleAnswer(answer));
socket.on('ice-candidate', (cand) => chat.addIceCandidate(cand));

Сигнализация (Signaling)

WebRTC требует сервера для обмена сигналами:

// Сервер (Node.js + Socket.io)
const io = require('socket.io')(3000);
const peers = {};

io.on('connection', (socket) => {
    peers[socket.id] = socket;
    
    // Пользователь A отправляет offer
    socket.on('offer', (data) => {
        const recipientSocket = peers[data.to];
        recipientSocket.emit('offer', {
            from: socket.id,
            offer: data.offer
        });
    });
    
    // Пользователь B отправляет answer
    socket.on('answer', (data) => {
        const recipientSocket = peers[data.to];
        recipientSocket.emit('answer', {
            from: socket.id,
            answer: data.answer
        });
    });
    
    // ICE кандидаты
    socket.on('ice-candidate', (data) => {
        const recipientSocket = peers[data.to];
        recipientSocket.emit('ice-candidate', {
            from: socket.id,
            candidate: data.candidate
        });
    });
    
    socket.on('disconnect', () => {
        delete peers[socket.id];
    });
});

Преимущества WebRTC

1. P2P соединение
   - Меньше нагрузки на сервер
   - Ниже задержка
   - Приватнее (данные не проходят через сервер)

2. Бесплатно и open-source
   - Встроено в браузеры
   - Не требует специальных плагинов
   - Поддерживается всеми современными браузерами

3. Универсально
   - Видео, аудио, данные
   - Кроссбраузерно
   - Работает через NAT и firewall (STUN, TURN)

4. В реальном времени
   - Низкая задержка
   - Оптимизировано для живого общения

Примеры применения

1. Видеоконференции
   - Zoom, Google Meet, Skype (используют WebRTC)

2. Аудиочаты
   - Discord, Telegram, WhatsApp

3. Трансляции
   - Twitch, YouTube Live

4. Игры
   - Multiplayer peer-to-peer

5. Обмен файлами
   - P2P синхронизация файлов

6. IoT
   - Прямое управление устройствами

Роль Java в WebRTC

Hотя WebRTC это JavaScript/Web стандарт, Java используется на сервере:

// Java сервер для сигнализации (Spring Boot)
@RestController
@RequestMapping("/api/chat")
public class ChatController {
    
    @PostMapping("/offer")
    public ResponseEntity<?> sendOffer(@RequestBody OfferRequest request) {
        // Пересылаем offer другому пользователю
        // Через WebSocket или очередь сообщений
        messagingService.sendOffer(request.getToUserId(), request.getOffer());
        return ResponseEntity.ok().build();
    }
    
    @PostMapping("/answer")
    public ResponseEntity<?> sendAnswer(@RequestBody AnswerRequest request) {
        messagingService.sendAnswer(request.getToUserId(), request.getAnswer());
        return ResponseEntity.ok().build();
    }
}

// Java для обработки медиа (если нужна запись видео)
@Service
public class VideoRecordingService {
    public void recordSession(String sessionId, String mediaData) {
        // Сохранить видео на диск
        // Использовать ffmpeg или аналог
    }
}

Итоговый ответ

WebRTC нужен для:

1. P2P соединения — прямое общение без посредника
2. Видео/аудио коммуникация — видеочаты, конференции
3. Обмен данными — файлы, сообщения в реальном времени
4. Низкая задержка — оптимизировано для live общения
5. Без плагинов — встроено в браузеры

Это стандарт, используемый во всех современных сервисах видеоконференций (Zoom, Google Meet, Discord и т.д.). Java разработчик должен знать о WebRTC для развёртывания сигнализирующего сервера и обработки медиа-данных.