react-native-cq-short-video
v1.1.0
Published
Integrate tencent short video recording and editing function
Downloads
465
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>
)
}