Rotate Videos

Requirements#

• CE.SDK package installed in your app:
  • To use the default UI: npm install @cesdk/cesdk-js
  • To rotate programmatically: npm install @cesdk/engine
• A valid CE.SDK license key

What You’ll Learn#

• Rotate a video from the UI with the control gizmo.
• Rotate a video block to a defined angle using code.
• Lock rotation globally or per block in template workflows.
• Rotate a group of clips together.
• Rotate live camera previews that use PixelStreamFill.

Rotate a Video With the UI#

When you select a video block in the UI, the control gizmo shows three handles:

• The resize handles
• The crop handles
• The rotation handle

When you insert a video, the rotation handle appears at the bottom of the block:

Drag the rotation handle to free‑form‑rotate the clip. Snap guides appear at the following degrees:

• 0°
• 90°
• 180°

Rotate a Video with JavaScript#

CE.SDK provides an API that you can leverage to automate rotations in a custom UI or workflows.

1. Install the @cesdk/engine package.
2. Call the BlockAPI.

Any design block, videos included, can use the same API calls.

How Rotation Works#

To rotate any video in JavaScript, call block.setRotation with the target angle in radians:

// Rotate the clip by 90°
engine.block.setRotation(blockId, Math.PI / 2);

• Math.PI / 2 sets a 90° rotation angle (Math.PI = 180°).
• Use negative values for clockwise rotations.
• Use positive values for counterclockwise rotations.

setRotation applies the rotation to the entire block. To rotate only the media inside a frame, combine rotation with cropping.

Convert Degrees and Radians#

Since the CE.SDK API expects radians, converting between the two lets you:

• Accept human-friendly degrees.
• Pass the correct radian values to setRotation.
• Turn the engine’s radian results back into degrees when you log or display them.

Conversion operations can be helpful in:

• UX controls
• Brand guidelines
• Orientation metadata

Helpers keep scripts readable when you start from degree-based inputs:

const toRadians = (degrees) => (degrees * Math.PI) / 180;
const toDegrees = (radians) => (radians * 180) / Math.PI;

const targetRadians = toRadians(45); // 0.785398...
engine.block.setRotation(blockId, targetRadians);

console.log('Video rotation is', toDegrees(targetRadians), '°');

The preceding code:

1. Defines degree↔radian helpers.
2. Converts 45° to radians.
3. Applies that rotation to the block.
4. Logs the resulting angle back in degrees.

Read the Rotation Values#

Read the current rotation if you need it in further operations:

const currentRotation = engine.block.getRotation(blockId);

For a 90° rotation, currentRotation logs the rotation in radians (1.5707963705062866, the value of pi/2).

Pixel-Stream Previews (Live Camera)#

If the video comes from a live camera feed, your code likely uses a PixelStreamFill. While you can rotate a live camera stream using block transforms, this approach may lead to performance issues such as dropped frames. To ensure smoother playback, apply the rotation upstream—before the video stream reaches the editor.

Instead of calling setRotation:

1. Call setEnum.
2. Change the fill’s orientation.

This can be handy when the stream arrives rotated. For example, for a 90° rotation:

engine.block.setEnum(pixelStreamFill, 'fill/pixelStream/orientation', 'Left')

The preceding code:

1. Tells CE.SDK to set the pixel stream fill’s orientation to Left.
2. Flips the incoming camera/WebRTC feed.
3. What should point upward now appears along the left side..

This setup tells the engine to realign the incoming stream so the video displays upright again.

Lock Rotation#

CE.SDK provides ways to turn off rotations on different scopes.

Hide Rotation Handles#

Use the 'controlGizmo/showRotateHandles' setting key:

instance.engine?.editor?.setSettingBool('controlGizmo/showRotateHandles', false);

This code makes the rotation handles disappear in the UI for all blocks.

Lock a Single Clip#

CE.SDK allows turning off rotation only for a block. For this, use setScopeEnabled with the block ID:

// Disable rotation for a single block
engine.block.setScopeEnabled(blockId, 'layer/rotate', false);

Rotate Clips Together#

To avoid redoing the offsets on different blocks:

• Group the blocks.
• Rotate the parent group.

This keeps their layout intact. For example:

const groupId = engine.block.group([titleText, blockId]);
engine.block.setRotation(groupId, Math.PI / 8);

Every child block inherits the rotation, so clips rotate with the parent, along with:

• Titles
• Overlays
• Different shots

Troubleshooting#

API References in this Guide#