智能创作
有奖捉虫：办公协同&微信生态&物联网文档专题 HOT
文档中心 > 智能创作

前端集成

最近更新时间：2023-04-12 15:59:56

我的收藏

本页目录：

本文档是 Web Iframe 集成教程中的第三部分。教程由以下三篇文档组成：
1. 准备工作。
2. 后端集成。
3. 前端集成（本篇）。
请确保已经完前面内容，再开始本篇的学习。

学习目标

本篇介绍 Web Iframe 集成剪辑能力的前端部分。主要工作内容是：搭建前端剪辑页面，并与上一阶段完成的后端服务对接，完成在线视频剪辑。
本部分工作主要围绕智能创作前端和业务前端，内容如下左起第 1、2 列所示：



步骤1：准备页面

假设前端页面部署在 www.example.com，初始代码如下：
<html>
  <head>
    <style type="text/css">
      #container {
        width: 100%;
        height: 100%;
      }
    </style>
    <!-- 引入前端 SDK -->
    <script src="https://vs-cdn.tencent-cloud.com/sdk/cme_v2.0.1.js"></script>
    <meta charset="utf-8" />
  </head>
  <body>
    <button id="start">开始</button>
    <div id="container"></div>
  </body>
</html>
用户单击 开始 进入业务流程，智能创作 的剪辑界面会嵌入到 container 元素内。

步骤2：业务侧交互设计

操作流程

1. 单击开始打开编辑页，编辑视频。
2. 单击导出，等待视频合成。

代码框架

/**
 * 主流程入口
 **/
function main() {
  let startBtn = document.getElementById("start");
  startBtn.addEventListener("click", async () => {
    /**
     * 隐藏开始按钮，避免反复调用
     **/
    startBtn.style.display = "none";
    /**
     * 拉取项目签名，业务方后台提供接口，详见下方说明
     */
    const { signature } = await getProjectInfo();
    /**
     * 获取`智能创作`实例
     * */
    let myCmeInstance = getCmeInstance(
      document.getElementById("container"),
      signature
    );

    /**
     * 绑定导出事件
     * */
    initExportEvent(myCmeInstance, (data) => {
      /**
       * 导出成功，开始轮询结果
       * */
      let taskInterval = setInterval(() => {
        getExportInfo(data.TaskId, (result) => {
          /**
           * 导出成功，清除定时器
           **/
          clearInterval(taskInterval);
          alert(`导出成功，请到这里查看结果${result.Url}`);
        });
      }, 3 * 1000);
    });
  });
}
/**
 * 调用main方法
 **/
main();

步骤 3：各业务逻辑实现

用户单击开始的主要业务逻辑有：
1. 调用 后端集成 中的 CreateProject 接口，指定 初始素材 并获取 打开项目所需签名 。
async function getProjectInfo() {
  let res = await fetch(
 `https://api.example.com/CreateProject?Name=视频编辑项目&AspectRatio=16%3A9&InitFileIdList=${encodeURIComponent(
   "FileId1,FileId2,WatermarkFileID"
 )}`
  );
  // 获取响应内容
  const { Code, Data } = await res.json();
  let { ProjectId, Signature } = Data;
  return { projectId: ProjectId, signature: Signature };
}
说明
此处以 准备工作 中的视频和水印图片为例，假设两个视频的 FileID 分别为 VideoFileID1、VideoFileID2，水印图片的 FileID 为 WatermarkFileID。
2. 调用智能创作剪辑 SDK 打开剪辑 iframe 页。
function getCmeInstance(el, signature) {
  /* @create 创建实例方法,没调用该方法之前,调用 send 方法通信无效。
* @param el {{HTMLELement}} html元素,作为父容器承载 CME 组件。
* @param options {{ object|hash }} 参数。
* @param sign {{ string }} ，该项目签名，具体参见签名算法https://cloud.tencent.com/document/product/1156/43777。
* @return 返回一个 cme 组件实例。
**/
  return CME.Iframe.create(el, {
 sign: signature,
  });
}
3. 智能创作剪辑页实例添加导出事件响应。
function initExportEvent(cmeInstance, successCallback) {
  /**
* @on 监听方法,监听来自 CME 的用户事件，用户单击导出按钮时会触发这个事件。
* @param eventName {{string}} 字符串,参见 cme 自定义用户事件。
* @param callback {{function}} 回调函数。
*/
  cmeInstance.on("Editor:ExportBtn:Click", (data) => {
 /**
  * 在这里请求刚才您实现的导出接口
  **/
 fetch(
   `https://api.example.com/ExportVideo?ProjectId=${projectId}&Definition=10&Name=视频名称`
 ).then((exportRes) => {
   if (exportRes.Code === "Success") {
     /**
      *  导出成功回调
      **/
     successCallback && successCallback(exportRes.Data);
   }
 });
  });
}
4. 查询导出结果。
function getExportInfo(TaskId, successCallback) {
  fetch(`https://api.example.com/GetTaskInfo?TaskId=${TaskId}`).then(
 async (res) => {
   let data = await res.json();
   let { Code, Data } = data;
   if (Code === "Success") {
     successCallback && successCallback(Data);
   }
 }
  );
}
5. 集成完毕，单击开始，即可看到剪辑器界面，在该页面中剪辑您的视频：
拖动两个视频到轨道。
单击转场，在两个视频之间插入一个效果。
拖动水印图片到视频上方，选择图片开启画中画，缩小尺寸，摆放位置。
具体效果参见如下：



说明：
单击可下载 示例视频。

6. 单击导出，耐心等待直到看到合成提示，至此已完成 Web Iframe 模式集成在线视频剪辑业务。

前端 SDK API

window.CME 接口声明

interface CME {
  /* @create 创建实例方法,没调用该方法之前,调用 send 方法通信无效。
   * @param el {{HTMLELement}} html 元素，作为父容器承载 CME 组件。
   * @param opts {{ object|hash }} 参数。
   * @param sign {{ string }}，该项目签名，具体参考 签名算法。
   * @return 返回一个 cme 组件实例。
   **/
  create: (el: HTMLElement, opts: { sign: string }) => cmeIns;
}

interface cmeIns {
  /**
   * 监听页面事件
   * @param eventName {{string}} 可监听事件参考下方文档。
   * @param callback {{function}} 对应回调函数。
   **/
  on(eventName: string, callback: function): void;

  /**
   * 取消监听方法,监听来自 CME 的事件,如果什么都不传则会清理所有监听事件。
   * @param eventName {{string}} 与上方 on 对应。
   * @param callback {{function}} 对应回调函数。
   */
  off(eventName, callback: (info) => function): void;

  /**
   * 发送命令字方法操作 iframe 页面
   * @param cmdName {{string}} 字符串，可用命令字参考下方文档
   * @param param {{object}} 命令入参。
   * @param callback {{function}} 完成命令的回调函数。
   *
   **/
  send(cmdName: string, params: object, callback: function): void;

  /**
   * @destroy 清理所有监听事件、临时变量并将对象销毁。
   * 注意，此时 cme 对象引用会变为空。
   */
  destroy(): void;
}

eventName 监听事件

事件名称
说明
Editor:Ready
页面加载完成。
Header:BackBtn:Click
用户点击顶部返回按钮。
Editor:ExportBtn:Click
用户点击导出按钮。
Header:Logo:Click
用户点击 Logo。
Header:Goto:Click
用户点击顶部跳转按钮。
Editor:MoreResourceBtn:Click
用户点击更多资源按钮。
Editor:UploadBtn:Click
用户点击上传按钮。
Error
返回错误信息，形如：{ error: 1000, msg: 'NotSupportBrowser' }。
错误码
意义
1000
不支持的浏览器，目前只支持 Chrome60 版本以上的浏览器。
1001
会话信息过期。
1002
接口异常。

cmdName 发送命令

命令字
参数
功能
refreshResources
mids：素材 ID 列表数组(可选)
更新素材，如果什么都不传，会将素材刷新到第一页（20 条数据），如果传入素材 ID，会去尝试将刷新传入素材 ID 到顶部。
syncFusionData
-
提交编辑数据，如果在外部触发导出项目事件，需要调用一次该接口。
showUpload
sign：上传签名
开启上传面板，在 CME 内部上传会使用 CME 的即传即用功能，即浏览器支持度较好的媒体格式，如 .h264 的 MP4 视频和 WebM，可边上传边编辑， 不用等待完全上传和解码的全过程。
syncTrackData
-
保存用户数据，导出时要确保最新用户数据已经在后台。
recoverTrackData
data：轨道数据
覆盖用户轨道数据。
注：该操作会覆盖当前用户编辑内容。
setStyle
style：样式字符串
传入样式字符串可以覆盖任意当前编辑页的样式。
getProjectInfo
-
返回当前项目相关信息。

中国站