{"_id":"@blendvision/web-bv-communication","_rev":"7-6b955a09f6e8b03c57a089be0bd3a930","name":"@blendvision/web-bv-communication","dist-tags":{"latest":"0.0.1-beta.5"},"versions":{"0.0.1-beta.0":{"name":"@blendvision/web-bv-communication","version":"0.0.1-beta.0","_id":"@blendvision/web-bv-communication@0.0.1-beta.0","maintainers":[{"name":"kksweb","email":"web@kkstream.com"},{"name":"webkks","email":"service.bv@kkcompany.com"}],"dist":{"shasum":"e1b0a26f68422d6457137e3b9a483de4061c6cd3","tarball":"https://registry.npmjs.org/@blendvision/web-bv-communication/-/web-bv-communication-0.0.1-beta.0.tgz","fileCount":27,"integrity":"sha512-fDiBc6/J2n590SputehDvuIjDIwWbLnujLFPxVf4iFjRpLQajKZf3MfmecxNzgSJoslpOxlPWxBJQZV00k4HSg==","signatures":[{"sig":"MEUCIQDC3dw33kFCybEXgUITApkxlyIqLjkCpnjZBSD6vDlKeAIgDaXThpyiHalVXi1U/x7co19jPBRW6n7jWvRTHZ+P35s=","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":1698619},"main":"./src/index.ts","type":"module","exports":{".":{"import":"./src/index.ts"},"./src/*":{"import":"./src/*"}},"gitHead":"9220ef976ae26d2014f35a263da8ac99d7b4a431","scripts":{"lint":"eslint --ext .js,.ts,.jsx,.tsx src","build":"vite build","start":"vite","test:ci":"vitest related --run","lint:fix":"eslint --ext .js,.ts,.jsx,.tsx --fix src","test:unit":"vitest","type-check":"tsc --noEmit","test:coverage":"vitest --ui --coverage.enabled=true"},"_npmUser":{"name":"webkks","email":"service.bv@kkcompany.com"},"_npmVersion":"10.8.1","description":"A comprehensive communication SDK, providing audio/video communication, participant management, and remote control capabilities for real-time, multi-participant video conferencing and streaming applications.","directories":{},"_nodeVersion":"20.16.0","dependencies":{"amazon-ivs-web-broadcast":"1.28.0"},"publishConfig":{"main":"dist/index.cjs","types":"dist/index.d.ts","access":"public","module":"dist/index.js","exports":{".":{"import":"./dist/index.js","require":"./dist/index.cjs"},"./*":["./*","./*.d.ts"],"./utils/*":{"import":"./dist/utils/*.js","require":"./dist/utils/*.cjs"}}},"typesVersions":{"*":{"*":["./dist/*","./*"]}},"_hasShrinkwrap":false,"devDependencies":{"vite-plugin-dts":"4.5.4"},"_npmOperationalInternal":{"tmp":"tmp/web-bv-communication_0.0.1-beta.0_1760500408386_0.733637300175809","host":"s3://npm-registry-packages-npm-production"}},"0.0.1-beta.1":{"name":"@blendvision/web-bv-communication","version":"0.0.1-beta.1","_id":"@blendvision/web-bv-communication@0.0.1-beta.1","maintainers":[{"name":"kksweb","email":"web@kkstream.com"},{"name":"webkks","email":"service.bv@kkcompany.com"}],"dist":{"shasum":"6c0038750d78e6fb00ff47a17e4d2da831721aee","tarball":"https://registry.npmjs.org/@blendvision/web-bv-communication/-/web-bv-communication-0.0.1-beta.1.tgz","fileCount":15,"integrity":"sha512-xs14NVHpKvfg8IX0Lg1LG1Eju5PNW/SKkcdBPZa4IfMxqgol0l+C7g4T0aOyorkD2j1tIl9dSPnMxQb4BHCrLA==","signatures":[{"sig":"MEQCIBypTmOxHs7MnNIElycsYey3heIOJVfCpS9Gu9QY/OHqAiAxR1iGRK7Yo3s5PiSwu+04aR5CgGCLCeAEUTVzjyXiMA==","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":1646508},"main":"./src/index.ts","type":"module","exports":{".":{"import":"./src/index.ts"},"./src/*":{"import":"./src/*"}},"gitHead":"1063ab8281265bf00a003610845a5a97c715ac23","scripts":{"lint":"eslint --ext .js,.ts,.jsx,.tsx src","build":"vite build","start":"vite","test:ci":"vitest related --run","lint:fix":"eslint --ext .js,.ts,.jsx,.tsx --fix src","test:unit":"vitest","type-check":"tsc --noEmit","test:coverage":"vitest --ui --coverage.enabled=true"},"_npmUser":{"name":"webkks","email":"service.bv@kkcompany.com"},"_npmVersion":"10.8.1","description":"A comprehensive communication SDK, providing audio/video communication, participant management, and remote control capabilities for real-time, multi-participant video conferencing and streaming applications.","directories":{},"_nodeVersion":"20.16.0","dependencies":{"amazon-ivs-web-broadcast":"1.28.0"},"publishConfig":{"main":"dist/index.cjs","types":"dist/index.d.ts","access":"public","module":"dist/index.js","exports":{".":{"import":"./dist/index.js","require":"./dist/index.cjs"},"./*":["./*","./*.d.ts"],"./utils/*":{"import":"./dist/utils/*.js","require":"./dist/utils/*.cjs"}}},"typesVersions":{"*":{"*":["./dist/*","./*"]}},"_hasShrinkwrap":false,"devDependencies":{"vite-plugin-dts":"4.5.4"},"_npmOperationalInternal":{"tmp":"tmp/web-bv-communication_0.0.1-beta.1_1760509528185_0.2897168661108427","host":"s3://npm-registry-packages-npm-production"}},"0.0.1-beta.2":{"name":"@blendvision/web-bv-communication","version":"0.0.1-beta.2","_id":"@blendvision/web-bv-communication@0.0.1-beta.2","maintainers":[{"name":"kksweb","email":"web@kkstream.com"},{"name":"webkks","email":"service.bv@kkcompany.com"}],"dist":{"shasum":"9a695e38a4deb10355243f4a2330110116075b43","tarball":"https://registry.npmjs.org/@blendvision/web-bv-communication/-/web-bv-communication-0.0.1-beta.2.tgz","fileCount":15,"integrity":"sha512-3OPpvwfMmbR2yqhm2ez5y8TtoFIwmq1a7RZ28sjBFrmfHIBeBWGPp8g/5bNef4LpDjtrjy24PEgMXwb0nh3esQ==","signatures":[{"sig":"MEYCIQDl3gFqghgMhygaee5+2+qI42RFwAH2C/y4f2a1IxQj8AIhAMdCfU7Jn6zCqMDPhbNR+uk0rySv81ld3RN9/bFbwMjr","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":1646508},"main":"./src/index.ts","type":"module","exports":{".":{"import":"./src/index.ts"},"./src/*":{"import":"./src/*"}},"gitHead":"8018cf883bfb1f2137ec426bfbbaf82f6617f59b","scripts":{"lint":"eslint --ext .js,.ts,.jsx,.tsx src","build":"vite build","start":"vite","test:ci":"vitest related --run","lint:fix":"eslint --ext .js,.ts,.jsx,.tsx --fix src","test:unit":"vitest","type-check":"tsc --noEmit","test:coverage":"vitest --ui --coverage.enabled=true"},"_npmUser":{"name":"webkks","email":"service.bv@kkcompany.com"},"_npmVersion":"10.8.1","description":"A comprehensive communication SDK, providing audio/video communication, participant management, and remote control capabilities for real-time, multi-participant video conferencing and streaming applications.","directories":{},"_nodeVersion":"20.16.0","dependencies":{"amazon-ivs-web-broadcast":"1.28.0"},"publishConfig":{"main":"dist/index.cjs","types":"dist/index.d.ts","access":"public","module":"dist/index.js","exports":{".":{"import":"./dist/index.js","require":"./dist/index.cjs"},"./*":["./*","./*.d.ts"],"./utils/*":{"import":"./dist/utils/*.js","require":"./dist/utils/*.cjs"}}},"typesVersions":{"*":{"*":["./dist/*","./*"]}},"_hasShrinkwrap":false,"devDependencies":{"vite-plugin-dts":"4.5.4"},"_npmOperationalInternal":{"tmp":"tmp/web-bv-communication_0.0.1-beta.2_1760684215942_0.11379754486915639","host":"s3://npm-registry-packages-npm-production"}},"0.0.1-beta.3":{"name":"@blendvision/web-bv-communication","version":"0.0.1-beta.3","_id":"@blendvision/web-bv-communication@0.0.1-beta.3","maintainers":[{"name":"kksweb","email":"web@kkstream.com"},{"name":"webkks","email":"service.bv@kkcompany.com"}],"dist":{"shasum":"bd25476ce4b0dc19c0a06a3ab94980bd3f528110","tarball":"https://registry.npmjs.org/@blendvision/web-bv-communication/-/web-bv-communication-0.0.1-beta.3.tgz","fileCount":15,"integrity":"sha512-TO7KILTTMHp5M2HO8ZSM4fN/TXTieNZOPFQ4IVllG38ee867L4N9JXxDLVbAIZ+UVdMUYiNzBqHBFDarPtwP+Q==","signatures":[{"sig":"MEYCIQDgGWsHa27sWs+HRukpjBGRg3MKRMR9X8SqIQOZ/bzr1QIhAJggqfpPXPbFlCatvEo4L7kMYmtZC0T57KZvZ1sYtpZM","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":1646508},"main":"./src/index.ts","type":"module","exports":{".":{"import":"./src/index.ts"},"./src/*":{"import":"./src/*"}},"gitHead":"8018cf883bfb1f2137ec426bfbbaf82f6617f59b","scripts":{"lint":"eslint --ext .js,.ts,.jsx,.tsx src","build":"vite build","start":"vite","test:ci":"vitest related --run","lint:fix":"eslint --ext .js,.ts,.jsx,.tsx --fix src","test:unit":"vitest","type-check":"tsc --noEmit","test:coverage":"vitest --ui --coverage.enabled=true"},"_npmUser":{"name":"webkks","email":"service.bv@kkcompany.com"},"_npmVersion":"10.8.1","description":"A comprehensive communication Sdk, providing audio/video communication, participant management, and remote control capabilities for real-time, multi-participant video conferencing and streaming applications.","directories":{},"_nodeVersion":"20.16.0","dependencies":{"amazon-ivs-web-broadcast":"1.28.0"},"publishConfig":{"main":"dist/index.cjs","types":"dist/index.d.ts","access":"public","module":"dist/index.js","exports":{".":{"import":"./dist/index.js","require":"./dist/index.cjs"},"./*":["./*","./*.d.ts"],"./utils/*":{"import":"./dist/utils/*.js","require":"./dist/utils/*.cjs"}}},"typesVersions":{"*":{"*":["./dist/*","./*"]}},"_hasShrinkwrap":false,"devDependencies":{"vite-plugin-dts":"4.5.4"},"_npmOperationalInternal":{"tmp":"tmp/web-bv-communication_0.0.1-beta.3_1760684491742_0.7799347019609368","host":"s3://npm-registry-packages-npm-production"}},"0.0.1-beta.4":{"name":"@blendvision/web-bv-communication","version":"0.0.1-beta.4","_id":"@blendvision/web-bv-communication@0.0.1-beta.4","maintainers":[{"name":"kksweb","email":"web@kkstream.com"},{"name":"webkks","email":"service.bv@kkcompany.com"}],"dist":{"shasum":"df7f10538214eb7bb7a6c5c96807f195803d11c4","tarball":"https://registry.npmjs.org/@blendvision/web-bv-communication/-/web-bv-communication-0.0.1-beta.4.tgz","fileCount":15,"integrity":"sha512-HArZeeBh9VwAqaJIQn4ozyTaiE8JHAbUrlIPPojDdT88KFdqkq88/OcxNZaQ+NlCQRLMddiWyE5uOS9mFxg4zg==","signatures":[{"sig":"MEUCIGl863MuFPMl8P/bS+QHU5OhvIE8/pnOzqw5LfnG3liYAiEAhWs49myVNw51IIHIuqkEIK9gpWibhZQix6YcM1NjJt8=","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":1646557},"main":"./src/index.ts","type":"module","exports":{".":{"import":"./src/index.ts"},"./src/*":{"import":"./src/*"}},"gitHead":"8018cf883bfb1f2137ec426bfbbaf82f6617f59b","scripts":{"lint":"eslint --ext .js,.ts,.jsx,.tsx src","build":"vite build","start":"vite","test:ci":"vitest related --run","lint:fix":"eslint --ext .js,.ts,.jsx,.tsx --fix src","test:unit":"vitest","type-check":"tsc --noEmit","test:coverage":"vitest --ui --coverage.enabled=true"},"_npmUser":{"name":"webkks","email":"service.bv@kkcompany.com"},"_npmVersion":"10.8.1","description":"A comprehensive communication Sdk, providing audio/video communication, participant management, and remote control capabilities for real-time, multi-participant video conferencing and streaming applications.","directories":{},"_nodeVersion":"20.16.0","dependencies":{"amazon-ivs-web-broadcast":"1.28.0"},"publishConfig":{"main":"dist/index.cjs","name":"@blendvision/web-bv-communication","types":"dist/index.d.ts","access":"public","module":"dist/index.js","exports":{".":{"import":"./dist/index.js","require":"./dist/index.cjs"},"./*":["./*","./*.d.ts"],"./utils/*":{"import":"./dist/utils/*.js","require":"./dist/utils/*.cjs"}}},"typesVersions":{"*":{"*":["./dist/*","./*"]}},"_hasShrinkwrap":false,"devDependencies":{"vite-plugin-dts":"4.5.4"},"_npmOperationalInternal":{"tmp":"tmp/web-bv-communication_0.0.1-beta.4_1760684638675_0.41035741861116093","host":"s3://npm-registry-packages-npm-production"}},"0.0.1-beta.5":{"name":"@blendvision/web-bv-communication","version":"0.0.1-beta.5","_id":"@blendvision/web-bv-communication@0.0.1-beta.5","maintainers":[{"name":"kksweb","email":"web@kkstream.com"},{"name":"webkks","email":"service.bv@kkcompany.com"}],"dist":{"shasum":"0f078f8959baea41cc9b1fc16082808c773a6983","tarball":"https://registry.npmjs.org/@blendvision/web-bv-communication/-/web-bv-communication-0.0.1-beta.5.tgz","fileCount":15,"integrity":"sha512-59jU5vDXcmW/IUWQ2m9CcJhhE/5EZkNNHJIg+3JtaQEJ56HTEdig8jZQxcfRhpobE8O5ueta2j6weTokecS0eQ==","signatures":[{"sig":"MEUCIGPQhmvznJSQoV/q/cjOrvH4yiwU8fbnaJz3B/g/Ws5SAiEAwq0wCD6fwcHDTwXEJ3BO6PDAJFvc8obaDFJ9QjHPrQw=","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":1645751},"main":"./dist/index.cjs","type":"module","types":"./dist/index.d.ts","module":"./dist/index.js","gitHead":"b37472ee2231e25f9fb4e22cb0912b6128201a44","scripts":{"lint":"eslint --ext .js,.ts,.jsx,.tsx src","build":"vite build","start":"vite","test:ci":"vitest related --run","lint:fix":"eslint --ext .js,.ts,.jsx,.tsx --fix src","test:unit":"vitest","type-check":"tsc --noEmit","test:coverage":"vitest --ui --coverage.enabled=true"},"_npmUser":{"name":"webkks","email":"service.bv@kkcompany.com"},"_npmVersion":"10.8.1","description":"A comprehensive communication SDK, providing audio/video communication, participant management, and remote control capabilities for real-time, multi-participant video conferencing and streaming applications.","directories":{},"_nodeVersion":"20.16.0","dependencies":{"amazon-ivs-web-broadcast":"1.28.0"},"publishConfig":{"name":"@blendvision/web-bv-communication","access":"public"},"typesVersions":{"*":{"*":["./dist/*","./*"]}},"_hasShrinkwrap":false,"devDependencies":{"vite-plugin-dts":"4.5.4"},"_npmOperationalInternal":{"tmp":"tmp/web-bv-communication_0.0.1-beta.5_1763981688398_0.7992000232043361","host":"s3://npm-registry-packages-npm-production"}}},"time":{"created":"2025-10-15T03:53:28.268Z","modified":"2025-12-30T01:52:39.204Z","0.0.1-beta.0":"2025-10-15T03:53:28.634Z","0.0.1-beta.1":"2025-10-15T06:25:28.448Z","0.0.1-beta.2":"2025-10-17T06:56:56.209Z","0.0.1-beta.3":"2025-10-17T07:01:31.967Z","0.0.1-beta.4":"2025-10-17T07:03:58.903Z","0.0.1-beta.5":"2025-11-24T10:54:48.626Z"},"description":"A comprehensive communication SDK, providing audio/video communication, participant management, and remote control capabilities for real-time, multi-participant video conferencing and streaming applications.","maintainers":[{"email":"service.bv@kkcompany.com","name":"webkks"}],"readme":"# BlendVision Communication SDK\n\nA comprehensive communication SDK, providing audio/video communication, participant management, and remote control capabilities for real-time, multi-participant video conferencing and streaming applications.\n\n## Core Features\n\n- **Audio/Video Communication**: Audio/Video stream publishing and subscription using Real-Time Streaming.\n- **Participant Management**: Real-time tracking of participant join/leave events and status.\n- **Role-based Permission Control**: Admin/user roles for managing remote control permissions.\n- **Real-time Status Monitoring**: Audio/video status and volume level monitoring.\n- **Canvas Rendering**: Participant video rendering.\n- **Remote Control**: Admins can remotely mute/unmute participant audio/video via SEI messages.\n- **Volume Detection**: Real-time microphone volume level detection for active speaker indication.\n- **Multi-Canvas Support**: Dynamic creation and management of participant canvases.\n\n## Installation\n\n### Using npm/yarn\n\n```bash\n# Install dependencies\nnpm install @blendvision/web-bv-communication\n\n# Or using yarn\nyarn add @blendvision/web-bv-communication\n```\n\n### Import in Your Project\n\n```typescript\nimport { CommunicationSdk, SdkConfig, SdkCallbacks } from '@blendvision/web-bv-communication';\n```\n\n## Integration Guide\n\nThe SDK is designed for seamless integration into various web applications, including vanilla JavaScript, React, and other frameworks. Below are detailed steps and examples for integrating the SDK, focusing on initialization, UI integration, and state management.\n\n### 1. Basic Integration (Vanilla JavaScript)\n\n#### Initialize the SDK\n\nCreate an instance of CommunicationSdk with a configuration object and optional callbacks to handle events.\n\n```typescript\n// Configure Sdk\nconst config: SdkConfig = {\n token: 'your-ivs-participant-token', // AWS IVS participant token\n role: 'admin', // or 'user'\n videoInputDeviceId: 'camera-device-id',\n audioInputDeviceId: 'microphone-device-id',\n enableInBandMessaging: true, // enable in-band messaging for remote control (default: true)\n canvasConfig: {\n width: 640,\n height: 480,\n style: { borderRadius: '8px' },\n },\n};\n\n// Define event callbacks\nconst callbacks: SdkCallbacks = {\n onInitialized: () => console.log('SDK initialized'),\n onConnected: () => console.log('Connected to Stage'),\n onParticipantJoined: (participantId, attributes) => console.log(`Participant joined: ${participantId}`, attributes),\n onParticipantLeft: (participantId) => console.log(`Participant left: ${participantId}`),\n onRemoteStreamAdded: (stream, participantId) => console.log(`Remote stream received: ${participantId}`),\n onParticipantVolumeChanged: (participantId, volume) => console.log(`Volume changed: ${participantId}, ${volume}`),\n onParticipantCanvasCreated: (participantId, canvas) => console.log(`Canvas created for: ${participantId}`),\n onError: (error) => console.error('SDK error:', error),\n};\n\n// Create and initialize Sdk\nconst sdk = new CommunicationSdk(config, callbacks);\nawait sdk.initialize();\n```\n\n#### Start Publishing and Control Media\n\n```typescript\n// Start publishing audio/video\nawait sdk.startPublishing();\n\n// Toggle video or audio\nsdk.toggleVideo(); // Toggles video on/off\nsdk.toggleAudio(); // Toggles audio on/off\n\n// Explicitly set media state\nsdk.setLocalAudioEnabled(true);\nsdk.setLocalVideoEnabled(false);\n```\n\n#### Render Participant Canvases\n\nCreate canvases for participants to display their video or avatar.\n\n```typescript\n// Create a canvas for a specific participant\nconst container = document.getElementById('participant-1-container') as HTMLElement;\nconst canvas = sdk.createParticipantCanvas('participant-1', container);\n\n// Remove canvas when no longer needed\nsdk.removeParticipantCanvas('participant-1');\n```\n\n### 2. React Integration\n\nFor React applications, use a context-based approach to manage the Sdk instance and state, ensuring clean integration with React components.\n\n#### Create a Communication Context\n\n```typescript\nimport { FC, ReactNode, createContext, useContext, useReducer, useEffect } from 'react';\nimport { CommunicationSdk, SdkConfig, SdkCallbacks, ParticipantInfo } from '@blendvision/web-bv-communication';\n\ninterface CommunicationState {\n sdk: CommunicationSdk | null;\n isConnected: boolean;\n participants: ParticipantInfo[];\n error: string | null;\n}\n\ninterface CommunicationAction {\n type: 'SET_SDK' | 'SET_CONNECTED' | 'ADD_PARTICIPANT' | 'REMOVE_PARTICIPANT' | 'SET_ERROR';\n payload: any;\n}\n\nconst initialState: CommunicationState = {\n sdk: null,\n isConnected: false,\n participants: [],\n error: null,\n};\n\nconst communicationReducer = (state: CommunicationState, action: CommunicationAction): CommunicationState => {\n switch (action.type) {\n case 'SET_SDK':\n return { ...state, sdk: action.payload };\n case 'SET_CONNECTED':\n return { ...state, isConnected: action.payload };\n case 'ADD_PARTICIPANT':\n return { ...state, participants: [...state.participants, action.payload] };\n case 'REMOVE_PARTICIPANT':\n return { ...state, participants: state.participants.filter((p) => p.id !== action.payload) };\n case 'SET_ERROR':\n return { ...state, error: action.payload };\n default:\n return state;\n }\n};\n\nconst CommunicationContext = createContext<{\n state: CommunicationState;\n initializeSdk: (config: SdkConfig) => Promise;\n} | null>(null);\n\nexport const CommunicationProvider: FC<{ children: ReactNode }> = ({ children }) => {\n const [state, dispatch] = useReducer(communicationReducer, initialState);\n\n const initializeSdk = async (config: SdkConfig) => {\n try {\n const callbacks: SdkCallbacks = {\n onInitialized: () => console.log('Sdk initialized'),\n onConnected: () => dispatch({ type: 'SET_CONNECTED', payload: true }),\n onParticipantJoined: (participantId, attributes) => {\n dispatch({ type: 'ADD_PARTICIPANT', payload: { id: participantId, attributes } });\n },\n onParticipantLeft: (participantId) => {\n dispatch({ type: 'REMOVE_PARTICIPANT', payload: participantId });\n },\n onError: (error) => dispatch({ type: 'SET_ERROR', payload: error.message }),\n };\n\n const sdk = new CommunicationSdk(config, callbacks);\n await sdk.initialize();\n dispatch({ type: 'SET_SDK', payload: sdk });\n } catch (error) {\n dispatch({ type: 'SET_ERROR', payload: (error as Error).message });\n }\n };\n\n return {children};\n};\n\nexport const useCommunication = () => {\n const context = useContext(CommunicationContext);\n if (!context) {\n throw new Error('useCommunication must be used within CommunicationProvider');\n }\n return context;\n};\n```\n\n#### Participant Video Component\n\nRender participant videos or avatars using a React component.\n\n```typescript\nimport { useEffect, useRef, FC } from 'react';\nimport { useCommunication } from './CommunicationContext';\n\ninterface ParticipantVideoProps {\n participantId: string;\n}\n\nexport const ParticipantVideo: FC = ({ participantId }) => {\n const { state } = useCommunication();\n const containerRef = useRef(null);\n\n useEffect(() => {\n if (containerRef.current && state.sdk) {\n const canvas = state.sdk.createParticipantCanvas(participantId, containerRef.current);\n return () => {\n state.sdk.removeParticipantCanvas(participantId);\n };\n }\n }, [participantId, state.sdk]);\n\n return (\n \n );\n};\n```\n\n#### Usage in a React App\n\n```typescript\nimport { FC } from 'react';\nimport { CommunicationProvider, ParticipantVideo } from './CommunicationContext';\n\nconst App: FC = () => {\n const { state, initializeSdk } = useCommunication();\n\n useEffect(() => {\n initializeSdk({\n token: 'your-ivs-participant-token',\n role: 'admin',\n videoInputDeviceId: 'camera-device-id',\n audioInputDeviceId: 'microphone-device-id',\n });\n }, []);\n\n return (\n
\n {state.participants.map((participant) => (\n \n ))}\n
\n );\n};\n\nexport default () => (\n \n \n \n);\n```\n\n### 3. Integration with Other Frameworks\n\nThe Sdk is framework-agnostic and can be integrated with Vue, Angular, or other JavaScript frameworks by following similar patterns:\n\n- **Vue**: Use a reactive store (e.g., Pinia) to manage the Sdk instance and participant state, similar to the React Context example.\n- **Angular**: Inject the Sdk as a service, using RxJS to handle participant and stream events.\n- **Svelte**: Store the Sdk instance in a Svelte store, binding participant canvases to DOM elements.\n\n### 4. Admin Remote Control (Admin Role Only)\n\nAdmins can control participant media states using SEI messages.\n\n```typescript\nif (config.role === 'admin') {\n // Mute/unmute participant audio or video\n sdk.muteParticipantAudio('participant-id');\n sdk.unmuteParticipantAudio('participant-id');\n sdk.muteParticipantVideo('participant-id');\n sdk.unmuteParticipantVideo('participant-id');\n\n // Broadcast custom command\n await sdk.broadcastCommand({\n type: 'MUTE_AUDIO',\n targetParticipantId: 'participant-id',\n });\n}\n```\n\n### 5. Best Practices for Integration\n\n- **State Management**: Use a centralized state (e.g., React Context, Vue Pinia) to track Sdk instance, participants, and errors.\n- **Resource Cleanup**: Always call `sdk.leaveStage()` when unmounting components or closing the app to release resources.\n- **Error Handling**: Implement `onError` to display user-friendly messages for permission or network issues.\n- **Performance**: Limit canvas sizes (e.g., `canvasConfig: { width: 640, height: 480 }`) to reduce rendering load.\n\n## Core Features and Implementation Notes\n\n- **Canvas Rendering**: Renders at 15 FPS for balanced performance. Each canvas displays participant video or initials (if no video) and a volume bar.\n- **Volume Detection**: Monitors volume every 500ms with exponential smoothing (0.6/0.4 weights) for smooth UI updates.\n- **SEI Messaging**: Commands (e.g., mute/unmute) are sent via video track SEI messages, requiring an active video stream.\n- **Device Checking**: Added pre-initialization device availability checks to prevent publishing failures.\n- **State Reset**: Audio/video enabled states reset to true on `stopPublishing()` to ensure consistent behavior.\n\n## Known Limitations\n\n- **SEI Dependency**: Remote control commands require an active video stream, limiting functionality in audio-only scenarios.\n- **Browser Compatibility**: Full support for Chrome 88+, Firefox 85+, Edge 88+. Safari 14+ has limited volume detection due to AudioContext restrictions.\n- **Performance**: Optimized for small to medium stages (up to 10 participants). Large stages may require further optimization (e.g., dynamic FPS, subscription batching).\n- **Mobile Support**: Not officially tested on mobile browsers; performance may vary.\n\n## API Reference\n\n### CommunicationSdk\n\n#### Constructor\n\n```typescript\nconstructor(config: SdkConfig, callbacks?: SdkCallbacks)\n```\n\n#### Main Methods\n\n| Method | Description | Parameters | Return Value |\n| --------------------------- | -------------------------------------- | ----------------------------------------------- | ----------------------------------- |\n| `initialize()` | Initialize Sdk and join stage | - | `Promise` |\n| `startPublishing()` | Start publishing audio/video | - | `Promise` |\n| `stopPublishing()` | Stop publishing and reset media states | - | `void` |\n| `toggleVideo()` | Toggle video on/off | - | `void` |\n| `toggleAudio()` | Toggle audio on/off | - | `void` |\n| `getParticipants()` | Get participants list | - | `IterableIterator` |\n| `getSelfId()` | Get self id | - | `string \\| null` |\n| `leaveStage()` | Leave stage and clean up | - | `void` |\n| `muteParticipantAudio()` | Mute participant audio (admin) | `participantId: string` | `void` |\n| `unmuteParticipantAudio()` | Unmute participant audio (admin) | `participantId: string` | `void` |\n| `muteParticipantVideo()` | Mute participant video (admin) | `participantId: string` | `void` |\n| `unmuteParticipantVideo()` | Unmute participant video (admin) | `participantId: string` | `void` |\n| `getParticipantVolume()` | Get participant volume | `participantId: string` | `number` |\n| `getParticipantCanvases()` | Get all participant canvases | - | `Map` |\n| `getParticipantCanvas()` | Get specific participant canvas | `participantId: string` | `HTMLCanvasElement \\| null` |\n| `createParticipantCanvas()` | Create custom canvas | `participantId: string, container: HTMLElement` | `HTMLCanvasElement` |\n| `removeParticipantCanvas()` | Remove custom canvas | `participantId: string` | `void` |\n| `broadcastCommand()` | Broadcast command via SEI | `command: RemoteCommand, repeatCount?: number` | `Promise` |\n\n### SdkConfig\n\n```typescript\ninterface SdkConfig {\n token: string; // Participant token\n role: 'admin' | 'user';\n videoInputDeviceId: string;\n audioInputDeviceId: string;\n enableInBandMessaging?: boolean; // Enable SEI messaging (default: true)\n canvasConfig?: {\n width?: number;\n height?: number;\n style?: Partial;\n };\n}\n```\n\n### SdkCallbacks\n\n```typescript\ninterface SdkCallbacks {\n onInitialized?: () => void;\n onConnected?: () => void;\n onDisconnected?: () => void;\n onLocalStreamReady?: (stream: MediaStream) => void;\n onRemoteStreamAdded?: (stream: MediaStream, participantId: string) => void;\n onRemoteStreamRemoved?: (participantId: string) => void;\n onParticipantJoined?: (participantId: string, attributes?: Record) => void;\n onParticipantLeft?: (participantId: string) => void;\n onVideoToggled?: (enabled: boolean) => void;\n onAudioToggled?: (enabled: boolean) => void;\n onPublishingStarted?: () => void;\n onPublishingStopped?: () => void;\n onError?: (error: Error) => void;\n onStageLeft?: (reason?: string) => void;\n onParticipantMuted?: (participantId: string, type: 'audio' | 'video') => void;\n onParticipantUnmuted?: (participantId: string, type: 'audio' | 'video') => void;\n onCommandReceived?: (command: RemoteCommand) => void;\n onStreamStatusChanged?: (participantId: string, status: StreamStatus) => void;\n onParticipantVolumeChanged?: (participantId: string, volume: number) => void;\n onParticipantCanvasCreated?: (participantId: string, canvas: HTMLCanvasElement) => void;\n onParticipantCanvasRemoved?: (participantId: string) => void;\n}\n```\n\n## Troubleshooting\n\n### Common Issues\n\n#### Permission Errors\n\n- Verify browser permissions for camera/microphone.\n- Handle `onError` callback to display user prompts.\n\n#### Connection Failures\n\n- Validate token and stage accessibility.\n- Monitor `onDisconnected` for network issues.\n\n#### Canvas Rendering Issues\n\n- Ensure container elements have valid dimensions.\n- Check browser support for Canvas 2D context.\n\n#### Volume Detection Issues\n\n- Ensure audio tracks are active and permissions granted.\n\n### Debugging Tips\n\n```typescript\nconst callbacks: SdkCallbacks = {\n onError: (error) => console.error('Sdk error:', error, { timestamp: new Date().toISOString() }),\n onParticipantVolumeChanged: (id, volume) => console.log(`Volume for ${id}: ${volume}`),\n};\n\n// Periodically log status\nsetInterval(() => {\n if (sdk) {\n console.log('SDK status:', {\n participants: Array.from(sdk.getParticipants()),\n canvases: sdk.getParticipantCanvases().size,\n });\n }\n}, 5000);\n```\n\n## Browser Support\n\n- **Chrome 88+**: ✅ Full support\n- **Firefox 85+**: ✅ Full support\n- **Safari 14+**: ✅ Full support\n- **Edge 88+**: ✅ Full support\n- **Mobile Browsers**: Not officially tested; expect performance limitations.\n\n## 🆘 Support\n\nFor questions or suggestions, contact the development team at .\n","readmeFilename":"README.md"}