服务引入
环境配置
环境要求
多端框架 SDK 的版本要求:iOS SDK ≥ 1.4.18;Android SDK ≥ 1.5.2。
权限要求
Android 端要求在适应 SDK 接口前申请好权限:
android.permission.WRITE_EXTERNAL_STORAGE
。iOS 端要求在适应 SDK 接口前申请好权限
NSAppleMusicUsageDescription
。插件配置
打开多端应用,找到
project.miniapp.json
配置文件,找到其中的多端插件配置选项。
Android 插件配置
在 Android 插件配置中,需要填写下面选项:
1. 是否启用此插件:勾选
2. 插件 ID:wx9cfd2cd2a9497bf6
3. 插件版本:1.0.0(示例值)
4. 插件配置文件:不填
iOS 插件配置
在 iOS 插件配置中,需要填写下面选项:
1. 是否启用此插件:勾选
2. 插件 ID:wx9cfd2cd2a9497bf6
3. 插件版本:1.0.0(示例值)
4. 插件配置文件:不填
服务使用
集成 JS API
在 miniprogram 目录下执行如下命令安装 donut-ugc-editor :
npm i donut-ugc-editor
在微信开发者工具中构建 npm(路径:微信开发者工具 > 工具 > 构建 npm)。
使用方法
1. 引入 jsapi
import UGCEditor from "donut-ugc-editor"
2. 设置 License
2.1 参见 License 申请 的指引申请
License
后,从 云点播控制台 复制 License Key 和 License URL,如下图所示:

2.2 在项目中调用
UGCEditor#setUGCLicense
方法来设置 License:UGCEditor.setUGCLicense($licenseUrl,$licenseKey,(code,msg) => {console.log("setUGCLicense listener => code:"+code+",msg:"+msg);});
调用
UGCEditor#setUGCLicense
方法来设置 License 信息,需要的参数为:licenseUrl :腾讯云申请到的 licenseUrl 信息。
licenseKey :腾讯云申请到的 licenseKey 信息。
callback :(code: number, msg: string) => void 。License 设置的回调信息,code = 0 时为成功,否则失败。
3. 进入 UGC 编辑页
UGCEditor.openUGCEditor($wxFilePath,$minDurationInMilliSec,$maxDurationInMilliSec,(resultJSON)=>{console.log("openUGCEditor success listener => resultJSON:"+JSON.stringify(resultJSON, null, 2));},(errorMsg)=>{console.log("openUGCEditor fail listener => errorMsg:"+errorMsg);},()=>{});
调用
UGCEditor.openUGCEditor
方法来进入到 UGC 编辑页面,它所需要的参数如下:wxFilePath:要编辑的文件路径 (MP4格式),示例:wxfile://xxxxx.mp4。
minDurationInMilliSec:编辑后视频的最小时长,单位 ms。
maxDurationInMilliSec:编辑的最大时长,单位 ms。
success: (jsonStr: string) => void ,编辑完成之后的回调,返回编辑后视频的信息,格式为 JSON,内容包括:
duration:编辑后的视频时长,单位ms。size:编辑后视频的文件大小,单位byte。tempFilePath:编辑后视频路径,示例:wxfile://xxxxx。tempThumbPath:编辑后视频封面图路径,示例:wxfile://xxxxx。
failed: (errMsg: string) => void ,编辑失败的错误信息。
运行效果示例
该方法执行之后,会调起 UGC 视频编辑页面,运行示例截图如下:
![]() | ![]() |