接入高级模板剪辑Web SDK操作指南-智能媒体服务-阿里云

智能生产制作提供专业在线的高级模板剪辑能力，针对视频制作中重复性内容和定制美化需求，您可以通过自定义模板和素材替换，实现批量化视频生产。通过阅读本文，您可以了解如何接入高级模板剪辑Web SDK。

使用说明

本文中引入的高级模板剪辑Web SDK的版本号1.0.0仅供参考。获取最新的版本，请参见高级模板剪辑工程——帮助信息。

操作步骤

引入高级模板剪辑Web SDK。

在项目前端页面文件中的<head>标签处引入高级模板剪辑Web SDK的CSS文件，如下所示：

<head>
  <link rel="stylesheet" href="https://g.alicdn.com/thor-server/advanced-template-websdk/1.0.0/index.css">
</head>

在<body>标签处添加一个用以挂载剪辑界面的<div>节点，并在<body>标签末尾添加引入Web SDK的JS文件，同时添加一个用以调用Web SDK的<script>节点。

<body>
  <div id="aliyun-advanced-template" style="height:100vh"></div> // 您可以根据需要改变 container 高度
  <script src="https://g.alicdn.com/thor-server/advanced-template-websdk/1.0.0/index.js"></script>
  <script>
    // 调用 SDK 的代码放在这里
  </script>
</body>

初始化高级模板剪辑Web SDK。
```
window.AliyunAdvancedTemplate.init(config);
```
- 参数config为对象，对象中的属性说明请参见config属性说明。
- 初始化函数init()示例请参见init()示例代码。

config属性说明


参数	类型	必填	描述	引入版本
locale	string	否	界面语言，取值： zh-CN（默认值）：中文。 en-US：英文。	1.0.0
container	Element	是	Web SDK生成界面挂载的DOM节点。	1.0.0
projectId	string	是	高级模板剪辑工程ID。	1.0.0
onBackButtonClick	() => void;	否	左上角返回按钮响应函数，如果不传，则不显示此按钮。	1.0.0
updateEditingProject	(req: { ProjectId: string; Title?: string; TemplateId?: string; ClipsParam?: string }) => Promise<void>;	是	修改剪辑工程标题或单击右上角保存响应函数，参数及返回值详情请参见UpdateEditingProject。	1.0.0
getEditingProject	(req: { ProjectId: string }) => Promise<Response<GetEditingProjectRsp>>;	是	获取剪辑工程的元信息，例如：工程标题、模板ID等信息，参数及返回值详情请参见GetEditingProject。	1.0.0
getTemplateMaterials	(req: { TemplateId: string; FileList: string }) => Promise<Response<GetTemplateMaterialsRsp>>;	是	获取高级模板的原始素材，参数及返回值详情请参见GetTemplateMaterials。	1.0.0
batchGetMediaInfos	(req: { AdditionType: 'FileInfo'; MediaIds: string }) => Promise<Response<BatchGetMediaInfosRsp>>;	是	批量获取媒资信息，参数及返回值详情请参见BatchGetMediaInfos。	1.0.0
onChangeMaterial	() => Promise<MediaInfo>;	是	编辑组素材区更换素材功能响应函数。返回的Promise对象需要resolve被选中媒资的信息。	1.0.0
onConfirmPreview	(req: { ProjectTitle: string; TemplateId: string; TemplateSize: [number, number]; ClipsParam: string; }) => Promise<Response<{ MediaId: string }>>;	是	预览视频按钮响应函数，参数依次为：模板ID、模板宽高、模板素材参数。返回的Promise对象需要resolve生成预览视频的 MediaId。	1.0.0
submitMediaProducingJob	(req: { ProjectId: string; TemplateId: string; TemplateSize: [number, number]; ClipsParam: string; }) => Promise<void>;	是	提交合成任务，参数依次为：工程ID、模板ID、模板宽高、模板素材参数。返回的Promise对象需要resolve。参数及返回值详情请参见SubmitMediaProducingJob。	1.0.0

init()示例代码

重要 Web SDK只负责界面交互，不会发起请求，您需要通过Web SDK调用请求逻辑。请求本身应该先发送给您自己的服务端，您自己的服务端再根据AccessKey信息（AccessKey ID和AccessKey Secret）转发给相关的阿里云OpenAPI。

// 注意，WebSDK 本身并不提供 request 这个方法，这里仅作为示例，您可以使用您喜欢的网络请求库，如 axios 等

const projectId = 'exampleId';

window.AliyunAdvancedTemplate.init({
  locale: 'zh-CN',
  container: document.getElementById('aliyun-advanced-template'),
  projectId,
  onBackButtonClick: () => {
    // 跳转回列表页
    window.location.href = '/mediaEdit/list/advanced';
  },
  updateEditingProject: req => {
    return request('UpdateEditingProject', req);
  },
  getEditingProject: req => {
    return request('GetEditingProject', req);
  },
  getTemplateMaterials: req => {
    return request('GetTemplateMaterials', req);
  },
  batchGetMediaInfos: req => {
    return request('BatchGetMediaInfos', req);
  },
  onChangeMaterial: () => {
    return new Promise(resolve => {
      // 假设 showMediaModal 是您编写的一个函数，这个函数将展示一个 modal 组件，modal 中通过调用 ICE 的
      // ListMediaBasicInfos 接口展示媒资库中的媒资供用户进行选择，用户选择后点击确定按钮，触发 onOk 方法
      showMediaModal({
        onOk(media) {
          resolve(media);
        }
      });
    });
  },
  onConfirmPreview: ({ ProjectTitle, TemplateId, TemplateSize, ClipsParam }) => {
    const height = 360; // 假设按照 360P 进行预览
    let width = Math.floor((height / TemplateSize[1]) * TemplateSize[0]); // 根据模板的比例算出宽度

    if (width % 2 === 1) width += 1; // 保证宽度是偶数

    const filename = `${encodeURIComponent(
      ProjectTitle
    )}_preview_${new Date().toISOString()}.mp4`; // 预览视频文件名由您自定义，这里只是一种示例

    const outputMediaConfig = JSON.stringify({
      MediaURL: `https://exampleBucket.oss-exampleRegion.aliyuncs.com/examplePath/${filename}`,
      Width: width,
      Height: height
    });

    return request('SubmitMediaProducingJob', {
      ProjectId: projectId,
      TemplateId,
      ClipsParam,
      OutputMediaConfig: outputMediaConfig
    });
  },
  submitMediaProducingJob: ({ TemplateId, TemplateSize, ClipsParam }) => {
    return new Promise((resolve, reject) => {
      // 假设 showSubmitModal 是您编写的一个函数，这个函数将展示一个 modal 组件，modal 中提供表单供用户填写合成信息
      // 比如文件名、存储路径、格式、分辨率等，当用户提交表单时，这些填写的信息将被整理成 formValues 传入 onOk 里
      showSubmitModal({
        onOk: async (formValues) => {
          const res = await request('SubmitMediaProducingJob', {
            ...formValues,
            ProjectId: projectId,
            TemplateId,
            ClipsParam
          });
          if (res.code === '200') {
            console.log('success');
            resolve();
          } else {
            console.error('failed');
            reject();
          }
        }
      });
    });
  }
});