@fuzionx/player 0.1.0

package/src/FuzionXViewer.js

@@ -0,0 +1,383 @@
+/**
+ * @fuzionx/player — FuzionXViewer (수신자 모드)
+ *
+ * 서버에서 MediaStream을 수신하여 <video> 엘리먼트에 렌더링.
+ * broadcast(1 stream) / videochat(최대 9 streams) 지원.
+ *
+ * @example
+ * const viewer = new FuzionXViewer({
+ *   url: 'wss://media:50002',
+ *   channelId: 'my-live',
+ *   mode: 'broadcast',
+ * });
+ * viewer.on('stream', (stream, slotIndex) => {
+ *   videoEl.srcObject = stream;
+ * });
+ * viewer.connect();
+ */
+
+import { FuzionXSignaling } from './FuzionXSignaling.js';
+import { DEFAULT_ICE_SERVERS, SignalType, SessionMode, MAX_SLOTS } from './constants.js';
+
+export class FuzionXViewer {
+  /**
+   * @param {Object} opts
+   * @param {string} opts.url - WebSocket URL
+   * @param {string} opts.channelId - 채널 ID
+   * @param {string} [opts.mode='broadcast'] - 'broadcast' | 'videochat'
+   * @param {string} [opts.nickname] - 닉네임
+   * @param {string} [opts.token] - 인증 토큰
+   * @param {string} [opts.peerId] - 피어 ID (자동 생성)
+   * @param {RTCConfiguration} [opts.rtcConfig] - WebRTC 설정 오버라이드
+   * @param {boolean} [opts.autoReconnect=true]
+   */
+  constructor(opts) {
+    this.url = opts.url;
+    this.channelId = opts.channelId;
+    this.mode = opts.mode || SessionMode.BROADCAST;
+    this.nickname = opts.nickname || null;
+    this.token = opts.token || null;
+    this.peerId = opts.peerId || `viewer-${Math.random().toString(36).slice(2, 10)}`;
+    this.autoReconnect = opts.autoReconnect !== false;
+
+    this.rtcConfig = opts.rtcConfig || {
+      iceServers: DEFAULT_ICE_SERVERS,
+      bundlePolicy: 'max-bundle',
+      rtcpMuxPolicy: 'require',
+    };
+
+    /** @private */
+    this._signaling = null;
+    this._pc = null;
+    this._listeners = {};
+    this._slots = new Map(); // slotIndex → { streamId, nickname, senderId, stream }
+    this._maxSlots = MAX_SLOTS[this.mode] || 1;
+    this._candidateQueue = [];
+    this._connected = false;
+  }
+
+  // ── Event System ──
+
+  /**
+   * 이벤트 리스너 등록.
+   * @param {'stream'|'slot'|'slot_remove'|'chat'|'error'|'close'|'connected'} event
+   * @param {Function} handler
+   */
+  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 ──
+
+  /** 서버 연결 + WebRTC 세션 시작. */
+  connect() {
+    this._signaling = new FuzionXSignaling({
+      url: this.url,
+      autoReconnect: this.autoReconnect,
+      onOpen: () => this._onSignalingOpen(),
+      onMessage: (msg) => this._onSignalingMessage(msg),
+      onClose: (evt) => this._onSignalingClose(evt),
+      onError: (err) => this._emit('error', err),
+    });
+    this._signaling.connect();
+  }
+
+  /** 연결 종료. */
+  disconnect() {
+    if (this._signaling) {
+      this._signaling.sendLeave();
+      this._signaling.disconnect();
+    }
+    this._closePeerConnection();
+    this._slots.clear();
+    this._connected = false;
+  }
+
+  /** 채팅 전송. */
+  chat(text) {
+    if (this._signaling) {
+      this._signaling.sendChat(text, this.nickname);
+    }
+  }
+
+  /** 키프레임 요청. */
+  requestKeyframe() {
+    if (this._signaling) {
+      this._signaling.sendPLI();
+    }
+  }
+
+  /** @returns {Map} 현재 슬롯 정보 */
+  get slots() {
+    return this._slots;
+  }
+
+  // ── Internal ──
+
+  /** @private */
+  _onSignalingOpen() {
+    this._signaling.sendJoin(this.peerId, this.channelId, {
+      nickname: this.nickname,
+      token: this.token,
+      mode: this.mode,
+    });
+    // Join 전송 후 바로 PeerConnection 생성
+    this._createPeerConnection().catch((e) => this._emit('error', e));
+  }
+
+  /** @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 */
+  _onSignalingClose(evt) {
+    this._closePeerConnection();
+    this._connected = false;
+    this._emit('close', evt);
+  }
+
+  /** @private */
+  async _handleAnswer(msg) {
+    if (!this._pc) return;
+    try {
+      await this._pc.setRemoteDescription(
+        new RTCSessionDescription({ type: 'answer', sdp: msg.sdp })
+      );
+      // Flush queued ICE candidates
+      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) {
+        console.warn('[FuzionX] ICE candidate error:', e);
+      }
+    } else {
+      this._candidateQueue.push(candidate);
+    }
+  }
+
+  /** @private */
+  _handleSlotInfo(msg) {
+    const slotIndex = parseInt(msg.stream_id.replace('stream_', ''), 10);
+
+    // nickname이 빈 문자열이면 슬롯 해제
+    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));
+  }
+
+  /**
+   * PeerConnection 생성 + Non-Trickle ICE Offer.
+   * old alloy-player 검증 패턴:
+   * 1. addTransceiver(recvonly) × maxSlots — 서버 m-line 매핑
+   * 2. createOffer → H264 SDP 강제
+   * 3. ICE gathering 완료 대기 후 SDP 전체 전송 (Non-Trickle)
+   * @private
+   */
+  async _createPeerConnection() {
+    this._pc = new RTCPeerConnection(this.rtcConfig);
+
+    // Non-Trickle: ICE candidate는 SDP에 포함되어 전송됨
+    // (onicecandidate는 gathering 추적용으로만 유지)
+
+    // 수신 트랙 매핑
+    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);
+
+        if (!this._connected) {
+          this._connected = true;
+          this._emit('connected');
+        }
+      }
+    };
+
+    this._pc.onconnectionstatechange = () => {
+      const state = this._pc?.connectionState;
+      if (state === 'failed' || state === 'disconnected') {
+        this._emit('error', new Error(`PeerConnection ${state}`));
+      }
+    };
+
+    // recvonly Transceiver 추가 (서버 슬롯 수에 맞춤)
+    for (let i = 0; i < this._maxSlots; i++) {
+      this._pc.addTransceiver('video', { direction: 'recvonly' });
+      this._pc.addTransceiver('audio', { direction: 'recvonly' });
+    }
+
+    // Offer 생성 + H264/Opus 코덱 강제
+    const offer = await this._pc.createOffer();
+    offer.sdp = FuzionXViewer._forceCodecs(offer.sdp);
+    await this._pc.setLocalDescription(offer);
+
+    // Non-Trickle ICE: gathering 완료 대기 후 전체 SDP 전송
+    await this._waitForIceGathering();
+
+    // gathering 완료 후 최종 SDP (ICE candidates 포함) 전송
+    const finalSdp = this._pc.localDescription?.sdp;
+    if (finalSdp) {
+      this._signaling.sendOffer(finalSdp);
+    }
+  }
+
+  /**
+   * ICE gathering 완료 대기 (Non-Trickle)
+   * @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);
+      // Timeout 3s (Safari 호환)
+      setTimeout(() => {
+        if (this._pc) {
+          this._pc.removeEventListener('icegatheringstatechange', check);
+        }
+        resolve();
+      }, 3000);
+    });
+  }
+
+  /**
+   * SDP에서 H264 + Opus 코덱 우선 강제.
+   * @private
+   */
+  static _forceCodecs(sdp) {
+    let lines = sdp.split('\r\n');
+
+    // Video: H264 우선
+    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(' ');
+      }
+    }
+
+    // Audio: Opus 우선
+    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 */
+  _closePeerConnection() {
+    if (this._pc) {
+      this._pc.close();
+      this._pc = null;
+    }
+    this._candidateQueue = [];
+  }
+
+}

package/src/constants.js

@@ -0,0 +1,49 @@
+/**
+ * @fuzionx/player — Constants & Default Configuration
+ */
+
+/** Default ICE Servers */
+export const DEFAULT_ICE_SERVERS = [
+  { urls: 'stun:stun.l.google.com:19302' },
+  { urls: 'stun:stun1.l.google.com:19302' },
+];
+
+/** Signaling message types (maps to server SignalMessage enum) */
+export const SignalType = {
+  JOIN: 'join',
+  OFFER: 'offer',
+  ANSWER: 'answer',
+  CANDIDATE: 'candidate',
+  PLI: 'pli',
+  LEAVE: 'leave',
+  SLOT_INFO: 'slot_info',
+  CHAT: 'chat',
+  ERROR: 'error',
+};
+
+/** Session modes */
+export const SessionMode = {
+  BROADCAST: 'broadcast',
+  VIDEOCHAT: 'videochat',
+};
+
+/** Max slots per mode */
+export const MAX_SLOTS = {
+  [SessionMode.BROADCAST]: 1,
+  [SessionMode.VIDEOCHAT]: 9,
+};
+
+/** Default reconnect settings */
+export const RECONNECT = {
+  MAX_RETRIES: 5,
+  BASE_DELAY_MS: 1000,
+  MAX_DELAY_MS: 30000,
+};
+
+/** Codec preferences */
+export const CODEC = {
+  VIDEO_MIME: 'video/H264',
+  AUDIO_MIME: 'audio/opus',
+  VIDEO_CLOCK: 90000,
+  AUDIO_CLOCK: 48000,
+};

package/src/index.js

@@ -0,0 +1,10 @@
+/**
+ * @fuzionx/player — Entry Point
+ *
+ * FuzionX WebRTC Player SDK
+ */
+
+export { FuzionXViewer } from './FuzionXViewer.js';
+export { FuzionXPublisher } from './FuzionXPublisher.js';
+export { FuzionXSignaling } from './FuzionXSignaling.js';
+export { SignalType, SessionMode, MAX_SLOTS, DEFAULT_ICE_SERVERS, CODEC, RECONNECT } from './constants.js';