更新记录

2.0.0(2020-12-26)

  1. 短视频录制;
  2. 美颜;
  3. 滤镜;
  4. 特效;
  5. 背景音乐;

平台兼容性

Android iOS
适用版本区间:4.4 - 11.0 适用版本区间:9 - 14

原生插件通用使用流程:

  1. 购买插件,选择该插件绑定的项目。
  2. 在HBuilderX里找到项目,在manifest的app原生插件配置中勾选模块,如需要填写参数则参考插件作者的文档添加。
  3. 根据插件作者的提供的文档开发代码,在代码中引用插件,调用插件功能。
  4. 打包自定义基座,选择插件,得到自定义基座,然后运行时选择自定义基座,进行log输出测试。
  5. 开发完毕后正式云打包

付费原生插件目前不支持离线打包。
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。

拍照和录制

使用说明

视频录制的基本使用流程如下:

  1. 配置录制参数。
  2. 启动画面预览。
  3. 设置录制效果。
  4. 完成录制。

画面预览

小视频的录制功能,我们的第一个工作是先把预览功能实现。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 录制事件回调预留的接口,暂未使用。

录制属性设置

  1. 画面设置

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"
    });
});
  1. 速度设置

setRecordSpeed({params}, ret) 设置录制速率

params:

参数 含义
speed 录制速率
var self = this;
this.$refs.ugcRecord.setRecordSpeed({
    speed: self.speed
}, ret => {
    uni.showToast({
        title: JSON.stringify(ret),
        icon: "none"
    });
});
  1. 声音设置

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"
    });
});

设置效果

在视频录制的过程中,您可以给录制视频的画面设置各种特效。

  1. 水印效果

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"
    });
});
  1. 滤镜效果

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"
    });
});
  1. 美颜效果

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"
    });
});

多段录制

视频多段录制基本使用流程如下:

  1. 启动画面预览。
  2. 开始录制。
  3. 开始播放 BGM。
  4. 暂停录制。
  5. 暂停播放 BGM。
  6. 继续播放 BGM。
  7. 继续录制。
  8. 停止录制。
  9. 停止播放 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

  • 短视频上传

隐私、权限声明

1. 本插件需要申请的系统权限列表:

Android: "android.permission.INTERNET", "android.permission.ACCESS_NETWORK_STATE", "android.permission.ACCESS_WIFI_STATE", "android.permission.READ_PHONE_STATE", "android.permission.CALL_PHONE", "android.permission.WRITE_EXTERNAL_STORAGE", "android.permission.READ_EXTERNAL_STORAGE", "android.permission.READ_LOGS", "android.permission.CAMERA", "android.hardware.Camera", "android.hardware.camera.autofocus" iOS: 无

2. 本插件采集的数据、发送的服务器地址、以及数据用途说明:

插件使用的腾讯云短视频SDK会采集数据,详情可参考:https://cloud.tencent.com/document/product/584/9453

3. 本插件是否包含广告,如包含需详细说明广告表达方式、展示频率:

使用中有什么不明白的地方,就向插件作者提问吧~ 我要提问