Integrate the editing SDK for web with advanced templates-Intelligent Media Services(IMS)-阿里云帮助中心

Usage notes

This topic references the editing SDK V1.0.0 for web with advanced templates as an example. For the latest version, see the Note section on the Advanced Editing Project tab of the Online Editing page in the console.

Procedure

Integrate the editing SDK for web with advanced templates.

Import the CSS file of the SDK under the <head> tag in the frontend page file of the project. Sample code:

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

Under the <body> tag, add a <div> node that is used to mount the editing window, import the JavaScript file of the editing SDK for web with advanced templates, and then add a <script> node to call the editing SDK for web with advanced templates.

<body>
  <div id="aliyun-advanced-template" style="height:100vh"></div> // You can change the height of the container based on your business requirements.
  <script src="https://g.alicdn.com/thor-server/advanced-template-websdk/1.0.0/index.js"></script>
  <script>
    // The code that is used to call the editing SDK for web with advanced templates.
  </script>
</body>

Initialize the editing SDK for web with advanced templates.
```
window.AliyunAdvancedTemplate.init(config);
```
- For more information about the config object, see the config section of this topic.
- For more information about the sample code of calling the init() initialization function, see the Sample code of calling init() section of this topic.

config

Parameter	Type	Required	Description	SDK version
locale	string	No	The language of the user interface (UI). Valid values: zh-CN (default): Chinese. en-US: English.	1.0.0
container	Element	Yes	The document object model (DOM) node used to mount the editing window.	1.0.0
projectId	string	Yes	The ID of the advanced template editing project.	1.0.0
onBackButtonClick	() => void;	No	The callback triggered when the Back button in the upper-left corner is clicked. If this parameter is left empty, the button is not displayed.	1.0.0
updateEditingProject	(req: { ProjectId: string; Title?: string; TemplateId?: string; ClipsParam?: string }) => Promise<void>;	Yes	The callback triggered when the title of the editing project is modified or the Save button in the upper-right corner is clicked. For more information, see UpdateEditingProject.	1.0.0
getEditingProject	(req: { ProjectId: string }) => Promise<Response<GetEditingProjectRsp>>;	Yes	The operation called to query the metadata of the editing project, such as the project title and template ID. For more information, see GetEditingProject.	1.0.0
getTemplateMaterials	(req: { TemplateId: string; FileList: string }) => Promise<Response<GetTemplateMaterialsRsp>>;	Yes	The operation called to query the raw materials of an advanced template. For more information, see GetTemplateMaterials.	1.0.0
batchGetMediaInfos	(req: { AdditionType: 'FileInfo'; MediaIds: string }) => Promise<Response<BatchGetMediaInfosRsp>>;	Yes	The operation called to query information about multiple media assets at a time. For more information, see BatchGetMediaInfos.	1.0.0
onChangeMaterial	() => Promise<MediaInfo>;	Yes	The callback triggered when a new media asset in the media asset library is selected for replacement. Resolve the returned Promise with the selected media asset information.	1.0.0
onConfirmPreview	(req: { ProjectTitle: string; TemplateId: string; TemplateSize: [number, number]; ClipsParam: string; }) => Promise<Response<{ MediaId: string }>>;	Yes	The callback triggered when the video preview button is clicked. The parameters in the Type column sequentially specify the template ID, template width and height, and template material parameters. Resolve the returned Promise with the media asset ID of the generated preview video.	1.0.0
submitMediaProducingJob	(req: { ProjectId: string; TemplateId: string; TemplateSize: [number, number]; ClipsParam: string; }) => Promise<void>;	Yes	The operation called to submit a production job. The parameters in the Type column sequentially specify the project ID, template ID, template width and height, and template material parameters. Resolve the returned Promise on completion. For more information, see SubmitMediaProducingJob.	1.0.0

Sample code of calling init()

Important

The editing SDK for web with advanced templates handles UI interactions only and does not send requests. You must implement request logic separately. Requests must be sent to your server and forwarded to Alibaba Cloud OpenAPI Explorer by using your AccessKey ID and AccessKey secret.

// The editing SDK for web with advanced templates does not provide request logic. The following sample code is provided only for reference. You can use a network library such as Axios based on your business requirements.

const projectId = 'exampleId';

window.AliyunAdvancedTemplate.init({
  locale: 'zh-CN',
  container: document.getElementById('aliyun-advanced-template'),
  projectId,
  onBackButtonClick: () => {
    // Return to the previous page.
    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 => {
      // For example, you write the showMediaModal function to display a modal component.
      // The modal component calls the ListMediaBasicInfos operation of Intelligent Media Services (IMS) to display the media assets in the media asset library for your selection. After you select a media asset and click OK, the onOk method is triggered.
      showMediaModal({
        onOk(media) {
          resolve(media);
        }
      });
    });
  },
  onConfirmPreview: ({ ProjectTitle, TemplateId, TemplateSize, ClipsParam }) => {
    const height=360; // The height for preview is 360 pixels.
    let width=Math.floor ((height / TemplateSize[1]) * TemplateSize[0]); // Calculate the width based on the template size.

    if (width % 2 === 1) width += 1; // Make sure that the width is an even number.

    const filename = `${encodeURIComponent(
      ProjectTitle
    )}_preview_${new Date().toISOString()}.mp4'; // The name of the video file for preview. You can use a custom name based on your business requirements. The example value is for your reference.

    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) => {
      // For example, you write the showSubmitModal function to display a modal component. The modal component provides a form in which you can specify video production information,
      // such as the file name, storage path, format, and resolution. When you submit the form, the specified information is organized as formValues and passed into the onOk method.
      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();
          }
        }
      });
    });
  }
});