🎯 WebRTC가 뭐길래?

🏗️ WebRTC의 구조와 핵심 API

1️⃣ MediaStream API (getUserMedia)

// 카메라와 마이크 접근하기
async function startCamera() {
    try {
        const stream = await navigator.mediaDevices.getUserMedia({
            video: true,  // 비디오 활성화
            audio: true   // 오디오 활성화
        });
        
        // 비디오 요소에 스트림 연결
        const videoElement = document.getElementById('myVideo');
        videoElement.srcObject = stream;
        
        console.log('카메라 시작 성공! 🎉');
    } catch (error) {
        console.error('카메라 접근 실패:', error);
    }
}

const constraints = {
    video: {
        width: { ideal: 1280 },
        height: { ideal: 720 },
        frameRate: { ideal: 30 },
        facingMode: 'user'  // 'user'는 전면, 'environment'는 후면
    },
    audio: {
        echoCancellation: true,  // 에코 제거
        noiseSuppression: true,  // 노이즈 제거
        autoGainControl: true    // 자동 볼륨 조절
    }
};

const stream = await navigator.mediaDevices.getUserMedia(constraints);

2️⃣ RTCPeerConnection API

// PeerConnection 생성
const configuration = {
    iceServers: [
        { urls: 'stun:stun.l.google.com:19302' },  // 구글 STUN 서버
        { urls: 'stun:stun1.l.google.com:19302' }
    ]
};

const peerConnection = new RTCPeerConnection(configuration);

// 로컬 스트림 추가
stream.getTracks().forEach(track => {
    peerConnection.addTrack(track, stream);
});

// 원격 스트림 수신 처리
peerConnection.ontrack = (event) => {
    const remoteVideo = document.getElementById('remoteVideo');
    remoteVideo.srcObject = event.streams[0];
    console.log('상대방 영상 수신! 👀');
};

3️⃣ RTCDataChannel API

// 데이터 채널 생성
const dataChannel = peerConnection.createDataChannel('chat');

// 메시지 전송
dataChannel.send('안녕하세요! 👋');

// 메시지 수신
dataChannel.onmessage = (event) => {
    console.log('받은 메시지:', event.data);
};

// 연결 상태 확인
dataChannel.onopen = () => {
    console.log('데이터 채널 연결됨! ✅');
};

dataChannel.onclose = () => {
    console.log('데이터 채널 종료됨! ❌');
};

🔄 시그널링(Signaling) 프로세스

📝 SDP (Session Description Protocol)

// Offer 생성
const offer = await peerConnection.createOffer();
await peerConnection.setLocalDescription(offer);

// 시그널링 서버로 전송
signalingServer.send({
    type: 'offer',
    sdp: offer
});

// Offer 수신 및 Answer 생성
await peerConnection.setRemoteDescription(receivedOffer);
const answer = await peerConnection.createAnswer();
await peerConnection.setLocalDescription(answer);

// 시그널링 서버로 전송
signalingServer.send({
    type: 'answer',
    sdp: answer
});

🧊 ICE (Interactive Connectivity Establishment)

// ICE Candidate 수집
peerConnection.onicecandidate = (event) => {
    if (event.candidate) {
        signalingServer.send({
            type: 'ice-candidate',
            candidate: event.candidate
        });
    }
};

// 상대방의 ICE Candidate 추가
function addIceCandidate(candidate) {
    peerConnection.addIceCandidate(new RTCIceCandidate(candidate));
}

🛠️ 실전 구현: 1대1 화상 통화 만들기

🖥️ 서버 측 코드 (Node.js + Socket.io)

// server.js
const express = require('express');
const app = express();
const server = require('http').createServer(app);
const io = require('socket.io')(server);

const rooms = new Map();

io.on('connection', (socket) => {
    console.log('새로운 사용자 연결:', socket.id);
    
    // 방 입장
    socket.on('join-room', (roomId) => {
        socket.join(roomId);
        
        if (!rooms.has(roomId)) {
            rooms.set(roomId, []);
        }
        
        const room = rooms.get(roomId);
        room.push(socket.id);
        
        // 방에 다른 사용자가 있으면 알림
        if (room.length > 1) {
            socket.to(roomId).emit('user-connected', socket.id);
        }
        
        console.log(`${socket.id}가 ${roomId} 방에 입장`);
    });
    
    // Offer 전달
    socket.on('offer', (data) => {
        socket.to(data.target).emit('offer', {
            sdp: data.sdp,
            sender: socket.id
        });
    });
    
    // Answer 전달
    socket.on('answer', (data) => {
        socket.to(data.target).emit('answer', {
            sdp: data.sdp,
            sender: socket.id
        });
    });
    
    // ICE Candidate 전달
    socket.on('ice-candidate', (data) => {
        socket.to(data.target).emit('ice-candidate', {
            candidate: data.candidate,
            sender: socket.id
        });
    });
    
    // 연결 해제
    socket.on('disconnect', () => {
        console.log('사용자 연결 해제:', socket.id);
        
        rooms.forEach((room, roomId) => {
            const index = room.indexOf(socket.id);
            if (index !== -1) {
                room.splice(index, 1);
                socket.to(roomId).emit('user-disconnected', socket.id);
            }
        });
    });
});

server.listen(3000, () => {
    console.log('시그널링 서버 실행 중: http://localhost:3000');
});

💻 클라이언트 측 코드 (JavaScript)

// client.js
const socket = io('http://localhost:3000');
const roomId = 'room-123';  // 실제로는 동적으로 생성

let localStream;
let peerConnection;
let remoteSocketId;

const configuration = {
    iceServers: [
        { urls: 'stun:stun.l.google.com:19302' },
        { urls: 'stun:stun1.l.google.com:19302' }
    ]
};

// 초기화
async function init() {
    try {
        // 로컬 미디어 스트림 가져오기
        localStream = await navigator.mediaDevices.getUserMedia({
            video: { width: 1280, height: 720 },
            audio: true
        });
        
        document.getElementById('localVideo').srcObject = localStream;
        
        // 방 입장
        socket.emit('join-room', roomId);
        
    } catch (error) {
        console.error('미디어 접근 오류:', error);
        alert('카메라/마이크 접근 권한이 필요합니다!');
    }
}

// PeerConnection 생성
function createPeerConnection() {
    peerConnection = new RTCPeerConnection(configuration);
    
    // 로컬 스트림 추가
    localStream.getTracks().forEach(track => {
        peerConnection.addTrack(track, localStream);
    });
    
    // 원격 스트림 수신
    peerConnection.ontrack = (event) => {
        const remoteVideo = document.getElementById('remoteVideo');
        remoteVideo.srcObject = event.streams[0];
        console.log('원격 스트림 수신 완료! 🎉');
    };
    
    // ICE Candidate 처리
    peerConnection.onicecandidate = (event) => {
        if (event.candidate) {
            socket.emit('ice-candidate', {
                target: remoteSocketId,
                candidate: event.candidate
            });
        }
    };
    
    // 연결 상태 모니터링
    peerConnection.onconnectionstatechange = () => {
        console.log('연결 상태:', peerConnection.connectionState);
        
        if (peerConnection.connectionState === 'connected') {
            console.log('P2P 연결 성공! ✅');
        }
    };
    
    return peerConnection;
}

// 새 사용자 연결 시
socket.on('user-connected', async (socketId) => {
    console.log('새 사용자 입장:', socketId);
    remoteSocketId = socketId;
    
    // Offer 생성 및 전송
    const pc = createPeerConnection();
    const offer = await pc.createOffer();
    await pc.setLocalDescription(offer);
    
    socket.emit('offer', {
        target: socketId,
        sdp: offer
    });
});

// Offer 수신
socket.on('offer', async (data) => {
    console.log('Offer 수신:', data.sender);
    remoteSocketId = data.sender;
    
    const pc = createPeerConnection();
    await pc.setRemoteDescription(new RTCSessionDescription(data.sdp));
    
    // Answer 생성 및 전송
    const answer = await pc.createAnswer();
    await pc.setLocalDescription(answer);
    
    socket.emit('answer', {
        target: data.sender,
        sdp: answer
    });
});

// Answer 수신
socket.on('answer', async (data) => {
    console.log('Answer 수신:', data.sender);
    await peerConnection.setRemoteDescription(new RTCSessionDescription(data.sdp));
});

// ICE Candidate 수신
socket.on('ice-candidate', async (data) => {
    try {
        await peerConnection.addIceCandidate(new RTCIceCandidate(data.candidate));
    } catch (error) {
        console.error('ICE Candidate 추가 오류:', error);
    }
});

// 사용자 연결 해제
socket.on('user-disconnected', (socketId) => {
    console.log('사용자 퇴장:', socketId);
    if (peerConnection) {
        peerConnection.close();
        peerConnection = null;
    }
    document.getElementById('remoteVideo').srcObject = null;
});

// 페이지 로드 시 초기화
window.addEventListener('load', init);

🎨 HTML 구조

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>WebRTC 화상 통화</title>
    <style>
        .video-container {
            display: flex;
            gap: 20px;
            padding: 20px;
        }
        video {
            width: 45%;
            max-width: 600px;
            border-radius: 10px;
            box-shadow: 0 4px 15px rgba(0,0,0,0.2);
        }
        #localVideo {
            transform: scaleX(-1); /* 거울 효과 */
        }
    </style>
</head>
<body>
    <h1>WebRTC 화상 통화 데모</h1>
    
    <div class="video-container">
        <div>
            <h3>내 화면</h3>
            <video id="localVideo" autoplay muted playsinline></video>
        </div>
        
        <div>
            <h3>상대방 화면</h3>
            <video id="remoteVideo" autoplay playsinline></video>
        </div>
    </div>
    
    <script src="/socket.io/socket.io.js"></script>
    <script src="client.js"></script>
</body>
</html>

🎛️ 고급 기능 구현하기

🔇 음소거 / 비디오 끄기

// 오디오 토글
function toggleAudio() {
    const audioTrack = localStream.getAudioTracks()[0];
    if (audioTrack) {
        audioTrack.enabled = !audioTrack.enabled;
        console.log('오디오:', audioTrack.enabled ? '켜짐 🔊' : '꺼짐 🔇');
        return audioTrack.enabled;
    }
}

// 비디오 토글
function toggleVideo() {
    const videoTrack = localStream.getVideoTracks()[0];
    if (videoTrack) {
        videoTrack.enabled = !videoTrack.enabled;
        console.log('비디오:', videoTrack.enabled ? '켜짐 📹' : '꺼짐 📴');
        return videoTrack.enabled;
    }
}

// 버튼 이벤트 연결
document.getElementById('muteBtn').addEventListener('click', () => {
    const isEnabled = toggleAudio();
    // 버튼 UI 업데이트
    document.getElementById('muteBtn').textContent = isEnabled ? '🔊' : '🔇';
});

document.getElementById('videoBtn').addEventListener('click', () => {
    const isEnabled = toggleVideo();
    document.getElementById('videoBtn').textContent = isEnabled ? '📹' : '📴';
});

🖥️ 화면 공유

async function startScreenShare() {
    try {
        const screenStream = await navigator.mediaDevices.getDisplayMedia({
            video: {
                cursor: 'always'  // 마우스 커서 표시
            },
            audio: false
        });
        
        // 기존 비디오 트랙 교체
        const videoTrack = screenStream.getVideoTracks()[0];
        const sender = peerConnection.getSenders().find(s => 
            s.track && s.track.kind === 'video'
        );
        
        if (sender) {
            sender.replaceTrack(videoTrack);
        }
        
        // 로컬 비디오에도 표시
        document.getElementById('localVideo').srcObject = screenStream;
        
        // 화면 공유 중단 시 처리
        videoTrack.onended = () => {
            stopScreenShare();
        };
        
        console.log('화면 공유 시작! 🖥️');
        
    } catch (error) {
        console.error('화면 공유 오류:', error);
    }
}

function stopScreenShare() {
    // 원래 카메라로 복구
    const videoTrack = localStream.getVideoTracks()[0];
    const sender = peerConnection.getSenders().find(s => 
        s.track && s.track.kind === 'video'
    );
    
    if (sender) {
        sender.replaceTrack(videoTrack);
    }
    
    document.getElementById('localVideo').srcObject = localStream;
    console.log('화면 공유 종료! 📹');
}

💬 채팅 기능 추가

let dataChannel;

// PeerConnection 생성 시 DataChannel 추가
function createPeerConnection() {
    const pc = new RTCPeerConnection(configuration);
    
    // ... 기존 코드 ...
    
    // DataChannel 생성 (Offer 측에서만)
    dataChannel = pc.createDataChannel('chat');
    setupDataChannel(dataChannel);
    
    // DataChannel 수신 (Answer 측)
    pc.ondatachannel = (event) => {
        dataChannel = event.channel;
        setupDataChannel(dataChannel);
    };
    
    return pc;
}

function setupDataChannel(channel) {
    channel.onopen = () => {
        console.log('채팅 채널 연결됨! 💬');
        document.getElementById('chatInput').disabled = false;
    };
    
    channel.onmessage = (event) => {
        displayMessage(event.data, 'received');
    };
    
    channel.onclose = () => {
        console.log('채팅 채널 종료됨! ❌');
        document.getElementById('chatInput').disabled = true;
    };
}

function sendMessage() {
    const input = document.getElementById('chatInput');
    const message = input.value.trim();
    
    if (message && dataChannel && dataChannel.readyState === 'open') {
        dataChannel.send(message);
        displayMessage(message, 'sent');
        input.value = '';
    }
}

function displayMessage(text, type) {
    const chatBox = document.getElementById('chatBox');
    const messageDiv = document.createElement('div');
    messageDiv.className = `message ${type}`;
    messageDiv.textContent = text;
    chatBox.appendChild(messageDiv);
    chatBox.scrollTop = chatBox.scrollHeight;
}

📊 통계 및 품질 모니터링

async function getConnectionStats() {
    if (!peerConnection) return;
    
    const stats = await peerConnection.getStats();
    let statsOutput = '';
    
    stats.forEach(report => {
        if (report.type === 'inbound-rtp' && report.kind === 'video') {
            statsOutput += `
                📥 수신 비디오:
                - 해상도: ${report.frameWidth}x${report.frameHeight}
                - FPS: ${report.framesPerSecond}
                - 패킷 손실: ${report.packetsLost}
                - 지터: ${report.jitter}
            `;
        }
        
        if (report.type === 'outbound-rtp' && report.kind === 'video') {
            statsOutput += `
                📤 송신 비디오:
                - 비트레이트: ${(report.bytesSent * 8 / 1000).toFixed(2)} kbps
                - 전송 패킷: ${report.packetsSent}
            `;
        }
        
        if (report.type === 'candidate-pair' && report.state === 'succeeded') {
            statsOutput += `
                🌐 네트워크:
                - RTT: ${report.currentRoundTripTime * 1000}ms
                - 연결 타입: ${report.localCandidateType} → ${report.remoteCandidateType}
            `;
        }
    });
    
    console.log(statsOutput);
    return statsOutput;
}

// 5초마다 통계 업데이트
setInterval(() => {
    getConnectionStats();
}, 5000);

🎭 다자간 화상 회의 구현 (SFU 방식)

// SFU 서버 측 (간소화된 예제)
class SFURoom {
    constructor(roomId) {
        this.roomId = roomId;
        this.participants = new Map();
    }
    
    addParticipant(socketId, peerConnection) {
        this.participants.set(socketId, peerConnection);
        
        // 새 참가자에게 기존 참가자들의 스트림 전달
        this.participants.forEach((pc, id) => {
            if (id !== socketId) {
                // 기존 참가자의 트랙을 새 참가자에게 전달
                pc.getSenders().forEach(sender => {
                    if (sender.track) {
                        peerConnection.addTrack(sender.track);
                    }
                });
            }
        });
    }
    
    removeParticipant(socketId) {
        this.participants.delete(socketId);
        
        // 다른 참가자들에게 알림
        this.participants.forEach((pc, id) => {
            // 해당 참가자의 트랙 제거 로직
        });
    }
}

// 클라이언트 측
class MultiPartyCall {
    constructor() {
        this.peerConnections = new Map();
        this.remoteStreams = new Map();
    }
    
    async addParticipant(participantId) {
        const pc = new RTCPeerConnection(configuration);
        
        // 로컬 스트림 추가
        localStream.getTracks().forEach(track => {
            pc.addTrack(track, localStream);
        });
        
        // 원격 스트림 수신
        pc.ontrack = (event) => {
            this.remoteStreams.set(participantId, event.streams[0]);
            this.displayRemoteVideo(participantId, event.streams[0]);
        };
        
        this.peerConnections.set(participantId, pc);
        return pc;
    }
    
    displayRemoteVideo(participantId, stream) {
        let videoElement = document.getElementById(`video-${participantId}`);
        
        if (!videoElement) {
            videoElement = document.createElement('video');
            videoElement.id = `video-${participantId}`;
            videoElement.autoplay = true;
            videoElement.playsinline = true;
            document.getElementById('remoteVideos').appendChild(videoElement);
        }
        
        videoElement.srcObject = stream;
    }
    
    removeParticipant(participantId) {
        const pc = this.peerConnections.get(participantId);
        if (pc) {
            pc.close();
            this.peerConnections.delete(participantId);
        }
        
        const videoElement = document.getElementById(`video-${participantId}`);
        if (videoElement) {
            videoElement.remove();
        }
        
        this.remoteStreams.delete(participantId);
    }
}

🔐 보안 고려사항

🛡️ 기본 보안 기능

⚠️ 추가 보안 조치

// TURN 서버 인증 설정
const configuration = {
    iceServers: [
        { urls: 'stun:stun.l.google.com:19302' },
        {
            urls: 'turn:your-turn-server.com:3478',
            username: 'user123',
            credential: 'password123',
            credentialType: 'password'
        }
    ]
};

// 동적 인증 토큰 사용 (권장)
async function getTurnCredentials() {
    const response = await fetch('/api/turn-credentials', {
        headers: {
            'Authorization': `Bearer ${userToken}`
        }
    });
    
    const { username, credential } = await response.json();
    
    return {
        urls: 'turn:your-turn-server.com:3478',
        username: username,
        credential: credential,
        credentialType: 'password'
    };
}

🔑 방 접근 제어

// 서버 측: 방 접근 인증
io.on('connection', (socket) => {
    socket.on('join-room', async (data) => {
        const { roomId, token } = data;
        
        // 토큰 검증
        const isValid = await verifyToken(token);
        if (!isValid) {
            socket.emit('error', { message: '인증 실패' });
            return;
        }
        
        // 방 인원 제한 확인
        const room = io.sockets.adapter.rooms.get(roomId);
        if (room && room.size >= MAX_PARTICIPANTS) {
            socket.emit('error', { message: '방이 가득 찼습니다' });
            return;
        }
        
        socket.join(roomId);
        socket.emit('joined', { roomId });
    });
});

🐛 디버깅 및 문제 해결

❌ 자주 발생하는 오류들

async function requestMediaPermission() {
    try {
        const stream = await navigator.mediaDevices.getUserMedia({
            video: true,
            audio: true
        });
        return stream;
    } catch (error) {
        if (error.name === 'NotAllowedError') {
            alert('카메라와 마이크 권한이 필요합니다. 브라우저 설정에서 권한을 허용해주세요.');
        } else if (error.name === 'NotFoundError') {
            alert('카메라나 마이크를 찾을 수 없습니다. 장치가 연결되어 있는지 확인해주세요.');
        } else {
            alert('미디어 접근 오류: ' + error.message);
        }
        throw error;
    }
}

// ICE 연결 상태 모니터링
peerConnection.oniceconnectionstatechange = () => {
    console.log('ICE 연결 상태:', peerConnection.iceConnectionState);
    
    switch (peerConnection.iceConnectionState) {
        case 'checking':
            console.log('연결 경로 탐색 중...');
            break;
        case 'connected':
            console.log('P2P 연결 성공! ✅');
            break;
        case 'failed':
            console.error('연결 실패! TURN 서버 필요 ❌');
            // TURN 서버 재시도 로직
            restartIceWithTurn();
            break;
        case 'disconnected':
            console.warn('연결 끊김. 재연결 시도 중...');
            break;
        case 'closed':
            console.log('연결 종료됨');
            break;
    }
};

async function restartIceWithTurn() {
    // TURN 서버 추가 후 ICE 재시작
    const turnConfig = await getTurnCredentials();
    peerConnection.setConfiguration({
        iceServers: [
            { urls: 'stun:stun.l.google.com:19302' },
            turnConfig
        ]
    });
    
    // ICE 재시작
    const offer = await peerConnection.createOffer({ iceRestart: true });
    await peerConnection.setLocalDescription(offer);
    // Offer 전송...
}

// 해결 방법 1: 로컬 비디오 음소거
document.getElementById('localVideo').muted = true;

// 해결 방법 2: 에코 제거 옵션 활성화
const stream = await navigator.mediaDevices.getUserMedia({
    audio: {
        echoCancellation: true,
        noiseSuppression: true,
        autoGainControl: true
    },
    video: true
});

🔍 디버깅 도구

⚡ 성능 최적화 팁

📹 비디오 품질 조절

// 네트워크 상황에 따라 동적으로 비트레이트 조절
async function adjustVideoBitrate(bitrate) {
    const sender = peerConnection.getSenders().find(s => 
        s.track && s.track.kind === 'video'
    );
    
    if (!sender) return;
    
    const parameters = sender.getParameters();
    
    if (!parameters.encodings) {
        parameters.encodings = [{}];
    }
    
    parameters.encodings[0].maxBitrate = bitrate * 1000; // kbps to bps
    
    await sender.setParameters(parameters);
    console.log(`비트레이트 조절: ${bitrate} kbps`);
}

// 네트워크 상태 감지
let lastBytesReceived = 0;
let lastTimestamp = Date.now();

setInterval(async () => {
    const stats = await peerConnection.getStats();
    
    stats.forEach(report => {
        if (report.type === 'inbound-rtp' && report.kind === 'video') {
            const now = Date.now();
            const bytes = report.bytesReceived;
            const bitrate = (bytes - lastBytesReceived) * 8 / (now - lastTimestamp);
            
            // 네트워크가 느리면 품질 낮춤
            if (bitrate < 500) {  // 500 kbps 이하
                adjustVideoBitrate(300);
            } else if (bitrate > 2000) {  // 2 Mbps 이상
                adjustVideoBitrate(1500);
            }
            
            lastBytesReceived = bytes;
            lastTimestamp = now;
        }
    });
}, 3000);

🎨 Simulcast (다중 해상도 전송)

// Simulcast 활성화
async function enableSimulcast() {
    const sender = peerConnection.getSenders().find(s => 
        s.track && s.track.kind === 'video'
    );
    
    const parameters = sender.getParameters();
    
    if (!parameters.encodings) {
        parameters.encodings = [
            { rid: 'h', maxBitrate: 1500000 },  // 고화질
            { rid: 'm', maxBitrate: 600000, scaleResolutionDownBy: 2 },  // 중화질
            { rid: 'l', maxBitrate: 200000, scaleResolutionDownBy: 4 }   // 저화질
        ];
    }
    
    await sender.setParameters(parameters);
    console.log('Simulcast 활성화! 📡');
}

🔄 자동 재연결

class RobustPeerConnection {
    constructor(config) {
        this.config = config;
        this.pc = null;
        this.reconnectAttempts = 0;
        this.maxReconnectAttempts = 5;
        this.init();
    }
    
    init() {
        this.pc = new RTCPeerConnection(this.config);
        this.setupEventHandlers();
    }
    
    setupEventHandlers() {
        this.pc.oniceconnectionstatechange = () => {
            if (this.pc.iceConnectionState === 'failed') {
                this.handleConnectionFailure();
            } else if (this.pc.iceConnectionState === 'connected') {
                this.reconnectAttempts = 0;
                console.log('연결 복구 성공! ✅');
            }
        };
    }
    
    async handleConnectionFailure() {
        if (this.reconnectAttempts >= this.maxReconnectAttempts) {
            console.error('최대 재연결 시도 횟수 초과 ❌');
            this.onMaxReconnectFailed();
            return;
        }
        
        this.reconnectAttempts++;
        console.log(`재연결 시도 ${this.reconnectAttempts}/${this.maxReconnectAttempts}...`);
        
        // 지수 백오프 (exponential backoff)
        const delay = Math.min(1000 * Math.pow(2, this.reconnectAttempts), 10000);
        await new Promise(resolve => setTimeout(resolve, delay));
        
        // ICE 재시작
        const offer = await this.pc.createOffer({ iceRestart: true });
        await this.pc.setLocalDescription(offer);
        // Offer 전송 로직...
    }
    
    onMaxReconnectFailed() {
        // 사용자에게 알림
        alert('연결이 불안정합니다. 페이지를 새로고침해주세요.');
    }
}

🌟 실전 프로젝트 아이디어

1️⃣ 온라인 스터디 룸

2️⃣ 원격 의료 상담 플랫폼

3️⃣ 실시간 협업 화이트보드

4️⃣ 랜덤 채팅 룰렛

5️⃣ 온라인 면접 시스템

📚 유용한 라이브러리 및 프레임워크

🎯 추천 라이브러리

💻 Simple-Peer 예제

// Simple-Peer로 간단하게 구현하기
const SimplePeer = require('simple-peer');

// Initiator (호출자)
const peer1 = new SimplePeer({ initiator: true, stream: localStream });

peer1.on('signal', (data) => {
    // 시그널 데이터를 상대방에게 전송
    socket.emit('signal', data);
});

peer1.on('stream', (remoteStream) => {
    // 원격 스트림 수신
    remoteVideo.srcObject = remoteStream;
});

// Receiver (수신자)
const peer2 = new SimplePeer({ stream: localStream });

peer2.on('signal', (data) => {
    socket.emit('signal', data);
});

peer2.on('stream', (remoteStream) => {
    remoteVideo.srcObject = remoteStream;
});

// 상대방의 시그널 수신
socket.on('signal', (data) => {
    peer1.signal(data);  // 또는 peer2.signal(data)
});

// 이게 끝! 엄청 간단하지? 😎

🎓 학습 리소스 및 커뮤니티

🎬 마무리하며