react-native-gstreamer

React native Gstreamer Ios / Android

Creates GstPlayer components which can play everythings gstreamer can play.

Compilation instructutions :

Android :

You need Android NDK, Revision 10e (May 2015) available here :

Resources we used for making this react native component : https://developer.android.com/ndk/downloads/older_releases.html. Because there is an issue in NDK r14 and r15 which prevent us to build gstreamer.

Android part :

Gstreamer tutorial : https://gstreamer.freedesktop.org/documentation/tutorials/android/
Gstreamer graddle : https://github.com/jaroslavas/Gstreamer-Android-example

Getting started :

  npm install react-native-gstreamer --save

How to create new react-application using react-native-gstreamer

We are going to create GstreamerTest test app which play a custom RTSP stream.

  react-native init GstreamerTest

Now install react-native-gstreamer dependencies

npm install react-native-gstreamer@0.0.5 --save
react-native link

You may need to run android Studio and launch the Android project to automatically accept Android Licence

Update android/local.properties with correct ndk location (version r10e)

## This file is automatically generated by Android Studio.
# Do not modify this file -- YOUR CHANGES WILL BE ERASED!
#
# This file must *NOT* be checked into Version Control Systems,
# as it contains information specific to your local configuration.
#
# Location of the SDK. This is only used by Gradle.
# For customization when using a Version Control System, please read the
# header note.
#Thu Aug 03 17:19:31 CEST 2017
ndk.dir=[NDK_R10e DIR]
sdk.dir=/home/ludovic/Android/Sdk

Then you can put theses lines into your App.js

import GstPlayer from 'react-native-gstreamer'

In render part :

        <GstPlayer uri="rtsp://wowzaec2demo.streamlock.net/vod/mp4:BigBuckBunny_115k.mov"  style={styles.video}/>

in Style part :

video: {
      height: 281,
      // flex: 1,
      margin: 20,
      width: 500
    },

Then execute this command

react-native run-android

You will see plauyer

nhatvhm/react-native-gstreamer

react-native-gstreamer