✍️ 필사 모드: WebRTC 완전 가이드 2025: 실시간 비디오/오디오 통신, P2P, STUN/TURN, 시그널링, SFU/MCU

// 1. 카메라 접근
const stream = await navigator.mediaDevices.getUserMedia({
  video: true,
  audio: true
})
document.querySelector('video').srcObject = stream

// 2. P2P 연결
const pc = new RTCPeerConnection({
  iceServers: [{ urls: 'stun:stun.l.google.com:19302' }]
})

// 3. 로컬 스트림 추가
stream.getTracks().forEach(track => pc.addTrack(track, stream))

// 4. 원격 스트림 수신
pc.ontrack = (event) => {
  document.querySelector('#remote-video').srcObject = event.streams[0]
}

// 시그널링 서버 (Node.js)
const WebSocket = require('ws')
const wss = new WebSocket.Server({ port: 8080 })

wss.on('connection', (ws) => {
  ws.on('message', (msg) => {
    // 다른 클라이언트들에게 브로드캐스트
    wss.clients.forEach(client => {
      if (client !== ws && client.readyState === WebSocket.OPEN) {
        client.send(msg)
      }
    })
  })
})

v=0
o=- 4611731400430051336 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 9 0 8
a=rtcp-mux
a=rtpmap:111 opus/48000/2
m=video 9 UDP/TLS/RTP/SAVPF 96 97 98 99
a=rtcp-mux
a=rtpmap:96 VP8/90000

// Peer A (caller)
const offer = await pcA.createOffer()
await pcA.setLocalDescription(offer)
signalingChannel.send({ type: 'offer', sdp: offer.sdp })

// Peer B (callee)
signalingChannel.on('offer', async (offer) => {
  await pcB.setRemoteDescription(offer)
  const answer = await pcB.createAnswer()
  await pcB.setLocalDescription(answer)
  signalingChannel.send({ type: 'answer', sdp: answer.sdp })
})

// Peer A receives answer
signalingChannel.on('answer', async (answer) => {
  await pcA.setRemoteDescription(answer)
})

// 양쪽: ICE 후보 교환
pcA.onicecandidate = (event) => {
  if (event.candidate) {
    signalingChannel.send({ type: 'ice', candidate: event.candidate })
  }
}

[Client A] → STUN server → "당신의 공인 IP는 1.2.3.4:5678"
[Client B] → STUN server → "당신의 공인 IP는 5.6.7.8:9012"

const pc = new RTCPeerConnection({
  iceServers: [
    { urls: 'stun:stun.l.google.com:19302' },
    {
      urls: 'turn:my-turn-server.com:3478',
      username: 'user',
      credential: 'password'
    }
  ]
})

[A] ─stream─→ [SFU] ─stream─→ [B]
                  ├─stream─→ [C]
                  └─stream─→ [D]

const mediasoup = require('mediasoup')

// Worker 생성 (별도 프로세스)
const worker = await mediasoup.createWorker()
const router = await worker.createRouter({
  mediaCodecs: [
    { kind: 'audio', mimeType: 'audio/opus', clockRate: 48000, channels: 2 },
    { kind: 'video', mimeType: 'video/VP8', clockRate: 90000 }
  ]
})

// Producer (스트림 송신자)
const transport = await router.createWebRtcTransport({...})
const producer = await transport.produce({ kind: 'video', rtpParameters })

// Consumer (스트림 수신자)
const consumerTransport = await router.createWebRtcTransport({...})
const consumer = await consumerTransport.consume({
  producerId: producer.id,
  rtpCapabilities
})

// 송신자
const dc = pc.createDataChannel('my-channel', {
  ordered: true,           // 순서 보장
  maxRetransmits: 3        // 재전송 제한
})

dc.onopen = () => {
  dc.send('Hello!')
  dc.send(new Uint8Array([1, 2, 3]))  // 바이너리도 가능
}

// 수신자
pc.ondatachannel = (event) => {
  const channel = event.channel
  channel.onmessage = (e) => console.log('Received:', e.data)
}

const sender = pc.getSenders().find(s => s.track.kind === 'video')
const params = sender.getParameters()
params.encodings[0].maxBitrate = 1000000  // 1 Mbps
await sender.setParameters(params)

const transceiver = pc.addTransceiver(videoTrack, {
  sendEncodings: [
    { rid: 'q', maxBitrate: 100000, scaleResolutionDownBy: 4 },  // 240p
    { rid: 'h', maxBitrate: 500000, scaleResolutionDownBy: 2 },  // 480p
    { rid: 'f', maxBitrate: 1500000 }                             // 720p
  ]
})

const stream = await navigator.mediaDevices.getUserMedia({
  audio: {
    echoCancellation: true,
    noiseSuppression: true,
    autoGainControl: true
  }
})

const sender = pc.getSenders()[0]
const stream = sender.createEncodedStreams()
const transformStream = new TransformStream({
  transform(encodedFrame, controller) {
    // 추가 암호화
    encryptFrame(encodedFrame)
    controller.enqueue(encodedFrame)
  }
})
stream.readable.pipeThrough(transformStream).pipeTo(stream.writable)

const stats = await pc.getStats()
stats.forEach(report => {
  if (report.type === 'inbound-rtp') {
    console.log({
      packetsLost: report.packetsLost,
      jitter: report.jitter,
      bytesReceived: report.bytesReceived,
      framesPerSecond: report.framesPerSecond
    })
  }
})

import { Room } from 'livekit-client'

const room = new Room()
await room.connect('wss://my-livekit-server.com', token)

await room.localParticipant.enableCameraAndMicrophone()

room.on('participantConnected', (p) => {
  console.log('Joined:', p.identity)
})