📹 WebRTC 실시간 미디어 통신 완벽 가이드: SDP, ICE부터 SFU 아키텍처까지

// 1. 미디어 스트림 획득 및 제약 조건 설정 예시
async function getLocalStream() {
  try {
    const constraints = {
      video: {
        width: { ideal: 1280, max: 1920 },
        height: { ideal: 720, max: 1080 },
        frameRate: { ideal: 30, max: 60 }
      },
      audio: {
        echoCancellation: true,
        noiseSuppression: true,
        autoGainControl: true
      }
    };
    
    const stream = await navigator.mediaDevices.getUserMedia(constraints);
    const videoElement = document.getElementById('myVideo');
    if (videoElement) {
      videoElement.srcObject = stream;
    }
    return stream;
  } catch (err) {
    console.error('카메라/마이크 접근 실패 (NotAllowedError 또는 NotFoundError):', err);
    throw err;
  }
}

v=0
o=- 42039201948290 2 IN IP4 127.0.0.1
s=-
t=0 0
a=group:BUNDLE 0 1
m=audio 9 UDP/TLS/RTP/SAVPF 111 103 104
a=rtpmap:111 opus/48000/2
m=video 9 UDP/TLS/RTP/SAVPF 96 97 98
a=rtpmap:96 VP8/90000

// RTCPeerConnection 생성 시 ICE 서버 구성 및 설정 예시
const configuration = {
  iceServers: [
    { urls: 'stun:stun.l.google.com:19302' },
    {
      urls: 'turn:my-turn-server.example.com:3478',
      username: 'user123',
      credential: 'password_secret'
    }
  ],
  iceTransportPolicy: 'all', // 'relay' 지정 시 TURN만 강제 사용 가능
  bundlePolicy: 'max-bundle'
};
const peerConnection = new RTCPeerConnection(configuration);

// peer.js - 피어 연결 관리 클래스
class WebRTCClient {
  constructor(socket) {
    this.socket = socket;
    this.pc = new RTCPeerConnection({
      iceServers: [{ urls: 'stun:stun.l.google.com:19302' }]
    });
    this.candidateQueue = [];
    this.isRemoteDescriptionSet = false;
    this.initListeners();
  }

  initListeners() {
    // 1. ICE Candidate 수집 시 상대방에게 전달
    this.pc.onicecandidate = (event) => {
      if (event.candidate) {
        this.socket.emit('ice-candidate', event.candidate);
      }
    };

    // 2. 상대방의 미디어 트랙 수신 시
    this.pc.ontrack = (event) => {
      const remoteVideo = document.getElementById('remoteVideo');
      if (remoteVideo && event.streams[0]) {
        remoteVideo.srcObject = event.streams[0];
      }
    };
  }

  // Offer 생성 및 송신
  async makeOffer() {
    try {
      const offer = await this.pc.createOffer();
      await this.pc.setLocalDescription(offer);
      this.socket.emit('offer', offer);
    } catch (err) {
      console.error('Offer 생성 오류:', err);
    }
  }

  // Offer 수신 처리 및 Answer 생성
  async handleOffer(offer) {
    try {
      await this.pc.setRemoteDescription(new RTCSessionDescription(offer));
      this.isRemoteDescriptionSet = true;
      this.processCandidateQueue();

      const answer = await this.pc.createAnswer();
      await this.pc.setLocalDescription(answer);
      this.socket.emit('answer', answer);
    } catch (err) {
      console.error('Offer 핸들링 오류:', err);
    }
  }

  // Answer 수신 처리
  async handleAnswer(answer) {
    try {
      await this.pc.setRemoteDescription(new RTCSessionDescription(answer));
      this.isRemoteDescriptionSet = true;
      this.processCandidateQueue();
    } catch (err) {
      console.error('Answer 핸들링 오류:', err);
    }
  }

  // ICE Candidate 추가 (Race Condition 방지 큐 적용)
  async handleCandidate(candidate) {
    const iceCandidate = new RTCIceCandidate(candidate);
    if (!this.isRemoteDescriptionSet) {
      this.candidateQueue.push(iceCandidate);
      return;
    }
    try {
      await this.pc.addIceCandidate(iceCandidate);
    } catch (e) {
      console.error('ICE Candidate 추가 오류:', e);
    }
  }

  // 큐에 대기 중인 Candidate 일괄 처리
  async processCandidateQueue() {
    while (this.candidateQueue.length > 0) {
      const candidate = this.candidateQueue.shift();
      try {
        await this.pc.addIceCandidate(candidate);
      } catch (e) {
        console.error('큐 내 ICE Candidate 추가 오류:', e);
      }
    }
  }
}

async function startScreenShare(peerConnection) {
  try {
    const screenStream = await navigator.mediaDevices.getDisplayMedia({
      video: { 
        cursor: "always",
        displaySurface: "monitor"
      },
      audio: false
    });
    const screenTrack = screenStream.getVideoTracks()[0];

    // RTCRtpSender를 통해 피어 커넥션 재연결 없이 비디오 트랙만 교체
    const senders = peerConnection.getSenders();
    const videoSender = senders.find(s => s.track && s.track.kind === 'video');
    
    if (videoSender) {
      await videoSender.replaceTrack(screenTrack);
    }

    // 사용자가 브라우저 기본 UI의 '공유 중단' 버튼을 누른 경우 처리
    screenTrack.onended = async () => {
      console.log('사용자에 의해 화면 공유 종료됨');
      // 원래 카메라 스트림 복구 로직 연동 가능
    };
  } catch (err) {
    console.error('화면 공유 실패:', err);
  }
}