更新记录
2.2.0(2023-02-01)
- 升级UGC SDK至10.9.13102;
2.1.0(2022-05-17)
- 修复iOS无法获取缩略图bug;
2.0.1(2022-04-28)
- 修复Android平台generateVideo回调监听无效bug;
平台兼容性
Android | Android CPU类型 | iOS |
---|---|---|
适用版本区间:4.4 - 11.0 | armeabi-v7a:未测试,arm64-v8a:未测试,x86:未测试 | 适用版本区间:9 - 15 |
原生插件通用使用流程:
- 购买插件,选择该插件绑定的项目。
- 在HBuilderX里找到项目,在manifest的app原生插件配置中勾选模块,如需要填写参数则参考插件作者的文档添加。
- 根据插件作者的提供的文档开发代码,在代码中引用插件,调用插件功能。
- 打包自定义基座,选择插件,得到自定义基座,然后运行时选择自定义基座,进行log输出测试。
- 开发完毕后正式云打包
付费原生插件目前不支持离线打包。
Android 离线打包原生插件另见文档 https://nativesupport.dcloud.net.cn/NativePlugin/offline_package/android
iOS 离线打包原生插件另见文档 https://nativesupport.dcloud.net.cn/NativePlugin/offline_package/ios
注意事项:使用HBuilderX2.7.14以下版本,如果同一插件且同一appid下购买并绑定了多个包名,提交云打包界面提示包名绑定不一致时,需要在HBuilderX项目中manifest.json->“App原生插件配置”->”云端插件“列表中删除该插件重新选择
腾讯云短视频编辑
视频编辑包括视频裁剪、时间特效(慢动作、倒放、重复)、滤镜特效(动感光波、暗黑幻影、灵魂出窍、画面分裂)、滤镜风格(唯美、粉嫩、蓝调等)、音乐混音、动态贴纸、静态贴纸、气泡字幕等功能。
技术支持
建议扫码添加我们技术支持,协助接入和测试。
微信号: ruanyunkeji006
快速开始
集成插件
- 加载插件
插件名称: RY-TencentUGCEditor
在使用前,你需要先加载插件。
<view>
<RY-TencentUGCEditor class="ugc" ref="ugcEditor" v-bind:style = "{ width: playerWidth, height: playerHeight }"></RY-TencentUGCEditor>
</view>
说明:
可以通过修改width和height参数值的大小,来修改视频容器的大小。
- 腾讯云配置
开始使用插件
使用RY-TencentUGCEditor,需要调用 init 初始化模块,才可以调用其他的接口功能。
this.$refs.editor.init({
licence: {
url: 'https://xxx.xxx.com/xxx',
key: '1rewqswxxxxiouewmx'
}
}, ret => {
console.log(ret);
});
设置监听
调用 setEditorListener 可以设置监听,视频通话会返回相关的事件回调。
this.$refs.editor.setEditorListener({}, ret => {
console.log(ret);
});
使用说明
视频编辑的基本使用流程如下:
- 设置视频路径。
- 添加效果。
- 生成视频到指定文件。
- 监听生成事件。
// 1. 初始化编辑器, 如无需预览,可以传 nil 或直接调用 init 方法
// 设置源视频路径
this.$refs.ugcEditor.setVideoPath({
videoPath: self.videoPath
}, ret => {
console.log(ret);
});
// 2. 对视频进行处理,这里以添加水印为例
this.$refs.ugcEditor.setWaterMark({
img: self.img,
rect: {
x: 0,
y: 0,
w: 20,
h: 20
}
}, ret => {
console.log(ret);
});
// 3. 生成视频, 以响应用户点击为例
this.$refs.ugcEditor.generateVideo({
mode: self.compressedMode,
path: self.generatePath
}, ret => {
console.log(ret);
});
// 配置代理
this.$refs.ugcEditor.setGenerateListener({}, ret => {
if (ret.hasOwnProperty("eventType")) {
// 4. 获取生成进度
if ('onGenerateProgress' == ret.eventType) {
}
// 获取生成结果
if ('onGenerateComplete' == ret.eventType) {
if (ret.result.retCode == 0) {
// 生成成功
} else {
// 生成失败,原因可以查看 ret.result.descMsg
}
}
} else {
console.log(ret);
}
});
// 4. 获取生成进度
// 获取生成结果
视频信息获取
getVideoInfo 方法可以获取指定视频文件的一些基本信息, 相关接口如下:
ugcReader.getVideoInfo({
videoPath: self.videoPath
}, ret => {
console.log(ret);
});
返回的 videoInfo 定义如下:
字符串 coverImage
整数类型 duration
整数类型 fileSize
整数类型 fps
整数类型 bitrate
整数类型 audioSampleRate
宽度 width
高度 height
缩略图获取
缩略图的接口主要用于生成视频编辑界面的预览缩略图,或获取视频封面等。
1. 按个数平分时间获取缩略图
getSampleImages 可以获取按指定数量,时间间隔相同的预览图:
/**
* 获取视频的采样图列表
* count 获取的采样图数量(均匀采样)
*/
this.$refs.ugcEditor.getSampleImagesWithCount({
count: self.count,
width: self.width,
height: self.height
}, ret => {
console.log(ret);
});
可以使用了 getSampleImages 获取了10张缩略图来构建一个由视频预览图组成的进度条。
2. 根据时间列表获取缩略图
this.$refs.ugcEditor.getSampleImagesWithTimes({
times: self.times,
width: self.width,
height: self.height
}, ret => {
console.log(ret);
});
编辑预览
视频编辑提供了定点预览(将视频画面定格在某一时间点)与区间预览(循环播放某一时间段 A<=>B 内的视频片段)两种效果预览方式,使用时需要给 SDK 绑定一个 UIView 用于显示视频画面。
1. 绑定 UIView
TXVideoEditer 的 init 函数用于绑定一个 UIView 给 SDK 来渲染视频画面,通过控制 init 的 renderMode 来设置自适应与填充两种模式。
0 - 填充模式,尽可能充满屏幕不留黑边,所以可能会裁剪掉一部分画面。
1 - 适应模式,尽可能保持画面完整,但当宽高比不合适时会有黑边出现。
2. 定点预览
previewAtTime 函数用于定格显示某一个时间点的视频画面。
/** 渲染某一时刻的视频画面
* @param time 预览帧时间(s)
*/
this.$refs.ugcEditor.previewAtTime({
time: self.time,
width: self.width,
height: self.height
}, ret => {
console.log(ret);
});
3. 区间预览
startPlayFromTime 函数用于循环播放某一时间段 A<=>B 内的视频片段。
/** 播放某一时间段的视频
* @param startTime 播放起始时间(s)
* @param endTime 播放结束时间(s)
*/
this.$refs.ugcEditor.startPlayFromTime({
startTime: self.startTime,
endTime: self.endTime
}, ret => {
console.log(ret);
});
4. 预览的暂停与恢复
/// 暂停播放
this.$refs.ugcEditor.pausePlay({}, ret => {
console.log(ret);
});
/// 继续播放
this.$refs.ugcEditor.resumePlay({}, ret => {
console.log(ret);
});
/// 停止播放
this.$refs.ugcEditor.stopPlay({}, ret => {
console.log(ret);
});
5. 美颜滤镜
您可以给视频添加滤镜效果,例如美白、浪漫、清新等滤镜,demo 提供了多种滤镜选择,对应的滤镜资源在 Common/Resource/Filter/FilterResource.bundle 中,同时也可以设置自定义的滤镜。 设置滤镜的方法为:
setFiler({
path: image
}, ret => {
});
其中 image 为滤镜映射图,image 设置为 nil,会清除滤镜效果。
Demo 示例:
this.$refs.ugcEditor.setFilter({
path: self.img
}, ret => {
console.log(ret);
});
6. 设置水印
a. 设置全局水印
您可以为视频设置水印图片,并且可以指定图片的位置。 设置水印的方法为:
setWaterMark({
img: waterMark,
rect: normalizationFrame
}, ret => {
});
其中 waterMark 表示水印图片,normalizationFrame 是相对于视频图像的归一化 frame,frame 的 x、y、w、h 的取值范围都为0 - 1。
Demo 示例:
this.$refs.ugcEditor.setWaterMark({
img: self.img,
rect: {
x: 0,
y: 0,
w: 20,
h: 20
}
}, ret => {
console.log(ret);
});
b. 设置片尾水印
您可以为视频设置片尾水印,并且可以指定片尾水印的位置。 设置片尾水印的方法为:
setTailWaterMark({
img: tailWaterMark,
rect: normalizationFrame,
duration: duration
}, ret => {
console.log(ret);
})
其中 tailWaterMark 表示片尾水印图片,rect 是相对于视频图像的归一化 normalizationFrame,frame 的 x、y、w、h 的取值范围都为0 - 1,duration 为水印的持续时长。
Demo 示例:设置水印在片尾中间,持续时间1s。
this.$refs.ugcEditor.setTailWaterMark({
img: self.img,
rect: {
x: 0,
y: 0,
w: 20,
h: 20
},
duration: 60
}, ret => {
console.log(ret);
});
压缩裁剪
视频码率设置
this.$refs.ugcEditor.setVideoBitrate({
bitrate: self.bitrate
}, ret => {
console.log(ret);
});
视频裁剪
视频编辑类操作都符合同一个操作原则:即先设定操作指定,最后用 generateVideo 将所有指令顺序执行,这种方式可以避免多次重复压缩视频引入的不必要的质量损失。
this.$refs.ugcEditor.setCutFromTime({
startTime: self.startTime,
endTime: self.endTime
}, ret => {
console.log(ret);
});
this.$refs.ugcEditor.generateVideo({
mode: self.compressedMode,
path: self.generatePath
}, ret => {
console.log(ret);
});
输出时指定文件压缩质量和输出路径,输出的进度和结果会通过generateDelegate以回调的形式通知用户。
更多功能
- 类抖音特效
- 背景音乐
扫码添加, 获取技术支持:
微信号: ruanyunkeji006