一、权限要求
·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 视频编辑页面,运行示例截图如下:
| | |