{"_id":"@alloy-framework/web-player","name":"@alloy-framework/web-player","dist-tags":{"latest":"0.1.0"},"versions":{"0.1.0":{"name":"@alloy-framework/web-player","version":"0.1.0","type":"module","description":"Alloy WebRTC Player — Vanilla JavaScript WebRTC player for live streaming (no framework dependency)","main":"src/index.js","exports":{".":"./src/index.js","./client":"./src/AlloyWebRtcClient.js","./player":"./src/AlloyWebRtcPlayer.js"},"license":"MIT","repository":{"type":"git","url":"git+https://github.com/saytohenry/alloy-framework.git"},"keywords":["alloy","webrtc","player","streaming","live","vanilla-js"],"gitHead":"9cefa228b51756ae9297bacf0559216083372649","_id":"@alloy-framework/web-player@0.1.0","bugs":{"url":"https://github.com/saytohenry/alloy-framework/issues"},"homepage":"https://github.com/saytohenry/alloy-framework#readme","_nodeVersion":"24.12.0","_npmVersion":"11.6.2","dist":{"integrity":"sha512-Kf3qJ1LLIewVIUzrJoMkCJZRb3ZgLFFVRr6W+jn7nieAofPAX3YnYJUhyum3DyOg5wb49yeQkrzD0HbRRBXfJA==","shasum":"873177a3dda1a3367565c4f4d05da9ddacea756c","tarball":"https://registry.npmjs.org/@alloy-framework/web-player/-/web-player-0.1.0.tgz","fileCount":6,"unpackedSize":26408,"signatures":[{"keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U","sig":"MEQCIBDd370Xh25PNOCrfeBkVgrom3pdSvJ+T1KuJYCCTHYuAiAM04/tFTN+KrHSoxwkFxKp3Adty3Of1vlvuZ73+sj57w=="}]},"_npmUser":{"name":"saytohenry","email":"saytohenry@gmail.com"},"directories":{},"maintainers":[{"name":"saytohenry","email":"saytohenry@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages-npm-production","tmp":"tmp/web-player_0.1.0_1773674465225_0.5236511292288024"},"_hasShrinkwrap":false}},"time":{"created":"2026-03-16T15:21:05.050Z","0.1.0":"2026-03-16T15:21:05.379Z","modified":"2026-03-16T15:21:05.659Z"},"maintainers":[{"name":"saytohenry","email":"saytohenry@gmail.com"}],"description":"Alloy WebRTC Player — Vanilla JavaScript WebRTC player for live streaming (no framework dependency)","homepage":"https://github.com/saytohenry/alloy-framework#readme","keywords":["alloy","webrtc","player","streaming","live","vanilla-js"],"repository":{"type":"git","url":"git+https://github.com/saytohenry/alloy-framework.git"},"bugs":{"url":"https://github.com/saytohenry/alloy-framework/issues"},"license":"MIT","readme":"# @alloy-framework/web-player\n\n**Alloy WebRTC Player** — Vanilla JavaScript WebRTC 실시간 스트리밍 플레이어.\n\n프레임워크 의존성 없이 순수 JavaScript로 동작합니다.\nVue, React, Angular 등 어떤 프로젝트에서든 사용 가능합니다.\n\n## 설치\n\n```bash\nnpm install @alloy-framework/web-player\n```\n\n## 빠른 시작\n\n### 1. npm 패키지 import\n\n```js\nimport { AlloyWebRtcPlayer } from '@alloy-framework/web-player'\n\nconst player = new AlloyWebRtcPlayer(document.getElementById('player'), {\n    channelId: 'your-channel-id',\n    apiBaseUrl: 'http://your-server:4100',\n    label: '카메라 1',\n})\n\n// 이벤트 리스닝\nplayer.client.on('statechange', ({ state }) => {\n    console.log('상태:', state)\n})\n\n// 종료\nplayer.destroy()\n```\n\n### 2. ESM 직접 링크 (CDN / 복사)\n\n`examples/esm-link.html`을 참고하세요. `src/` 폴더를 서버에 배치 후 import합니다.\n\n```html\n<div id=\"player\"></div>\n\n<script type=\"module\">\n    import { AlloyWebRtcPlayer } from './path/to/AlloyWebRtcPlayer.js'\n\n    new AlloyWebRtcPlayer(document.getElementById('player'), {\n        channelId: 'ch-123',\n        apiBaseUrl: 'http://localhost:4100',\n    })\n</script>\n```\n\n## API\n\n### `AlloyWebRtcPlayer`\n\n| 옵션 | 타입 | 기본값 | 설명 |\n|------|------|--------|------|\n| `channelId` | `string` | — | 채널 ID (자동 시작) |\n| `apiBaseUrl` | `string` | `location.origin` | API 서버 URL |\n| `watchEndpoint` | `string` | `/webrtc-api/channels/{channelId}/watch` | Watch API 경로 |\n| `label` | `string` | `''` | 표시 라벨 |\n| `muted` | `boolean` | `true` | 초기 음소거 |\n| `autoplay` | `boolean` | `true` | 자동 재생 |\n| `controls` | `boolean` | `true` | 컨트롤 바 표시 |\n\n**메서드:**\n- `startWatch(channelId?)` — Watch API로 연결\n- `play(workerIp, port, channelId)` — Worker에 직접 연결\n- `stop()` — 연결 종료\n- `destroy()` — DOM 제거 + 연결 종료\n\n### `AlloyWebRtcClient`\n\n저수준 WebRTC 연결 관리 클래스 (EventTarget 기반).\n\n```js\nimport { AlloyWebRtcClient } from '@alloy-framework/web-player'\n\nconst client = new AlloyWebRtcClient()\nclient.on('track', ({ stream }) => { videoEl.srcObject = stream })\nclient.on('statechange', ({ state }) => console.log(state))\nclient.on('chat', ({ text, nickname }) => console.log(nickname, text))\nawait client.connect(workerIp, port, channelId, peerId)\n```\n\n**이벤트:**\n| 이벤트 | payload | 설명 |\n|--------|---------|------|\n| `statechange` | `{ state }` | 연결 상태 변경 |\n| `track` | `{ stream, track }` | 미디어 트랙 수신 |\n| `chat` | `{ peerId, nickname, text }` | 채팅 메시지 수신 |\n| `slotinfo` | `{ slots }` | 슬롯 정보 수신 |\n| `error` | `{ message }` | 오류 발생 |\n\n## 자동 재접속\n\n소스 URL 변경 시 Worker가 WebSocket close code `1013` (Try Again)을 보내면 **2초 후 자동 재접속**합니다.\n\n## License\n\nMIT\n","readmeFilename":"README.md","_rev":"1-78c5073ee50d91f086bcf3f5bbf7c7b1"}