SDK 说明

无界云剪辑 SDK 是一个 JSSDK，分为内核 SDK（Core-SDK）和编辑器 SDK（Editor-SDK）。

• Core-SDK: 渲染工程数据的 SDK，主要是画布区域的代码，以及合成视频的代码。
• Editor-SDK: 编辑器的 SDK，基于 Core-SDK 开发来的，包含：素材模块、画布、设置区域、时间轴等。

Core-SDK

Core-SDK 是渲染部分的 SDK，传入工程数据（JSON）可以将数据绘制到 Canvas 上。

使用案例如下：

// 引入视频渲染内核SDK
import { VideoCoreSDK } from "@h5/videoCoreSDK";

const vc = new VideoCoreSDK({
  data: MovieData, // 必填，工程数据
  env: "preview", // 必填，渲染模式：editor（编辑模式，可拖动编辑）； preview（预览模式，只能预览，内存消耗更小）
  registerId: "", // 必填，注册ID，和域名进行绑定的
  workerPath: "assets", // 选填，decode.worker.js的引用目录，默认是assets
  scale: 1, // 选填，画布缩放比例，默认是1
  currentTime: 0, // 选填，默认开始时间是0
  plugins: [], // 选填，扩展插件
});

const core = await vc.init();

/**
 * 假设工程数据是movieData，修改数据->更新视图
 */
// 1、获取工程数据中第一个元素
const [element] = movieData.elements;

// 2、修改第一个元素的坐标为[100, 200]
element.style.x = 100;
element.style.y = 200;

// 3、更新视图
core.update();

// 播放
core.play();

// 暂停
core.pause();

Editor-SDK

Editor-SDK 是编辑器部分的 SDK，传入工程数据（JSON）可以进行数据修改并合成视频。

// 引入视频编辑器的SDK
import { VideoEditorSDK } from "@h5/videoEditorSDK";

// 创建编辑器的实例
const vs = new VideoEditorSDK({
  registerId: "test123", // 必填，注册ID，需要去官网进行申请
  movieData: "工程数据", // 选填二选一，工程数据，工程数据和作品ID必须传入一个，会优先读取工程数据，如果没有传入工程数据，会通过appid去api server 去获取工程数据
  appid: "作品ID", // 选填二选一，作品id
  target: document.body, // 选填，容器，默认是document.body
  server: "api server配置", // 选填，如果没有传入会调用video.h5ds.com的API服务，api接口配置，具体参考APIServer
});

// 初始化
const vsdk = await vs.init();

/**
 * 假设工程数据是movieData，修改数据->更新视图
 */
// 1、获取工程数据中第一个元素
const [element] = movieData.elements;

// 2、修改第一个元素的坐标为[100, 200]
element.style.x = 100;
element.style.y = 200;

// 3、更新视图
vsdk.editor.updateMovie();