react-native-vxg-mobile-sdk
Please visit www.videoexpertsgroup.com for any additional questions and support.
A <VXGMobileSDK>
component for react-native
Notice: If you download version from github please look file BINARIES.md
Installation
Using npm:
npm install --save react-native-vxg-mobile-sdk
or using yarn:
yarn add react-native-vxg-mobile-sdk
iOS
Run react-native link react-native-vxg-mobile-sdk
to link the library.
Open your project in Xcode and create a link of ffmpeg.framework to Frameworks of main project:
After that, select the target of your application and select 'General' tab. Scroll to 'Embedded Binaries' and tap the '+' button:
Select "ffmpeg.framework" from the list:
After that, select 'Build Settings' tab. Find the option 'Framework Search Path' and double tap on it. Tap the '+' button in the dialog and enter path to framework:
For Device Simulator:
$(PROJECT_DIR)/../node_modules/react-native-vxg-mobile-sdk/ios/ffmpeg/universal/
Or for appstore:
$(PROJECT_DIR)/../node_modules/react-native-vxg-mobile-sdk/ios/ffmpeg/applestore/
Android
Run to link the react-native-vxg-mobile-sdk library.
$ react-native link react-native-vxg-mobile-sdk
And next in main android/build.gradle
add
allprojects {
repositories {
....
maven {
url 'http://android.vxg.io/repository/internal/'
name 'VXG'
}
}
}
Manually adding subproject
Or if you have some proble with this way, you can make do this manually:
And next in main android/build.gardle
add
allprojects {
repositories {
....
maven {
url 'http://android.vxg.io/repository/internal/'
name 'VXG'
}
}
}
Add to file android/settings.gradle
next line:
include ':react-native-vxg-mobile-sdk'
project(':react-native-vxg-mobile-sdk').projectDir = new File(rootProject.projectDir, '../node_modules/react-native-vxg-mobile-sdk/android-exoplayer')
To file android/app/build.gradle
add next line to dependencies:
dependencies {
...
compile project(':react-native-vxg-mobile-sdk')
}
and change minSdkVersion
to > 17
minSdkVersion = 17
To file MainApplication.java
add next line close with imports:
import io.vxg.reactnative.RCTVXGMobileSDKPackage;
...
class MainApplication ...
...
@Override
protected List<ReactPackage> getPackages() {
return Arrays.asList(
new MainReactPackage(),
new RCTVXGMobileSDKPackage() // <- this
);
}
...
Add the ReactVideoPackage class to your list of exported packages.
Windows
You can request by email.Usage
// Within your render function, assuming you have a file called;;; _url = null; { super; this_url = 'rtsp://184.72.239.149/vod/mp4:BigBuckBunny_115k.mov'; } { return <View style=stylescontainer> <Text>Example 1: Simple Player</Text> <VXGMobileSDK style=stylesplayer config="connectionUrl": this_url "autoplay": true></VXGMobileSDK> </View> ; } const styles = StyleSheet;
Change Config in Runtime
- connectionUrl - Network protocol or RTP/RTSP tunneling (0 – RTP by UDP, 1 – RTP by TCP, 2 – RTSP over http, 3 – RTSP over https, -1 - AUTO)
- decodingType 1 - use hardware decoder or 0 - sofware decoder |
- connectionNetworkProtocol - Network protocol or RTP/RTSP tunneling (0 – RTP by UDP, 1 – RTP by TCP, 2 – RTSP over http, 3 – RTSP over https, -1 - AUTO)
- numberOfCPUCores - Number of CPU cores to decode video, ≤ 0 – autodetect and set the number according device capability, positive number sets number according application needs |
- synchroEnable - Enable A/V synchronization, 1 - synchronization is on, 0 - is off
- connectionBufferingTime - Buffering on playback start to avoid network jitter (in milliseconds)
- connectionDetectionTime - Probing time to detect video and audio formats of network stream (in milliseconds)
- startPreroll - Start player in Paused mode (in milliseconds)
- aspectRatioMode - 0 - stretch, 1 - fit to screen with aspect ratio, 2 - crop, 3 - 100% size, 4 - zoom mode, 5 - move mode)
;;;; _player = null; { super; this_play1 = this_play1; } async { // TODO reopen player // console.log(this._player); await this_player; await this_player; await this_player; } { this_player = plr; } { return <View style=stylescontainer> <VXGMobileSDK ref=this_assignPlayer style=stylesplayer ></VXGMobileSDK> <Button onPress=this_play1 title="Play 1" color="#841584" /> </View> ; } const styles = StyleSheet;