微剪2.1.0版本新增了云端视频剪辑(简称云剪)模板的渲染支持,用户可以实现在云剪上进行模板制作并在微剪上渲染。
微剪3.3.0支持微剪整体接入云剪,除了模板之外,普通剪辑也可以使用云剪进行后端导出。
说明
目前为初期版本,接入流程较为繁琐,仍在不断优化中。
接入步骤
一、准备工作
步骤1:注册腾讯云账号
步骤2:注册小程序账号
步骤3:申请插件权限
1. 在小程序管理后台的设置 > 第三方设置中选择添加插件。
2. 在弹出的面板中搜索“微剪”,选中插件并添加。
步骤4:购买插件使用权限
1. 登录云点播控制台,选择 微剪插件。
2. 根据页面提示填入小程序的 appid 等信息。
说明
步骤5:智能创作申请试用(已购买的可忽略此步骤)
1. 打开 智能创作企业版平台官网。
2. 单击免费试用,使用腾讯云账号登录并申请试用,并等待申请通过。
审核通过后,会给您生成一个云剪平台,在官网登录后可以看到后台配置,即可获取属于您的云剪的域名并访问,格式为
xxxx.vs.tencent.com
。二、创建团队
用户需要在云剪上创建一个团队,后续的模板制作、视频合成都将在这个团队下进行。
1. 进入团队管理界面(路径为
{个人域名}.vs.tencent.com/manage/team)
,单击创建团队。
2. 输入团队名,单击确定即可。
3. 创建团队后会默认将操作者加入团队中,单击添加成员将其他协作者加入团队。
说明
云剪的有个人和用户两种使用角色,为了方便协作,文档中均以团队为单位进行说明。
三、制作剪辑模板(无自定义模板需求可忽略)
单击立即访问打开云剪,接下来进入模板制作的流程。
步骤1:创建模板
1. 团队创建完成后,进入到视频剪辑,单击创作视频 > 模板制作。
2. 进入模板剪辑器,在预览区修改分辨率。目前微剪还只支持9:16的分辨率,因此先把剪辑分辨率调整为 9:16。
步骤2:上传媒资
视频剪辑将音视频存储在云端进行预览和剪辑,在剪辑之前先把需要剪辑的视频、图片等媒资上传到智能创作。
1. 在项目资源库中单击导入素材 >本地导入,即可将本地素材上传到智能创作对应的位置。相关操作请参见 剪辑基础教程。
注意
拉取云剪模板列表时使用的是用户透传的个人 ID 或团队 ID 来划分的,因此素材需要上传至刚刚创建的团队中,素材归属要选择团队素材-团队名。
2. 上传完成后可以在剪辑器的项目资源库中看到。
步骤3:剪辑模板
智能创作内置了许多效果,可以快速通过拖拽的方式进行编辑。
说明
步骤4:导出模板
1. 视频剪辑完成后,在预览框的右侧单击导出视频,进入视频导出页。
2. 在导出目录中选择上文创建的团队微剪测试。单击自定义封面,选择视频截图或自行上传均可。
3. 导出完成后,可以在视频剪辑 > 创作资源 > 模板下看到该模板。
四、开发后台
本 Demo 在腾讯云 serverless 上运行,使用 express 搭建,如果您已经有自己的后台,可以将其中的接口代码迁移到您的后台项目中。
步骤1:下载示例源码
"dependencies": {"crypto": "^1.0.1","express": "^4.17.1","querystring": "^0.2.1","tencentcloud-sdk-nodejs": "4.0.117"}
服务入口为
sls.js
,实现代码在 src
目录中,可以将代码直接整合到您的后台项目中,也可以将 sls.js
和 src
目录直接覆盖到您的 serverless
服务中。
为了让微剪成功请求云剪的资源并导出,需要提供以下几个接口:获取签名接口:
getSign
获取模板列表接口:
getTemplateList
导出接口:
export
导出进度接口:
describeTaskDetail
步骤2:替换配置
1. 打开 API 密钥管理页面,获取账户的
secretId
和 secretKey
并替换 /src/config.js
中的 secretId
和 secretKey
。2. 将平台名称(
xxxx.vs.tencent.com
中的 xxxx
)字符串替换 /src/config.js
中的 platform
,例如:myplatform
。3. 获取团队 ID 和用户 ID。
在源码目录下执行
node ./src/getId phone={您的手机号} team="{上文中创建的团队名称}"
。
获得用户 ID 和团队 ID 后,替换到
./src/config.js
中的 userId
和 teamId
。
步骤3:模板列表(无自定义模板需求可忽略)
通过云剪的 API 获取到的模板列表目前没有 Tab 分类及权重管理(后续会逐步补充),因此若有类似需求,需要在 getTemplateList 编写列表的组织逻辑。
src/handler.js
代码如下:function getTemplateList() {const request = {};request.Platform = config.platform;let scope = {};scope.Owner = {Type: config.userType,Id: config.teamId};request.SearchScopes = [scope];// 请求到模板列表client.SearchMaterial(request, (err, response) => {if (err) {reject({errMsg: "请求失败",errCode: "1000001",err: JSON.stringify(err)});} else {// 过滤出模板const list = response.MaterialInfoSet.filter(i => i.BasicInfo && i.BasicInfo.MaterialType === "VIDEO_EDIT_TEMPLATE");// 组织微剪需要的模板列表格式let finalList = {tabs: [{key: "default",name: "精选",list: list.map(item => {return {materialId: item.BasicInfo.MaterialId,thumbUrl: item.BasicInfo.PreviewUrl,yunjian: true,key: item.BasicInfo.MaterialId,name: item.BasicInfo.Name};})}]};resolve({list: finalList});}});}
步骤4:部署服务
部署后台服务,本示例使用的是腾讯云的
serverless
,您可以部署到任何自己的服务上。步骤5:配置域名白名单
将服务域名配置到小程序的
request
请求白名单中。五、接入微剪(快速接入模式)
导出方式说明
微剪目前存在两种导出:客户端导出和后端导出。
导出方式 | 导出视频 | 是否需要购买云剪 | 支持类型 | 导出组件 | 优点 |
后端导出 | 导出的视频在云剪后台,返回 https:// 格式的远程链接,
需要接入方自行下载使用 | 是 | 支持导出云剪模板和普通剪辑 | wj-export-backend | 后端导出,导出稳定,不受机型和微信版本影响 |
客户端导出 | 在小程序端直接导出,导出的视频在小程序端本地,返回 wxfile:// 格式的本地链接 | 否 | 仅支持导出普通剪辑和自定义模板 | wj-export | 免费,不消耗流量,但导出依赖微信环境,不稳定 |
说明
快速接入的场景下,初始化插件时透传了云剪的签名信息则自动切换云剪后端导出。
接入流程
步骤1:接入微剪
步骤2:引入 VODUploader 并暴露给插件
微剪内聚了后台导出时的上传和导出流程,其中上传需要使用到 VODUploader。为了保持插件体积,我们没有内置 VodUploader,需要用户自行暴露给插件。
1. 下载
vod-wx-sdk-v2.js
。2. 将
vod-wx-sdk-v2.js
文件复制到小程序中。3. 在暴露接口给插件的
index.js
(请参见 引入插件)中,添加 VodUploader 的暴露。const VodUploader = require('../vod-wx-sdk-v2.js')module.exports = {downloadFile: wx.downloadFile,loadFontFace: wx.loadFontFace,// 文件管理系统getFileSystemManager: wx.getFileSystemManager,USER_DATA_PATH: wx.env.USER_DATA_PATH,VodUploader}
说明
如果在分包中引用插件,
vod-wx-sdk-v2.js
可以放在主包也可以放在引用微剪插件的分包中。步骤3:注入插件配置
初始化插件时需要注入您从后台拉取的签名和模板列表。
// 获取签名方法async getSign() {return new Promise((resolve, reject) => {wx.request({url: '{您的域名}/getSign',success: (res) => {console.log('签名请求结果', res)// 微剪插件会取得这里的值并做处理,因此需要注意对应格式resolve(res.data)}})})}// 获取模板列表方法(没有自制模板的需求可忽略)async getTemplateList(userId) {return new Promise((resolve, reject) => {wx.request({url: `{您的域名}/getTemplateList?userId=${userId}`,success: (res) => {console.log('请求模板列表结果', res)// 微剪插件会取得这里的值并做处理,因此需要注意对应格式resolve(res.data.list)}})})}async onLoad() {// 从上面开发的后台接口请求签名信息const {signature, uploadSignature, accountInfo} = await getSign()// 请求云剪模板列表const templates = await getTemplateList()templates.isYunjian = true // 模板列表标记为云剪模板plugin.initPlugin({...settingbs,// 云剪的签名注入到微剪中yunjian: {signature,uploadSignature,accountInfo},// 注入从后台拉到的模板source: {...settings.source,templates: templates}})}
说明
在快速接入模式里云剪模板和微剪旧的内置模板不能同时展示。
步骤4:编写导出页面
目前阶段调用后台导出和查询导出状态的接口只能通过后台调用,上面的后台服务中已经实现了
export
和 describeTaskDetail
接口,在调用微剪的后端导出组件时,使用回调的方式将这两个接口的请求透传给导出组件。1. 创建一个页面
yunjian-export
,引入 wj-export-background
组件。{"usingComponents": {"wj-export-backend": "myPlugin://wj-export-backend/index"}}
<view><wj-export-backendid="yunjian_exporter"bindexportsuccess="handleSuccess"bindexportfail="handleFail"/><button bindtap="onTapExport">导出</button></view>
2. 在页面
onLoad
方法中获取轨道数据:onLoad(options) {const {tracks, mode} = optionstry {this.tracks = JSON.parse(tracks)} catch(e) {}},
3. 在
index.js
中编写 onTapExport 回调:onTapExport() {// 请求上面后台服务中开发的export接口回调async function doExport(tracks) {let exportUrl = '{您的域名}/export'let res = await fetch({url: exportUrl,method: 'POST',data: {tracks}})let errCode = res && res.errCode// 返回原始格式数据if (errCode === 0) {return res.data}}// 请求上面后台服务中开发的describeTaskDetail接口回调async function checkProgress(taskId) {let url = `{您的域名}/describeTaskDetail?taskId=${taskId}`let res = await fetch({url,method: 'GET'})let errCode = res && res.errCodeif (errCode === 0) {// 返回原始格式数据return res.data}return}let tracks = this.trackslet exporter = this.selectComponent("#yunjian_exporter")// 将获取的轨道、导出接口的请求回调和导出详情的请求回调一起传入start方法exporter.start(tracks, doExport, checkProgress)}
4. 使用
fetch
方法封装:// 通用的请求方法async function fetch({url,method,data,header,}) {return new Promise((resolve, reject) => {wx.request({url,method,data,header,success: (res) => {console.log('fetch成功', res)resolve(res.data)},fail: (err) => {console.log('fetch失败', err)reject(err)}})})}
步骤4:导出页面配置注入插件
说明
关于水印:后台合成目前不支持在导出组件配置水印,后续会进行支持。
步骤5:处理导出的视频 URL
与微剪原有的导出不同的是,采用云剪后端导出成功的回调 URL 是远程地址,可直接在小程序端预览或者通过后台接口上传至自身服务器后使用。