Run the video editing demo for web - Intelligent Media Services

Intelligent Media Services (IMS) provides the video editing demo for web. We recommend that you run the demo to use the video editing service on web clients. This topic describes how to run the video editing demo for web and add extended features based on the demo.

Overview

The video editing demo for web provides the same feature as the online editing feature provided on the Online Editing page in the IMS console. You can use the online editing feature in the IMS console, and then add custom features to the demo based on your business requirements.

Prerequisites

IMS is activated. For more information, see Activate IMS.
The required materials are uploaded from media libraries to IMS. For more information, see Upload media assets by using the IMS console.
A Resource Access Management (RAM) user is created. The required permissions are granted to the RAM user, and the AccessKey pair of the RAM user is obtained. For more information, see Create and grant permissions to a RAM user.

Run the demo

Download and decompress the demo package. To download the demo package, visit IMS_WebSDK_Demo on GitHub.
Configure, install, and package frontend resources.
1. Integrate the video editing SDK for web in the fe/public/index.html file.
  Note
  In this example, the video editing SDK for web V3.14.0 is used for reference only. For more information about how to obtain the latest version of the video editing SDK for web, see notes on the Video Editing Projects tab in the IMS console.
2. Run the following command in the fe directory to install the frontend resources:
  npm install
3. Run the following command to package the frontend resources:
  npm run build
Configure and run the client.
- Configure and run the Java client.
  1. Specify the AccessKey pair of the RAM user and your region ID in the java/application/src/main/java/demo/controller/OpenApiController.java file.
  2. Run the following command to use a symbolic link to add the packaged frontend resources to the corresponding directory in Java:
    ln -s "$(pwd)/fe" java/application/src/main/resources
  3. Import the Java project to Eclipse or IntelliJ IDEA and execute the demo.Application class to run the Java client.
- Configure and run the Node.js client
  1. Specify the AccessKey pair of the RAM user and your region ID in the nodejs/config/config.default.js file.
  2. Run the following command to use a symbolic link to add the packaged frontend resources to the corresponding directory in Node.js:
    ln -s "$(pwd)/fe" nodejs
  3. Run the following command in the nodejs directory to install dependencies:
    npm install
  4. Run the following command to run the Node.js client:
    npm run dev
Visit http://localhost:7001/ in your browser to run the demo.

References

In this example, the demo that is used only provides the basic features of the video editing SDK for web. You can add extended features based on your business requirements.
If an error occurs when you run the demo, see FAQ.

Contact us

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