更新记录
4.0.1(2024-01-17)
- 修复iOS内测接口无法授权bug;
4.0.0(2024-01-10)
- 优化短视频保存时因为分辨率16对齐引起的黑边的问题;
- 优化短视频添加 BGM 录制保存后音视频不同步的问题;
3.1.0(2023-02-01)
- 升级短视频SDK至版本10.9.13102;
平台兼容性
Android | Android CPU类型 | iOS |
---|---|---|
适用版本区间:4.4 - 14.0 | armeabi-v7a:未测试,arm64-v8a:未测试,x86:未测试 | 适用版本区间:9 - 17 |
原生插件通用使用流程:
- 购买插件,选择该插件绑定的项目。
- 在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原生插件配置”->”云端插件“列表中删除该插件重新选择
腾讯云短视频录制
视频录制包括视频变速录制、美颜、滤镜、声音特效、背景音乐设置等功能。
技术支持
原生模块本身使用复杂,加上音视频功能复杂,造成接入难度不小。 建议使用前先联系我们的客服,协助接入。
我们的客服微信: ruanyunkeji001或ruanyunkeji002
接口列表
函数 | 功能 |
---|---|
init | 初始化 |
startCameraSimplePreview | 开启画面预览 |
setVideoResolution | 切换视频录制分辨率 |
setVideoBitrate | 设置视频码率 |
setZoom | 调整焦距 |
switchCamera | 切换前后摄像头 |
toggleTorch | 打开闪光灯 |
startRecord | 开始录制 |
pauseRecord | 暂停录制短视频 |
resumeRecord | 恢复录制短视频 |
stopRecord | 结束录制短视频 |
setRecordListener | 设置录制监听 |
setHomeOrientation | 横竖屏录制 |
setRenderRotation | 设置预览视频方向 |
setAspectRatio | 设置视频录制比例 |
setRecordSpeed | 设置录制速率 |
setMicVolume | 设置麦克风的音量大小 |
setMute | 设置是否静音录制 |
snapshot | 拍照 |
setWatermark | 设置水印 |
setFilter | 设置指定素材滤镜特效 |
setFilterStrength | 设置滤镜浓度 |
setBeautyStyle | 设置美颜效果 |
setBeautyLevel | 设置美颜级别 |
setWhitenessLevel | 设置美白级别 |
setRuddyLevel | 设置红润级别 |
getDuration | 获取当前录制视频片段的总时长 |
getPartsPathList | 获取当前录制所有视频片段路径 |
deleteLastPart | 删除当前录制视频最后一片段 |
deletePart | 删除当前录制视频指定片段 |
deleteAllParts | 删除当前录制视频所有片段 |
insertPart | 插入视频片段 |
joinAllParts | 合成当前录制视频所有片段 |
setBGM | 设置背景音乐文件 |
playBGMFromTime | 播放背景音乐 |
stopBGM | 停止背景音乐 |
pauseBGM | 暂停播放背景音乐 |
resumeBGM | 继续播放背景音乐 |
setReverbType | 设置混响效果 |
setVoiceChangerType | 设置变声类型 |
快速开始
腾讯云配置
这个步骤比较繁琐,可以联系我们上文中的客服进行指引
注册或登录腾讯云账号,实名认证后,开通云点播功能,并申请licence。
模块载入
加载模块
新建nvue文件,注意该模块必须在nvue中使用。
模块名称为: RY-TencentUGCRecord,使用
<div class="svideo">
<RY-TencentUGCRecord ref="ugcRecord" v-bind:style = "{ width: playerWidth, height: playerHeight }"></RY-TencentUGCRecord>
</div>
备注: 可以在js的data()中声明播放器的宽度和高度,这样在代码中可以控制这两个参数的改变,可以参考
data() {
return {
playerWidth: 0,
playerHeight: 0,
url: 'http://licensxxxxTXUgcSDK.licence',
key: '3d436208dda48bfd44630a2fd7f92871',
videoResolution: 0,
renderMode: 0,
videoBitrate: 6500,
distance: 1,
isFront: true,
isTorch: true,
orientation: 1,
renderRotation: 0,
aspectRatio: 0,
speed: 0,
isMute: true,
filePath: 'record/file.mp4',
coverPath: 'record/cover.png',
partFolder: 'record',
snapshotPath: 'snapshot/snapshot.png',
waterMarkImg: '',
beautyStyle: 0,
beautyLevel: 0,
whitenessLevel: 0,
ruddyLevel: 0,
filterImg: '',
filterStrength: 0.5,
bgmPath: 'http://bgm-12524637xxxxuodiya.mp3',
isBGMLoop: true,
startTime: 10,
endTime: 30000,
micVolume: 1,
bgmVolume: 1,
reverbType: 0,
voiceChanger: 0,
partVideoPath: '',
outputPath: 'record/join.mp4'
}
}
模块初始化
init({params}, ret) 初始化
params:
参数 | 含义 |
---|---|
licence | 许可证 |
docPath | doc目录路径 |
var self = this;
const {windowWidth, windowHeight} = uni.getSystemInfoSync();
self.playerWidth = windowWidth / 2;
self.playerHeight = windowHeight / 2;
self.$refs.ugcRecord.init({
licence: {
url: self.url,
key: self.key,
},
docPath: plus.io.convertLocalFileSystemURL('_doc')
}, ret => {
uni.showToast({
title: JSON.stringify(ret),
icon: "none"
});
});
可以通过直接控制组件的宽度和高度来控制显示界面的大小,如果上面的playerWidth和playerHeight。
拍照和录制
使用说明
视频录制的基本使用流程如下:
- 配置录制参数。
- 启动画面预览。
- 设置录制效果。
- 完成录制。
画面预览
小视频的录制功能,我们的第一个工作是先把预览功能实现。startCameraSimplePreview 函数用于启动预览。由于启动预览要打开摄像头和麦克风,所以这里可能会有权限申请的提示窗。
1. 启动预览
startCameraSimplePreview({}, ret) 开启画面预览
this.$refs.ugcRecord.startCameraSimplePreview({}, ret => {
uni.showToast({
title: JSON.stringify(ret),
icon: "none"
});
});
2. 调整预览参数
如果在相机启动后,可以通过以下方法修改:
setVideoResolution({params}, ret) 切换视频录制分辨率
params:
参数 | 含义 |
---|---|
resolution | 视频分辨率 |
var self = this;
this.$refs.ugcRecord.setVideoResolution({
resolution: self.videoResolution
}, ret => {
uni.showToast({
title: JSON.stringify(ret),
icon: "none"
});
});
setVideoBitrate({params}, ret) 设置视频码率
params:
参数 | 含义 |
---|---|
videoBitrate | 视频分辨率 |
var self = this;
this.$refs.ugcRecord.setVideoBitrate({
videoBitrate: self.videoBitrate
}, ret => {
uni.showToast({
title: JSON.stringify(ret),
icon: "none"
});
});
setZoom({params}, ret) 调整焦距
params:
参数 | 含义 |
---|---|
distance | 焦距 |
var self = this;
this.$refs.ugcRecord.setZoom({
distance: self.distance
}, ret => {
uni.showToast({
title: JSON.stringify(ret),
icon: "none"
});
});
switchCamera({params}, ret) 切换前后摄像头
params:
参数 | 含义 |
---|---|
isFront | 是否前置摄像头 |
var self = this;
this.$refs.ugcRecord.switchCamera({
isFront: self.isFront
}, ret => {
uni.showToast({
title: JSON.stringify(ret),
icon: "none"
});
});
toggleTorch({params}, ret) 打开闪关灯
params:
参数 | 含义 |
---|---|
enable | 是否打开 |
var self = this;
this.$refs.ugcRecord.toggleTorch({
enable: self.isTorch
}, ret => {
uni.showToast({
title: JSON.stringify(ret),
icon: "none"
});
});
录制过程控制
录制的开始、暂停与恢复
startRecord({params}, ret) 开始录制
params:
参数 | 含义 |
---|---|
filePath | 视频文件输出路径 |
coverPath | 封面文件输出路径 |
partFolder | 分片视频存储目录 |
var self = this;
this.$refs.ugcRecord.startRecord({
filePath: self.filePath,
coverPath: self.coverPath,
partFolder: self.partFolder
}, ret => {
uni.showToast({
title: JSON.stringify(ret),
icon: "none"
});
});
pauseRecord({}, ret) 暂停录制短视频
this.$refs.ugcRecord.pauseRecord({}, ret => {
uni.showToast({
title: JSON.stringify(ret),
icon: "none"
});
});
resumeRecord({}, ret) 恢复录制短视频
this.$refs.ugcRecord.resumeRecord({}, ret => {
uni.showToast({
title: JSON.stringify(ret),
icon: "none"
});
});
stopRecord({}, ret) 结束录制短视频
this.$refs.ugcRecord.stopRecord({}, ret => {
uni.showToast({
title: JSON.stringify(ret),
icon: "none"
});
});
录制的过程和结果是通过 setRecordListener 协议进行回调:
setRecordListener({}, ret) 设置录制监听
this.$refs.ugcRecord.setRecordListener({}, ret => {
uni.showToast({
title: JSON.stringify(ret),
icon: "none"
});
});
eventType类型为:
- onRecordProgress 用于反馈录制的进度,参数 millisecond 表示录制时长,单位毫秒。
{
eventType: 'onRecordProgress',
milliSecond: 11300
}
- onRecordComplete 反馈录制的结果,TXRecordResult 的 retCode 和 descMsg 字段分别表示错误码和错误描述信息,videoPath 表示录制完成的小视频文件路径,coverImage 为自动截取的小视频第一帧画面,便于在视频发布阶段使用。
{
eventType: 'onRecordComplete',
result: {
videoPath: '/xxx/xxx',
coverPath: '/xxx/xxx'
}
}
- onRecordEvent 录制事件回调预留的接口,暂未使用。
录制属性设置
- 画面设置
setHomeOrientation({params}, ret) 横竖屏录制
params:
参数 | 含义 |
---|---|
orientation | 横竖屏录制方向 |
var self = this;
this.$refs.ugcRecord.setHomeOrientation({
orientation: self.orientation
}, ret => {
uni.showToast({
title: JSON.stringify(ret),
icon: "none"
});
});
setRenderRotation({params}, ret) 设置预览视频方向
params:
参数 | 含义 |
---|---|
rotation | 视频预览向右旋转的角度 |
var self = this;
this.$refs.ugcRecord.setRenderRotation({
rotation: self.renderRotation
}, ret => {
uni.showToast({
title: JSON.stringify(ret),
icon: "none"
});
});
setAspectRatio({params}, ret) 设置视频录制比例
params:
参数 | 含义 |
---|---|
type | 录制的比列 |
var self = this;
this.$refs.ugcRecord.setAspectRatio({
type: self.aspectRatio
}, ret => {
uni.showToast({
title: JSON.stringify(ret),
icon: "none"
});
});
- 速度设置
setRecordSpeed({params}, ret) 设置录制速率
params:
参数 | 含义 |
---|---|
speed | 录制速率 |
var self = this;
this.$refs.ugcRecord.setRecordSpeed({
speed: self.speed
}, ret => {
uni.showToast({
title: JSON.stringify(ret),
icon: "none"
});
});
- 声音设置
setMicVolume({params}, ret) 设置麦克风的音量大小
params:
参数 | 含义 |
---|---|
volume | 音量大小 |
var self = this;
this.$refs.ugcRecord.setMicVolume({
volume: self.micVolume
}, ret => {
uni.showToast({
title: JSON.stringify(ret),
icon: "none"
});
});
setMute({params}, ret) 设置是否静音录制
params:
参数 | 含义 |
---|---|
isMute | 是否静音 |
var self = this;
this.$refs.ugcRecord.setMute({
isMute: self.isMute
}, ret => {
uni.showToast({
title: JSON.stringify(ret),
icon: "none"
});
});
拍照
snapshot({params}, ret) 截图/拍照
params:
参数 | 含义 |
---|---|
path | 保存路径 |
var self = this;
this.$refs.ugcRecord.snapshot({
path: self.snapshotPath
}, ret => {
uni.showToast({
title: JSON.stringify(ret),
icon: "none"
});
});
设置效果
在视频录制的过程中,您可以给录制视频的画面设置各种特效。
- 水印效果
setWatermark({params}, ret) 设置水印
params:
参数 | 含义 |
---|---|
img | 水印图片 |
rect | 水印坐标和大小 |
var self = this;
this.$refs.ugcRecord.setWatermark({
img: self.waterMarkImg,
rect: {
x: 0.1,
y: 0.1,
w: 0.1,
h: 0.1
}
}, ret => {
uni.showToast({
title: JSON.stringify(ret),
icon: "none"
});
});
- 滤镜效果
setFilter({params}, ret) 设置指定素材滤镜特效
params:
参数 | 含义 |
---|---|
img | 滤镜素材 |
self.$refs.ugcRecord.setFilter({
img: self.filterImg
}, ret => {
uni.showToast({
title: JSON.stringify(ret),
icon: "none"
});
});
setFilterStrength({params}, ret) 设置滤镜浓度
params:
参数 | 含义 |
---|---|
strength | 滤镜浓度 |
var self = this;
self.$refs.ugcRecord.setFilterStrength({
strength: self.filterStrength
}, ret => {
uni.showToast({
title: JSON.stringify(ret),
icon: "none"
});
});
- 美颜效果
setBeautyStyle({params}, ret) 设置美颜效果
params:
参数 | 含义 |
---|---|
mode | 美颜风格 |
var self = this;
self.$refs.ugcRecord.setBeautyStyle({
mode: self.beautyStyle
}, ret => {
uni.showToast({
title: JSON.stringify(ret),
icon: "none"
});
});
setBeautyLevel({params}, ret) 设置美颜级别
params:
参数 | 含义 |
---|---|
level | 美颜级别 |
var self = this;
self.$refs.ugcRecord.setBeautyLevel({
level: self.beautyLevel
}, ret => {
uni.showToast({
title: JSON.stringify(ret),
icon: "none"
});
});
setWhitenessLevel({params}, ret) 设置美白级别
params:
参数 | 含义 |
---|---|
level | 美白级别 |
var self = this;
self.$refs.ugcRecord.setWhitenessLevel({
level: self.whitenessLevel
}, ret => {
uni.showToast({
title: JSON.stringify(ret),
icon: "none"
});
});
setRuddyLevel({params}, ret) 设置红润级别
params:
参数 | 含义 |
---|---|
level | 红润级别 |
var self = this;
self.$refs.ugcRecord.setRuddyLevel({
level: self.ruddyLevel
}, ret => {
uni.showToast({
title: JSON.stringify(ret),
icon: "none"
});
});
多段录制
视频多段录制基本使用流程如下:
- 启动画面预览。
- 开始录制。
- 开始播放 BGM。
- 暂停录制。
- 暂停播放 BGM。
- 继续播放 BGM。
- 继续录制。
- 停止录制。
- 停止播放 BGM。
getDuration({}, ret) 获取当前录制视频片段的总时长
var self = this;
this.$refs.ugcRecord.getDuration({}, ret => {
uni.showToast({
title: JSON.stringify(ret),
icon: "none"
});
});
getPartsPathList({}, ret) 获取当前录制所有视频片段路径
this.$refs.ugcRecord.getPartsPathList({}, ret => {
uni.showToast({
title: JSON.stringify(ret),
icon: "none"
});
});
deleteLastPart({}, ret) 删除当前录制视频最后一片段
this.$refs.ugcRecord.deleteLastPart({}, ret => {
uni.showToast({
title: JSON.stringify(ret),
icon: "none"
});
});
deletePart({params}, ret) 删除当前录制视频指定片段
params:
参数 | 含义 |
---|---|
index | 索引位置 |
this.$refs.ugcRecord.deletePart({
index: 1
}, ret => {
uni.showToast({
title: JSON.stringify(ret),
icon: "none"
});
});
deleteAllParts({}, ret) 删除当前录制视频所有片段
this.$refs.ugcRecord.deleteAllParts({}, ret => {
uni.showToast({
title: JSON.stringify(ret),
icon: "none"
});
});
insertPart({params}, ret) 插入视频片段
params:
参数 | 含义 |
---|---|
index | 索引位置 |
videoPath | 添加视频的文件路径 |
var self = this;
this.$refs.ugcRecord.insertPart({
index: 1,
videoPath: self.partVideoPath
}, ret => {
uni.showToast({
title: JSON.stringify(ret),
icon: "none"
});
});
joinAllParts({params}, ret) 合成当前录制视频所有片段
params:
参数 | 含义 |
---|---|
outputPath | 合成后视频文件存放地址 |
var self = this;
this.$refs.ugcRecord.joinAllParts({
outputPath: self.outputPath
}, ret => {
uni.showToast({
title: JSON.stringify(ret),
icon: "none"
});
});
录制草稿箱
草稿箱实现步骤:
第一次录制 1,开始录制。 2,暂停/结束第一次录制。 3,缓存视频分片到本地(草稿箱)。
第二次录制 1,预加载本地缓存视频分片。 2,继续录制。 3,结束录制。
获取第一次视频录制对象
var self = this;
this.$refs.ugcRecord.startRecord({
filePath: self.filePath,
coverPath: self.coverPath,
partFolder: self.partFolder
}, ret => {});
this.$refs.ugcRecord.pauseRecord({}, ret => {});
this.$refs.ugcRecord.getPartsPathList({}, ret => {});
获取第二次视频录制对象
var self = this;
this.$refs.ugcRecord.startRecord({
filePath: self.filePath,
coverPath: self.coverPath,
partFolder: self.partFolder
}, ret => {});
this.$refs.ugcRecord.pauseRecord({}, ret => {});
this.$refs.ugcRecord.getPartsPathList({}, ret => {});
添加背景音乐
录制添加 BGM
setBGM({params}, ret) 设置背景音乐文件
params:
参数 | 含义 |
---|---|
path | 音乐文件路径 |
var self = this;
self.$refs.ugcRecord.setBGM({
path: self.bgmPath
}, ret => {
uni.showToast({
title: JSON.stringify(ret),
icon: "none"
});
});
playBGMFromTime({params}, ret) 播放背景音乐
params:
参数 | 含义 |
---|---|
startTime | 音乐播放起始时间 |
endTime | 音乐播放结束时间 |
var self = this;
this.$refs.ugcRecord.playBGMFromTime({
startTime: self.startTime,
endTime: self.endTime
}, ret => {
uni.showToast({
title: JSON.stringify(ret),
icon: "none"
});
});
stopBGM({}, ret) 停止播放背景音乐
this.$refs.ugcRecord.stopBGM({}, ret => {
uni.showToast({
title: JSON.stringify(ret),
icon: "none"
});
});
pauseBGM({params}, ret) 暂停播放背景音乐
this.$refs.ugcRecord.pauseBGM({}, ret => {
uni.showToast({
title: JSON.stringify(ret),
icon: "none"
});
});
resumeBGM({}, ret) 继续播放背景音乐
this.$refs.ugcRecord.resumeBGM({}, ret => {
uni.showToast({
title: JSON.stringify(ret),
icon: "none"
});
});
编辑添加 BGM
详情请参考我们的RY-TencentUGCEditor插件。
变声和混响
setReverbType({params}, ret) 设置混响效果
params:
参数 | 含义 |
---|---|
type | 混响类型 |
var self = this;
this.$refs.ugcRecord.setReverbType({
type: self.reverbType
}, ret => {
uni.showToast({
title: JSON.stringify(ret),
icon: "none"
});
});
setVoiceChangerType({params}, ret) 设置变声类型
params:
参数 | 含义 |
---|---|
type | 变声类型 |
var self = this;
this.$refs.ugcRecord.setVoiceChangerType({
type: self.voiceChanger
}, ret => {
uni.showToast({
title: JSON.stringify(ret),
icon: "none"
});
});
说明: 变声混响只针对录制人声有效,针对 BGM 无效。
更多功能
获取内测功能和技术支持,请联系我们客户微信: ruanyunkeji001或ruanyunkeji002
- 短视频上传