本文档面向需要在 Web 应用中集成 AI 智能剪辑能力的前端及服务端开发者。通过 AI MediaKit Web 智能剪辑 SDK(@volcengine/amk-editor-assistant),您可以在业务页面中嵌入一套 AI 驱动的视频创作工具,实现从素材管理、智能编排、特效渲染到高清导出的完整剪辑流程,而无需自行集成多个剪辑组件和 AI 模型。
SDK 概述
@volcengine/amk-editor-assistant 是一款面向浏览器环境的一站式智能视频剪辑 SDK,将 AI 助手与剪辑器集成在同一界面中,用户可以通过自然语言完成视频创作。
架构与核心概念
集成 Web 智能剪辑 SDK 时,您的应用前端(浏览器)将与您的业务服务端(代理服务)以及 AI MediaKit 服务端进行交互。
请求流程
浏览器中的请求分为剪辑器和 AI 助手两类。两类请求共用顶层 endpoint 指定的业务代理入口,SDK 会分别追加对应的 AI MediaKit 服务路径:
业务代理
为保障密钥(API Key)安全,浏览器不能直接请求 AI MediaKit 服务。所有请求都必须通过您自己实现的业务代理服务进行中转。该服务主要负责:
- 安全地附加密钥:将安全存储在您服务器上的 AI MediaKit API Key 添加到请求头中。
- 校验业务权限:验证当前登录用户是否有权访问其正在操作的 projectId,防止用户访问不属于自己的数据。
- 转发请求:将来自 SDK 的请求安全地转发给对应的 AI MediaKit 服务。
费用说明
使用 Web 智能剪辑 SDK 可能产生三类费用:火山方舟大模型调用费、AI MediaKit 视频工具费和 AI MediaKit 剪辑工具费。费用遵循日结后付费模式,次日 6:00 生成前一日的账单并进行结算。
火山方舟大模型调用费
AI 助手在进行自然语言对话(推理模型)和多模态内容理解(多模态理解模型)时,会调用您在 SDK 中配置的火山方舟大模型。此部分费用由火山方舟根据模型调用过程中实际消耗的 Token 数量(包括输入和输出 Token)进行计费。 关于不同模型的 Token 计费标准,请查阅火山方舟最新官方定价说明。 AI MediaKit 工具费用
在 AI 助手自动执行任务或用户手动编辑的过程中,可能会调用多种 AI MediaKit 工具。这些工具将按照各自的计费规则进行计费,主要包括以下两类:
- 视频工具:当 AI 助手需要理解视频内容或执行特定处理时,会调用字幕识别、视频抽帧、视频理解、高光识别等视频工具。这些工具将按照各自的计费规则进行计费,详细规则请参阅视频工具计费。
- 剪辑工具:当您或您的用户执行“导出视频”操作时,会产生剪辑费用。该费用基于最终输出的视频时长和分辨率进行计费。详细规则请参阅剪辑工具计费。
准备工作
在开始编码前,请确保已完成以下准备:
- 获取 API Key:在 AI MediaKit 控制台的 API Key 管理页面创建并获取 API Key。此凭证将用于您的服务端代理。
- 获取模型 Endpoint ID:前往火山方舟控制台开通管理页面,开通所需的大模型服务并获取其 Endpoint ID。Web 智能剪辑 SDK 依赖以下两类模型协同工作:
- 推理模型(必需):负责处理用户在对话中输入的自然语言指令及流程规划。您必须在 SDK 初始化时通过 assistant.model 参数配置一个推理模型的 Endpoint ID。您可以根据回复准确度、响应耗时和综合成本等因素选择以下模型之一:
- 多模态理解模型:负责理解视频、音频、图片等媒体内容。在 SDK 初始化时通过 assistant.preferMultiModalModels 参数进行配置。
- 视觉理解(推荐):建议从 doubao-seed-2-1-turbo-260628 或 doubao-seed-2-1-pro-260628 中选择一个配置,以支持视频画面、图片等视觉内容的理解。
- 音频理解(按需):当您需要 AI 助手理解音频内容时,可配置一个具备音频理解能力的多模态模型 Endpoint ID,例如 doubao-seed-2-0-lite-260428。
- 进行跨服务授权:前往 AI MediaKit 控制台基础配置 > 授权管理页面,为 AI MediaKit 授予访问您的火山方舟资源的权限。
快速开始
本节将引导您完成一次完整集成,快速运行一个基本的智能剪辑应用。
步骤 1:安装前端 SDK
在您的前端项目根目录中执行以下命令:
步骤 2:在服务端创建剪辑工程
在您的服务端,为用户的每次创作会话调用 AI MediaKit API 创建一个云端剪辑工程,并将其唯一标识 project_id 传递给前端。
请求示例
$AMK_API_KEY:应替换为您从 AI MediaKit 控制台的 API Key 管理页面获取并安全存储在服务端的 API Key。 响应示例
保存 data.project_id,并将其作为 projectId 传递给前端。
步骤 3:搭建服务端业务代理
剪辑器和 AI 助手共用一个业务代理入口(例如 /api/amk-proxy)。SDK 会在该入口后分别追加 Editing API 和 Assistant Runtime API 的完整路径。以下 Node.js + Express 示例已同时限定两组 API 可以访问的路径,并实现请求转发;在实际项目中,您还需补充用户身份验证、剪辑工程权限校验、接口限流和操作审计。
SDK 发往业务代理的请求会固定携带 X-Amk-Task-Source: vibe-editing 请求头。如果您的业务页面与代理服务跨域部署,请在代理的 CORS 配置中允许该请求头。
步骤 4:在前端初始化 SDK
在您的前端页面中,引入 SDK 及其样式,准备一个 DOM 容器,然后调用 createAmkEditorAssistant 方法创建实例并将其渲染到容器中。
准备容器
创建实例
步骤 5:验证集成效果
完成以上步骤后,启动您的 Web 应用并打开包含编辑器的页面,进行以下验证:
- 界面渲染:左侧 AI 助手面板与右侧剪辑器界面能否正常加载,并且能看到工程的标题、素材与时间轴。
- 请求认证:检查浏览器网络请求,确认所有对 /api/amk-proxy 的请求都携带了业务 Token,并且浏览器代码中没有硬编码的长期 API Key。
- 对话与联动:向 AI 助手发送一条指令(如“帮我剪一个 15 秒的视频”)。检查 AI 是否能响应,并在运行期间编辑器是否变为只读状态。
- 素材导入:尝试上传一个媒体文件,检查上传成功后素材是否出现在素材库并被自动加入对话。如果使用自定义上传,再检查 onUploadFile 是否被调用。
- 恢复:刷新页面,检查同一 projectId 是否能恢复剪辑工程及其绑定的 AI 对话历史。
- 资源释放:离开页面时,检查 sdk.destroy() 是否被调用,确保没有内存或事件监听器泄漏。
如果以上步骤均验证通过,恭喜您已成功完成 SDK 的基本集成。
进阶使用
本章介绍完成基本集成后可按需配置的素材上传与存储方案。
素材导入与存储
本节先帮助您选择素材上传方式,再说明 SDK 内置 TOS/VOD 存储的配置方法。
选择接入方式
用户从本地导入素材时,您可以选择以下任一方式将文件上传到存储服务:
- 自定义上传:通过 material.onUploadFile 将文件上传到您的存储服务。适用于已经具备素材上传服务,或需要自行控制上传流程的业务。
如果同时配置 material.onUploadFile 和 storage,SDK 优先使用 material.onUploadFile。两种方式均未配置时,SDK 不展示本地上传入口。
SDK 内置素材存储的通用配置
启用 SDK 内置上传时,需在顶层 storage 中同时配置以下两个字段;缺少任一字段都会导致 SDK 初始化失败。
同一份 storage 配置只能指定 TOS 或 VOD 中的一种上传目标。
配置 SDK 内置 TOS 素材存储
为了长期保存和管理素材、控制访问权限与存储成本,您可以将 AI MediaKit Web 智能剪辑 SDK 与您的火山引擎对象存储(TOS)进行集成。本章节将引导您完成从创建存储桶、配置权限到代码接入的全过程。 核心概念
在开始之前,请先了解以下与 TOS 相关的核心概念:
最佳实践:为了数据安全,建议将存储桶访问权限设为“私有”。在您的数据库和剪辑工程中,始终使用固定的 tos://bucket/key 地址保存素材位置。仅在前端页面需要播放或展示时,才通过 STS 服务动态生成临时的签名 URL。
工作流程
以下为浏览器、您的业务服务端与火山引擎云服务(TOS, STS, IAM)之间的完整交互流程:
- 用户在浏览器中选择本地文件准备上传,或打开一个包含 tos:// 素材的已有工程。
- 前端 SDK 调用您在初始化时提供的 getUploadSTS 回调函数,向您的业务服务端请求临时上传凭证。
- 您的业务服务端在验证用户身份和权限后,使用其安全存储的长期 AK/SK 调用火山引擎 STS 服务的 AssumeRole 接口。
- STS 服务返回一组有时效性的临时凭证,业务服务端将其转换为下文规定的字段并返回给前端。
- SDK 使用临时凭证上传文件或为已有文件生成临时播放地址。
- 上传成功后,SDK 将 tos://bucket/key 地址保存到剪辑工程,并使用临时播放地址展示素材。
步骤 1:创建并配置 TOS 存储桶
建议为每个剪辑工程规划独立的对象前缀,例如 amk-editor/<projectId>/,以便分别控制访问权限和统计存储成本。
- 配置跨域访问(CORS):在存储桶的权限管理 > 跨域访问设置 中,添加一条规则:
- 允许的请求方法(Methods):至少包含 PUT、GET、HEAD。
- 允许的请求头(Allow-Headers):为方便调试,可先设置为 *。在生产环境中,应仅保留浏览器实际发出的请求头,如 Content-Type、x-tos-content-md5。
- 允许浏览器访问的响应头(Expose-Headers):建议包含 ETag 和 x-tos-request-id,便于排查问题。
为确保安全,请勿在生产环境中使用通配符 * 作为来源。请始终配置精确的业务域名。
步骤 2:配置 IAM 角色与权限策略
遵循最小权限原则,推荐使用一个专用的 IAM 子账号来调用 STS 服务,并创建一个仅允许访问特定 TOS 资源的角色。切勿在业务服务端硬编码主账号的长期密钥,更不能将任何长期密钥下发给浏览器。
- 为其创建并保存好访问密钥(AK/SK),此密钥将部署在您的业务服务端。
- 为该子用户授予 STSAssumeRoleAccess 权限,或创建一个仅允许对特定角色执行 sts:AssumeRole 操作的更严格的自定义策略。
- 创建用于上传的 IAM 角色:在 IAM 控制台的角色管理页面中创建一个角色。信任身份选择当前账号,策略选择 STSAssumeRoleAccess。
- 为角色绑定 TOS 权限策略:角色的权限策略决定了临时凭证的最终权限。请创建一个自定义策略,仅授予必要的 TOS 操作权限,然后将其绑定到角色上。切勿直接授予 TOSFullAccess。以下是一个最小权限策略示例,仅允许对 example-bucket 下amk-editor/ 前缀内的对象执行上传和读取操作。请务必将桶名和前缀替换为您自己的配置。
- 记录角色 TRN:在角色详情页面,复制并保存其 TRN(火山引擎资源名称),格式为 trn:iam::<AccountId>:role/<RoleName>。此 TRN 将用于服务端的 AssumeRole 调用。
步骤 3:实现 STS 临时凭证签发接口
在您的业务服务端创建一个接口,例如 /api/tos-upload-sts,用于接收前端的凭证请求并返回 STS 临时凭证。
以下 Node.js 示例仅为核心逻辑演示。生产环境的接口必须包含完整的用户登录态校验、剪辑工程 projectId 的访问权限检查、接口限流和日志审计。
为了能被 SDK 内置的 TOS 上传模块正确识别,接口响应体必须包含以下字段:
步骤 4:在前端 SDK 初始化时配置 storage
在前端初始化 createAmkEditorAssistant 时,传入 storage 配置项,即可启用 SDK 内置的 TOS 上传功能。
如果需要将视频导出、抽帧等 AI MediaKit 任务的产物保存到该 TOS 存储桶,还需前往 AI MediaKit 控制台的基础配置 > 授权管理页面,完成访问 TOS 的跨服务授权。getUploadSTS 返回的临时凭证仅供浏览器上传和访问素材使用,不能替代该授权。 配置 SDK 内置 VOD 素材存储
除对象存储(TOS)外,您还可以将火山引擎视频点播(VOD)的点播空间作为本地素材的上传目标。您只需在初始化 SDK 时通过 storage 指定目标空间,并提供一个获取临时凭证的回调;文件上传、媒资发布以及播放地址的获取与刷新都由 SDK 自动完成,您无需自行对接 VOD 的上传或播放接口。 核心概念
在开始之前,请先了解以下与 VOD 相关的核心概念:
工作流程
以下为浏览器、您的业务服务端与火山引擎 VOD 服务之间的完整交互流程:
- 前端 SDK 调用您在初始化时提供的 getUploadSTS 回调函数,向您的业务服务端请求临时凭证。
- 您的业务服务端在校验用户与剪辑工程的访问权限后,使用其安全存储的长期 AK/SK 为目标空间签发 STS 临时凭证,并将凭证返回给前端。
- SDK 使用该临时凭证完成文件上传、媒资发布与播放信息查询。
- 后续加载工程或临时播放地址即将过期时,SDK 会再次调用 getUploadSTS 刷新凭证并获取新的播放地址。
步骤 1:创建点播空间
在火山引擎视频点播控制台创建点播空间并记录空间名。storage.media_output_destination 应配置为 vod://<空间名>,不要填写播放域名、Vid 或 HTTP(S) 地址。 步骤 2:实现 VOD STS 临时凭证签发接口
您需要在业务服务端创建一个接口,为当前登录用户签发目标空间的 STS 临时凭证。该接口应先校验用户与剪辑工程的访问权限;长期 AK/SK 只能保留在服务端,不能下发前端。
临时凭证应仅包含以下权限:
- Vod:UpdateMediaPublishStatus
接口需返回以下五个字段,供前端 getUploadSTS 原样返回给 SDK:
您需在服务端安装 @volcengine/openapi,并配置具备目标空间访问权限的 AK/SK。
示例中的 Resource: [] 未限定可访问的目标空间资源;您在生产环境中应按照点播授权规则,仅授予必需的权限。
步骤 3:在前端 SDK 初始化时配置 storage
您在前端初始化 createAmkEditorAssistant 时,通过 storage 配置点播空间目标和临时凭证回调,即可启用 SDK 内置的 VOD 上传功能。
上述 /api/vod-upload-sts 为业务自行实现的接口,不是 SDK 固定地址。storage 中的 media_output_destination 与 getUploadSTS 必须同时配置;同一 storage 配置只能指定一个当前上传目标,TOS 或 VOD,二者不可混用。
参考
本章节提供集成 Web 智能剪辑 SDK 时所需的 SDK 初始化配置、实例方法和核心数据结构。
SDK 初始化配置
顶层配置
语言与文案配置(i18n)
工具栏配置(toolbar)
用于配置内置剪辑器工具栏。
存储配置(storage)
storage 对象整体可选。一旦配置 media_output_destination,就必须同时配置 getUploadSTS。
AI 助手配置(assistant)
双栏布局配置(layout)
素材配置(material)
您提供的原始音频、视频和图片 URL 必须允许跨域访问(CORS)。首次请求和失败重试均不能改用 no-cors 模式。
SDK 实例方法
服务端 API 参考
您的业务代理服务通过同一个代理入口,将前端 SDK 的调用转发到 AI MediaKit 同一服务域名下的两组路径:Editing API 和 Assistant Runtime API。
这套 API 负责管理剪辑工程的核心数据,如工程信息、素材库、时间轴和异步任务。
基础信息
响应约定
所有接口在 HTTP 层面统一返回 200 OK,具体的业务成功与失败通过响应体内容来区分。
创建工程
POST /projects
创建一个新的剪辑工程,并返回其唯一标识 project_id。
请求参数
批量创建或更新素材
POST /projects/{projectId}/materials(创建)
PUT /projects/{projectId}/materials(更新或插入)
向指定工程中批量添加或更新素材。PUT 操作会根据 source_material_id 判断是更新现有素材还是插入新素材。如果任一素材未通过校验,本批次中的所有新增和更新都不会生效。
请求参数
这套 API 负责处理所有与大模型交互的请求,包括自然语言理解、对话管理和 AI 助手工具调用。
基础信息
必须允许访问的接口
您的代理服务应至少放行以下 SDK 必需的路径和方法:
SDK 发布历史