voice test

src/renderer/realtime/voice/useVoiceRoom.ts

@@ -0,0 +1,228 @@
+import { useCallback, useEffect, useRef, useState } from 'react';
+import { rtcConfig } from './rtcConfig';
+import type { WSMessage } from './types';
+
+type PeerMap = Map<string, RTCPeerConnection>;
+
+export function useVoiceRoom(roomId: string, username: string) {
+  const wsRef = useRef<WebSocket | null>(null);
+  const peersRef = useRef<PeerMap>(new Map());
+  const streamRef = useRef<MediaStream | null>(null);
+
+  const [connected, setConnected] = useState(false);
+  const [participants, setParticipants] = useState<string[]>([]);
+  const [muted, setMuted] = useState(false);
+
+  const pendingIceRef = useRef<Map<string, RTCIceCandidateInit[]>>(new Map());
+
+  // --- connect ---
+  const connect = useCallback(async () => {
+    if (wsRef.current) return;
+
+    // 1. микрофон
+    const stream = await navigator.mediaDevices.getUserMedia({
+      audio: {
+        echoCancellation: true,
+        noiseSuppression: true,
+        autoGainControl: true,
+      },
+    });
+    streamRef.current = stream;
+
+    // 2. websocket
+    const ws = new WebSocket(
+      `wss://minecraft.api.popa-popa.ru/ws/voice?room_id=${roomId}&username=${username}`,
+    );
+    wsRef.current = ws;
+
+    ws.onopen = () => {
+      setConnected(true);
+      setParticipants([username]);
+    };
+
+    ws.onclose = () => {
+      cleanup();
+      setConnected(false);
+    };
+
+    ws.onmessage = async (ev) => {
+      const msg: WSMessage = JSON.parse(ev.data);
+
+      if (msg.type === 'join' && msg.user !== username) {
+        await createPeer(msg.user, false);
+
+        setParticipants((p) => (p.includes(msg.user) ? p : [...p, msg.user]));
+      }
+
+      if (msg.type === 'leave') {
+        removePeer(msg.user);
+        setParticipants((p) => p.filter((u) => u !== msg.user));
+      }
+
+      if (msg.type === 'signal') {
+        await handleSignal(msg.from, msg.data);
+      }
+    };
+  }, [roomId, username]);
+
+  // --- create peer ---
+  const createPeer = async (user: string, polite: boolean) => {
+    if (peersRef.current.has(user)) return;
+
+    const pc = new RTCPeerConnection(rtcConfig);
+    peersRef.current.set(user, pc);
+
+    streamRef.current
+      ?.getTracks()
+      .forEach((t) => pc.addTrack(t, streamRef.current!));
+
+    pc.onicecandidate = (e) => {
+      if (e.candidate) {
+        wsRef.current?.send(
+          JSON.stringify({
+            type: 'signal',
+            to: user,
+            data: { type: 'ice', candidate: e.candidate },
+          }),
+        );
+      }
+    };
+
+    pc.ontrack = (e) => {
+      const audio = document.createElement('audio');
+      audio.srcObject = e.streams[0];
+      audio.autoplay = true;
+      audio.setAttribute('data-user', user);
+      document.body.appendChild(audio);
+    };
+
+    if (!polite) {
+      const offer = await pc.createOffer();
+      await pc.setLocalDescription(offer);
+      wsRef.current?.send(
+        JSON.stringify({
+          type: 'signal',
+          to: user,
+          data: { type: 'offer', sdp: offer },
+        }),
+      );
+    }
+  };
+
+  const removePeer = (user: string) => {
+    const pc = peersRef.current.get(user);
+    if (!pc) return;
+
+    pc.close();
+    peersRef.current.delete(user);
+
+    pendingIceRef.current.delete(user);
+
+    // удаляем audio элемент
+    const audio = document.querySelector(
+      `audio[data-user="${user}"]`,
+    ) as HTMLAudioElement | null;
+
+    audio?.remove();
+  };
+
+  // --- signaling ---
+  const handleSignal = async (from: string, data: any) => {
+    let pc = peersRef.current.get(from);
+    if (!pc) {
+      await createPeer(from, true);
+      pc = peersRef.current.get(from)!;
+    }
+
+    if (data.type === 'offer') {
+      if (pc.signalingState !== 'stable') {
+        console.warn('Skip offer, state:', pc.signalingState);
+        return;
+      }
+
+      await pc.setRemoteDescription(data.sdp);
+
+      // 🔥 применяем накопленные ICE
+      const queued = pendingIceRef.current.get(from);
+      if (queued) {
+        for (const c of queued) {
+          await pc.addIceCandidate(c);
+        }
+        pendingIceRef.current.delete(from);
+      }
+      const answer = await pc.createAnswer();
+      await pc.setLocalDescription(answer);
+
+      wsRef.current?.send(
+        JSON.stringify({
+          type: 'signal',
+          to: from,
+          data: { type: 'answer', sdp: answer },
+        }),
+      );
+    }
+
+    if (data.type === 'answer') {
+      if (pc.signalingState === 'have-local-offer') {
+        await pc.setRemoteDescription(data.sdp);
+
+        const queued = pendingIceRef.current.get(from);
+        if (queued) {
+          for (const c of queued) {
+            await pc.addIceCandidate(c);
+          }
+          pendingIceRef.current.delete(from);
+        }
+      }
+    }
+
+    if (data.type === 'ice') {
+      if (pc.remoteDescription) {
+        await pc.addIceCandidate(data.candidate);
+      } else {
+        // ⏳ remoteDescription ещё нет — сохраняем
+        const queue = pendingIceRef.current.get(from) ?? [];
+        queue.push(data.candidate);
+        pendingIceRef.current.set(from, queue);
+      }
+    }
+  };
+
+  // --- mute ---
+  const toggleMute = () => {
+    if (!streamRef.current) return;
+    streamRef.current.getAudioTracks().forEach((t) => {
+      t.enabled = !t.enabled;
+      setMuted(!t.enabled);
+    });
+  };
+
+  // --- cleanup ---
+  const cleanup = () => {
+    peersRef.current.forEach((pc) => pc.close());
+    peersRef.current.clear();
+
+    streamRef.current?.getTracks().forEach((t) => t.stop());
+    streamRef.current = null;
+
+    wsRef.current?.close();
+    wsRef.current = null;
+
+    document.querySelectorAll('audio[data-user]').forEach((a) => a.remove());
+  };
+
+  const disconnect = () => {
+    cleanup();
+    setParticipants([]);
+    setConnected(false);
+  };
+
+  return {
+    connect,
+    disconnect,
+    toggleMute,
+    connected,
+    muted,
+    participants,
+  };
+}