Skip to content

Navigation Menu

Sign in
Sign up

Repository files navigation

react-native-aliyun-video

npm package npm downloads

TOC

Installation

Using npm:

npm install --save react-native-aliyun-short-video

or using yarn:

yarn add react-native-aliyun-short-video

Linking

Automatic

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

Manual

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')
...

With React Native 0.29+

  • 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()
 );
 }
 ...
 }

With older versions of React Native:

  • 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.xcodeproj file
  • Drag and drop the node_modules/react-native-aliyun-short-video/ios/AliyunSDK folder to your xcode project. (Make sure Copy items if needed IS ticked)

Click on project General tab

  • Under Embedded Binaries click + and add AliThirdparty.framework, AliyunPlayerSDK.framework, AliyunVideoSDK.framework, AliyunVodPlayerSDK.framework, QuCore-ThirdParty.framework
  • Under Linked Frameworks and Libraries click + and add RNShortVideo.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 add QPSDK.bundle and AliyunLanguageSource.bundle

In the project navigator:

  • Click Info.plist
  • Add the NSPhotoLibraryUsageDescription, NSMicrophoneUsageDescription, NSCameraUsageDescription and NSPhotoLibraryAddUsageDescriptionkeys to your Info.plist with 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)

Usage

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>
...

API

android short video

Troubleshooting

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"
 }
}
...

TODO

  • Compatible with iOS

About

A short video for React Native

Resources

Stars

0 stars

Watchers

1 watching

Forks

Releases

Packages

Contributors

Languages

AltStyle によって変換されたページ (->オリジナル) /