Usage

In this section, we'll explore how all the components of Rendley SDK work together to enable powerful video editing experiences.

Definitions

Rendley SDK is built around several key concepts that are essential to understanding its fundamental architecture. Let's take a closer look at each of these:

  • Engine: The core class that holds everything together, providing a single point of access for all Rendley SDK functionality.
  • Display: The canvas where all the changes and modifications are displayed in real-time.
  • Library: Where you upload and manage your assets, such as images, videos and audio.
  • Timeline: A representation of your video project over time. It allows you to arrange and synchronize clips, layers, and transitions, providing precise control over the timing and sequence of your edits.
  • Layer: Layers are the building blocks of your video composition. They can contain video clips, images, text, audio and more. By stacking and arranging layers, you can create complex compositions.
  • Clip: Clips are individual pieces of media, such as a video segment, image, or audio file, that you add to your project. Clips can be trimmed, split, and edited independently, giving you granular control over the content.

Workflow

Here's how you can put these concepts together to create engaging video editing experiences:

1. Obtain a License

To use the Rendley SDK, you need to acquire a license. Visit rendley.com (opens in a new tab) to obtain your license details.

2. Rendley SDK uses a singleton pattern for its engine class, which means you can access the same instance from anywhere in your project. Get started with:

import { Engine } from "@rendley/sdk";
 
const engine = Engine.getInstance();
 
await engine.init({
  license: {
    licenseName: "YOUR_LICENSE_NAME",
    licenseKey: "YOUR_LICENSE_KEY",
  },
  display: {
    width: 1920,
    height: 1080,
    backgroundColor: "#000000",
    view: canvasElement,
  },
});

The Rendley SDK engine should be initialized with a <canvas> element, which will serve as the display surface for your composition.

Replace YOUR_LICENSE_NAME and YOUR_LICENSE_KEY with your actual license.

3. To add an image to your composition, first upload it to the library using:

const mediaId = await engine
  .getLibrary()
  .addMedia(
    "https://images.pexels.com/photos/24253539/pexels-photo-24253539/free-photo-of-a-bridge-over-a-river-with-a-city-in-the-background.jpeg?auto=compress&cs=tinysrgb&w=500"
  );

Note that this action returns a unique identifier for the uploaded asset, which can be reused across multiple clips.

In the example above, we imported the media from a URL. However, you can also use a File object, a URL, or a UInt8Array, providing flexibility in how you source your media.

4. Uploading an asset doesn't display it immediately. To show your clip in a layer, create a new layer and add the clip using:

const layer = engine.getTimeline().createLayer();
 
const clip = layer.addClip({
  mediaDataId: mediaId,
  startTime: 0,
});

By default, all clips are centered on the display. You can change this by setting a position attribute within the style property.

5. Once you've added your clip to a layer, you can play the composition using:

engine.play();

6. We use an event-driven architecture that handles all internal complexities for you. This means that when you add a clip to the composition or modify the contents of a text clip, the display will automatically update in real-time. Additionally, you can laverage these same events emitted by the SDK to trigger custom actions and render unique elements as needed.

import { EventsEnum } from "@rendley/sdk";
 
engine.events.on(EventsEnum.LAYER_ADDED, () => {
  alert("A layer has been created");
});
 
// or
 
engine.events.on("layer:added", () => {
  alert("A layer has been created");
});

This is just a starting point, but it should give you a solid foundation of how the pieces connect together.

InstallationChangelog