@alloy-framework/web-player

Alloy WebRTC Player — Vanilla JavaScript WebRTC 실시간 스트리밍 플레이어.

프레임워크 의존성 없이 순수 JavaScript로 동작합니다. Vue, React, Angular 등 어떤 프로젝트에서든 사용 가능합니다.

설치

npm install @alloy-framework/web-player

빠른 시작

1. npm 패키지 import

import { AlloyWebRtcPlayer } from '@alloy-framework/web-player'

const player = new AlloyWebRtcPlayer(document.getElementById('player'), {
    channelId: 'your-channel-id',
    apiBaseUrl: 'http://your-server:4100',
    label: '카메라 1',
})

// 이벤트 리스닝
player.client.on('statechange', ({ state }) => {
    console.log('상태:', state)
})

// 종료
player.destroy()

2. ESM 직접 링크 (CDN / 복사)

examples/esm-link.html을 참고하세요. src/ 폴더를 서버에 배치 후 import합니다.

<div id="player"></div>

<script type="module">
    import { AlloyWebRtcPlayer } from './path/to/AlloyWebRtcPlayer.js'

    new AlloyWebRtcPlayer(document.getElementById('player'), {
        channelId: 'ch-123',
        apiBaseUrl: 'http://localhost:4100',
    })
</script>

API

AlloyWebRtcPlayer

| 옵션 | 타입 | 기본값 | 설명 | |------|------|--------|------| | channelId | string | — | 채널 ID (자동 시작) | | apiBaseUrl | string | location.origin | API 서버 URL | | watchEndpoint | string | /webrtc-api/channels/{channelId}/watch | Watch API 경로 | | label | string | '' | 표시 라벨 | | muted | boolean | true | 초기 음소거 | | autoplay | boolean | true | 자동 재생 | | controls | boolean | true | 컨트롤 바 표시 |

메서드:

• startWatch(channelId?) — Watch API로 연결
• play(workerIp, port, channelId) — Worker에 직접 연결
• stop() — 연결 종료
• destroy() — DOM 제거 + 연결 종료

AlloyWebRtcClient

저수준 WebRTC 연결 관리 클래스 (EventTarget 기반).

import { AlloyWebRtcClient } from '@alloy-framework/web-player'

const client = new AlloyWebRtcClient()
client.on('track', ({ stream }) => { videoEl.srcObject = stream })
client.on('statechange', ({ state }) => console.log(state))
client.on('chat', ({ text, nickname }) => console.log(nickname, text))
await client.connect(workerIp, port, channelId, peerId)

이벤트: | 이벤트 | payload | 설명 | |--------|---------|------| | statechange | { state } | 연결 상태 변경 | | track | { stream, track } | 미디어 트랙 수신 | | chat | { peerId, nickname, text } | 채팅 메시지 수신 | | slotinfo | { slots } | 슬롯 정보 수신 | | error | { message } | 오류 발생 |

자동 재접속

소스 URL 변경 시 Worker가 WebSocket close code 1013 (Try Again)을 보내면 2초 후 자동 재접속합니다.

License

MIT