Demo 功能介绍
本 Demo 以在云点播上传两个视频，以转场拼接并覆盖一张水印图片为例，介绍 Web Iframe 方式集成视频剪辑能力的方法。
架构和流程
业务架构图如下，虚线表示媒体创作引擎内部通信，实线表示与您的业务通信。
整个业务系统涉及五部分，包括智能创作前端、业务前端、业务后端、智能创作后端 以及 素材存储。其中智能创作前端与业务前端使用 Javascript API 进行通信，智能创作后端与业务后端以云 API 进行通信。
具体业务流程：
1. 将待编辑的视频、音频、图片等媒体上传到腾讯云 VOD，前端拉取到待剪辑的音频、图片 。
2. 前端带上待剪辑的媒体 ID 创建剪辑项目，在业务前端将可以看到剪辑器界面，以及准备好的素材。
3. 在剪辑器中剪辑预览。
4. 发起云端视频合成，生成视频。
5. 轮询任务结果，成功后，在 VOD 上查看结果。
案例中所用到的素材
视频1：
视频2：
水印图片：
案例最终合成的视频成片
成片效果如下：
快速部署 Web Iframe 剪辑 Demo
步骤1：开通腾讯云点播（VOD）服务
说明
若已开通云点播服务，请忽略此步骤。
步骤2：开通腾讯智能创作(CME)服务
联系智能创作团队，下发体验版本 license
步骤3：获取 API 密钥
请求云 API 需要使用到开发者的 API 密钥（ SecretId 和 SecretKey）。如果还未创建过密钥，请参见 创建密钥文档 生成新的 API 密钥；如果已创建过密钥，请参见 查看密钥文档 获取 API 密钥。
步骤4：准备视频
将上文提到的两个示例视频和一个示例图片下载到本地，上传到云点播。分以下几步操作：
1. 先登录 云点播控制台，在云点播控制台创建视频分类，选择应用管理，再点击应用列表中的某个应用名称，选择上传存储设置，选择分类管理后添加分类，得到分类 ID。如图所示：
2. 上传视频。将示例视频上传到云点播，如下图所示：
3. 上传图片。将示例图片上传到云点播，如下图所示：
注意
上传视频及图片时，请注意一定要上传到创建智能创作平台所使用的云点播子应用下。同时上传视频及图片时请选择步骤1创建的分类名称。
这里上传视频及图片指定分类，主要是为了 Demo 能在前端拉取到待剪辑的媒体，实际应用中是非必要步骤。
步骤5：本地运行 DEMO
1. 下载 项目源码.zip。
注意
建议用户使用子账号密钥 + 环境变量的方式调用 SDK，提高 SDK 使用的安全性。为子账号授权时，请遵循 最小权限指引原则，防止泄露目标存储桶或对象之外的资源。
如果您一定要使用永久密钥，建议遵循 最小权限指引原则 对永久密钥的权限范围进行限制。
2. 配置文件
本 Demo 基于 node.js 以及 koa 框架进行开发（您也可以替换成您熟悉的编程语言与框架）。也可以使用腾讯云轻量应用服务器（Lighthouse）或无服务器云函数（SCF）快速部署，参见：Lighthouse：搭建 Node.js 开发环境。SCF：快速部署 Koa 框架。
参考项目 README.md 进行配置、运行本地 DEMO。
编辑视频
在编辑页将待剪辑的视频拖到轨道，并在中间加上转场。同时设置上水印，如下图：
导出视频
编辑完成后，点播导出按键，发起导出任务，如下图：
在云点播查看导出视频
登录云点播控制台，如果任务完成后，可以看到剪辑导出的视频：
系统设计说明
Demo 后台实现解读
本教程中约定，后端暴露的接口形式如下：
后端服务的域名为
http://localhost。以 HTTP GET 或者 POST 方式发起请求，通过 QueryString 或者 BODY 传递业务参数。
以
localhost 域的 Cookie UserId 传递用户 ID（暂时不考虑鉴权）。接口列表
登录接口（Login）
本接口实现登录逻辑，接收来自前端传过来的用户 ID，登录成功后设置上名称为 UserId，值为登录用户 Id 的 Cookie。
说明
目前 Demo 实现的登录逻辑并未做密码等安全验证，业务实现过程中一定要按业务实际的登录方式进行用户权限验证。
获取媒体接口（DescribeMedias）
本接口获取在准备工作中上传到云点播的媒体，供页面端选择进行编辑。该接口有使用到云点播的 搜索媒体 接口。
说明
业务实现时，前端选择待编辑的媒体由业务自行决定，该接口是非必须的，也可以由业务后台直接指定待剪辑的媒体列表。
创建项目接口（CreateProject）
本接口实现获取从前端传过来的项目名称、待剪辑的媒体列表等参数。调用智能创作的 创建项目 接口创建项目，同时将待剪辑的媒体调用智能创作的 在项目中导入媒体 接口导入到项目中，返回前端项目 ID 及打开项目的签名。
说明
本 Demo 将创建项目及导入媒体到项目操作在一个接口实现，业务可以选择先创建项目，再分次导入媒体到项目中。
导出视频接口（ExportVideo）
本接口实现调用智能创作的 导出视频编辑项目 接口导出视频，获取到任务 ID。
查看导出结果接口（GetTaskInfo）
本接口实现调用智能创作的 获取任务详情 接口获取任务状态，如果任务成功，则可获取到导出的视频 URL 及云点播 FileId。
注意
因智能创作暂时未提供导出任务回调的功能，发起导出任务后，依赖业务轮询任务状态来获取到最终的导出结果。
获取项目列表接口（DescribeProjects）
本接口实现调用智能创作的 获取项目列表 接口获取到项目详情及打开剪辑项目的签名，方便实现用户登录后获取到历史创建的项目功能。
导入媒体到项目接口（ImportMediaToProject）
本接口实现调用智能创作的 在项目中导入媒体 接口，将云点播媒体导入到剪辑项目中。
申请上传签名接口（ApplyUploadSign）
本接口实现生成到云点播上传媒体的签名，前端直接上传媒体到云点播中。用于在剪辑过程中上传新的媒体到项目中。
Demo 前端实现解读
业务前端主要完成以下三部分工作：
实现用户交互。
调用后端接口完成操作。
调用 jssd，监听事件与智能创作 iframe 交互，重点参考 editor.ts 文件内 CMD 相关事件注册。