Using npm:
npm install --save react-native-aliyun-short-video
or using yarn:
yarn add react-native-aliyun-short-video
react-native link react-native-aliyun-short-video
(or using rnpm for versions of React Native < 0.27)
rnpm link react-native-aliyun-short-video
Android
- in
android/app/build.gradle:
dependencies {
...
compile "com.facebook.react:react-native:+" // From node_modules
+ compile project(':react-native-aliyun-short-video')
...
}- in
android/settings.gradle:
... include ':app' + include ':react-native-aliyun-short-video' + project(':react-native-aliyun-short-video').projectDir = new File(rootProject.projectDir, '../node_modules/react-native-aliyun-short-video/android') ...
- in
MainApplication.java:
... + import com.rnshortvideo.RNShortVideoPackage; public class MainApplication extends Application implements ReactApplication { ... @Override protected List<ReactPackage> getPackages() { return Arrays.<ReactPackage>asList( new MainReactPackage(), + new RNShortVideoPackage() ); } ... }
- in
MainActivity.java:
... + import com.rnshortvideo.RNShortVideoPackage; public class MainActivity extends ReactActivity { ... @Override protected List<ReactPackage> getPackages() { return Arrays.<ReactPackage>asList( new MainReactPackage(), + new RNShortVideoPackage() ); } }
iOS
In XCode, in the project navigator:
- Right click Libraries
- Add Files to [your project's name]
- Go to
node_modules/react-native-aliyun-short-video/ios - Add the
RNShortVideo.xcodeprojfile - Drag and drop the
node_modules/react-native-aliyun-short-video/ios/AliyunSDKfolder to your xcode project. (Make sure Copy items if needed IS ticked)
Click on project General tab
- Under Embedded Binaries click
+and addAliThirdparty.framework,AliyunPlayerSDK.framework,AliyunVideoSDK.framework,AliyunVodPlayerSDK.framework,QuCore-ThirdParty.framework - Under Linked Frameworks and Libraries click
+and addRNShortVideo.framework,libz.tbd,libc++.tbd,libiconv.tbd,libresolv.tbd,ImageIO.framework,CoreMedia.framework,CoreVideo.framework,SystemConfiguration.framework,Photos.framework,OpenAL.framework,VideoToolbox.framework
Click on project Build Settings tab
- Look for Enable Bitcode set to No
- Look for Other Linker Flags and make sure it contain
-ObjC - Look for Framework Search Paths and make sure it contain
$(SRCROOT)/../node_modules/react-native-aliyun-short-video/ios/AliyunSDK - Look for Header Search Paths and make sure it contain
$(SRCROOT)/../node_modules/react-native-aliyun-short-video/ios/RNShortVideo(Mark as recursive)
Click on project Build Phase tab
- Under Copy Bundle Resources click
+and addQPSDK.bundleandAliyunLanguageSource.bundle
In the project navigator:
- Click Info.plist
- Add the
NSPhotoLibraryUsageDescription,NSMicrophoneUsageDescription,NSCameraUsageDescriptionandNSPhotoLibraryAddUsageDescriptionkeys to yourInfo.plistwith strings describing why your app needs these permissions. Note: You will get a SIGABRT crash if you don't complete this step
Run your project (Cmd+R)
See the example
... import RNShortVideo, { VideoView } from 'react-native-aliyun-short-video'; ... ... onRecord = () => { RNShortVideo.recordShortVideo() .then((path) => { this.setState({ path }); }) .catch((err) => { console.error(err); }); }; ... ... <View> { this.state.path ? ( <VideoView fullscreen source={{ url: this.state.path }} poster="http://t.cn/RuWRYzv?1=1" /> ) : null } </View> ...
When installing or using react-native-aliyun-short-video, you may encounter the following problems:
[android] - Duplicate files copied in APK lib/armeabi-v7a/libgnustl_shared.so
- in
android/app/build.gradle:
android {
...
packagingOptions {
exclude('META-INF/LICENSE')
+ pickFirst "**/libgnustl_shared.so"
}
...
}[android] - Could not find `:QuSdk-RC:`...
- in
android/app/build.gradle:
...
repositories {
flatDir {
- dirs "libs"
+ dirs "libs", "$rootDir/../node_modules/react-native-aliyun-short-video/android/libs"
}
}
...- Compatible with iOS