文档中心>智能创作

接入视频剪辑

最近更新时间:2023-08-10 11:23:31

我的收藏
微剪2.1.0版本新增了云端视频剪辑(简称云剪)模板的渲染支持,用户可以实现在云剪上进行模板制作并在微剪上渲染。 微剪3.3.0支持微剪整体接入云剪,除了模板之外,普通剪辑也可以使用云剪进行后端导出。
说明
目前为初期版本,接入流程较为繁琐,仍在不断优化中。

接入步骤





一、准备工作

步骤1:注册腾讯云账号

注册腾讯云 账号,并完成 实名认证

步骤2:注册小程序账号

登录 微信公众平台,选择账号分类 > 小程序,按接入流程注册小程序,并记录小程序的 appid。

步骤3:申请插件权限

1. 在小程序管理后台的设置 > 第三方设置中选择添加插件
2. 在弹出的面板中搜索“微剪”,选中插件并添加。

步骤4:购买插件使用权限

1. 登录云点播控制台,选择 微剪插件
2. 根据页面提示填入小程序的 appid 等信息。
说明
通过 微剪开发自助手册 底部的二维码加入开发者微信群,第一时间获取权限审核状态及插件动态。

步骤5:智能创作申请试用(已购买的可忽略此步骤)

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.jssrc 目录直接覆盖到您的 serverless 服务中。 为了让微剪成功请求云剪的资源并导出,需要提供以下几个接口:
获取签名接口:getSign
获取模板列表接口:getTemplateList
导出接口:export
导出进度接口:describeTaskDetail
源码中均有示例,在下一步 接入微剪 中将会详细说明这几个接口的用法。

步骤2:替换配置

1. 打开 API 密钥管理页面,获取账户的 secretIdsecretKey 并替换 /src/config.js 中的 secretIdsecretKey
2. 将平台名称(xxxx.vs.tencent.com 中的 xxxx)字符串替换 /src/config.js 中的 platform,例如:myplatform
3. 获取团队 ID 和用户 ID。
在源码目录下执行 node ./src/getId phone={您的手机号} team="{上文中创建的团队名称}"



获得用户 ID 和团队 ID 后,替换到 ./src/config.js 中的 userIdteamId




步骤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:编写导出页面

目前阶段调用后台导出和查询导出状态的接口只能通过后台调用,上面的后台服务中已经实现了 exportdescribeTaskDetail 接口,在调用微剪的后端导出组件时,使用回调的方式将这两个接口的请求透传给导出组件。
1. 创建一个页面 yunjian-export,引入 wj-export-background 组件。
index.json
index.wxml
{
"usingComponents": {
"wj-export-backend": "myPlugin://wj-export-backend/index"
}
}
<view>
<wj-export-backend
id="yunjian_exporter"
bindexportsuccess="handleSuccess"
bindexportfail="handleFail"/>
<button bindtap="onTapExport">导出</button>
</view>
2. 在页面onLoad方法中获取轨道数据:
onLoad(options) {
const {tracks, mode} = options
try {
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.errCode
if (errCode === 0) {
// 返回原始格式数据
return res.data
}
return
}
let tracks = this.tracks
let 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:导出页面配置注入插件

settings 中的 export 配置导出页路径增加配置,请参见 配置导出页
说明
关于水印:后台合成目前不支持在导出组件配置水印,后续会进行支持。

步骤5:处理导出的视频 URL

与微剪原有的导出不同的是,采用云剪后端导出成功的回调 URL 是远程地址,可直接在小程序端预览或者通过后台接口上传至自身服务器后使用。

六、素材制作

进入视频剪辑 > 创作工具 > 素材制作,可以制作贴片、花字、特效等素材。详情操作请参见 素材制作工具使用手册