更新记录

2.2.0(2023-02-01)

  1. 升级UGC SDK至10.9.13102;

2.1.0(2022-05-17)

  1. 修复iOS无法获取缩略图bug;

2.0.1(2022-04-28)

  1. 修复Android平台generateVideo回调监听无效bug;
查看更多

平台兼容性

Android Android CPU类型 iOS
适用版本区间:4.4 - 11.0 armeabi-v7a:未测试,arm64-v8a:未测试,x86:未测试 适用版本区间:9 - 15

原生插件通用使用流程:

  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-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. 设置视频路径。
  2. 添加效果。
  3. 生成视频到指定文件。
  4. 监听生成事件。
// 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

隐私、权限声明

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

Android: "android.permission.INTERNET", "android.permission.ACCESS_NETWORK_STATE", "android.permission.ACCESS_WIFI_STATE", "android.permission.READ_PHONE_STATE", "android.permission.CALL_PHONE", "aandroid.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/55287

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

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