AgoraStreamPlayer
A declarative stream player for agora-rtc-sdk
Feature
- Declarative stream player controlling stream by props
- Display placeholder for stream without video track
- Label and decorations for stream
- Network Detector to show network status with icon
- Two display mode: cover and contain
- High test coverage
Quick Start
npm install agora-stream-player
App.js
state = stream: null { let stream = AgoraRTC stream } { return /** You'd better use conditional render to make it mount/unmount properly */ thisstatestream && <StreamPlayer key=1024 video=true audio=true stream=thisstatestream fit="contain" label="A stream" /> }
Props
stream: Stream
Agora stream created by local or subscribed from remote
video: boolean
Enable video or not
audio: boolean
Enable audio or not
autoChange?: boolean
Whether to automatically solve side effects for audio & video, default to be true
fit?: "cover" | "contain",
Use cover or contain display mode
networkDetect?: boolean
Detect network status periodically and show an icon
speaking?: boolean
Mark the speaker with an icon
appendIcon?: ReactNode
Add more custom icons etc
prependIcon?: ReactNode
Add more custom icons etc
placeholder?: ReactNode
Add custom placeholder to replace default one
label?: string
Show some description for the stream
className?: string
className
style?: Object
style
onClick?: Function
click event
onDoubleClick?: Function
dblclick event
Develop
Project setup
npm install
Compiles and hot-reloads with a demo
npm run start
Compiles and minifies for production
npm run build
Run your tests
npm run test
Run your tests with coverage
npm run test:coverage