{"_id":"@2stars/video-react","_rev":"3-85493c5e9db7d9ef57430b85f6d0a63e","name":"@2stars/video-react","dist-tags":{"latest":"0.5.0"},"versions":{"0.5.0":{"name":"@2stars/video-react","version":"0.5.0","keywords":["2stars","webrtc","video","react","react-hooks","sfu","p2p","broadcasting","transcription","ai-assistant"],"author":{"name":"2Stars"},"license":"MIT","_id":"@2stars/video-react@0.5.0","maintainers":[{"name":"omriak","email":"omriakon111@gmail.com"}],"homepage":"https://video-api.2stars.io","bugs":{"url":"https://github.com/2stars-io/video-react/issues"},"dist":{"shasum":"cce0f386832c72863d4f72468b7e8f23f18060cc","tarball":"https://registry.npmjs.org/@2stars/video-react/-/video-react-0.5.0.tgz","fileCount":9,"integrity":"sha512-7KOZnaScU72f04APlUT8RJ3RNIUPlZ5OUQ10PgyN1HZpnPEeefdjPh1LnuX9y1TUn5pcSKrTrgF4ghznXHADtg==","signatures":[{"sig":"MEUCIQDaQY/VJAnHsE592nA2oKzIYBBnyO96uweMhrvgClztEQIgZjrHuONqoOJKr9LROjqC+c4Ewp421Om60OXKsnu9H4I=","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":635378},"main":"./dist/index.cjs","type":"module","types":"./dist/index.d.ts","module":"./dist/index.js","exports":{".":{"types":"./dist/index.d.ts","import":"./dist/index.js","require":"./dist/index.cjs"}},"gitHead":"6a38975b8da293bf869fa64853858c46777f7ba6","scripts":{"dev":"tsup --watch","test":"vitest run","build":"tsup","clean":"rimraf dist","smoke":"vitest run tests/smoke.test.tsx","typecheck":"tsc --noEmit","test:watch":"vitest"},"_npmUser":{"name":"omriak","email":"omriakon111@gmail.com"},"repository":{"url":"git+https://github.com/2stars-io/video-react.git","type":"git"},"_npmVersion":"11.12.1","description":"Official React bindings for the 2Stars Video Platform — Provider + hooks on top of @2stars/video-js.","directories":{},"sideEffects":false,"_nodeVersion":"24.15.0","publishConfig":{"access":"public"},"_hasShrinkwrap":false,"devDependencies":{"tsup":"^8.0.2","jsdom":"^24.0.0","react":"^18.3.1","rimraf":"^5.0.5","vitest":"^1.6.0","react-dom":"^18.3.1","typescript":"^5.4.5","@types/react":"^18.2.0","@2stars/video-js":"file:../hebbs-video-api/2stars-video/sdk/js","@types/react-dom":"^18.2.0","@vitest/coverage-v8":"^1.6.0","@testing-library/react":"^14.3.1","@testing-library/jest-dom":"^6.4.2","@testing-library/user-event":"^14.5.2"},"peerDependencies":{"react":">=18.0.0","react-dom":">=18.0.0","@2stars/video-js":"^0.4.0"},"_npmOperationalInternal":{"tmp":"tmp/video-react_0.5.0_1778958585517_0.49830019124372393","host":"s3://npm-registry-packages-npm-production"},"deprecated":"Retired: 2Stars has moved away from video. For device-trust use @2stars/verifai-web."}},"time":{"created":"2026-05-16T19:09:45.317Z","modified":"2026-08-11T19:05:03.151Z","0.5.0":"2026-05-16T19:09:45.713Z"},"bugs":{"url":"https://github.com/2stars-io/video-react/issues"},"author":{"name":"2Stars"},"license":"MIT","homepage":"https://video-api.2stars.io","keywords":["2stars","webrtc","video","react","react-hooks","sfu","p2p","broadcasting","transcription","ai-assistant"],"repository":{"url":"git+https://github.com/2stars-io/video-react.git","type":"git"},"description":"Official React bindings for the 2Stars Video Platform — Provider + hooks on top of @2stars/video-js.","maintainers":[{"name":"omriak","email":"omriakon111@gmail.com"},{"name":"warodri","email":"warodri@gmail.com"}],"readme":"# @2stars/video-react\n\nOfficial React bindings for the [2Stars Video Platform](https://2stars.io). A thin Provider + hooks layer on top of [`@2stars/video-js`](https://www.npmjs.com/package/@2stars/video-js) — none of the heavy lifting is reimplemented; this package just makes it idiomatic in React.\n\n```tsx\nimport { StarsProvider, useRoom, usePeers, VideoTile } from '@2stars/video-react';\n\nfunction App() {\n  return (\n    <StarsProvider token={participantToken}>\n      <Call />\n    </StarsProvider>\n  );\n}\n\nfunction Call() {\n  const { room, status } = useRoom();\n  const peers = usePeers();\n  if (status !== 'connected') return <div>Connecting…</div>;\n  return peers.map(p => <VideoTile key={p.id} peer={p} />);\n}\n```\n\n## Install\n\n```bash\nnpm install @2stars/video-react @2stars/video-js react react-dom\n```\n\n`@2stars/video-js`, `react`, and `react-dom` are peer dependencies — your app controls those versions.\n\n## Quick start\n\nYou authenticate users by handing the SDK a short-lived **participant token** that your backend obtains from the 2Stars API. Never embed your 2Stars API key in the browser bundle.\n\n```tsx\n// Backend (Node) — mint a token per participant\nconst res = await fetch('https://api.2stars.io/video/v1/tokens', {\n  method: 'POST',\n  headers: { authorization: 'Bearer hbs_live_…', 'content-type': 'application/json' },\n  body: JSON.stringify({ roomCode, participantId, displayName, ttlSeconds: 3600 }),\n});\nconst { token } = await res.json();\n// Send `token` to the browser, use it as the prop below.\n\n// Frontend (React)\n<StarsProvider token={participantToken} />\n```\n\n## What's in the box\n\n### Provider\n\n- `<StarsProvider token>` — root Provider. Connects, exposes a context every hook reads.\n\n### Hooks — connection & room\n\n- `useStarsClient()` — raw client (escape hatch)\n- `useRoom()` — `{ room, status }`\n- `useConnectionState()` / `useConnectionStatus()` — fine-grained signaling status\n- `useRoomKeyReady()` — E2E key handshake state\n- `useVisibility()` — page-visibility tracking (for adaptive bitrate)\n- `useMode()` — P2P / SFU current routing mode\n\n### Hooks — media\n\n- `useLocalCamera()` — manage local camera + mic\n- `useScreenShare()` — start / stop screen share\n- `useScreenSharers()` — list peers currently sharing screens\n- `usePeers()` — every remote peer in the room\n- `useActiveSpeaker()` — highest-audio peer right now\n- `useGridLayout()` — adaptive grid sizing\n- `useBackground()` — virtual / blurred background\n- `useAvatar()` — AI-rendered avatar mode\n\n### Hooks — chat\n\n- `useMessages()` — paginated message list\n- `useSendMessage()` — `sendMessage(text)` callback\n\n### Hooks — AI\n\n- `useTranscription()` — live transcript\n- `useTranslation()` / `useTranslatedAudio()` — real-time translation\n- `useCorrection()` — pre-send message correction\n- `useFactCheck()` — inline fact check\n- `useAIParticipant()` — AI participant (\"Hebbs\") state\n- `useWakeWord()` — wake-word detection state\n- `useWhiteboard()` — AI-generated whiteboards\n\n### Hooks — control\n\n- `useModeration()` — kick / mute / ban / lock\n- `useRemoteControl()` — request / grant remote desktop control over a shared screen\n\n### Components\n\n- `<VideoTile peer>` — single peer's video + audio tile\n- `<RoomGrid>` — adaptive grid of every peer\n- `<ChatStrip>` — message + composer strip\n- `<WhiteboardSurface>` — AI whiteboard display\n\n## Companion SDKs\n\n- [`@2stars/video-js`](https://github.com/2stars-io/video-js) — the core JS SDK this wraps\n- [`com.github.2stars-io:video-android`](https://github.com/2stars-io/video-android) — Android client\n- [`@2stars/verifai-web`](https://github.com/2stars-io/verifai-web) — VerifAI device-trust SDK for browsers\n- [OpenAPI spec](https://api.2stars.io/openapi/video.json) — generate a client in any language\n\n## License\n\nMIT — see [LICENSE](./LICENSE).\n","readmeFilename":"README.md"}