npm:react-native-cq-short-video

README

安装、配置

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

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

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

添加依赖库: TARGETS --> (projectName) --> Build Phases --> Link Binary With Libraries 中添加以下库
```
TXLiteAVSDK_UGC.framework
Accelerate.framework
libstdc++.tbd
libsqlite3.tbd
```

集成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

```

在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>
        )
}

Usage no npm install needed!

README

安装、配置

ShortVideoView的属性

VideoPickerView的属性

ShortVideoModule模块的方法

使用