Ramble-FE / hooks / useWebRTC.ts
useWebRTC.ts
Raw
import { WebRTCService } from "@/services";
import { Client } from "@stomp/stompjs";
import { useCallback, useEffect, useRef, useState } from "react";

interface UseWebRTCParams {
    enabled: boolean;
    localStream: MediaStream | null;
    stompClient: Client | null;
}

export function useWebRTC({
    enabled,
    localStream,
    stompClient,
}: UseWebRTCParams) {
    const serviceRef = useRef<WebRTCService | null>(null);
    const [state, setState] = useState({
        remoteStream: null as MediaStream | null,
        isConnecting: false,
        isConnected: false,
    });

    const init = useCallback(() => {
        if (!enabled) return;
        if (serviceRef.current) serviceRef.current.dispose();

        try {
            if (!stompClient) return;
            if (!localStream) return;

            serviceRef.current = new WebRTCService({
                stompClient: stompClient!,
                onRemoteStream: (stream) => setState((prev) => ({ ...prev, remoteStream: stream })),
                onConnectingChange: (isConnecting) => setState((prev) => ({ ...prev, isConnecting })),
                onConnectedChange: (isConnected) => setState((prev) => ({ ...prev, isConnected })),
            });
            serviceRef.current.initialize(localStream as any);
        } catch (error) {
            console.error('WebRTCService 초기화 중 오류 발생:', error);
        }
    }, [enabled, localStream, stompClient]);

    useEffect(() => {
        if (enabled) {
            init();
        }

        return () => {
            serviceRef.current?.dispose();
            serviceRef.current = null;
            setState({
                remoteStream: null,
                isConnecting: false,
                isConnected: false,
            });
        };
    }, [init, enabled]);

    const startCall = useCallback(async () => {
        try {
            await serviceRef.current?.startCall();
        } catch (e) {
            console.error('startCall 실패:', e);
        }
    }, []);

    const endCall = useCallback(() => {
        serviceRef.current?.endCall();
        setState((prev) => ({
            ...prev,
            remoteStream: null,
            isConnecting: false,
            isConnected: false,
        }));
    }, []);

    return {
        ...state,
        startCall,
        endCall,
    };
}