SDK Description

Unbounded Cloud Clip SDK is a JSSDK, which is divided into Core SDK (Core-SDK) and Editor SDK (Editor-SDK).

• Core-SDK: The SDK for rendering project data, mainly the code for the canvas area and the code for composing videos.
• Editor-SDK: The SDK for the editor, developed based on Core-SDK, including: material module, canvas, setting area, timeline, etc.

(github demo)[https://github.com/x-clip/video-core-sdk-demo]

Core-SDK

Core-SDK is the SDK for the rendering part, which can draw data to Canvas by passing in project data (JSON).

Usage example:

// Import video rendering core SDK
import { VideoCoreSDK } from "@h5/videoCoreSDK";

const vc = new VideoCoreSDK({
  data: MovieData, // Required, project data
  env: "preview", // Required, rendering mode: editor (editing mode, can be dragged and edited); preview (preview mode, only preview, smaller memory consumption)
  registerId: "", // Required, registration ID, bound to the domain name
  workerPath: "assets", // Optional, the reference directory of decode.worker.js, default is assets
  scale: 1, // Optional, canvas scaling ratio, default is 1
  currentTime: 0, // Optional, default start time is 0
  plugins: [], // Optional, extension plugins
});

const core = await vc.init();

/**
 * Assume the project data is movieData, modify data -> update view
 */
// 1. Get the first element in the project data
const [element] = movieData.elements;

// 2. Modify the coordinates of the first element to [100, 200]
element.style.x = 100;
element.style.y = 200;

// 3. Update view
core.update();

// Play
core.play();

// Pause
core.pause();

Editor-SDK

Editor-SDK is the SDK for the editor part, which can modify data and compose videos by passing in project data (JSON).

// Import video editor SDK
import { VideoEditorSDK } from "@h5/videoEditorSDK";

// Create an instance of the editor
const vs = new VideoEditorSDK({
  registerId: "test123", // Required, registration ID, need to apply on the official website
  movieData: "Project data", // Optional, one of the two, project data, either project data or work ID must be passed in, project data will be read first, if no project data is passed in, it will get project data from api server through appid
  appid: "Work ID", // Optional, one of the two, work id
  target: document.body, // Optional, container, default is document.body
  server: "api server configuration", // Optional, if not passed in, it will call the API service of video.h5ds.com, api interface configuration, specific reference APIServer
});

// Initialize
const vsdk = await vs.init();

/**
 * Assume the project data is movieData, modify data -> update view
 */
// 1. Get the first element in the project data
const [element] = movieData.elements;

// 2. Modify the coordinates of the first element to [100, 200]
element.style.x = 100;
element.style.y = 200;

// 3. Update view
vsdk.editor.updateMovie();