VevDemo 是一个功能完整的 Web 应用，包含前端（基于 Vue/React，使用 Vite 构建）和后端（基于 Node.js）两部分，模拟了在真实业务场景中集成和使用视频剪辑 Web SDK 的完整流程。本文将指导您如何在本地快速部署和运行 VevDemo，从而直观地体验其丰富的视频编辑功能。

前提条件 #

• 已注册火山引擎账号。如果您是首次登录火山引擎控制台，请先完成实名认证。
• 已开通视频点播服务。
• 已创建空间，用于存储剪辑素材和产物。
• 已将媒资素材上传至视频点播服务。具体操作步骤请见通过控制台上传媒资。
• 已创建 IAM 用户并授权，并获取对应的 AK/SK。具体操作，请参见创建子账号并授权。
• 确保您的开发环境中已安装以下软件：
  • Node.js: v14.x 或更高版本（推荐使用 LTS 版本）。
  • npm: 通常会随 Node.js 一同安装。

运行 Demo #

1. 获取 Demo #

下载 vevdemo.zip 压缩包，并将其解压到您本地的工作目录。解压后，您将看到如下的项目结构：

vevdemo/
├── fe/          # 前端项目 (Frontend)
├── nodejs/      # 后端项目 (Node.js Server)
└── package.json

2. 配置并启动后端服务 #

为了让后端服务能够调用火山引擎的云端能力（如媒资存储、合成任务等），您需要配置访问密钥 AK/SK。

1. 进入后端项目目录：

   cd vevdemo/nodejs
   

2. 在该目录下创建一个名为 .env 的文件。

3. 在 .env 文件中添加以下内容，并将 your_..._key 替换为您的真实密钥：

   # 火山引擎 VOD 服务密钥配置
   VOLC_ACCESS_KEY=your_access_key
   VOLC_SECRET_KEY=your_secret_key
   

4. 启动后端服务：

   1. 在 nodejs 目录下执行以下命令安装依赖：

      npm install
      

   2. 依赖安装完成后，执行以下命令启动后端服务：

      npm run dev
      

当您看到类似 Server is running on http://localhost:3001 的输出时，表示后端服务已成功启动。

3. 配置并启动前端服务 #

1. 新开一个终端窗口，并进入 fe 目录：

   cd vevdemo/fe
   

2. 获取初始化所需 ID：在配置前端文件之前，您需要先获取 projectId、groupId 和 defaultClassificationId。

   • 获取 projectId 和 groupId（必需）：
     1. 登录视频点播控制台，进入您之前创建的空间。
     2. 单击左侧导航栏视频 AI 应用 > 视频剪辑工程。
     3. 点击新建剪辑工程。
     4. 创建成功后，页面会跳转到剪辑器界面。此时，浏览器地址栏的 URL 中会包含 groupId（以 g 开头）和 projectId（以 p 开头），复制即可。

     tip

     以上通过控制台获取 projectId 和 groupId 的方式仅适用于快速测试。在生产环境中，您需要通过 API 创建云端视频剪辑工程。详细信息，请见集成视频剪辑 Web SDK 文档前提条件章节。

   • 获取 defaultClassificationId：
     1. 登录视频点播控制台，进入您之前创建的空间。
     2. 单击左侧导航栏空间设置 > 分类管理。关于如何创建和管理分类，请参见通过控制台创建。找到您希望在剪辑器中默认选中的分类，复制其分类 ID。如果希望默认显示“未分类”，则 defaultClassificationId 留空。

3. 打开 fe/index.js 文件，将上一步获取到的 ID 填入以下字段：

   projectId: '', // 必填，修改为您的 projectId
   groupId: '', // 必填，修改为您的 groupId
   defaultClassificationId: '', // 选填，默认选中的分类 ID；不填或填 null 表示默认「未分类」
   

4. 在 fe 目录下执行以下命令安装依赖：

   npm install
   

5. 依赖安装完成后，启动前端服务：

   npm run dev
   

此命令会启动一个 Vite 开发服务器，通常监听在 http://localhost:8084。

4. 访问和体验 #

所有服务启动成功后，打开您的浏览器并访问 http://localhost:8084。现在，您可以开始尝试上传素材、拖拽轨道、添加特效和文字，体验完整的剪辑流程。

常见问题 #

启动服务时提示端口被占用？ #

这是因为 3001 (后端) 或 8084 (前端) 端口已被其他程序使用。您可以：

• 修改端口号：分别在 nodejs/config/default.js 和 fe/vite.config.js 文件中修改为其他可用端口。
• 终止占用进程：找到并停止占用该端口的程序。

npm install 安装依赖失败？ #

通常是网络问题导致。您可以尝试以下方法：

• 切换 npm 镜像源：执行 npm config set registry https://registry.npmmirror.com 来使用国内镜像。
• 清除缓存：执行 npm cache clean --force 后再重试。
• 检查您的网络连接或代理设置。

浏览器访问前端页面，但功能异常（如素材上传失败）？ #

请检查以下几点：

• 后端服务是否正常运行：确认后端的终端窗口没有报错信息。
• 环境变量是否生效：
  • 确保 .env 文件位于 nodejs 目录下，且文件名无误（不是 .env.txt）。
  • 检查文件中的 VOLC_ACCESS_KEY 和 VOLC_SECRET_KEY 是否已正确填写。
  • 修改 .env 文件后，必须重启后端服务才能生效。
• 跨域问题：Demo 的后端已默认配置了 CORS 跨域支持。如果仍遇到问题，请检查浏览器控制台的网络请求，确认前端请求的地址是否为 http://localhost:3001。