更新记录

2.2.0（2023-02-02）

1. 升级短视频SDK至版本10.9.13102;

2.1.0（2022-05-17）

1. 短视频编辑修复Android平台generateVideo回调监听无效bug;
2. 短视频编辑修复iOS无法获取缩略图bug;

2.0.0（2022-05-09）

1. 新增视频信息获取功能;

平台兼容性

原生插件通用使用流程：

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原生插件配置”->”云端插件“列表中删除该插件重新选择

腾讯云短视频

腾讯云短视频录制

视频录制包括视频变速录制、美颜、滤镜、声音特效、背景音乐设置等功能。

使用教程

腾讯云短视频编辑

视频编辑包括视频裁剪、时间特效（慢动作、倒放、重复）、滤镜特效（动感光波、暗黑幻影、灵魂出窍、画面分裂）、滤镜风格（唯美、粉嫩、蓝调等）、音乐混音、动态贴纸、静态贴纸、气泡字幕等功能。

使用教程

技术支持

建议扫码添加我们技术支持，协助接入和测试。

微信号: ruanyunkeji006

快速开始

集成插件

• 加载插件

插件名称: RY-TencentUGC-Record

插件类型为component类型，需要再nvue页面中使用。

<view>
    <RY-TencentUGC-Record class="ugc" ref="UGCRecord" v-bind:style = "{ width: playerWidth, height: playerHeight }"></RY-TencentUGC-Record>
</view>

说明:

可以通过修改width和height参数值的大小，来修改视频容器的大小。

• 腾讯云配置

这个步骤比较繁琐，可以联系我们上文中的客服进行指引

注册或登录腾讯云账号，实名认证后，开通云点播功能，并申请licence。

开始使用插件

需要调用 [init]() 初始化插件，才可以调用其他的接口功能。

self.$refs.UGCRecord.init({
    licence: {
        url: self.url,
        key: self.key,
    },
    docPath: plus.io.convertLocalFileSystemURL('_doc')
}, ret => {
    console.log(ret);
});

可以通过直接控制组件的宽度和高度来控制显示界面的大小，如果上面的playerWidth和playerHeight。

拍照和录制

使用说明

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

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

画面预览

小视频的录制功能，我们的第一个工作是先把预览功能实现。startCameraSimplePreview 函数用于启动预览。由于启动预览要打开摄像头和麦克风，所以这里可能会有权限申请的提示窗。

1. 启动预览

self.$refs.UGCRecord.init({
    licence: {
        url: self.url,
        key: self.key,
    },
    docPath: plus.io.convertLocalFileSystemURL('_doc')
}, ret => {
    console.log(ret);
});

this.$refs.UGCRecord.setRecordListener({}, ret => {
    console.log(ret);
});

// 在self.previewView中显示照相机预览画面
this.$refs.UGCRecord.startCameraSimplePreview({}, ret => {
    console.log(ret);
});

// 结束画面预览
this.$refs.UGCRecord.stopCameraPreview({}, ret => {
    console.log(ret);
});

2. 调整预览参数

如果在相机启动后，可以通过以下方法修改：

// 切换视频录制分辨率到540p
this.$refs.UGCRecord.setVideoResolution({
    resolution: 4
}, ret => {
    console.log(ret);
});

// 切换视频录制码率到6500Kbps
this.$refs.UGCRecord.setVideoBitrate({
    videoBitrate: 6500
}, ret => {
    console.log(ret);
});

// 设置焦距为3, 当为1的时候为最远视角（正常镜头），当为5的时候为最近视角（放大镜头）
this.$refs.UGCRecord.setZoom({
    distance: 3
}, ret => {
    console.log(ret);
});

// 切换到后置摄像头 true 切换到前置摄像头 false 切换到后置摄像头
this.$refs.UGCRecord.switchCamera({
    isFront: self.isFront
}, ret => {
    console.log(ret);
});

// 打开闪光灯 true为打开， false为关闭.
this.$refs.UGCRecord.toggleTorch({
    enable: self.isTorch
}, ret => {
    console.log(ret);
});

录制过程控制

录制的开始、暂停与恢复

// 开始录制,可以指定输出视频文件地址、视频分片存储地址和封面地址
this.$refs.UGCRecord.startRecord({
    filePath: self.filePath,
    coverPath: self.coverPath,
    partFolder: self.partFolder
}, ret => {
    console.log(ret);
});

// 暂停录制
this.$refs.UGCRecord.pauseRecord({}, ret => {
    console.log(ret);
});

// 继续录制
this.$refs.UGCRecord.resumeRecord({}, ret => {
    console.log(ret);
});

// 结束录制
this.$refs.UGCRecord.stopRecord({}, ret => {
    console.log(ret);
});

录制的过程和结果是通过 setRecordListener 协议进行回调：

this.$refs.UGCRecord.setRecordListener({}, ret => {
    console.log(ret);
});

eventType类型为:

• onRecordProgress 用于反馈录制的进度，参数 millisecond 表示录制时长，单位毫秒。

{
    eventType: 'onRecordProgress',
    milliSecond: 11300
}

• onRecordComplete 反馈录制的结果，TXRecordResult 的 retCode 和 descMsg 字段分别表示错误码和错误描述信息，videoPath 表示录制完成的小视频文件路径，coverImage 为自动截取的小视频第一帧画面，便于在视频发布阶段使用。

{
    eventType: 'onRecordComplete',
    result: {
        videoPath: '/xxx/xxx',
        coverPath: '/xxx/xxx'
    }
}

• onRecordEvent 录制事件回调预留的接口，暂未使用。

{
    eventType: 'onRecordEvent'
}

录制属性设置

1. 画面设置

// 设置横竖屏录制
this.$refs.UGCRecord.setHomeOrientation({
    orientation: self.orientation
}, ret => {
    console.log(ret);
});

// 设置视频预览方向
// rotation : 取值为 0 , 1, 2, 3（其他值无效） 表示视频预览向右旋转的角度
// 注意：需要在startRecord 之前设置，录制过程中设置无效
this.$refs.UGCRecord.setRenderRotation({
    rotation: self.renderRotation
}, ret => {
    uni.showToast({
        title: JSON.stringify(ret),
        icon: "none"
    });
});

// 设置录制的宽高比
// 0 宽高比为9:16
// 1 宽高比为3:4
// 2 宽高比为1:1
// 注意：需要在startRecord 之前设置，录制过程中设置无效
this.$refs.UGCRecord.setAspectRatio({
    type: self.aspectRatio
}, ret => {
    uni.showToast({
        title: JSON.stringify(ret),
        icon: "none"
    });
});

2. 速度设置

// 设置视频录制速率
// 0, 极慢速
// 1, 慢速
// 2, 正常速
// 3, 快速
// 4, 极快速
this.$refs.UGCRecord.setRecordSpeed({
    speed: self.speed
}, ret => {
    console.log(ret);
});

3. 声音设置

// 设置麦克风的音量大小，播放背景音混音时使用，用来控制麦克风音量大小
// 音量大小,1为正常音量,建议值为0-2,如果需要调大音量可以设置更大的值
this.$refs.UGCRecord.setMicVolume({
    volume: self.micVolume
}, ret => {
    console.log(ret);
});

// 设置录制是否静音 参数 isMute 代表是否静音，默认不静音
this.$refs.UGCRecord.setMute({
    isMute: self.isMute
}, ret => {
    uni.showToast({
        title: JSON.stringify(ret),
        icon: "none"
    });
});

拍照

// 截图/拍照，startCameraSimplePreview 或者 startCameraCustomPreview 之后调用有效
this.$refs.UGCRecord.snapshot({
    path: self.snapshotPath
}, ret => {
    console.log(ret);
});

设置效果

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

1. 水印效果

// 设置全局水印
// normalizationFrame : 水印相对于视频图像的归一化值，sdk 内部会根据水印宽高比自动计算 height
// 例如视频图像大小为（540，960）  frame 设置为（0.1，0.1，0.1, 0）
// 水印的实际像素坐标为
this.$refs.UGCRecord.setWatermark({
    img: self.waterMarkImg,
    rect: {
        x: 0.1,
        y: 0.1,
        w: 0.1,
        h: 0.1
    }
}, ret => {
    console.log(ret);
});

2. 滤镜效果

// 设置风格滤镜
// 设置颜色滤镜：浪漫、清新、唯美、粉嫩、怀旧...
// filterImage : 指定滤镜用的颜色查找表。注意：一定要用 png 格式
self.$refs.UGCRecord.setFilter({
    img: self.filterImg
}, ret => {
    console.log(ret);
});

// 用于设置滤镜的效果程度，从0到1，越大滤镜效果越明显，默认取值0.5
self.$refs.UGCRecord.setFilterStrength({
    strength: self.filterStrength
}, ret => {
    console.log(ret);
});

3. 美颜效果

self.$refs.UGCRecord.setBeautyStyle({
    mode: self.beautyStyle
}, ret => {
    console.log(ret);
});

self.$refs.UGCRecord.setBeautyLevel({
    level: self.beautyLevel
}, ret => {
    console.log(ret);
});

self.$refs.UGCRecord.setWhitenessLevel({
    level: self.whitenessLevel
}, ret => {
    console.log(ret);
});

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。

// 开启画面预览
this.$refs.UGCRecord.startCameraCustomPreview({}, ret => {
    console.log(ret);
});

// 开始录制
this.$refs.UGCRecord.startRecord({
    filePath: self.filePath,
    coverPath: self.coverPath,
    partFolder: self.partFolder
}, ret => {
    console.log(ret);
});

// 设置BGM
self.$refs.UGCRecord.setBGM({
    path: self.bgmPath
}, ret => {
    console.log(ret);
});

// 开始播放BGM
this.$refs.UGCRecord.setBGMNotify({}, ret => {
    // 开始播放
    if ('onBGMStart' == ret.eventType) {

    }
    // 播放进度
    if ('onBGMProgress' == ret.eventType) {

    }
    // 播放结束
    if ('onBGMComplete' == ret.eventType) {

    }
});

// 调用 pauseRecord 后会生成一段视频，视频可以在 TXUGCPartsManager 里面获取管理
this.$refs.UGCRecord.pauseRecord({}, ret => {
    console.log(ret);
});

// 开始播放BGM
this.$refs.UGCRecord.playBGMFromTime({
    startTime: self.startTime,
    endTime: self.endTime
}, ret => {
    console.log(ret);
});

// 暂停播放BGM
this.$refs.UGCRecord.pauseBGM({}, ret => {
    console.log(ret);
});

// 继续播放BGM
this.$refs.UGCRecord.resumeBGM({}, ret => {
    console.log(ret);
});

// 继续录制视频
this.$refs.UGCRecord.resumeRecord({}, ret => {
    console.log(ret);
});

// 停止录制，将多段视频合成为一个视频输出
this.$refs.UGCRecord.stopRecord({}, ret => {
    console.log(ret);
});

// 停止播放BGM
this.$refs.UGCRecord.stopBGM({}, ret => {
    console.log(ret);
});

//获取当前所有视频片段的总时长
this.$refs.UGCRecord.getDuration({}, ret => {
    uni.showToast({
        title: JSON.stringify(ret),
        icon: "none"
    });
});

// 获取所有视频片段路径
this.$refs.UGCRecord.getPartsPathList({}, ret => {
    uni.showToast({
        title: JSON.stringify(ret),
        icon: "none"
    });
});

// 删除最后一段视频
this.$refs.UGCRecord.deleteLastPart({}, ret => {
    uni.showToast({
        title: JSON.stringify(ret),
        icon: "none"
    });
});

// 删除指定片段视频
this.$refs.UGCRecord.deletePart({
    index: 1
}, ret => {
    uni.showToast({
        title: JSON.stringify(ret),
        icon: "none"
    });
});

// 删除所有片段视频
this.$refs.UGCRecord.deleteAllParts({}, ret => {
    uni.showToast({
        title: JSON.stringify(ret),
        icon: "none"
    });
});

// 您可以添加当前录制视频之外的视频
this.$refs.UGCRecord.insertPart({
    index: 0, 
    videoPath: self.partVideoPath
}, ret => {
    console.log(ret);
});

// 合成所有片段视频
this.$refs.UGCRecord.joinAllParts({
    outputPath: self.outputPath
}, ret => {
    console.log(ret);
});

录制草稿箱

草稿箱实现步骤：

第一次录制

1. 开始录制。
2. 暂停/结束第一次录制。
3. 缓存视频分片到本地（草稿箱）。

第二次录制

1. 预加载本地缓存视频分片。
2. 继续录制。
3. 结束录制。

// 获取第一次视频录制对象

// 开始录制
this.$refs.UGCRecord.startRecord({
    filePath: self.filePath,
    coverPath: self.coverPath,
    partFolder: self.partFolder
}, ret => {
    console.log(ret);
});

// 暂停录制，缓存视频分片
this.$refs.UGCRecord.pauseRecord({}, ret => {
    console.log(ret);
});

this.$refs.UGCRecord.getPartsPathList({}, ret => {
    // videoPathList 写本地
});

// 获取第二次视频录制对象

// 预加载本地缓存分片
this.$refs.UGCRecord.insertPart({
    index: 0, 
    videoPath: self.partVideoPath
}, ret => {
    console.log(ret);
});

// 开始录制
this.$refs.UGCRecord.startRecord({
    filePath: self.filePath,
    coverPath: self.coverPath,
    partFolder: self.partFolder
}, ret => {
    console.log(ret);
});

//结束录制,SDK会合成缓存视频片段和当前录制视频片段
this.$refs.UGCRecord.stopRecord({}, ret => {
    console.log(ret);
});

添加背景音乐

录制添加 BGM

// 设置 BGM 文件路径
self.$refs.UGCRecord.setBGM({
    path: self.bgmPath
}, ret => {
    console.log(ret);
});

this.$refs.UGCRecord.setBGMNotify({}, ret => {
    // 播放开始回调, errCode 0为成功其它为失败
    if ('onBGMStart' == ret.eventType) {

    }
    // progressMS: 已经播放的时长， durationMS: 总时长
    if ('onBGMProgress' == ret.eventType) {

    }
    // 播放结束回调, errCode 0为成功其它为失败
    if ('onBGMComplete' == ret.eventType) {

    }
});

// 播放 BGM
this.$refs.UGCRecord.playBGMFromTime({
    startTime: self.startTime,
    endTime: self.endTime
}, ret => {
    console.log(ret);
});

// 停止播放 BGM
this.$refs.UGCRecord.stopBGM({}, ret => {
    console.log(ret);
});

// 暂停播放 BGM
this.$refs.UGCRecord.pauseBGM({}, ret => {
    console.log(ret);
});

// 继续播放 BGM
this.$refs.UGCRecord.resumeBGM({}, ret => {
    console.log(ret);
});

// 设置麦克风的音量大小，播放背景音乐混音时使用，用来控制麦克风音量大小
// volume: 音量大小，1为正常音量，建议值为0-2，如果需要调大音量可以设置更大的值
this.$refs.UGCRecord.setMicVolume({
    volume: 1.0
}, ret => {
    console.log(ret);
});

// setBGMVolume 设置背景音乐的音量大小，播放背景音乐混音时使用，用来控制背景音音量大小
// volume: 音量大小，1为正常音量，建议值为0-2，如果需要调大背景音量可以设置更大的值
this.$refs.UGCRecord.setBGMVolume({
    volume: 1.0
}, ret => {
    console.log(ret);
});

编辑添加 BGM

// 初始化编辑器
this.$refs.UGCEditor.init({
    licence: {
        url: 'http://xxx.xxx.com/xxx',
        key: 'lewirwxxxweoeidk'
    }
    ...
}, ret => {
    console.log(ret);
});

// 设置 BGM 路径
this.$refs.UGCEditor.setVideoPath({
    videoPath: '/xxx/xxx/xxx.mp4'
}, ret => {
    console.log(ret);
});

// 设置 BGM 开始和结束时间
this.$refs.UGCEditor.setBGM({
    startTime: 0, 
    endTime: 5
}, ret => {
    console.log(ret);
});

// 设置 BGM 是否循环
this.$refs.UGCEditor.setBGMLoop({
    isLoop: true
}, ret => {
    console.log(ret);
});

// 设置 BGM 在视频添加的起始位置
this.$refs.UGCEditor.setBGMAtVideoTime({
    time: 0
}, ret => {
    console.log(ret);
});

// 设置视频声音大小
this.$refs.UGCEditor.setVideoVolume({
    volume: 1.0
}, ret => {
    console.log(ret);
});

// 设置 BGM 声音大小
this.$refs.UGCEditor.setBGMVolume({
    volume: 1.0
}, ret => {
    console.log(ret);
});

BGM 设置完之后，当启动编辑器预览，BGM 就会根据设置的参数播放，当启动编辑器生成，BGM 也会按照设置的参数合成到生成的视频中。

变声和混响

this.$refs.UGCRecord.setReverbType({
    type: self.reverbType
}, ret => {
    console.log(ret);
});

this.$refs.UGCRecord.setVoiceChangerType({
    type: self.voiceChanger
}, ret => {
    console.log(ret);
});

说明：

变声混响只针对录制人声有效，针对 BGM 无效。

快速开始

集成插件

• 加载插件

插件名称: RY-TencentUGC-Editor

插件类型为component类型，需要再nvue页面中使用。

<view>
    <RY-TencentUGC-Editor class="ugc" ref="UGCEditor" v-bind:style = "{ width: playerWidth, height: playerHeight }"></RY-TencentUGC-Editor>
C-ugcEditoiew>itor</v

说明:

可以通过修改width和height参数值的大小，来修改视频容器的大小。

• 腾讯云配置

注册或登录腾讯云账号，实名认证后，点击云点播。

开始使用插件

使用RY-TencentUGC-Editor，需要调用 init 初始化模块，才可以调用其他的接口功能。

this.$refs.UGCEditor.init({
    licence: {
        url: 'https://xxx.xxx.com/xxx',
        key: '1rewqswxxxxiouewmx'
    }
}, ret => {
    console.log(ret);
});

设置监听

调用 [setEditorListener]() 可以设置监听，视频通话会返回相关的事件回调。

this.$refs.UGCEditor.setEditorListener({}, ret => {
    console.log(ret);
});

使用说明

视频编辑的基本使用流程如下：

1. 设置视频路径。
2. 添加效果。
3. 生成视频到指定文件。
4. 监听生成事件。

// 1. 初始化编辑器, 如无需预览，可以传 nil 或直接调用 init 方法
this.$refs.UGCEditor.init({
    licence: self.licence,
    rect: {
        x: 0, 
        y: 0, 
        w: self.playerWidth, 
        h: self.playerHeight
    }
}, ret => {
    console.log(ret);
});

// 设置源视频路径
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. 获取生成进度
this.$refs.UGCEditor.setGenerateListener({}, ret => {
    if (ret.hasOwnProperty("eventType")) {

    }
});

// 获取生成结果
this.$refs.UGCEditor.generateVideo({
    mode: self.compressedMode,
    path: self.generatePath
}, ret => {
    console.log(ret);
});

视频信息获取

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