如何运行Demo及在原有Demo基础上拓展功能-智能媒体服务(IMS)-阿里云帮助中心

Demo简介

视频剪辑Web端Demo提供跟云剪辑控制台基本一致的界面功能，您可以先在控制台上体验，然后根据实际需求，在此Demo基础上进行功能定制。

该 Demo 界面主要包含：左侧素材管理面板（支持视频、音频、图片导入及数字人、字幕、贴纸、滤镜、转场、特效等分类），中央视频预览窗口（含播放控制与倍速选项），右侧音频电平表（L/R 双声道），底部多轨时间线编辑区域（支持字幕轨、视频轨、音频轨等），顶部导航栏提供生成为模版、保存、导出为等操作按钮。

前提条件

已开通智能媒体服务。具体操作，请参见开通服务。
已上传媒资素材到云端。具体操作，请参见控制台上传。
已创建RAM用户并授权，并获取对应的AccessKey信息（AccessKey ID和AccessKey Secret）。具体操作，请参见创建RAM用户并授权。

运行Demo

下载并解压Demo。下载地址，请参见IMS_WebSDK_Demo。

配置、安装并打包前端资源。

在fe/public/index.html文件中引入视频剪辑Web SDK。

&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>

说明

Demo中引入的视频剪辑Web SDK的版本号3.14.0仅供参考。获取最新的版本，请参见视频剪辑工程——帮助信息。

在fe目录下执行以下命令安装前端资源。

npm install
执行以下命令打包前端资源。

npm run build

配置并运行服务端。

配置并运行Java服务端

根据实际情况在java/application/src/main/java/demo/controller/OpenApiController.java文件中配置AccessKey和地域信息。请将 accessKeyId、accessKeySecret、endpoint 和 regionId 替换为实际值。

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>";
        config.accessKeySecret = "<your secret key>";
        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");
    }
}

执行以下命令，使用软链接将前端打包后的资源链接到Java对应的目录下。

ln -s "$(pwd)/fe" java/application/src/main/resources
将Java服务端工程导入Eclipse或IDEA中后执行demo.Application类，运行Java服务端。

配置并运行Node.js服务端

根据实际情况在nodejs/config/config.default.js文件中配置AccessKey和地域信息。

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>',
      accessKeySecret: '<your secret key>',
      endpoint: 'ice.cn-hangzhou.aliyuncs.com',
      regionId: 'cn-hangzhou',
    },
  };
  return {
      ...config,
      ...userConfig,
  };
};

执行以下命令，使用软链接将前端打包后的资源链接到Node.js对应的目录下。

ln -s "$(pwd)/fe" nodejs
在nodejs目录下执行以下命令安装依赖。

npm install
执行以下命令运行Node.js服务端。

npm run dev

在浏览器中访问http://localhost:7001/，运行Demo。

联系我们

更多产品咨询问题或使用支持，欢迎通过钉钉搜索群号84650000851，加入智能媒体服务产品群联系我们。

Demo体验

Demo简介

前提条件

运行Demo

相关参考

联系我们