react-native-cq-short-video

安装、配置

1. 安装 : $npm install react-native-cq-short-video --save

2. 链接 : $npm link 手动链接:用XCode打开react native项目, 将node_modules --> react-native-short-video --> ios --> ShortVideo.xcodeproj拖入到Libraries文件夹

3. 将react-native-short-video --> ios --> Resources和lib中的所有文件添加到工程ios根目录下(无需勾选Copy items if needed)

   TXUgcSDK.licence需要从腾讯短视频官网重新获取
   licence详情查看文档
   https://cloud.tencent.com/document/product/584/11638
   

4. 添加依赖库: TARGETS --> (projectName) --> Build Phases --> Link Binary With Libraries 中添加以下库

   TXLiteAVSDK_UGC.framework
   Accelerate.framework
   libstdc++.tbd
   libsqlite3.tbd
   
   

5. 集成cocoapods.

       $pod init
       $pod install
   

   在Podfile中添加以下第三方库然后 $pod install

   ```
   target '项目名' do
       pod 'KSYMediaEditorKit', '~> 2.1.0'
       pod 'AFNetworking', '~> 3.1.0'
       pod 'MBProgressHUD', '~> 0.9.2'
       pod 'BlocksKit', '~> 2.2.5'
       pod 'MJExtension', '~> 3.0.10'
   end
   
   ```
   

6. 在AppDelegate.m的didFinishLaunchingWithOptions方法中添加导航控制器, 代码如下

   
   // 腾讯短视频licence验证. 需要导入头文件#import <TXLiteAVSDK_UGC/TXUGCBase.h>
   [TXUGCBase setLicenceURL:@"http://license.vod2.myqcloud.com/license/v1/e2740f0862a92e7b71348d9ec4607de4/TXUgcSDK.licence" key:@"50a54687c893917490422d0d5719e164"];
   
   UIViewController *rootViewController = [UIViewController new];
   rootViewController.view = rootView;
   
   UINavigationController *navc = [[UINavigationController alloc]  initWithRootViewController:rootViewController];
   navc.navigationBar.translucent = NO;
   [navc setNavigationBarHidden:YES];
   self.window.rootViewController = navc;
   
   

ShortVideoView的属性

beautyStyle : number类型, 美颜风格，TX_Enum_Type_BeautyStyle类型。

beautyLevel : number类型, 美颜级别取值范围 0 ~ 9； 0 表示关闭 1 ~ 9值越大 效果越明显。

beautyLevel : number类型, 美白级别取值范围 0 ~ 9； 0 表示关闭 1 ~ 9值越大 效果越明显。

ruddinessLevel : number类型, 红润级别取值范围 0 ~ 9； 0 表示关闭 1 ~ 9值越大 效果越明显。

onCloseCamera : function类型, 原生界面点击返回按钮移除录制界面时会调用该方法

onUploadVideo : function类型, 原生界面点击上传视频按钮时会调用该方法,将封面图片路径和视频路径传给RN,由RN实现上传操作. 该方法有三个参数coverImagePath(string类型)封面图片路径, videoPath(string类型)视频路径, completion(function类型)视频上传成功后需要调用该方法调整原生界面状态

VideoPickerView的属性

onCloseVideoPicker : function类型, 原生界面的操作关闭视频选择器或者编辑界面时, 会调用该方法, 在该方法中可能需要隐藏VideoPickerView组件
onUploadVideo : function类型, 原生界面点击上传视频按钮时会调用该方法,将封面图片路径和视频路径传给RN,由RN实现上传操作. 该方法有三个参数coverImagePath(string类型)封面图片路径, videoPath(string类型)视频路径, completion(function类型)视频上传成功后需要调用该方法调整原生界面状态

ShortVideoModule模块的方法

deleteTemporaryVideoFiles : function类型, ShortVideoView和VideoPickerView组件中通过录制和编辑生成的临时视频文件在组件被移除后没有做删除处理, 建议在移除这两个组件时手动调用该方法删除临时视频文件.

使用

import {ShortVideoView, VideoPickerView, ShortVideoModule} from 'react-native-cq-short-video';

// 删除拍摄和编辑时生成的临时视频文件
deleteTemporaryVideo {
    ShortVideoModule.deleteTemporaryVideoFiles();
}

render() {

    return(
        <View style={{flex:1,justifyContent:'center',alignItems:'center'}}>
            <ShortVideoView style={{height:deviceHeight,width:deviceWidth}}
                            onCloseCamera={()=>console.log("点击了拍摄界面的返回按钮")
                            onUploadVideo={(coverImagePath,videoPath,completion) => this.uploadVideo(coverImagePath,videoPath,completion)}
                            beautyStyle={0}
                            beautyLevel={3}
                            whitenessLevel={3}
                            ruddinessLevel={3}
                            />
                            
            {this.state.showVideoPicker &&
            <VideoPickerView style={{height:deviceheight, width:devicewidth, position:'absolute', bottom:0}}
                             onCloseVideoPicker={()=>this.setState({showVideoPicker:false})}
                             onUploadVideo={(coverImagePath,videoPath,completion) => this.uploadVideo(coverImagePath,videoPath,completion)}
            />
            }
        </View>
        )
}