@fuzionx/player 0.1.0

package/src/FuzionXPublisher.js

@@ -0,0 +1,479 @@
+/**
+ * @fuzionx/player — FuzionXPublisher (송출자 모드)
+ *
+ * 로컬 카메라/마이크 → 서버 전송.
+ * 2가지 방식 지원:
+ *   A. WebSocket 방식 (videochat 양방향)
+ *   B. WHIP 방식 (OBS/단방향 방송)
+ *
+ * @example WebSocket
+ * const pub = new FuzionXPublisher({
+ *   url: 'wss://media:50002',
+ *   channelId: 'my-live',
+ *   mode: 'videochat',
+ *   nickname: '발표자',
+ * });
+ * pub.on('ready', () => console.log('Publishing!'));
+ * pub.connect();
+ *
+ * @example WHIP
+ * const pub = new FuzionXPublisher({
+ *   whipUrl: 'https://media:7777/whip/my-live',
+ * });
+ * pub.connect();
+ */
+
+import { FuzionXSignaling } from './FuzionXSignaling.js';
+import { DEFAULT_ICE_SERVERS, SignalType, SessionMode, MAX_SLOTS } from './constants.js';
+
+export class FuzionXPublisher {
+  /**
+   * @param {Object} opts
+   * @param {string} [opts.url] - WebSocket URL (WS 방식)
+   * @param {string} [opts.whipUrl] - WHIP URL (WHIP 방식)
+   * @param {string} [opts.channelId] - 채널 ID (WS 방식 필수)
+   * @param {string} [opts.mode='broadcast'] - 'broadcast' | 'videochat'
+   * @param {string} [opts.nickname] - 닉네임
+   * @param {string} [opts.token] - 인증 토큰
+   * @param {string} [opts.peerId] - 피어 ID
+   * @param {MediaStreamConstraints} [opts.media] - getUserMedia 제약
+   * @param {MediaStream} [opts.stream] - 이미 획득한 MediaStream
+   * @param {RTCConfiguration} [opts.rtcConfig] - WebRTC 설정
+   * @param {boolean} [opts.autoReconnect=true]
+   */
+  constructor(opts) {
+    // WHIP or WebSocket
+    this.whipUrl = opts.whipUrl || null;
+    this.url = opts.url || null;
+    this.channelId = opts.channelId || null;
+    this.mode = opts.mode || SessionMode.BROADCAST;
+    this.nickname = opts.nickname || null;
+    this.token = opts.token || null;
+    this.peerId = opts.peerId || `pub-${Math.random().toString(36).slice(2, 10)}`;
+    this.autoReconnect = opts.autoReconnect !== false;
+
+    this.mediaConstraints = opts.media || { video: true, audio: true };
+    this._externalStream = opts.stream || null;
+
+    this.rtcConfig = opts.rtcConfig || {
+      iceServers: DEFAULT_ICE_SERVERS,
+      bundlePolicy: 'max-bundle',
+      rtcpMuxPolicy: 'require',
+    };
+
+    /** @private */
+    this._signaling = null;
+    this._pc = null;
+    this._localStream = null;
+    this._listeners = {};
+    this._candidateQueue = [];
+    this._whipResourceUrl = null;
+    this._maxSlots = MAX_SLOTS[this.mode] || 1;
+    this._slots = new Map();
+    this._connected = false;
+  }
+
+  // ── Event System ──
+
+  on(event, handler) {
+    if (!this._listeners[event]) this._listeners[event] = [];
+    this._listeners[event].push(handler);
+    return this;
+  }
+
+  /** @private */
+  _emit(event, ...args) {
+    (this._listeners[event] || []).forEach((fn) => fn(...args));
+  }
+
+  // ── Lifecycle ──
+
+  /** 연결 시작 (미디어 획득 → WebSocket 또는 WHIP). */
+  async connect() {
+    try {
+      await this._acquireMedia();
+
+      if (this.whipUrl) {
+        await this._connectWhip();
+      } else if (this.url) {
+        this._connectWebSocket();
+      } else {
+        throw new Error('url 또는 whipUrl 중 하나를 지정해야 합니다.');
+      }
+    } catch (e) {
+      this._emit('error', e);
+    }
+  }
+
+  /** 연결 종료. */
+  async disconnect() {
+    if (this.whipUrl && this._whipResourceUrl) {
+      // WHIP DELETE
+      try {
+        const baseUrl = new URL(this.whipUrl).origin;
+        await fetch(`${baseUrl}${this._whipResourceUrl}`, { method: 'DELETE' });
+      } catch (e) {
+        console.warn('[FuzionX] WHIP DELETE error:', e);
+      }
+      this._whipResourceUrl = null;
+    }
+
+    if (this._signaling) {
+      this._signaling.sendLeave();
+      this._signaling.disconnect();
+    }
+
+    this._closePeerConnection();
+    this._stopMedia();
+    this._connected = false;
+  }
+
+  /** 채팅 전송. */
+  chat(text) {
+    if (this._signaling) {
+      this._signaling.sendChat(text, this.nickname);
+    }
+  }
+
+  /** @returns {MediaStream|null} 로컬 스트림 */
+  get localStream() {
+    return this._localStream;
+  }
+
+  /** @returns {Map} 슬롯 정보 (videochat: 다른 참가자) */
+  get slots() {
+    return this._slots;
+  }
+
+  // ── Media ──
+
+  /** @private 미디어 획득 */
+  async _acquireMedia() {
+    if (this._externalStream) {
+      this._localStream = this._externalStream;
+    } else {
+      this._localStream = await navigator.mediaDevices.getUserMedia(this.mediaConstraints);
+    }
+    this._emit('media', this._localStream);
+  }
+
+  /** @private */
+  _stopMedia() {
+    if (this._localStream && !this._externalStream) {
+      this._localStream.getTracks().forEach((t) => t.stop());
+    }
+    this._localStream = null;
+  }
+
+  // ── WHIP ──
+
+  /** @private WHIP 연결 */
+  async _connectWhip() {
+    this._pc = new RTCPeerConnection(this.rtcConfig);
+
+    // 트랙 추가
+    this._localStream.getTracks().forEach((track) => {
+      this._pc.addTrack(track, this._localStream);
+    });
+
+    // ICE Gathering 완료 대기
+    const offer = await this._pc.createOffer();
+    offer.sdp = FuzionXPublisher._forceCodecs(offer.sdp);
+    await this._pc.setLocalDescription(offer);
+
+    // Gathering 완료 대기
+    await new Promise((resolve) => {
+      if (this._pc.iceGatheringState === 'complete') {
+        resolve();
+      } else {
+        this._pc.onicegatheringstatechange = () => {
+          if (this._pc.iceGatheringState === 'complete') resolve();
+        };
+        // 안전 타임아웃
+        setTimeout(resolve, 3000);
+      }
+    });
+
+    const localDesc = this._pc.localDescription;
+    // Hub API의 whip_url은 이미 ?token=xxx 포함 가능
+    let url = this.whipUrl;
+    if (this.token && !url.includes('token=')) {
+      url += (url.includes('?') ? '&' : '?') + `token=${this.token}`;
+    }
+
+    const response = await fetch(url, {
+      method: 'POST',
+      headers: { 'Content-Type': 'application/sdp' },
+      body: localDesc.sdp,
+    });
+
+    if (response.status !== 201) {
+      throw new Error(`WHIP failed: ${response.status} ${await response.text()}`);
+    }
+
+    const answerSdp = await response.text();
+    this._whipResourceUrl = response.headers.get('location');
+
+    await this._pc.setRemoteDescription(
+      new RTCSessionDescription({ type: 'answer', sdp: answerSdp })
+    );
+
+    this._pc.onconnectionstatechange = () => {
+      const state = this._pc?.connectionState;
+      if (state === 'connected') {
+        this._connected = true;
+        this._emit('ready');
+      } else if (state === 'failed' || state === 'disconnected') {
+        this._emit('error', new Error(`WHIP PeerConnection ${state}`));
+      }
+    };
+
+    this._emit('ready');
+  }
+
+  // ── WebSocket ──
+
+  /** @private WS 연결 */
+  _connectWebSocket() {
+    this._signaling = new FuzionXSignaling({
+      url: this.url,
+      autoReconnect: this.autoReconnect,
+      onOpen: () => this._onSignalingOpen(),
+      onMessage: (msg) => this._onSignalingMessage(msg),
+      onClose: (evt) => {
+        this._closePeerConnection();
+        this._connected = false;
+        this._emit('close', evt);
+      },
+      onError: (err) => this._emit('error', err),
+    });
+    this._signaling.connect();
+  }
+
+  /** @private */
+  async _onSignalingOpen() {
+    this._signaling.sendJoin(this.peerId, this.channelId, {
+      nickname: this.nickname,
+      token: this.token,
+      mode: this.mode,
+    });
+    await this._createPeerConnection();
+  }
+
+  /** @private */
+  async _createPeerConnection() {
+    this._pc = new RTCPeerConnection(this.rtcConfig);
+
+    // Non-Trickle: ICE candidate는 SDP에 포함
+
+    // 로컬 트랙 추가 (송출)
+    this._localStream.getTracks().forEach((track) => {
+      this._pc.addTrack(track, this._localStream);
+    });
+
+    // videochat 모드: 수신 트랙도 준비 (양방향)
+    if (this.mode === SessionMode.VIDEOCHAT) {
+      for (let i = 0; i < this._maxSlots; i++) {
+        this._pc.addTransceiver('video', { direction: 'recvonly' });
+        this._pc.addTransceiver('audio', { direction: 'recvonly' });
+      }
+
+      // 송출 트랙은 addTrack으로 추가됨 → transceiver방향을 sendrecv로 업그레이드
+      const transceivers = this._pc.getTransceivers();
+      transceivers.forEach((t) => {
+        if (t.sender.track && t.direction === 'recvonly') {
+          t.direction = 'sendrecv';
+        }
+      });
+
+      let videoTrackCount = 0;
+      this._pc.ontrack = (event) => {
+        const track = event.track;
+        if (track.kind === 'video') {
+          const slotIndex = videoTrackCount++;
+          let stream = event.streams[0];
+          if (!stream) {
+            stream = new MediaStream();
+            stream.addTrack(track);
+          }
+          const slot = this._slots.get(slotIndex) || { slotIndex };
+          slot.stream = stream;
+          this._slots.set(slotIndex, slot);
+          this._emit('stream', stream, slotIndex);
+        }
+      };
+    }
+
+    this._pc.onconnectionstatechange = () => {
+      const state = this._pc?.connectionState;
+      if (state === 'connected' && !this._connected) {
+        this._connected = true;
+        this._emit('ready');
+      } else if (state === 'failed' || state === 'disconnected') {
+        this._emit('error', new Error(`PeerConnection ${state}`));
+      }
+    };
+
+    // Offer + H264/Opus SDP 강제
+    const offer = await this._pc.createOffer();
+    offer.sdp = FuzionXPublisher._forceCodecs(offer.sdp);
+    await this._pc.setLocalDescription(offer);
+
+    // Non-Trickle: ICE gathering 완료 대기
+    await this._waitForIceGathering();
+
+    const finalSdp = this._pc.localDescription?.sdp;
+    if (finalSdp) {
+      this._signaling.sendOffer(finalSdp);
+    }
+  }
+
+  /** @private */
+  _waitForIceGathering() {
+    return new Promise((resolve) => {
+      if (this._pc.iceGatheringState === 'complete') {
+        return resolve();
+      }
+      const check = () => {
+        if (this._pc?.iceGatheringState === 'complete') {
+          this._pc.removeEventListener('icegatheringstatechange', check);
+          resolve();
+        }
+      };
+      this._pc.addEventListener('icegatheringstatechange', check);
+      setTimeout(() => {
+        if (this._pc) {
+          this._pc.removeEventListener('icegatheringstatechange', check);
+        }
+        resolve();
+      }, 3000);
+    });
+  }
+
+  /** @private */
+  static _forceCodecs(sdp) {
+    let lines = sdp.split('\r\n');
+    const videoIdx = lines.findIndex((l) => l.startsWith('m=video'));
+    if (videoIdx !== -1) {
+      const h264Pts = [];
+      const h264Scores = new Map();
+      lines.forEach((l) => {
+        const m = l.match(/a=rtpmap:(\d+) H264\/90000/);
+        if (m) { h264Pts.push(m[1]); h264Scores.set(m[1], 0); }
+      });
+      lines.forEach((l) => {
+        if (l.startsWith('a=fmtp:')) {
+          const pt = l.split(' ')[0].split(':')[1];
+          if (h264Scores.has(pt)) {
+            if (l.includes('profile-level-id=42e01f')) h264Scores.set(pt, 100);
+            else if (l.includes('profile-level-id=42001f')) h264Scores.set(pt, 80);
+            if (l.includes('packetization-mode=1')) h264Scores.set(pt, (h264Scores.get(pt) || 0) + 10);
+          }
+        }
+      });
+      if (h264Pts.length > 0) {
+        h264Pts.sort((a, b) => h264Scores.get(b) - h264Scores.get(a));
+        const parts = lines[videoIdx].split(' ');
+        const otherPts = parts.slice(3).filter((pt) => !h264Pts.includes(pt));
+        lines[videoIdx] = [...parts.slice(0, 3), ...h264Pts, ...otherPts].join(' ');
+      }
+    }
+    const audioIdx = lines.findIndex((l) => l.startsWith('m=audio'));
+    if (audioIdx !== -1) {
+      const opusPts = [];
+      lines.forEach((l) => {
+        const m = l.match(/a=rtpmap:(\d+) opus\/48000/);
+        if (m) opusPts.push(m[1]);
+      });
+      if (opusPts.length > 0) {
+        const parts = lines[audioIdx].split(' ');
+        const otherPts = parts.slice(3).filter((pt) => !opusPts.includes(pt));
+        lines[audioIdx] = [...parts.slice(0, 3), ...opusPts, ...otherPts].join(' ');
+      }
+    }
+    return lines.join('\r\n');
+  }
+
+  /** @private */
+  _onSignalingMessage(msg) {
+    switch (msg.type) {
+      case SignalType.ANSWER:
+        this._handleAnswer(msg);
+        break;
+      case SignalType.CANDIDATE:
+        this._handleCandidate(msg);
+        break;
+      case SignalType.SLOT_INFO:
+        this._handleSlotInfo(msg);
+        break;
+      case SignalType.CHAT:
+        this._emit('chat', {
+          peerId: msg.peer_id,
+          nickname: msg.nickname,
+          text: msg.text,
+        });
+        break;
+      case SignalType.ERROR:
+        this._emit('error', new Error(msg.message));
+        break;
+    }
+  }
+
+  /** @private */
+  async _handleAnswer(msg) {
+    if (!this._pc) return;
+    try {
+      await this._pc.setRemoteDescription(
+        new RTCSessionDescription({ type: 'answer', sdp: msg.sdp })
+      );
+      for (const c of this._candidateQueue) {
+        await this._pc.addIceCandidate(c);
+      }
+      this._candidateQueue = [];
+    } catch (e) {
+      this._emit('error', e);
+    }
+  }
+
+  /** @private */
+  async _handleCandidate(msg) {
+    const candidate = new RTCIceCandidate({
+      candidate: msg.candidate,
+      sdpMid: msg.sdp_mid,
+      sdpMLineIndex: msg.sdp_m_line_index,
+    });
+    if (this._pc && this._pc.remoteDescription) {
+      try { await this._pc.addIceCandidate(candidate); } catch (e) { /* ignore */ }
+    } else {
+      this._candidateQueue.push(candidate);
+    }
+  }
+
+  /** @private */
+  _handleSlotInfo(msg) {
+    const slotIndex = parseInt(msg.stream_id.replace('stream_', ''), 10);
+    if (!msg.nickname || msg.nickname === '') {
+      this._slots.delete(slotIndex);
+      this._emit('slot_remove', { slotIndex, senderId: msg.sender_id });
+      return;
+    }
+    const existing = this._slots.get(slotIndex) || {};
+    this._slots.set(slotIndex, {
+      ...existing,
+      slotIndex,
+      streamId: msg.stream_id,
+      nickname: msg.nickname,
+      senderId: msg.sender_id,
+    });
+    this._emit('slot', this._slots.get(slotIndex));
+  }
+
+  /** @private */
+  _closePeerConnection() {
+    if (this._pc) {
+      this._pc.close();
+      this._pc = null;
+    }
+    this._candidateQueue = [];
+  }
+}

package/src/FuzionXSignaling.js

@@ -0,0 +1,170 @@
+/**
+ * @fuzionx/player — WebSocket Signaling Layer
+ *
+ * FuzionX Media Server의 JSON 시그널링 프로토콜 캡슐화.
+ * 자동 재연결 + 이벤트 시스템.
+ */
+
+import { SignalType, RECONNECT } from './constants.js';
+
+export class FuzionXSignaling {
+  /**
+   * @param {Object} opts
+   * @param {string} opts.url - WebSocket URL (ws:// or wss://)
+   * @param {Function} [opts.onMessage] - 메시지 수신 콜백
+   * @param {Function} [opts.onOpen] - 연결 성공 콜백
+   * @param {Function} [opts.onClose] - 연결 종료 콜백
+   * @param {Function} [opts.onError] - 에러 콜백
+   * @param {boolean} [opts.autoReconnect=true]
+   */
+  constructor(opts) {
+    this.url = opts.url;
+    this.onMessage = opts.onMessage || (() => {});
+    this.onOpen = opts.onOpen || (() => {});
+    this.onClose = opts.onClose || (() => {});
+    this.onError = opts.onError || (() => {});
+    this.autoReconnect = opts.autoReconnect !== false;
+
+    /** @private */
+    this._ws = null;
+    this._retryCount = 0;
+    this._reconnectTimer = null;
+    this._intentionalClose = false;
+  }
+
+  /** WebSocket 연결. */
+  connect() {
+    this._intentionalClose = false;
+    this._doConnect();
+  }
+
+  /** @private */
+  _doConnect() {
+    try {
+      this._ws = new WebSocket(this.url);
+    } catch (e) {
+      this.onError(e);
+      this._scheduleReconnect();
+      return;
+    }
+
+    this._ws.onopen = () => {
+      this._retryCount = 0;
+      this.onOpen();
+    };
+
+    this._ws.onmessage = (event) => {
+      try {
+        const msg = JSON.parse(event.data);
+        this.onMessage(msg);
+      } catch (e) {
+        console.warn('[FuzionX] Invalid JSON:', event.data);
+      }
+    };
+
+    this._ws.onclose = (event) => {
+      this.onClose(event);
+      if (!this._intentionalClose && this.autoReconnect) {
+        this._scheduleReconnect();
+      }
+    };
+
+    this._ws.onerror = (event) => {
+      this.onError(event);
+    };
+  }
+
+  /** JSON 메시지 전송. */
+  send(msg) {
+    if (this._ws && this._ws.readyState === WebSocket.OPEN) {
+      this._ws.send(JSON.stringify(msg));
+      return true;
+    }
+    return false;
+  }
+
+  // ── 시그널링 헬퍼 ──
+
+  /** Join 전송 */
+  sendJoin(peerId, channelId, opts = {}) {
+    return this.send({
+      type: SignalType.JOIN,
+      peer_id: peerId,
+      channel_id: channelId,
+      nickname: opts.nickname || null,
+      token: opts.token || null,
+      mode: opts.mode || null,
+    });
+  }
+
+  /** SDP Offer 전송 */
+  sendOffer(sdp) {
+    return this.send({ type: SignalType.OFFER, sdp });
+  }
+
+  /** SDP Answer 전송 */
+  sendAnswer(sdp) {
+    return this.send({ type: SignalType.ANSWER, sdp });
+  }
+
+  /** ICE Candidate 전송 */
+  sendCandidate(candidate) {
+    return this.send({
+      type: SignalType.CANDIDATE,
+      candidate: candidate.candidate,
+      sdp_mid: candidate.sdpMid,
+      sdp_m_line_index: candidate.sdpMLineIndex,
+    });
+  }
+
+  /** Chat 전송 */
+  sendChat(text, nickname) {
+    return this.send({
+      type: SignalType.CHAT,
+      text,
+      nickname: nickname || null,
+      peer_id: null,
+    });
+  }
+
+  /** PLI 요청 */
+  sendPLI() {
+    return this.send({ type: SignalType.PLI });
+  }
+
+  /** Leave 전송 */
+  sendLeave() {
+    return this.send({ type: SignalType.LEAVE });
+  }
+
+  /** 연결 종료 (재연결 안 함). */
+  disconnect() {
+    this._intentionalClose = true;
+    clearTimeout(this._reconnectTimer);
+    if (this._ws) {
+      this._ws.close();
+      this._ws = null;
+    }
+  }
+
+  /** @returns {boolean} 연결 상태 */
+  get connected() {
+    return this._ws && this._ws.readyState === WebSocket.OPEN;
+  }
+
+  /** @private 재연결 스케줄 (Exponential Backoff). */
+  _scheduleReconnect() {
+    if (this._retryCount >= RECONNECT.MAX_RETRIES) {
+      console.error('[FuzionX] Max reconnect retries reached.');
+      this.onError(new Error('Max reconnect retries'));
+      return;
+    }
+    const delay = Math.min(
+      RECONNECT.BASE_DELAY_MS * Math.pow(2, this._retryCount),
+      RECONNECT.MAX_DELAY_MS
+    );
+    this._retryCount++;
+    console.log(`[FuzionX] Reconnecting in ${delay}ms (${this._retryCount}/${RECONNECT.MAX_RETRIES})`);
+    this._reconnectTimer = setTimeout(() => this._doConnect(), delay);
+  }
+}