1.0.0 • Published 3 years ago
next-agora-stream-player v1.0.0
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
import StreamPlayer from 'agora-stream-player'
import AgoraRTC from 'agora-rtc-sdk'
class Demo extends Component {
state = {
stream: null
}
componentDidMount() {
let stream = AgoraRTC.createStream({
streamID: 1024,
video: true,
audio: true
})
stream.init(() => {
this.setState({
stream
})
})
}
render() {
return (
{/** You'd better use conditional render to make it mount/unmount properly */}
{this.state.stream && <StreamPlayer
key={1024}
video={true}
audio={true}
stream={this.state.stream}
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
1.0.0
3 years ago