react-native-aliyun-short-video-example v1.0.0

react-native-aliyun-video

短视频SDK需要 License

TOC

• Installation
• Linking
• Usage
• API
• Troubleshooting

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

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

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:

• in android/app/build.gradle:

android {
  ...
  packagingOptions {
    exclude('META-INF/LICENSE')
+    pickFirst "**/libgnustl_shared.so"
  }
  ...
}

• 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