WebRTC로 화상회의 앱 만들기 - P2P 통신 구현 완벽 가이드

WebRTC로 화상회의 앱 만들기 - P2P 통신 구현 완벽 가이드

 

현대 웹 개발에서 webrtc 화상회의 구현은 점점 더 중요한 기술로 자리잡고 있습니다.

코로나19 팬데믹 이후 원격 근무와 온라인 소통이 일상화되면서, 실시간 화상 통신 기술에 대한 수요가 급격히 증가했습니다.

이번 포스트에서는 WebRTC(Web Real-Time Communication) 기술을 활용해 peer to peer 방식의 화상회의 애플리케이션을 구현하는 방법을 단계별로 살펴보겠습니다.

---

WebRTC란 무엇인가?

WebRTC는 웹 브라우저와 모바일 애플리케이션에서 실시간 통신을 가능하게 하는 오픈소스 프로젝트입니다.

Google이 주도하여 개발된 이 기술은 별도의 플러그인이나 소프트웨어 설치 없이도

브라우저 간 직접적인 peer to peer 통신을 지원합니다.

 

WebRTC의 핵심 구성 요소는 다음과 같습니다:

MediaStream API: 사용자의 카메라와 마이크로부터 오디오/비디오 스트림을 캡처합니다.

RTCPeerConnection: 두 브라우저 간의 직접적인 연결을 설정하고 관리하는 핵심 API입니다.

RTCDataChannel: 텍스트나 바이너리 데이터를 실시간 통신으로 전송할 수 있는 채널을 제공합니다.

이러한 구성 요소들이 유기적으로 결합되어 강력한 webrtc 화상회의 구현을 가능하게 만듭니다.

WebRTC 아키텍처 다이어그램

---

WebRTC 화상회의의 핵심 원리

peer to peer 통신 방식은 중앙 서버를 거치지 않고 클라이언트들이 직접 데이터를 주고받는 방식입니다.

이는 기존의 서버 중심 아키텍처와 비교했을 때 여러 가지 장점을 제공합니다.

먼저 지연시간(latency)이 현저히 줄어듭니다.

데이터가 서버를 거치지 않고 직접 전송되기 때문에 실시간 통신에 최적화된 성능을 보여줍니다.

또한 서버 부하가 크게 감소합니다.

미디어 스트림이 서버를 경유하지 않으므로 대역폭 비용과 서버 자원을 절약할 수 있습니다.

하지만 peer to peer 방식에도 한계가 있습니다.

NAT(Network Address Translation)와 방화벽 환경에서는 직접 연결이 어려울 수 있으며,

이를 해결하기 위해 STUN/TURN 서버가 필요합니다.

 

WebRTC 연결 과정은 다음과 같은 시그널링 프로세스를 거칩니다:

1. Offer/Answer 교환을 통한 SDP(Session Description Protocol) 협상
2. ICE(Interactive Connectivity Establishment) 후보 수집 및 교환
3. 최적의 연결 경로 설정 및 미디어 스트림 전송 시작

이 과정을 통해 안정적이고 효율적인 webrtc 화상회의 구현이 가능해집니다.

---

개발 환경 설정 및 기본 구조

화상회의 앱 개발을 시작하기 위해서는 적절한 개발 환경을 구성해야 합니다.

모던 웹 개발 스택을 활용하여 확장 가능한 애플리케이션을 만들어보겠습니다.

// package.json 기본 설정
{
  "name": "webrtc-video-conference",
  "version": "1.0.0",
  "scripts": {
    "dev": "vite",
    "build": "vite build",
    "start": "node server.js"
  },
  "dependencies": {
    "socket.io": "^4.7.2",
    "express": "^4.18.2",
    "simple-peer": "^9.11.1"
  },
  "devDependencies": {
    "vite": "^4.4.0"
  }
}

프로젝트의 기본 디렉토리 구조는 다음과 같이 구성합니다:

webrtc-conference/
├── client/
│   ├── index.html
│   ├── style.css
│   └── main.js
├── server/
│   ├── server.js
│   └── signaling.js
└── package.json

클라이언트 사이드에서는 HTML5의 getUserMedia API를 사용하여 사용자의 미디어 스트림을 획득합니다.

서버 사이드에서는 Socket.IO를 활용하여 클라이언트 간 시그널링 메시지를 중계하는 역할을 담당합니다.

이러한 구조를 통해 효율적인 peer to peer 통신 기반의 화상회의 시스템을 구축할 수 있습니다.

프로젝트 구조 및 데이터 플로우 다이어그램

---

미디어 스트림 캡처 구현

webrtc 화상회의 구현의 첫 번째 단계는 사용자의 카메라와 마이크로부터 미디어 스트림을 캡처하는 것입니다.

getUserMedia API를 사용하여 이를 구현해보겠습니다.

// 미디어 스트림 캡처 함수
async function getLocalStream() {
    try {
        const constraints = {
            video: {
                width: { ideal: 1280 },
                height: { ideal: 720 },
                frameRate: { ideal: 30 }
            },
            audio: {
                echoCancellation: true,
                noiseSuppression: true,
                autoGainControl: true
            }
        };

        const stream = await navigator.mediaDevices.getUserMedia(constraints);
        const localVideo = document.getElementById('localVideo');
        localVideo.srcObject = stream;

        return stream;
    } catch (error) {
        console.error('미디어 스트림 캡처 실패:', error);
        handleMediaError(error);
    }
}

 

미디어 제약 조건을 세밀하게 설정하는 것이 중요합니다.

비디오의 경우 해상도와 프레임레이트를 적절히 조절하여 네트워크 대역폭과 성능의 균형을 맞춰야 합니다.

오디오 설정에서는 에코 제거, 노이즈 억제, 자동 게인 조절 등의 기능을 활성화하여 통화 품질을 향상시킵니다.

에러 처리 또한 중요한 요소입니다:

function handleMediaError(error) {
    switch (error.name) {
        case 'NotAllowedError':
            showError('카메라 및 마이크 접근이 거부되었습니다.');
            break;
        case 'NotFoundError':
            showError('카메라 또는 마이크를 찾을 수 없습니다.');
            break;
        case 'NotReadableError':
            showError('미디어 장치가 사용 중입니다.');
            break;
        default:
            showError('미디어 장치 접근 중 오류가 발생했습니다.');
    }
}

사용자 권한 요청과 장치 접근 실패에 대한 적절한 대응을 통해 사용자 경험을 개선할 수 있습니다.

이는 실시간 통신 애플리케이션에서 매우 중요한 요소입니다.

---

RTCPeerConnection 설정 및 시그널링

RTCPeerConnection은 peer to peer 연결의 핵심이 되는 API입니다.

두 클라이언트 간의 직접적인 통신을 가능하게 하며, 미디어 스트림과 데이터 채널을 관리합니다.

// RTCPeerConnection 설정
const configuration = {
    iceServers: [
        { urls: 'stun:stun.l.google.com:19302' },
        { urls: 'stun:stun1.l.google.com:19302' },
        {
            urls: 'turn:your-turn-server.com:3478',
            username: 'your-username',
            credential: 'your-password'
        }
    ]
};

class VideoConference {
    constructor() {
        this.localStream = null;
        this.peerConnection = new RTCPeerConnection(configuration);
        this.socket = io();

        this.setupPeerConnection();
        this.setupSocketEvents();
    }

    setupPeerConnection() {
        // ICE 후보 수집 이벤트
        this.peerConnection.onicecandidate = (event) => {
            if (event.candidate) {
                this.socket.emit('ice-candidate', event.candidate);
            }
        };

        // 원격 스트림 수신 이벤트
        this.peerConnection.ontrack = (event) => {
            const remoteVideo = document.getElementById('remoteVideo');
            remoteVideo.srcObject = event.streams[0];
        };

        // 연결 상태 변경 이벤트
        this.peerConnection.onconnectionstatechange = () => {
            console.log('연결 상태:', this.peerConnection.connectionState);
        };
    }
}

 

STUN 서버는 클라이언트의 공인 IP 주소를 확인하는 데 사용되며, Google에서 제공하는 무료 STUN 서버를 활용할 수 있습니다.

TURN 서버는 NAT나 방화벽으로 인해 직접 연결이 불가능한 경우 릴레이 역할을 담당합니다.

 

시그널링 과정은 다음과 같이 구현됩니다:

// Offer 생성 및 전송
async createOffer() {
    try {
        const offer = await this.peerConnection.createOffer();
        await this.peerConnection.setLocalDescription(offer);
        this.socket.emit('offer', offer);
    } catch (error) {
        console.error('Offer 생성 실패:', error);
    }
}

// Answer 생성 및 전송
async createAnswer(offer) {
    try {
        await this.peerConnection.setRemoteDescription(offer);
        const answer = await this.peerConnection.createAnswer();
        await this.peerConnection.setLocalDescription(answer);
        this.socket.emit('answer', answer);
    } catch (error) {
        console.error('Answer 생성 실패:', error);
    }
}

이러한 시그널링 과정을 통해 안정적인 webrtc 화상회의 구현이 가능해집니다.

WebRTC 공식 문서에서 더 자세한 정보를 확인할 수 있습니다.

WebRTC 시그널링 플로우 차트

---

Socket.IO를 활용한 시그널링 서버 구현

시그널링 서버는 클라이언트 간의 SDP(Session Description Protocol)와 ICE 후보를 교환하는 중개 역할을 담당합니다.

실시간 통신을 위해 WebSocket 기반의 Socket.IO를 활용하여 구현해보겠습니다.

// server.js - 시그널링 서버
const express = require('express');
const http = require('http');
const socketIo = require('socket.io');

const app = express();
const server = http.createServer(app);
const io = socketIo(server, {
    cors: {
        origin: "*",
        methods: ["GET", "POST"]
    }
});

// 룸 관리를 위한 데이터 구조
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, new Set());
        }

        const room = rooms.get(roomId);
        room.add(socket.id);

        // 기존 참가자들에게 새 사용자 알림
        socket.to(roomId).emit('user-joined', socket.id);

        // 새 사용자에게 기존 참가자 목록 전송
        const existingUsers = Array.from(room).filter(id => id !== socket.id);
        socket.emit('existing-users', existingUsers);
    });

    // Offer 전달
    socket.on('offer', (data) => {
        socket.to(data.target).emit('offer', {
            offer: data.offer,
            caller: socket.id
        });
    });

    // Answer 전달
    socket.on('answer', (data) => {
        socket.to(data.target).emit('answer', {
            answer: data.answer,
            answerer: socket.id
        });
    });

    // ICE 후보 전달
    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) => {
            if (room.has(socket.id)) {
                room.delete(socket.id);
                socket.to(roomId).emit('user-left', socket.id);

                // 빈 룸 정리
                if (room.size === 0) {
                    rooms.delete(roomId);
                }
            }
        });
    });
});

server.listen(3000, () => {
    console.log('시그널링 서버가 포트 3000에서 실행 중입니다.');
});

 

룸 기반 관리 시스템을 통해 다중 사용자 화상회의를 지원할 수 있습니다.

각 룸은 독립적으로 관리되며, 사용자의 참가와 떠남을 실시간으로 추적합니다.

클라이언트 사이드에서는 다음과 같이 시그널링 서버와 통신합니다:

// 클라이언트 시그널링 처리
setupSocketEvents() {
    // 새 사용자 참가 처리
    this.socket.on('user-joined', async (userId) => {
        console.log('새 사용자 참가:', userId);
        await this.createOfferForUser(userId);
    });

    // Offer 수신 처리
    this.socket.on('offer', async (data) => {
        console.log('Offer 수신:', data.caller);
        await this.handleOffer(data.offer, data.caller);
    });

    // Answer 수신 처리
    this.socket.on('answer', async (data) => {
        console.log('Answer 수신:', data.answerer);
        await this.handleAnswer(data.answer);
    });

    // ICE 후보 수신 처리
    this.socket.on('ice-candidate', async (data) => {
        try {
            await this.peerConnection.addIceCandidate(data.candidate);
        } catch (error) {
            console.error('ICE 후보 추가 실패:', error);
        }
    });
}

이러한 시그널링 메커니즘을 통해 효율적인 peer to peer 연결 설정이 가능해집니다.

---

화면 공유 및 부가 기능 구현

728x90

모던 화상회의 애플리케이션에서는 단순한 비디오 통화를 넘어서 다양한 부가 기능이 필요합니다.

화면 공유, 채팅, 파일 전송 등의 기능을 구현해보겠습니다.

// 화면 공유 기능 구현
class ScreenShare {
    constructor(videoConference) {
        this.videoConference = videoConference;
        this.isSharing = false;
        this.originalStream = null;
    }

    async startScreenShare() {
        try {
            const screenStream = await navigator.mediaDevices.getDisplayMedia({
                video: {
                    width: { ideal: 1920 },
                    height: { ideal: 1080 },
                    frameRate: { ideal: 15 }
                },
                audio: true
            });

            // 기존 비디오 스트림 백업
            this.originalStream = this.videoConference.localStream;

            // 화면 공유 스트림으로 교체
            const videoTrack = screenStream.getVideoTracks()[0];
            const sender = this.videoConference.peerConnection
                .getSenders()
                .find(s => s.track && s.track.kind === 'video');

            if (sender) {
                await sender.replaceTrack(videoTrack);
            }

            // 로컬 비디오 업데이트
            const localVideo = document.getElementById('localVideo');
            localVideo.srcObject = screenStream;

            this.isSharing = true;

            // 화면 공유 종료 감지
            videoTrack.onended = () => {
                this.stopScreenShare();
            };

        } catch (error) {
            console.error('화면 공유 시작 실패:', error);
        }
    }

    async stopScreenShare() {
        if (!this.isSharing || !this.originalStream) return;

        try {
            const videoTrack = this.originalStream.getVideoTracks()[0];
            const sender = this.videoConference.peerConnection
                .getSenders()
                .find(s => s.track && s.track.kind === 'video');

            if (sender && videoTrack) {
                await sender.replaceTrack(videoTrack);
            }

            // 로컬 비디오 복원
            const localVideo = document.getElementById('localVideo');
            localVideo.srcObject = this.originalStream;

            this.isSharing = false;

        } catch (error) {
            console.error('화면 공유 종료 실패:', error);
        }
    }
}

RTCDataChannel을 활용한 실시간 채팅 기능도 구현할 수 있습니다:

// 데이터 채널을 통한 채팅 기능
class ChatManager {
    constructor(peerConnection) {
        this.peerConnection = peerConnection;
        this.dataChannel = null;
        this.setupDataChannel();
    }

    setupDataChannel() {
        // 데이터 채널 생성 (호출자)
        this.dataChannel = this.peerConnection.createDataChannel('chat', {
            ordered: true
        });

        this.dataChannel.onopen = () => {
            console.log('채팅 채널 연결됨');
        };

        this.dataChannel.onmessage = (event) => {
            this.displayMessage(JSON.parse(event.data));
        };

        // 데이터 채널 수신 (피호출자)
        this.peerConnection.ondatachannel = (event) => {
            const channel = event.channel;
            channel.onmessage = (event) => {
                this.displayMessage(JSON.parse(event.data));
            };
        };
    }

    sendMessage(text) {
        if (this.dataChannel && this.dataChannel.readyState === 'open') {
            const message = {
                type: 'chat',
                text: text,
                timestamp: Date.now(),
                sender: 'local'
            };

            this.dataChannel.send(JSON.stringify(message));
            this.displayMessage({ ...message, sender: 'local' });
        }
    }

    displayMessage(message) {
        const chatContainer = document.getElementById('chatMessages');
        const messageElement = document.createElement('div');
        messageElement.className = `message ${message.sender}`;
        messageElement.innerHTML = `
            <span class="sender">${message.sender}:</span>
            <span class="text">${message.text}</span>
            <span class="time">${new Date(message.timestamp).toLocaleTimeString()}</span>
        `;
        chatContainer.appendChild(messageElement);
        chatContainer.scrollTop = chatContainer.scrollHeight;
    }
}

이러한 부가 기능들을 통해 완성도 높은 webrtc 화상회의 구현이 가능해집니다.

MDN WebRTC 가이드에서 더 많은 API 정보를 확인할 수 있습니다.

---

성능 최적화 및 네트워크 적응

실시간 통신 애플리케이션에서는 다양한 네트워크 환경에 대응할 수 있는 적응형 전략이 필요합니다.

WebRTC는 자동으로 비트레이트를 조절하지만, 개발자가 직접 제어할 수도 있습니다.

// 적응형 비트레이트 제어
class AdaptiveBitrate {
    constructor(peerConnection) {
        this.peerConnection = peerConnection;
        this.targetBitrate = 1000000; // 1Mbps
        this.minBitrate = 100000;     // 100Kbps
        this.maxBitrate = 2000000;    // 2Mbps

        this.startMonitoring();
    }

    async startMonitoring() {
        setInterval(async () => {
            const stats = await this.getConnectionStats();
            this.adjustBitrate(stats);
        }, 5000); // 5초마다 확인
    }

    async getConnectionStats() {
        const stats = await this.peerConnection.getStats();
        let packetsLost = 0;
        let packetsReceived = 0;
        let bytesReceived = 0;

        stats.forEach(report => {
            if (report.type === 'inbound-rtp' && report.kind === 'video') {
                packetsLost += report.packetsLost || 0;
                packetsReceived += report.packetsReceived || 0;
                bytesReceived += report.bytesReceived || 0;
            }
        });

        const packetLossRate = packetsLost / (packetsLost + packetsReceived);

        return {
            packetLossRate,
            bytesReceived,
            timestamp: Date.now()
        };
    }

    async adjustBitrate(stats) {
        let newBitrate = this.targetBitrate;

        // 패킷 손실률에 따른 비트레이트 조절
        if (stats.packetLossRate > 0.05) { // 5% 이상 손실
            newBitrate = Math.max(this.targetBitrate * 0.8, this.minBitrate);
        } else if (stats.packetLossRate < 0.01) { // 1% 미만 손실
            newBitrate = Math.min(this.targetBitrate * 1.2, this.maxBitrate);
        }

        if (newBitrate !== this.targetBitrate) {
            await this.setBitrate(newBitrate);
            this.targetBitrate = newBitrate;
        }
    }

    async setBitrate(bitrate) {
        const sender = this.peerConnection.getSenders()
            .find(s => s.track && s.track.kind === 'video');

        if (sender) {
            const params = sender.getParameters();
            if (params.encodings && params.encodings.length > 0) {
                params.encodings[0].maxBitrate = bitrate;
                await sender.setParameters(params);
            }
        }
    }
}

 

메모리 및 CPU 사용량 최적화도 중요합니다:

// 리소스 관리 및 정리
class ResourceManager {
    constructor() {
        this.streams = new Set();
        this.peerConnections = new Map();
    }

    addStream(stream) {
        this.streams.add(stream);

        // 스트림이 종료될 때 자동 정리
        stream.getTracks().forEach(track => {
            track.onended = () => {
                this.removeStream(stream);
            };
        });
    }

    removeStream(stream) {
        if (this.streams.has(stream)) {
            stream.getTracks().forEach(track => track.stop());
            this.streams.delete(stream);
        }
    }

    addPeerConnection(id, pc) {
        this.peerConnections.set(id, pc);

        pc.onconnectionstatechange = () => {
            if (pc.connectionState === 'closed' || 
                pc.connectionState === 'failed') {
                this.removePeerConnection(id);
            }
        };
    }

    removePeerConnection(id) {
        const pc = this.peerConnections.get(id);
        if (pc) {
            pc.close();
            this.peerConnections.delete(id);
        }
    }

    // 전체 리소스 정리
    cleanup() {
        this.streams.forEach(stream => this.removeStream(stream));
        this.peerConnections.forEach((pc, id) => this.removePeerConnection(id));
    }
}

이러한 최적화 기법들을 통해 다양한 환경에서 안정적인 peer to peer 통신을 제공할 수 있습니다.

---

보안 및 개인정보 보호

반응형

WebRTC는 기본적으로 강력한 보안 기능을 제공하지만, 추가적인 보안 조치가 필요합니다.

모든 미디어 스트림과 데이터는 DTLS(Datagram Transport Layer Security)로 암호화됩니다.

// 보안 강화를 위한 설정
const secureConfiguration = {
    iceServers: [
        { urls: 'stun:stun.l.google.com:19302' },
        {
            urls: 'turns:secure-turn-server.com:443',
            username: 'secure-user',
            credential: 'secure-password'
        }
    ],
    iceCandidatePoolSize: 10,
    bundlePolicy: 'max-bundle',
    rtcpMuxPolicy: 'require'
};

// 방 입장 시 인증 처리
class RoomAuth {
    constructor() {
        this.authToken = null;
    }

    async authenticateUser(roomId, password) {
        try {
            const response = await fetch('/api/auth/room', {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/json'
                },
                body: JSON.stringify({
                    roomId,
                    password: this.hashPassword(password)
                })
            });

            if (response.ok) {
                const data = await response.json();
                this.authToken = data.token;
                return true;
            }

            return false;
        } catch (error) {
            console.error('인증 실패:', error);
            return false;
        }
    }

    hashPassword(password) {
        // 실제로는 bcrypt 등의 라이브러리 사용 권장
        return btoa(password);
    }

    validateToken() {
        if (!this.authToken) {
            throw new Error('인증되지 않은 사용자입니다.');
        }

        // JWT 토큰 검증 로직
        const payload = JSON.parse(atob(this.authToken.split('.')[1]));
        if (payload.exp < Date.now() / 1000) {
            throw new Error('토큰이 만료되었습니다.');
        }

        return true;
    }
}

 

개인정보 보호를 위한 추가 조치들:

// 미디어 스트림 개인정보 보호
class PrivacyManager {
    constructor() {
        this.blurEnabled = false;
        this.audioMuted = false;
        this.videoDisabled = false;
    }

    // 배경 블러 처리 (Canvas API 활용)
    async enableVideoBlur(videoElement) {
        const canvas = document.createElement('canvas');
        const ctx = canvas.getContext('2d');

        canvas.width = videoElement.videoWidth;
        canvas.height = videoElement.videoHeight;

        const processFrame = () => {
            if (!this.blurEnabled) return;

            ctx.filter = 'blur(10px)';
            ctx.drawImage(videoElement, 0, 0);

            // 얼굴 영역만 선명하게 (실제로는 ML 모델 필요)
            ctx.filter = 'none';
            ctx.globalCompositeOperation = 'source-over';

            requestAnimationFrame(processFrame);
        };

        this.blurEnabled = true;
        processFrame();

        return canvas.captureStream(30);
    }

    // 오디오 음소거 토글
    toggleAudioMute() {
        this.audioMuted = !this.audioMuted;
        const audioTracks = this.localStream.getAudioTracks();
        audioTracks.forEach(track => {
            track.enabled = !this.audioMuted;
        });
    }

    // 비디오 비활성화 토글
    toggleVideoDisable() {
        this.videoDisabled = !this.videoDisabled;
        const videoTracks = this.localStream.getVideoTracks();
        videoTracks.forEach(track => {
            track.enabled = !this.videoDisabled;
        });
    }
}

이러한 보안 조치들을 통해 사용자의 개인정보를 보호하면서도 안전한 webrtc 화상회의 구현이 가능합니다.

---

다중 참가자 지원 및 확장성

다중 참가자 화상회의를 위해서는 여러 가지 아키텍처 패턴을 고려해야 합니다.

Mesh, MCU(Multipoint Control Unit), SFU(Selective Forwarding Unit) 등의 방식이 있으며, 각각의 장단점을 이해하고 적절한 방식을 선택해야 합니다.

// SFU 방식을 활용한 다중 참가자 관리
class MultiPartyConference {
    constructor() {
        this.participants = new Map();
        this.localStream = null;
        this.socket = io();
        this.setupSocketEvents();
    }

    async joinRoom(roomId, maxParticipants = 10) {
        try {
            this.localStream = await this.getLocalStream();
            this.socket.emit('join-room', {
                roomId,
                maxParticipants
            });
        } catch (error) {
            console.error('방 참가 실패:', error);
        }
    }

    async handleNewParticipant(participantId) {
        if (this.participants.size >= 10) {
            console.warn('최대 참가자 수에 도달했습니다.');
            return;
        }

        const peerConnection = new RTCPeerConnection(configuration);

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

        // 원격 스트림 처리
        peerConnection.ontrack = (event) => {
            this.displayRemoteVideo(participantId, event.streams[0]);
        };

        // ICE 후보 처리
        peerConnection.onicecandidate = (event) => {
            if (event.candidate) {
                this.socket.emit('ice-candidate', {
                    target: participantId,
                    candidate: event.candidate
                });
            }
        };

        this.participants.set(participantId, peerConnection);

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

        this.socket.emit('offer', {
            target: participantId,
            offer: offer
        });
    }

    displayRemoteVideo(participantId, stream) {
        const videoContainer = document.getElementById('remoteVideos');

        // 기존 비디오 엘리먼트 제거
        const existingVideo = document.getElementById(`video-${participantId}`);
        if (existingVideo) {
            existingVideo.remove();
        }

        // 새 비디오 엘리먼트 생성
        const videoElement = document.createElement('video');
        videoElement.id = `video-${participantId}`;
        videoElement.srcObject = stream;
        videoElement.autoplay = true;
        videoElement.playsInline = true;
        videoElement.muted = false;

        // 반응형 그리드 레이아웃 적용
        this.updateVideoLayout();

        videoContainer.appendChild(videoElement);
    }

    updateVideoLayout() {
        const container = document.getElementById('remoteVideos');
        const participantCount = this.participants.size + 1; // +1 for local video

        let gridClass = '';
        if (participantCount <= 2) {
            gridClass = 'grid-1x2';
        } else if (participantCount <= 4) {
            gridClass = 'grid-2x2';
        } else if (participantCount <= 6) {
            gridClass = 'grid-2x3';
        } else {
            gridClass = 'grid-3x3';
        }

        container.className = `video-grid ${gridClass}`;
    }

    async handleParticipantLeft(participantId) {
        const peerConnection = this.participants.get(participantId);
        if (peerConnection) {
            peerConnection.close();
            this.participants.delete(participantId);

            // 비디오 엘리먼트 제거
            const videoElement = document.getElementById(`video-${participantId}`);
            if (videoElement) {
                videoElement.remove();
            }

            this.updateVideoLayout();
        }
    }
}

 

대역폭 최적화를 위한 동적 해상도 조절:

// 참가자 수에 따른 동적 품질 조절
class QualityManager {
    constructor(multiPartyConference) {
        this.conference = multiPartyConference;
        this.qualityLevels = {
            high: { width: 1280, height: 720, frameRate: 30 },
            medium: { width: 640, height: 480, frameRate: 24 },
            low: { width: 320, height: 240, frameRate: 15 }
        };
    }

    getOptimalQuality(participantCount) {
        if (participantCount <= 2) {
            return this.qualityLevels.high;
        } else if (participantCount <= 4) {
            return this.qualityLevels.medium;
        } else {
            return this.qualityLevels.low;
        }
    }

    async adjustAllPeersQuality() {
        const participantCount = this.conference.participants.size + 1;
        const optimalQuality = this.getOptimalQuality(participantCount);

        // 모든 참가자의 송신 품질 조절
        this.conference.participants.forEach(async (peerConnection) => {
            const sender = peerConnection.getSenders()
                .find(s => s.track && s.track.kind === 'video');

            if (sender) {
                const params = sender.getParameters();
                if (params.encodings && params.encodings.length > 0) {
                    params.encodings[0].maxFramerate = optimalQuality.frameRate;
                    params.encodings[0].maxBitrate = this.calculateBitrate(optimalQuality);
                    await sender.setParameters(params);
                }
            }
        });
    }

    calculateBitrate(quality) {
        const pixelCount = quality.width * quality.height;
        const baseRate = 0.1; // bits per pixel per frame
        return pixelCount * baseRate * quality.frameRate;
    }
}

이러한 접근 방식을 통해 확장 가능한 peer to peer 기반 다중 참가자 화상회의 시스템을 구축할 수 있습니다.

---

에러 처리 및 연결 복구

안정적인 실시간 통신 애플리케이션을 위해서는 포괄적인 에러 처리와 연결 복구 메커니즘이 필수입니다.

네트워크 불안정, 브라우저 호환성 문제, 미디어 장치 오류 등 다양한 상황에 대응해야 합니다.

// 포괄적인 에러 처리 및 복구 시스템
class ConnectionRecovery {
    constructor(videoConference) {
        this.conference = videoConference;
        this.reconnectAttempts = 0;
        this.maxReconnectAttempts = 5;
        this.reconnectDelay = 1000;
        this.connectionHealthCheck();
    }

    async connectionHealthCheck() {
        setInterval(() => {
            this.conference.participants.forEach(async (peerConnection, participantId) => {
                const connectionState = peerConnection.connectionState;

                if (connectionState === 'failed' || connectionState === 'disconnected') {
                    console.warn(`참가자 ${participantId} 연결 문제 감지:`, connectionState);
                    await this.attemptReconnection(participantId);
                }
            });
        }, 10000); // 10초마다 확인
    }

    async attemptReconnection(participantId) {
        if (this.reconnectAttempts >= this.maxReconnectAttempts) {
            console.error('최대 재연결 시도 횟수 초과');
            this.handleConnectionFailure(participantId);
            return;
        }

        this.reconnectAttempts++;
        console.log(`재연결 시도 ${this.reconnectAttempts}/${this.maxReconnectAttempts}`);

        try {
            // 기존 연결 정리
            const oldConnection = this.conference.participants.get(participantId);
            if (oldConnection) {
                oldConnection.close();
            }

            // 새 연결 생성
            await this.conference.handleNewParticipant(participantId);

            // 재연결 성공 시 카운터 리셋
            this.reconnectAttempts = 0;

        } catch (error) {
            console.error('재연결 실패:', error);

            // 지수 백오프 적용
            const delay = this.reconnectDelay * Math.pow(2, this.reconnectAttempts - 1);
            setTimeout(() => {
                this.attemptReconnection(participantId);
            }, delay);
        }
    }

    handleConnectionFailure(participantId) {
        // 사용자에게 알림 표시
        this.showNotification(`참가자와의 연결이 끊어졌습니다. (ID: ${participantId})`);

        // 해당 참가자 제거
        this.conference.handleParticipantLeft(participantId);

        // 대안적 연결 방법 제안
        this.suggestAlternativeConnection();
    }

    suggestAlternativeConnection() {
        const modal = document.createElement('div');
        modal.className = 'connection-error-modal';
        modal.innerHTML = `
            <div class="modal-content">
                <h3>연결 문제 해결</h3>
                <p>다음 방법을 시도해보세요:</p>
                <ul>
                    <li>브라우저를 새로고침 해보세요</li>
                    <li>네트워크 연결을 확인해보세요</li>
                    <li>VPN을 사용 중이라면 잠시 비활성화해보세요</li>
                    <li>다른 브라우저를 사용해보세요</li>
                </ul>
                <button onclick="location.reload()">새로고침</button>
                <button onclick="this.parentElement.parentElement.remove()">닫기</button>
            </div>
        `;
        document.body.appendChild(modal);
    }

    showNotification(message, type = 'warning') {
        const notification = document.createElement('div');
        notification.className = `notification ${type}`;
        notification.textContent = message;

        document.body.appendChild(notification);

        setTimeout(() => {
            notification.remove();
        }, 5000);
    }
}

// 브라우저 호환성 검사
class CompatibilityChecker {
    static checkWebRTCSupport() {
        const errors = [];

        if (!navigator.mediaDevices) {
            errors.push('MediaDevices API가 지원되지 않습니다.');
        }

        if (!navigator.mediaDevices.getUserMedia) {
            errors.push('getUserMedia API가 지원되지 않습니다.');
        }

        if (!window.RTCPeerConnection) {
            errors.push('RTCPeerConnection이 지원되지 않습니다.');
        }

        if (!navigator.mediaDevices.getDisplayMedia) {
            console.warn('화면 공유 기능이 지원되지 않습니다.');
        }

        return {
            isSupported: errors.length === 0,
            errors: errors
        };
    }

    static displayCompatibilityWarning(errors) {
        const warningDiv = document.createElement('div');
        warningDiv.className = 'compatibility-warning';
        warningDiv.innerHTML = `
            <h3>브라우저 호환성 문제</h3>
            <p>다음 기능들이 지원되지 않습니다:</p>
            <ul>
                ${errors.map(error => `<li>${error}</li>`).join('')}
            </ul>
            <p>최신 버전의 Chrome, Firefox, Safari, Edge를 사용하시기 바랍니다.</p>
        `;

        document.body.insertBefore(warningDiv, document.body.firstChild);
    }
}

 

미디어 장치 관리 및 에러 처리:

// 미디어 장치 상태 모니터링
class MediaDeviceManager {
    constructor() {
        this.devices = {
            audioInput: [],
            videoInput: [],
            audioOutput: []
        };

        this.monitorDeviceChanges();
    }

    async updateDeviceList() {
        try {
            const devices = await navigator.mediaDevices.enumerateDevices();

            this.devices.audioInput = devices.filter(d => d.kind === 'audioinput');
            this.devices.videoInput = devices.filter(d => d.kind === 'videoinput');
            this.devices.audioOutput = devices.filter(d => d.kind === 'audiooutput');

            this.updateDeviceUI();

        } catch (error) {
            console.error('장치 목록 업데이트 실패:', error);
        }
    }

    monitorDeviceChanges() {
        navigator.mediaDevices.ondevicechange = () => {
            console.log('미디어 장치 변경 감지');
            this.updateDeviceList();
            this.handleDeviceChange();
        };
    }

    async handleDeviceChange() {
        // 현재 사용 중인 장치가 제거되었는지 확인
        const currentDevices = await navigator.mediaDevices.enumerateDevices();
        const currentDeviceIds = currentDevices.map(d => d.deviceId);

        // 사용 중인 스트림의 장치 ID 확인
        if (this.currentStream) {
            const tracks = this.currentStream.getTracks();

            for (const track of tracks) {
                const settings = track.getSettings();
                if (settings.deviceId && !currentDeviceIds.includes(settings.deviceId)) {
                    console.warn('사용 중인 장치가 제거됨:', settings.deviceId);
                    await this.switchToAlternativeDevice(track.kind);
                }
            }
        }
    }

    async switchToAlternativeDevice(kind) {
        try {
            const availableDevices = kind === 'audio' 
                ? this.devices.audioInput 
                : this.devices.videoInput;

            if (availableDevices.length > 0) {
                const constraints = {
                    [kind]: {
                        deviceId: { exact: availableDevices[0].deviceId }
                    }
                };

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

                // 기존 트랙 교체
                await this.replaceTrack(kind, newStream);

                this.showNotification(`${kind} 장치가 자동으로 변경되었습니다.`);
            }
        } catch (error) {
            console.error('대체 장치 전환 실패:', error);
            this.showNotification('미디어 장치 문제가 발생했습니다.', 'error');
        }
    }
}

이러한 에러 처리 및 복구 메커니즘을 통해 안정적이고 신뢰할 수 있는 webrtc 화상회의 구현을 제공할 수 있습니다.

---

테스트 및 배포 전략

완성된 화상회의 애플리케이션의 품질 보장을 위해서는 체계적인 테스트와 배포 전략이 필요합니다.

다양한 브라우저, 네트워크 환경, 디바이스에서의 호환성을 검증해야 합니다.

// 자동화된 WebRTC 테스트 스위트
class WebRTCTestSuite {
    constructor() {
        this.testResults = [];
    }

    async runAllTests() {
        console.log('WebRTC 테스트 시작...');

        await this.testMediaDeviceAccess();
        await this.testPeerConnectionEstablishment();
        await this.testDataChannelCommunication();
        await this.testNetworkAdaptation();

        this.generateTestReport();
    }

    async testMediaDeviceAccess() {
        const testName = 'Media Device Access';
        console.log(`테스트 실행: ${testName}`);

        try {
            const stream = await navigator.mediaDevices.getUserMedia({
                video: true,
                audio: true
            });

            const videoTracks = stream.getVideoTracks();
            const audioTracks = stream.getAudioTracks();

            const result = {
                name: testName,
                status: 'PASS',
                details: {
                    videoTracks: videoTracks.length,
                    audioTracks: audioTracks.length,
                    videoResolution: videoTracks[0]?.getSettings()
                }
            };

            // 스트림 정리
            stream.getTracks().forEach(track => track.stop());

            this.testResults.push(result);

        } catch (error) {
            this.testResults.push({
                name: testName,
                status: 'FAIL',
                error: error.message
            });
        }
    }

    async testPeerConnectionEstablishment() {
        const testName = 'Peer Connection Establishment';
        console.log(`테스트 실행: ${testName}`);

        try {
            const pc1 = new RTCPeerConnection();
            const pc2 = new RTCPeerConnection();

            // 연결 상태 추적
            let connectionEstablished = false;

            pc1.onconnectionstatechange = () => {
                if (pc1.connectionState === 'connected') {
                    connectionEstablished = true;
                }
            };

            // 시그널링 시뮬레이션
            pc1.onicecandidate = (event) => {
                if (event.candidate) {
                    pc2.addIceCandidate(event.candidate);
                }
            };

            pc2.onicecandidate = (event) => {
                if (event.candidate) {
                    pc1.addIceCandidate(event.candidate);
                }
            };

            // Offer/Answer 교환
            const offer = await pc1.createOffer();
            await pc1.setLocalDescription(offer);
            await pc2.setRemoteDescription(offer);

            const answer = await pc2.createAnswer();
            await pc2.setLocalDescription(answer);
            await pc1.setRemoteDescription(answer);

            // 연결 대기
            await new Promise((resolve) => {
                const checkConnection = () => {
                    if (connectionEstablished) {
                        resolve();
                    } else {
                        setTimeout(checkConnection, 100);
                    }
                };
                setTimeout(() => resolve(), 5000); // 5초 타임아웃
                checkConnection();
            });

            this.testResults.push({
                name: testName,
                status: connectionEstablished ? 'PASS' : 'FAIL',
                details: {
                    pc1State: pc1.connectionState,
                    pc2State: pc2.connectionState
                }
            });

            // 연결 정리
            pc1.close();
            pc2.close();

        } catch (error) {
            this.testResults.push({
                name: testName,
                status: 'FAIL',
                error: error.message
            });
        }
    }

    generateTestReport() {
        const passCount = this.testResults.filter(r => r.status === 'PASS').length;
        const failCount = this.testResults.filter(r => r.status === 'FAIL').length;

        const report = {
            timestamp: new Date().toISOString(),
            totalTests: this.testResults.length,
            passed: passCount,
            failed: failCount,
            results: this.testResults
        };

        console.log('테스트 리포트:', report);
        return report;
    }
}

 

배포 환경 최적화:

// 프로덕션 환경 설정
class ProductionConfig {
    static getOptimizedConfig() {
        return {
            iceServers: [
                { urls: 'stun:stun.l.google.com:19302' },
                { urls: 'stun:stun1.l.google.com:19302' },
                // 프로덕션 TURN 서버 설정
                {
                    urls: [
                        'turn:turnserver1.example.com:3478',
                        'turn:turnserver2.example.com:3478'
                    ],
                    username: process.env.TURN_USERNAME,
                    credential: process.env.TURN_PASSWORD
                }
            ],
            bundlePolicy: 'max-bundle',
            rtcpMuxPolicy: 'require',
            iceCandidatePoolSize: 10
        };
    }

    static setupErrorReporting() {
        window.addEventListener('error', (event) => {
            console.error('글로벌 에러:', event.error);
            // 에러 리포팅 서비스로 전송
            this.sendErrorReport({
                message: event.error.message,
                stack: event.error.stack,
                url: window.location.href,
                userAgent: navigator.userAgent,
                timestamp: new Date().toISOString()
            });
        });

        window.addEventListener('unhandledrejection', (event) => {
            console.error('처리되지 않은 Promise 거부:', event.reason);
            this.sendErrorReport({
                type: 'unhandledrejection',
                reason: event.reason,
                url: window.location.href,
                timestamp: new Date().toISOString()
            });
        });
    }

    static async sendErrorReport(errorData) {
        try {
            await fetch('/api/error-report', {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/json'
                },
                body: JSON.stringify(errorData)
            });
        } catch (error) {
            console.error('에러 리포팅 실패:', error);
        }
    }
}

이러한 테스트와 배포 전략을 통해 안정적이고 확장 가능한 peer to peer 화상회의 시스템을 구축할 수 있습니다.

---

결론 및 향후 발전 방향

WebRTC 기술을 활용한 webrtc 화상회의 구현은 현대 웹 개발의 핵심 기술 중 하나가 되었습니다.

peer to peer 방식의 실시간 통신을 통해 서버 부하를 줄이고 지연시간을 최소화할 수 있으며,

다양한 플랫폼에서 일관된 사용자 경험을 제공할 수 있습니다.

 

본 가이드에서 다룬 주요 구현 사항들을 정리하면:

미디어 스트림 캡처와 관리를 통한 고품질 오디오/비디오 처리 기술을 습득했습니다.

RTCPeerConnection과 시그널링 프로세스를 이해하여 안정적인 peer to peer 연결을 구현할 수 있게 되었습니다.

다중 참가자 지원과 확장성을 고려한 아키텍처 설계 방법을 학습했습니다.

보안과 개인정보 보호를 위한 실용적인 방법들을 살펴보았습니다.

 

향후 WebRTC 기술은 더욱 발전할 것으로 예상됩니다:

AI 기술 통합: 실시간 배경 제거, 노이즈 감소, 자동 카메라 조절 등의 기능이 브라우저 레벨에서 지원될 것입니다.

5G와 Edge Computing: 초저지연 네트워크와 엣지 컴퓨팅의 발전으로 더욱 향상된 실시간 통신 품질을 기대할 수 있습니다.

WebAssembly 활용: 복잡한 미디어 처리 로직을 WebAssembly로 구현하여 성능을 크게 향상시킬 수 있습니다.

IoT 기기 연동: 스마트 디바이스와의 연동을 통한 새로운 형태의 화상회의 경험이 가능해질 것입니다.

WebRTC 기술을 마스터한 개발자라면 화상회의뿐만 아니라

온라인 게임, 협업 도구, 교육 플랫폼 등 다양한 분야에서 혁신적인 애플리케이션을 개발할 수 있을 것입니다.

지속적인 학습과 실습을 통해 더욱 고도화된 webrtc 화상회의 구현 기술을 발전시켜 나가시기 바랍니다.