React native GStreamer is an audio/video player built for react-native using GStreamer framework. It handles everything GStreamer can natively handle. For more information, you can go here : https://gstreamer.freedesktop.org/
- Plays anything a GStreamer playbin can play
- Hardware accelerated decoding for better performances and extended battery life
- Great with any kind of media, it was initially though for low latency streaming (RTSP)
- Working for both Android and IOS
- Volume control
- Add a default graphical control bar (You can create your own one using control methods if needed)
- Allow seeking in media (Nothing is done about this yet)
- Allow multichannel audio level inspection (only mono analysis yet)
npm install --save react-native-gstreamer
/!\ Be sure to read everything carefully : GStreamer is a C Library. It will be necessary to finalize the linking manually.
import React, { Component } from 'react'
import { StyleSheet, View, Button } from 'react-native'
import GstPlayer, { GstState } from 'react-native-gstreamer'
export default class App extends Component {
uri1 = "http://mirrors.standaloneinstaller.com/video-sample/jellyfish-25-mbps-hd-hevc.mp4"
uri2 = "http://mirrors.standaloneinstaller.com/video-sample/Panasonic_HDC_TM_700_P_50i.mp4"
constructor(props, context) {
super(props, context)
this.state = { uri: this.uri1 }
}
render() {
return (
<View style={styles.container}>
<GstPlayer
style={styles.videoPlayer}
uri={this.state.uri}
ref="GstPlayer"
autoPlay={true}
/>
<View style={styles.controlBar}>
<Button title="uri1" onPress={() => this.setState({ uri: this.uri1 })}></Button>
<Button title="uri2" onPress={() => this.setState({ uri: this.uri2 })}></Button>
<Button title="Stop" onPress={() => this.refs.GstPlayer.stop()}></Button>
<Button title="Pause" onPress={() => this.refs.GstPlayer.pause()}></Button>
<Button title="Play" onPress={() => this.refs.GstPlayer.play()}></Button>
</View>
</View>
)
}
}
const styles = StyleSheet.create({
container: { flex: 1 },
controlBar: {
flexDirection: "row",
justifyContent: "space-between"
},
videoPlayer: { flex: 1 }
})| Parameter | Type | Default | Description |
|---|---|---|---|
| uri | String | undefined | Path to the desired media to play |
| autoPlay | Boolean | false | Will automatically start playing a media when the player is ready, or when you change a media uri |
| audioLevelRefreshRate | Integer | 100 | Defines the frequency of audio volume analysis in milliseconds. Helpful to design a vumeter |
| isDebugging | Boolean | false | When set to true, it will show a videotestsrc instead of a default playbin. Helpful to check if an issue is coming from playbin or not. Please note that for now, you need to restart the player in order to apply this change |
| Method | Description |
|---|---|
| onPlayerInit() | Called when the player is ready. Could be useful to display/hide a loading notification |
| onStateChanged(GstState old_state, GstState new_state) | Called when GStreamer engine is done switching state. You should use GstState enum import to switch on values |
| onVolumeChanged(Double rms, Double peak, Double decay) | Contains audio volume between 0 and 1. It is called as often as defined in audioLevelRefreshRate parameter |
| onUriChanged(String new_uri) | Called when GStreamer engine is done changing an uri. Helpful to display a loading notification |
| onEOS() | Called when a media stream is ended |
| onElementError(String source, String message, String debug_info) | Called when an internal component of GStreamer playbin's pipeline has met an error. It can be helpful to debug any media playing issue |
| Method | Description |
|---|---|
| setGstState(GstState state) | Call this if you want to call GStreamer states yourself. You should use GstState enum import to select a state |
| play() | Plays the current media (Alias for setGstState to GstState.PLAYING) |
| pause() | Pauses the current media (Alias for setGstState to GstState.PAUSED) |
| stop() | Stops the current media (Alias for setGstState to GstState.READY) |