How to Run the Demo and Add Features-Intelligent Media Services(IMS)-阿里云帮助中心

Demo overview

The video editing demo for the web has an interface and features nearly identical to the online editor in the IMS console. You can first try the editor in the console and then customize the demo to fit your specific requirements.

The demo interface includes: a media asset management panel on the left for importing videos, audio, and images, and for adding digital avatars, subtitles, stickers, filters, transitions, and effects; a central video preview window with playback controls and speed options; an audio level meter for L/R channels on the right; a multi-track timeline editing area at the bottom that supports subtitle, video, and audio tracks; and a top navigation bar with buttons such as Generate as Template, Save, and Export As.

Prerequisites

You have activated Intelligent Media Services (IMS). For more information, see Activate service.
You have uploaded your media assets to the cloud. For more information, see Upload media assets by using the console.
You have created a RAM user, granted the necessary permissions, and obtained its AccessKey pair (AccessKey ID and AccessKey Secret). For more information, see Create and authorize a RAM user.

Run the demo

Download and decompress the demo package. For the download link, see IMS_WebSDK_Demo.

Configure, install, and package the front-end resources.

In the fe/public/index.html file, ensure the video editing SDK for web is included.

&lt;!DOCTYPE html&gt;
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <link rel="icon" href="favicon.ico" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>ICE WebSDK demo</title>
    <link rel="stylesheet" href="https://g.alicdn.com/thor-server/video-editing-websdk/3.14.0/index.css">
  </head>
  <body>
    <div id="root"></div>
    <script src="https://g.alicdn.com/thor-server/video-editing-websdk/3.14.0/index.js"></script>
  </body>
</html>

Note

The version of the video editing SDK for web (3.14.0) used in this demo is for reference only. To get the latest version, see Video editing project - help information.

In the fe directory, run the following command to install the front-end dependencies:

npm install
Run the following command to package the front-end resources:

npm run build

Configure and run the server-side application.

Configure and run the Java server-side application

In the java/application/src/main/java/demo/controller/OpenApiController.java file, replace the placeholder values for accessKeyId, accessKeySecret, endpoint, and regionId with your AccessKey and region information.

public class OpenApiController {
    private static final Logger logger = LoggerFactory.getLogger(OpenApiController.class);
    private Client iceClient;
    @PostConstruct
    public void init() {
        Config config = new Config();
        // Todo Modify
        config.accessKeyId = "<your-access-key-id>";
        config.accessKeySecret = "<your-access-key-secret>";
        config.endpoint = "ice.cn-shanghai.aliyuncs.com";
        config.regionId = "cn-shanghai";
        try {
            iceClient = new Client(config);
        } catch (Exception e) {
            e.printStackTrace();
        }
        logger.info("Initialize client for Service: ice, endpoint: ice.cn-shanghai.aliyuncs.com");
    }
}

Run the following command to create a symbolic link from the packaged front-end resources to the Java directory:

ln -s "$(pwd)/fe" java/application/src/main/resources
Import the Java server-side project into Eclipse or IntelliJ IDEA, and then run the demo.Application class to start the Java server-side application.

Configure and run the Node.js server-side application

In the nodejs/config/config.default.js file, configure your AccessKey and region information.

module.exports = appInfo => {
  /**
   * built-in config
   * @type {Egg.EggAppConfig}
   **/
  const config = exports = {};
  // use for cookie sign key, should change to your own and keep security
  config.keys = appInfo.name + '_1639623660458_3126';
  // add your middleware config here
  config.middleware = [];
  // add your user config here
  const userConfig = {
    iceConfig: {
      accessKeyId: '<your-access-key-id>',
      accessKeySecret: '<your-access-key-secret>',
      endpoint: 'ice.cn-hangzhou.aliyuncs.com',
      regionId: 'cn-hangzhou',
    },
  };
  return {
      ...config,
      ...userConfig,
  };
};

Run the following command to create a symbolic link from the packaged front-end resources to the Node.js directory:

ln -s "$(pwd)/fe" nodejs
In the nodejs directory, run the following command to install dependencies:

npm install
Run the following command to start the Node.js server-side application:

npm run dev

In your browser, go to http://localhost:7001/ to run the demo.

Contact us

If you have questions or want to obtain technical support, join the DingTalk group for IMS (ID: 84650000851) to contact us.

Try the Demo

Demo overview

Prerequisites

Run the demo

Related topics

Contact us