@fuzionx/player

FuzionX WebRTC Player SDK — 3줄 코드로 라이브 방송 시청/송출.

Install

npm install @fuzionx/player

Usage

시청자 (Viewer)

import { FuzionXViewer } from '@fuzionx/player';

const viewer = new FuzionXViewer({
  url: 'wss://media.example.com:50002',
  channelId: 'my-channel',
  mode: 'broadcast', // or 'videochat'
});

viewer.on('stream', (stream, slotIndex) => {
  document.getElementById('video').srcObject = stream;
});

viewer.on('chat', ({ nickname, text }) => {
  console.log(`${nickname}: ${text}`);
});

viewer.connect();

송출자 (Publisher) — 카메라

import { FuzionXPublisher } from '@fuzionx/player';

const pub = new FuzionXPublisher({
  url: 'wss://media.example.com:50002',
  channelId: 'my-channel',
  mode: 'broadcast',
  nickname: '방송자',
  media: { video: true, audio: true },
});

pub.on('ready', () => console.log('Live!'));
pub.connect();

송출자 (Publisher) — WHIP (OBS)

import { FuzionXPublisher } from '@fuzionx/player';

const pub = new FuzionXPublisher({
  whipUrl: 'https://media.example.com:7777/whip/my-channel',
  token: 'your-jwt',
});

pub.on('ready', () => console.log('WHIP Connected!'));
pub.connect();

화상회의 (VideoChat)

import { FuzionXPublisher } from '@fuzionx/player';

const participant = new FuzionXPublisher({
  url: 'wss://media.example.com:50002',
  channelId: 'meeting-room',
  mode: 'videochat',
  nickname: '참가자1',
});

// 내 카메라
participant.on('media', (localStream) => {
  document.getElementById('local').srcObject = localStream;
});

// 다른 참가자 스트림 수신
participant.on('stream', (stream, slotIndex) => {
  document.getElementById(`remote-${slotIndex}`).srcObject = stream;
});

participant.on('slot', ({ slotIndex, nickname }) => {
  console.log(`Slot ${slotIndex}: ${nickname}`);
});

participant.connect();

CDN (Script Tag)

<script src="https://unpkg.com/@fuzionx/player/dist/fuzionx-player.umd.js"></script>
<script>
  const { FuzionXViewer } = FuzionXPlayer;
  const viewer = new FuzionXViewer({ ... });
</script>

API

FuzionXViewer

| Option | Type | Default | Description | |--------|------|---------|-------------| | url | string | — | WebSocket URL | | channelId | string | — | 채널 ID | | mode | string | 'broadcast' | 'broadcast' or 'videochat' | | nickname | string | — | 닉네임 | | token | string | — | 인증 토큰 | | autoReconnect | boolean | true | 자동 재연결 |

Events: stream, slot, slot_remove, chat, error, close, connected

FuzionXPublisher

| Option | Type | Default | Description | |--------|------|---------|-------------| | url | string | — | WebSocket URL (WS 방식) | | whipUrl | string | — | WHIP URL (단방향) | | channelId | string | — | 채널 ID | | mode | string | 'broadcast' | 'broadcast' or 'videochat' | | media | object | {video:true, audio:true} | getUserMedia 제약 | | stream | MediaStream | — | 외부 스트림 |

Events: ready, media, stream, slot, slot_remove, chat, error, close

License

MIT