Video Editor – IMG.LY Blog

Building a CapCut-Like Video Editor with CE.SDK and AI

Jan — Thu, 26 Feb 2026 22:50:34 GMT

Build this with AI in minutes

This tutorial is a great way to understand how CE.SDK works under the hood. But if you just want to get to the result, you can build this entire editor using IMG.LY Agent Skills, no manual setup required.

Install the skills, then run:

/cesdk:build Build a CapCut-like video editor with a dark theme, multi-track timeline, AI video/image/audio generation, background removal, and MP4 export.

Want to understand a specific concept in depth? Use /cesdk:explain — for example:

/cesdk:explain How does the video timeline and block hierarchy work?

Introduction

CapCut has set the standard for accessible video editing. Its dark UI, intuitive timeline, and AI-powered features make it feel like a professional tool that anyone can use. But what if you could build something similar embedded directly in your own web application in minutes? Yes, minutes!

In this tutorial, we’ll walk through how we built a CapCut-like video editor using IMG.LY’s CreativeEditor SDK (CE.SDK) for React. The finished editor includes:

A multi-track timeline for video, audio, text, and captions
Trim, split, and join operations on video clips
A CapCut-inspired dark theme built with CSS custom properties
AI video generation (text-to-video, image-to-video) via Minimax, Kling, and Pixverse
AI image generation (text-to-image, image editing) via RecraftV3, IdeogramV3, and GPT Image
AI audio generation (text-to-speech, sound effects) via ElevenLabs
AI text generation (copywriting, translation) via Anthropic Claude
Background removal — client-side, powered by WebAssembly/WebGPU
MP4 export directly from the browser

The entire editor is a single React component with roughly 180 lines of JavaScript and 100 lines of CSS.

Architecture Overview

CE.SDK has two main layers:

CreativeEngine: The headless core that manages scenes, blocks, assets, and rendering. It handles the video timeline, playback, and export entirely client-side.
CreativeEditor UI: A pre-built, customizable UI layer that wraps the engine with a dock, inspector, timeline, canvas, and navigation bar.

Plugins extend both layers. The AiApps plugin, for example, registers AI providers with the engine and injects UI components (dock buttons, canvas menu items, generation panels) into the editor.

Step 1: Project Setup

We scaffolded a React project with Vite and installed CE.SDK alongside the AI plugin packages:

npm create vite@latest capcut-like-editor -- --template react
cd capcut-like-editor
npm install

# Core SDK
npm install @cesdk/cesdk-js

# AI plugins
npm install @imgly/plugin-ai-apps-web
npm install @imgly/plugin-ai-video-generation-web
npm install @imgly/plugin-ai-image-generation-web
npm install @imgly/plugin-ai-audio-generation-web
npm install @imgly/plugin-ai-text-generation-web

# Background removal (runs locally via WASM/WebGPU)
npm install @imgly/plugin-background-removal-web onnxruntime-web@1.21.0

Why so many packages?

CE.SDK follows a modular plugin architecture. Each AI capability is a separate package with its own provider modules. This means you only bundle what you use if you don’t need audio generation, don’t install @imgly/plugin-ai-audio-generation-web. The @imgly/plugin-ai-apps-web package is the unifying layer that brings them all together into a single dock panel.

Step 2: The React Component

CE.SDK provides a first-class React wrapper via @cesdk/cesdk-js/react. The <CreativeEditor> component handles mounting, initialization, and cleanup:

import CreativeEditor from '@cesdk/cesdk-js/react';

const config = {
  // license: 'YOUR_CESDK_LICENSE_KEY',
};

const init = async (cesdk) => {
  // All setup happens here — theme, assets, plugins, UI customization
};

export default function VideoEditor() {
  return (
    <CreativeEditor config={config} init={init} width="100vw" height="100vh" />
  );
}

The config object is passed to the engine at creation time. The init callback fires once the cesdk instance is ready — this is where all our customization lives.

Pitfall: Silent init errors. The <CreativeEditor> component swallows errors thrown inside init. If something fails, the editor loads but appears broken with no console output. Always wrap init in a try/catch:

Step 3: Creating the Video Scene

A video editor needs three things at startup: asset sources, a video scene, and a timeline.

// Load built-in asset libraries (stickers, shapes, filters, typefaces, etc.)
await cesdk.addDefaultAssetSources();

// Load demo content (sample videos, images, audio) + enable upload slots
await cesdk.addDemoAssetSources({
  sceneMode: 'Video',
  withUploadAssetSources: true,
});

// Create a video scene with timeline
await cesdk.createVideoScene();

createVideoScene() sets up the scene hierarchy that powers the timeline:

Scene
 └── Page (represents the video canvas — 1920x1080 by default)
      ├── Track (video track — holds video clips in sequence)
      ├── Track (overlay track — text, stickers, images)
      ├── CaptionTrack (subtitles synced to playback)
      └── Audio (background music, voiceover, sound effects)

Each element on the timeline is a block with timing properties: timeOffset (when it appears) and duration (how long it plays). The engine handles rendering each frame, compositing layers, and synchronizing audio.

Browser support

Video editing relies on modern web codecs (WebCodecs API), which are available in Chromium-based browsers (Chrome, Edge, Brave). Safari and Firefox support is limited.

Step 4: The CapCut Dark Theme

CapCut’s visual identity is defined by its deep charcoal backgrounds, teal accent colors, and subtle elevation layers. CE.SDK’s theming system maps perfectly to this through CSS custom properties.

Setting the base theme

cesdk.ui.setTheme('dark');

This activates CE.SDK’s built-in dark theme. But we want to go further — we need CapCut’s specific color palette.

Custom CSS overrides

CE.SDK scopes all its UI under .ubq-public with data-ubq-theme and data-ubq-scale attributes. We override the CSS custom properties to inject our palette:

.ubq-public[data-ubq-theme='dark'][data-ubq-scale='normal'],
.ubq-public[data-ubq-theme='dark'][data-ubq-scale='modern'] {
  /* Deep charcoal backgrounds — darker than CE.SDK's default dark */
  --ubq-canvas: hsl(220, 15%, 8%) !important;
  --ubq-elevation-1: hsl(220, 13%, 12%) !important;
  --ubq-elevation-2: hsl(220, 12%, 15%) !important;
  --ubq-elevation-3: hsl(220, 10%, 18%) !important;

  /* High-contrast white text */
  --ubq-foreground-default: hsla(0, 0%, 100%, 0.92) !important;
  --ubq-foreground-light: hsla(0, 0%, 100%, 0.55) !important;

  /* CapCut's signature teal/cyan accent */
  --ubq-interactive-accent-default: hsl(190, 85%, 48%) !important;
  --ubq-interactive-accent-hover: hsl(190, 85%, 42%) !important;
  --ubq-interactive-accent-pressed: hsl(190, 85%, 36%) !important;

  /* Subtle borders — barely visible, like CapCut */
  --ubq-border-default: hsla(0, 0%, 100%, 0.08) !important;
}

The key design decisions:

Property	Value	Why
`--ubq-canvas`	`hsl(220, 15%, 8%)`	Near-black with a slight blue tint — matches CapCut’s canvas area
`--ubq-elevation-1/2/3`	12% → 15% → 18% lightness	Subtle elevation steps create depth without harsh contrast
`--ubq-interactive-accent-*`	`hsl(190, 85%, 48%)`	CapCut’s teal — used for buttons, selections, and progress bars
`--ubq-border-default`	8% opacity white	Nearly invisible borders that only appear on close inspection

Responsive scale

We also configure responsive scaling so the editor adapts to touch devices:

cesdk.ui.setScale(({ containerWidth, isTouch }) => {
  if ((containerWidth && containerWidth < 768) || isTouch) {
    return 'large'; // Bigger touch targets on small/touch screens
  }
  return 'normal'; // Standard desktop sizing
});

Step 5: AI Plugin Integration

This is where the editor transforms from a basic video tool into something that feels like CapCut’s AI-powered experience. CE.SDK’s plugin system lets us add all AI capabilities through a single unified AiApps plugin.

The unified AiApps approach

Instead of registering each AI plugin separately, @imgly/plugin-ai-apps-web provides a single entry point:

import AiApps from '@imgly/plugin-ai-apps-web';
import FalAiVideo from '@imgly/plugin-ai-video-generation-web/fal-ai';
import FalAiImage from '@imgly/plugin-ai-image-generation-web/fal-ai';
import OpenAiImage from '@imgly/plugin-ai-image-generation-web/open-ai';
import Elevenlabs from '@imgly/plugin-ai-audio-generation-web/elevenlabs';
import Anthropic from '@imgly/plugin-ai-text-generation-web/anthropic';

await cesdk.addPlugin(
  AiApps({
    dryRun: true, // Simulate for development — no API calls
    providers: {
      text2text: Anthropic.AnthropicProvider({ proxyUrl: PROXY_URL }),
      text2image: [FalAiImage.RecraftV3({ proxyUrl }) /* ... */],
      image2image: [FalAiImage.GeminiFlashEdit({ proxyUrl }) /* ... */],
      text2video: [FalAiVideo.MinimaxVideo01Live({ proxyUrl }) /* ... */],
      image2video: [
        FalAiVideo.MinimaxVideo01LiveImageToVideo({ proxyUrl }) /* ... */,
      ],
      text2speech: Elevenlabs.ElevenMultilingualV2({ proxyUrl }),
      text2sound: Elevenlabs.ElevenSoundEffects({ proxyUrl }),
    },
  })
);

Provider categories explained

Category	What it does	Models we configured
`text2text`	AI copywriting — improve text, translate, change tone	Anthropic Claude
`text2image`	Generate images from text prompts	RecraftV3, IdeogramV3, GPT Image
`image2image`	Transform existing images with AI	Gemini Flash Edit, GPT Image
`text2video`	Generate video clips from text descriptions	Minimax Video, Kling Video, Pixverse
`image2video`	Animate a static image into video	Minimax Video, Kling Video
`text2speech`	Convert text to spoken audio with voice selection	ElevenLabs Multilingual V2
`text2sound`	Generate sound effects from text	ElevenLabs Sound Effects

When multiple providers are configured in an array (like text2image), the UI automatically shows a provider/model selection dropdown so users can choose which AI model to use.

The proxy server requirement

Every provider takes a proxyUrl parameter. This is critical for production:

Browser  →  Your Proxy Server  →  AI Provider (fal.ai, ElevenLabs, etc.)
                ↑
          Injects API keys
          server-side

Your API keys should never be in client-side code. The proxy server receives requests from CE.SDK, attaches your API key, and forwards to the AI provider. During development, dryRun: true simulates generation without any API calls.

Background removal

Background removal is a separate plugin because it runs entirely client-side — no proxy needed:

import BackgroundRemovalPlugin from '@imgly/plugin-background-removal-web';

await cesdk.addPlugin(
  BackgroundRemovalPlugin({
    ui: { locations: ['canvasMenu'] },
  })
);

This uses ONNX Runtime (WebAssembly + WebGPU) to run an AI segmentation model directly in the browser. The first run downloads ~40MB of model weights, which are then cached. Select any image on the canvas and click “Remove Background” in the context menu.

Step 6: UI Customization with the Component Order API

CE.SDK’s UI is built from five customizable areas: Dock, Inspector Bar, Canvas Menu, Navigation Bar, and Canvas Bar. The Component Order API lets us insert, remove, and reorder components in each area.

Adding the AI button to the dock

We want the AI Apps button to be the first thing users see in the dock:

cesdk.ui.insertOrderComponent(
  { in: 'ly.img.dock', position: 'start' },
  'ly.img.ai.apps.dock'
);

insertOrderComponent takes a location specifier and the component(s) to insert. position: 'start' puts it at the top of the dock. Alternative positions include 'end', a numeric index, or relative placement with before/after matchers.

When a user selects a text or image block and right-clicks, we want AI options available:

cesdk.ui.insertOrderComponent({ in: 'ly.img.canvas.menu', position: 'start' }, [
  'ly.img.ai.text.canvasMenu',
  'ly.img.ai.image.canvasMenu',
]);

Passing an array inserts multiple components at once.

We add an Export button with a real click handler that triggers MP4 export:

cesdk.ui.insertOrderComponent(
  { in: 'ly.img.navigation.bar', position: 'end' },
  {
    id: 'ly.img.action.navigationBar',
    key: 'export',
    label: 'Export',
    icon: '@imgly/Download',
    onClick: async () => {
      const engine = cesdk.engine;
      const page = engine.block.findByType('page')[0];
      if (page) {
        const blob = await engine.block.exportVideo(page, {
          mimeType: 'video/mp4',
        });
        const url = URL.createObjectURL(blob);
        const a = document.createElement('a');
        a.href = url;
        a.download = 'video.mp4';
        a.click();
        URL.revokeObjectURL(url);
      }
    },
  }
);

The exportVideo method renders every frame of the timeline — compositing video tracks, overlays, text, captions, and audio — into an MP4 blob entirely in the browser.

Step 7: Wiring Generated Audio into the Asset Library

AI-generated audio (speech and sound effects) is stored in provider-specific history sources. To make this audio browsable alongside regular audio assets, we inject the history source into the audio asset library entry:

const audioEntry = cesdk.ui.getAssetLibraryEntry('ly.img.audio');
if (audioEntry != null) {
  const existingSourceIds = Array.isArray(audioEntry.sourceIds)
    ? audioEntry.sourceIds
    : audioEntry.sourceIds({});
  cesdk.ui.updateAssetLibraryEntry('ly.img.audio', {
    sourceIds: [...existingSourceIds, 'ly.img.ai.audio-generation.history'],
  });
}

Now when users open the Audio panel in the dock, they’ll see their AI-generated audio alongside the sample library.

Step 8: Custom Labels with i18n

CE.SDK’s i18n system lets us customize any UI string. We used it to make the AI prompt fields more inviting:

cesdk.i18n.setTranslations({
  en: {
    'ly.img.plugin-ai-video-generation-web.fal-ai/minimax/video-01-live.property.prompt':
      'Describe your video...',
    'ly.img.plugin-ai-image-generation-web.fal-ai/recraft-v3.property.prompt':
      'Describe your image...',
  },
});

Translation keys follow the pattern {plugin-id}.{provider-id}.property.{field}. You can also add multi-language support by including keys for de, fr, es, etc.

The Complete File Structure

capcut-like-editor/
├── src/
│   ├── App.jsx              # Root — imports VideoEditor + theme CSS
│   ├── VideoEditor.jsx      # The entire editor (single component, ~180 lines)
│   ├── capcut-theme.css     # CapCut dark theme overrides (~100 lines)
│   ├── index.css            # Global reset (margin/padding/overflow)
│   └── main.jsx             # React entry point
├── index.html
├── package.json
└── vite.config.js

That’s it. The entire CapCut-like editor is three files: one React component, one CSS file, and a thin App wrapper.

What We Get Out of the Box

Because CE.SDK’s video UI is pre-built, we didn’t write any code for these features — they come from createVideoScene() and the default UI:

Multi-track timeline with drag-to-reorder, drag-to-resize
Trim and split — drag clip edges or use the split tool
Join and arrange — drag clips between tracks
Transform — crop, flip, rotate via the inspector
Playback controls — play, pause, seek, scrub
Text overlays — add styled text with the text tool
Stickers and graphics — from the asset library
Filters and effects — LUT-based color grading
Undo/redo — full history stack
Zoom and pan — standard canvas navigation

The AI plugins add their own UI components (dock buttons, generation panels, context menu items) through the plugin system. We just positioned them where we wanted.

Going to Production

To take this from a prototype to production, you need three things:

1. License key

Get a free trial key at https://img.ly/forms/contact-sales and set it in the config (yes, if you want to ship to production you’ll have to talk to our lovely colleagues in sales):

const config = {
  license: 'YOUR_CESDK_LICENSE_KEY',
};

2. Proxy server

Set up a server that forwards AI requests with your API keys:

const PROXY_URL = 'https://your-server.com/api/ai-proxy';

See the CE.SDK Proxy Server guide for Express.js and other server examples.

3. Disable dry run

Remove dryRun: true from the AiApps configuration to enable real AI generation.

Key Takeaways

CE.SDK does the heavy lifting. The timeline, playback, rendering, and export are all handled by the engine. We wrote zero video processing code.
The plugin system is powerful. Six AI capabilities were added with a single addPlugin(AiApps({ ... })) call. Background removal was one more call.
CSS custom properties make theming painless. We matched CapCut’s aesthetic by overriding ~25 CSS variables. No forking, no patching.
The Component Order API is the customization backbone. insertOrderComponent with position-based placement is the cleanest pattern for adding UI elements.
Wrap init in try/catch. CE.SDK’s <CreativeEditor> swallows errors silently. This is the single most important debugging tip.
Pin your package versions. All @imgly/* plugins must match the @cesdk/cesdk-js version exactly. A version mismatch (like 1.68 vs 1.69) will cause peer dependency conflicts.

Resources

Best Video SDKs for Mobile Applications: A Comprehensive Comparison for Developers

Klaudia — Tue, 02 Dec 2025 14:54:37 GMT

If you’re building a mobile app that needs video editing capabilities, you’re facing a tough decision: should you integrate a commercial SDK, work with open-source tools, or try to build something yourself?

Video editing on mobile isn’t just hard, it’s complex in ways that surprise even experienced developers. You’re dealing with device fragmentation, battery constraints, memory management, and user expectations shaped by apps like TikTok and CapCut. And unlike web apps, mobile video editing requires native performance optimization to feel responsive.

In this article, we’ll compare the most popular video SDK options for mobile applications: IMG.LY, Banuba, Meishe, BytePlus, FFmpeg, and GStreamer and show you how they stack up across features, platforms, integration complexity, and pricing. We’ll be honest about where each solution shines and where you’ll hit roadblocks.

We’ll also dig into what it actually takes to build with each option: difficulty of integration, performance considerations, and what happens when you need to scale beyond a prototype.

The Challenge: Building Video Editing Into Mobile Apps

Before diving into specific SDKs, let’s talk about why video editing on mobile is uniquely challenging.

Processing Power vs Battery Life

Video processing is resource-intensive. Every frame you manipulate — trimming, filtering, compositing, exporting — requires significant CPU and GPU work. On mobile devices, this creates a constant tension between delivering fast performance and not draining your user’s battery in minutes.
Approximately 60% of battery usage in media apps comes from data transmission and processing. If you’re not careful with how you handle encoding, memory management, and background processes, your app will get uninstalled fast.

Device Fragmentation

Unlike web apps where you can control the environment, mobile apps run on thousands of device configurations. An iPhone 15 Pro handles 4K video editing effortlessly; a three-year-old Android phone might struggle with 1080p. You need to account for different chipsets, GPU capabilities, screen sizes, and OS versions — all while maintaining consistent UX.

User Expectations Are Higher Than Ever

Users expect mobile video editors to feel as responsive as native camera apps. They want real-time preview, smooth timeline scrubbing, instant filter application, and fast exports. Anything that feels sluggish or unpolished gets compared unfavorably to TikTok, Instagram, or CapCut — apps with massive engineering teams and years of optimization work.

Building this level of polish from scratch is a multi-month (or multi-year) undertaking. That’s why most teams reach for an SDK.

Understanding Video SDK Options

The video SDK landscape breaks down into three broad categories:

Commercial SDKs (IMG.LY Banuba, Meishe, BytePlus) provide pre-built editors with UI components, effects libraries, and dedicated support. They’re designed to integrate quickly but come with licensing costs.

Open-source frameworks (FFmpeg, GStreamer) give you powerful processing engines but no UI, no templates, and no hand-holding. You’ll need to build everything user-facing yourself.

Hybrid approaches combine open-source processing with custom UI development, giving you flexibility at the cost of significant engineering time.

When evaluating options, consider:

Do you need a user-facing editor or just backend processing?
How important is cross-platform consistency?
What’s your timeline and team size?
What happens when you need to scale or add new features?

Now let’s break down each solution.

1. IMG.LY CE.SDK (The Complete Solution)

IMG.LY CreativeEditor SDK is an enterprise-grade video editing solution built for teams that need production-ready editing features, cross-platform consistency, and automation — without spending months building and maintaining a custom solution.

Unlike processing libraries (FFmpeg, GStreamer) or social-first SDKs (Banuba, BytePlus), IMG.LY provides both interactive editing and server-side automation in one platform. You can embed the SDK for user-facing editing and use the same engine for headless creative automation on your backend.

Core Capabilities

IMG.LY delivers a complete video editing platform with timeline-based editing, design tools, and AI features:

Timeline-Based Editing:

Arrange videos on multi-track timelines
Trim, crop, and adjust duration
Merge videos and create collages
Audio overlay and mixing
Layer management and compositing

Creative Tools:

60+ filters and effects
Adjustments (brightness, contrast, saturation, exposure)
Text design with custom fonts and styles
Dynamic stickers and overlays
Frames with multiple blend modes

Template System:

Design templates with text variables and placeholders
Lockable elements for brand consistency
Automated variation generation
Server-side rendering for mass personalization

AI & Automation:

Native AI features: video generation, captions, voiceovers, thumbnails
Model-agnostic plugin system (integrate any AI model or API)
Background removal and style transfer
Smart filters and enhancements

Customization Framework:

Headless API for completely custom interfaces
Theming to match your brand
Toolbar configuration and element positioning
Multi-language localization
External asset library integration (Getty Images, Soundstripe)

Platform Support

Web: JavaScript, React, Angular, Vue.js, Svelte, Next.js
Mobile: Android (Kotlin/Java), iOS (Swift), React Native, Flutter
Desktop: macOS, Mac Catalyst, Electron
Server: Node.js for backend automation

Technical Architecture

Client-side encoding means fast editing operations run directly on devices without requiring backend infrastructure. This cuts bandwidth, reduces upload times for users, and eliminates server costs for standard editing.

Server-side rendering enables creative automation at scale — design templates once, generate thousands of variations programmatically from any data source with 100% consistent rendering.

Ideal Use Cases

Social media creation: In-app video recording with dual-camera support, advanced audio overlays, and real-time effects
Template-based workflows: Automate video creation for marketing materials, product videos, social media ads
Enterprise automation: Server-side rendering for high-volume ad generation, creative pipelines, mass personalization
E-commerce: Product video creation, user-generated content, personalized demos
SaaS platforms: In-app video editing for user-generated content, brand-controlled templates

Real Customer Examples

Social Media & Content Creation:

Mobile apps use IMG.LY SDK for in-app video recording with dual-camera support, allowing creators to capture picture-in-picture content directly
Advanced audio overlay features enable users to mix music tracks, voiceovers, and original audio in real-time
Real-time effects and filters provide instant creative feedback during recording and editing

Template-Based Video Production:

Marketing teams design video templates once and generate thousands of personalized variations programmatically using server-side rendering
E-commerce platforms automate product video creation by mapping product data to video templates, producing consistent branded content at scale
Brand teams create locked templates with variable elements, ensuring on-brand output while allowing distributed teams to customize messaging

Enterprise Creative Automation:

Ad platforms use CE.SDK’s Node.js capabilities for high-volume programmatic video generation, creating thousands of ad variations from single templates
DAM systems integrate IMG.LY for in-workflow video editing, allowing teams to make quick adjustments without leaving their asset management platform
Publishing platforms automate social media content by rendering video templates with dynamic data feeds, producing daily content without manual editing

500+ million creations per month powered by IMG.LY’s video editing and automation infrastructure across 600+ customers

Limitations

Paid solution. Unlike open-source frameworks, CE.SDK requires an enterprise license. This makes it less accessible for hobby projects or very early-stage prototypes, but the investment pays off in reduced development time, ongoing support, and scalability.

Enterprise-focused. The SDK is built for teams that need reliability, support, and scale. If you’re building a quick prototype or low-traffic app, open-source tools might be more cost-effective initially (though you’ll pay in engineering time).

Pricing / Licensing

Custom enterprise licensing based on platform, features, and usage
Dedicated support included: onboarding, SLAs, regular updates
Integration time: Most teams have a working editor in hours, not weeks

Who It’s For

Businesses that need a complete, production-ready video editing solution with cross-platform support, automation capabilities, enterprise scalability, and ongoing support. Teams that want to ship faster and focus on their unique product features rather than rebuilding video editing infrastructure.

Why IMG.LY SDK Stands Out

While other SDKs focus on either interactive editing (Banuba, BytePlus) or backend processing (FFmpeg, GStreamer), IMG.LY is the only solution that combines:

Cross-platform video editing (Web, iOS, Android, React Native, Flutter, Node.js)
Polished editor UI with complete customization options
Template system with server-side automation
AI-powered creative features
Dual-purpose architecture (client-side editing + server-side rendering)
Enterprise-grade scalability and dedicated support

If you’re evaluating other SDKs, ask yourself: how much engineering time will you spend building, maintaining, and scaling a custom solution? Our SDK eliminates that overhead so your team can focus on what makes your product unique.

2. Meishe SDK

Meishe is a Chinese video editing SDK provider with a comprehensive suite covering video editing, beauty filters, short video creation, and audio processing. They’re particularly strong in the Asian market and have been adopted by major platforms like Bilibili, OPPO, Xiaomi, and Himalaya.

Core Capabilities

Meishe offers film and television-level processing capabilities with a focus on high-quality output:

Video Editing Features:

Real-time preview through LiveWindow (preview effects during editing without pre-processing)
Support for multiple file formats with input up to 4K
Video output up to 1080P with configurable quality levels (1080P, 720P, 480P)
Unlimited audio track editing with multi-segment support
Transition effects between clips with customization options

Creative Tools:

Real-time skin beautification with adjustable parameters
Animation stickers with customizable properties
Special effects filters
Full-link HDR support
Professional video/audio editing with free function combination

Technical Details:

4K shooting capability
Real-time special effects processing
Full-link HDR processing
Professional-grade video and audio editing

Platform Support

Native: iOS, Android
Cross-Platform: Flutter (with unified display across platforms)

Ideal Use Cases

Enterprise applications requiring 4K video support
Professional video editing apps
Social media platforms (especially in Asian markets)
Streaming and content creation apps
Apps requiring HDR video processing

Limitations

Documentation primarily in Chinese. While Meishe has English documentation, many resources and examples are primarily available in Chinese, which can create barriers for Western development teams.

Less Western market presence. Most case studies and customer examples are from Chinese companies, which can make it harder to assess fit for Western markets.

Customization complexity. Getting deep customization may require more direct engagement with Meishe’s team compared to more self-service SDKs.

Pricing / Licensing

Pricing information is not publicly available — you’ll need to contact Meishe directly for quotes. This is common for enterprise-focused SDKs but can slow down evaluation.

Who It’s For

Development teams (especially in Asian markets) building professional-grade video editing apps that need 4K support, HDR processing, and advanced real-time capabilities.

How it compares to IMG.LY

Meishe offers strong professional-grade video processing with 4K and HDR support, particularly well-suited for Asian markets. IMG.LY provides similar 4K capabilities but adds cross-platform consistency (including web and server), template-driven automation, and a more developer-friendly integration experience for global teams. Meishe’s documentation is primarily in Chinese, while IMG.LY offers comprehensive English documentation and Western market support. If you’re building for Asian markets with HDR requirements, Meishe is a strong choice. For global deployment with automation needs, IMG.LY’s unified platform across client and server offers broader flexibility.

3. BytePlus Video Editor SDK

BytePlus Video Editor SDK comes from ByteDance (the company behind TikTok and CapCut). It’s designed to replicate the short-form, social-first editing experience that made those platforms successful, giving app developers similar workflows and effects libraries.

Core Capabilities

BytePlus provides three main feature sets built around social media video creation:

Camera Feature:

Real-time video capture and recording
4K video recording on any mobile device
Live filters and live beauty filters during capture

Preview Editor Feature:

Video editing and composition tools
More than 80,000 effects and filters
AR stickers and visual enhancements

Track Editor Feature:

Advanced multi-track timeline editing
Speed change effects
Transitions and audio features
Multi-layer composition

Export Options:

Support for 540p, 720p, 1080p, 4K resolutions
Frame rates: 25fps, 30fps, 50fps, 60fps

Platform Support

Native: iOS (Cocoapods, SPM, Objective-C, SwiftUI), Android (Gradle, Java, Jetpack Compose)
Cross-Platform: React Native, Flutter
Magic Template SDK: Available for both platforms

Ideal Use Cases

Social media apps focused on user-generated content
Short-form video platforms
Apps that want TikTok-like editing workflows
Content creation tools with extensive effects libraries
Apps requiring machine learning-powered visual enhancements

Limitations

Effects and beauty features are separate. The standard and lite versions of the SDK don’t include Camera props, filters, and beauty effects — you need to purchase those separately, which can complicate pricing and integration.

Customization beyond theming is limited. While you can match the SDK to your brand through theming, deeper UI customization requires more effort compared to headless SDKs.

Annual licensing only. The SDK operates on an annual subscription basis, which may not work for all business models or early-stage products.

Pricing / Licensing

Annual subscription: License valid for 1 year covering both iOS and Android
Contact sales for pricing details
Integration time: Estimated 2 weeks per platform (iOS & Android) for one developer
Customization may extend integration timeline

Who It’s For

Teams building social media-style video apps that want to replicate TikTok’s editing experience, especially if you need access to a massive effects library and ByteDance’s proven video editing architecture.

How it compares to IMG.LY

BytePlus brings TikTok’s proven social video editing architecture with 80,000+ effects and filters, making it ideal for replicating short-form social experiences. IMG.LY takes a different approach: instead of a massive pre-built effects library, it focuses on customization, templates, and automation. BytePlus excels at client-side social video creation with extensive effects; IMG.LY excels at template-driven workflows, server-side automation, and cross-platform consistency (including web and Node.js). If you want TikTok-like effects out of the box, BytePlus delivers. If you need creative automation, programmatic content generation, or want to build custom workflows with full control over the editing experience, IMG.LY offers more flexibility and a dual-purpose architecture.

4. Banuba Video Editor SDK

Banuba is a commercial video editing SDK focused on social media apps, with a strong emphasis on AR effects and beauty filters. It’s designed for teams building TikTok-like experiences or apps where user-generated video content is central to the product.

Core Capabilities

Banuba provides a full-featured video editor with AI-powered tools and creative effects:

Video Editing Features:

Picture-in-picture for multi-video layouts
AI-powered clipping that detects important segments
Customizable templates with replaceable elements
Trimming, merging, and timeline-based editing
AI-generated captions (English, Mandarin, Spanish, Portuguese)

Creative Tools:

Face AR masks with morphing effects and animated backgrounds
Video and transition effects (including “Rave” and “Cathode Flash”)
Audio editing with recording and mixing
Text and GIF overlays
Beauty effects (skin smoothing, teeth whitening)
Voice-change effects (Elf, Robot, Squirrel, Giant, Echo, Baritone)

Technical Details:

AI algorithms work offline — all processing happens on the device
No user content transmitted to servers
Requires OpenGL ES 3.0 minimum (3.1 for GPU-accelerated neural networks)

Platform Support

Native: iOS 15.0+, Android 6.0+
Cross-Platform: React Native, Flutter, NativeScript

Ideal Use Cases

Social media applications with AR filters
Photo/video editing apps for content creators
E-commerce platforms with video demos
Lifestyle and educational apps
Short-form video content creation

Limitations

Pricing complexity. Banuba’s pricing is custom and depends on platform, features, custom development, and payment terms. You’ll need to contact sales for accurate quotes, which can slow down evaluation.

AR licensing. Face AR features are optional and may require separate licensing, adding complexity to your commercial agreement.

Heavy focus on AR. If you don’t need beauty filters or AR masks, you’re paying for features you won’t use.

Pricing / Licensing

Free trial: 14 days with all features
Commercial: Custom pricing based on platform, features, and usage
Priced per platform per month

Who It’s For

Teams building social media apps or content creation tools that need AR effects, beauty filters, and TikTok-like creative features out of the box.

How it compares to IMG.LY

Banuba excels at AR effects and beauty filters for social media apps, while IMG.LY focuses on template-based workflows and cross-platform automation. If you need face masks and beauty effects, Banuba is purpose-built for that. But if you need server-side rendering, creative automation, or want the same editing engine across web, mobile, and backend, IMG.LY provides broader platform coverage and a dual-purpose architecture. Banuba is optimized for client-side social video creation; IMG.LY handles both interactive editing and programmatic content generation at scale.

5. FFmpeg (via FFmpegKit)

FFmpeg is the industry-standard open-source tool for video processing. It’s not a video SDK in the traditional sense — it’s a command-line tool and set of libraries that handle encoding, decoding, transcoding, filtering, and nearly every video operation imaginable.

FFmpegKit is a wrapper that makes FFmpeg accessible on mobile platforms (Android, iOS, React Native, Flutter) through platform-specific APIs. It’s the primary way developers integrate FFmpeg into mobile apps.

Core Capabilities

FFmpeg handles the entire video processing pipeline:

Video Operations:

Encoding and decoding (every codec imaginable)
Format conversion (MP4, MOV, AVI, MKV, WebM, etc.)
Trimming, cutting, merging, splitting
Filtering and effects
Subtitle burning
Video stabilization
Audio extraction and mixing

Technical Features:

Command-line interface (via wrapper APIs)
Support for hardware acceleration
Concurrent command execution
Extensive codec library
Professional-grade output quality

Platform Support

Native: Android (Java API), iOS (Objective-C API), Linux (C++ API), macOS, tvOS
Cross-Platform: Flutter (Dart API), React Native (JavaScript API with TypeScript definitions)
Eight prebuilt packages: Distributed via Maven Central, CocoaPods, pub, npm

Ideal Use Cases

Backend video processing and transcoding
Format conversion at scale
Apps that need specific codec support
Video compression and optimization
Building custom video processing pipelines
Server-side automation

Limitations

No UI whatsoever. FFmpeg is a processing engine. If you want users to interact with video — timelines, filters, previews — you’ll need to build the entire interface yourself from scratch.

Steep learning curve. FFmpeg’s command-line syntax is powerful but complex. Even simple tasks require understanding flags, options, and codec parameters.

GPL licensing complexity. While FFmpegKit itself is LGPL v3.0, including GPL-licensed libraries makes the entire bundle GPL v3.0, which has implications for commercial apps.

FFmpegKit has been officially retired. As of June 2025, FFmpegKit is no longer maintained. Community-maintained forks exist, but official support is ending.

Pricing / Licensing

Free and open-source: LGPL v3.0 for FFmpegKit library
GPL v3.0 when GPL-licensed libraries are included
Licensing depends on which codecs and libraries you bundle

Who It’s For

Developers who need powerful backend video processing, format conversion, or transcoding — and are willing to build all user-facing features themselves. Not suitable for teams that need a ready-to-use editor.

How it compares to IMG.LY

FFmpeg is a processing engine, not an editing SDK. It handles transcoding, format conversion, and video manipulation via command-line operations — but provides no UI, no templates, and no interactive editing components. IMG.LY includes a production-ready editor, template system, and user-facing tools out of the box, while also supporting server-side automation through Node.js. If you only need backend processing and are building all UI yourself, FFmpeg (via community forks) can work. If you need both interactive editing and automation, IMG.LY eliminates months of development by providing both in one platform. IMG.LY also avoids GPL licensing complications and the uncertainty of using a retired library with community forks.

6. GStreamer (with GStreamer Editing Services)

GStreamer is a mature open-source multimedia framework used across Linux, Android, iOS, Windows, and macOS. It’s designed for building media applications — streaming, playback, recording, and non-linear editing — with a plugin-based architecture that makes it extremely flexible.

GStreamer Editing Services (GES) is a higher-level library built on top of GStreamer to simplify video editing application development. It was originally funded by Nokia for mobile video editing (“video editing in your pocket”).

Core Capabilities

GStreamer provides the foundation for building multimedia applications:

Core Features:

Audio and video playback, recording, streaming
Non-linear editing capabilities via GES
Extensive plugin library (encoders, decoders, filters)
Hardware acceleration support
Low-latency streaming (RTSP, WebRTC)
Support for diverse codecs and formats

GStreamer Editing Services:

High-level API for creating editing applications
Timeline-based editing
Transition effects
Audio mixing
Asset management

Performance Optimizations:

Offloading work to specialized hardware (DSPs, GPUs)
Low power consumption for embedded processors
Support for ARM, MIPS, SPARC architectures

Platform Support

Cross-Platform: Linux, Android, iOS, Windows, macOS
Language Bindings: C++ (primary), Python, Java, JavaScript
Mobile: Official SDK binaries for Android and iOS

Ideal Use Cases

Custom video editing apps requiring deep control
Streaming applications (RTSP, WebRTC)
Media players and recording apps
Research and academic projects
Embedded systems and IoT devices
Apps requiring specialized codec support

Limitations

Steep learning curve. GStreamer’s plugin-based architecture is powerful but complex. Understanding pipelines, bins, and element linking takes time even for experienced developers.

No pre-built UI. GES provides editing APIs, but you’ll need to build the entire interface yourself. This means designing timelines, playback controls, effect panels, export dialogs — everything.

Limited mobile-specific examples. While GStreamer officially supports iOS and Android, production-ready mobile editing examples are scarce. You’ll be pioneering integration patterns yourself.

Integration complexity. Getting GStreamer running on mobile requires compiling binaries, managing dependencies, and debugging platform-specific issues. This isn’t a “drop in and go” integration.

Pricing / Licensing

Free and open-source: LGPL license
GStreamer Editing Services included in main distribution
No commercial support by default, but third-party companies (like Fluendo) offer commercial support and custom development

Who It’s For

Teams with strong multimedia engineering expertise who need deep control over video processing and are willing to build everything from the ground up. Not suitable for teams that need fast time-to-market or lack video processing experience.

How it compares to IMG.LY

GStreamer provides powerful low-level control over multimedia processing through its plugin-based architecture, making it ideal for specialized use cases like streaming, embedded systems, or custom pipelines. IMG.LY provides a higher-level, production-ready solution with UI components, templates, and automation built in. GStreamer requires significant expertise and months of development to build user-facing features; IMG.LY offers a working editor in hours with customization options that don’t require multimedia engineering expertise. If you need deep control over codecs, streaming protocols, or embedded deployment, GStreamer’s flexibility is unmatched. If you need to ship a production-ready video editor quickly with cross-platform support and automation capabilities, IMG.LY eliminates the complexity and provides enterprise support.

Comparison Table: Video SDKs for Mobile Applications

Feature / SDK	Banuba	Meishe	BytePlus	FFmpeg	GStreamer	IMG.LY SDK
Platform Support	iOS 15+, Android 6+, React Native, Flutter, NativeScript	iOS, Android, Flutter	iOS, Android, React Native, Flutter	Android, iOS, React Native, Flutter, Linux, macOS	Linux, Android, iOS, Windows, macOS	Web, iOS, Android, React Native, Flutter, Desktop, Node.js
UI Included	✅ Pre-built editor	✅ Pre-built editor	✅ Pre-built editor	❌ Processing only	❌ GES provides APIs only	✅ Production-ready editor + Headless API
Timeline Editing	✅ Yes	✅ Yes	✅ Multi-track	❌ Command-line only	✅ Via GES	✅ Advanced multi-track
AR / Beauty Filters	✅ Strong focus	✅ Real-time beauty	✅ 80,000+ effects	❌ None	❌ None	✅ Filters + extensible AI plugins
Templates	✅ Customizable	⚠️ Limited info	✅ Magic Templates	❌ None	❌ None	✅ Advanced template system with variables
Server-Side Automation	❌ No	❌ No	❌ No	✅ CLI-based	✅ Possible but complex	✅ Native support (same engine)
AI Features	✅ AI clipping, captions	⚠️ Limited info	✅ ML-powered effects	❌ None	❌ None	✅ Native AI + model-agnostic plugins
4K Support	✅ Yes	✅ Up to 4K input	✅ 4K recording	✅ Yes	✅ Yes	✅ Yes
Customization Level	⚠️ UI/UX + optional API	⚠️ Requires team engagement	⚠️ Theming primarily	✅ Complete control	✅ Complete control	✅ Headless API + theming + UI config
Integration Complexity	⚠️ Moderate (GitHub samples)	⚠️ Moderate	⚠️ Moderate (~2 weeks)	⚠️ Complex (retired library)	⚠️ Very complex	✅ Simple (hours to integrate)
Documentation	✅ English, developer portal	⚠️ Primarily Chinese	✅ English, comprehensive	✅ Extensive community docs	✅ Extensive but complex	✅ Comprehensive with samples
Licensing / Pricing	Custom (free 14-day trial)	Contact for quote	Annual subscription	Free, LGPL/GPL	Free, LGPL	Enterprise license
Enterprise Support	⚠️ Custom agreements	⚠️ Direct engagement	⚠️ ByteDance support	❌ Community only	⚠️ Third-party (Fluendo)	✅ Dedicated support + SLAs
Best For	Social media apps with AR focus	Professional apps in Asian markets	TikTok-like social video apps	Backend processing / transcoding	Custom multimedia apps	Cross-platform editing + automation at scale

Making Your Decision: Which Video SDK Is Right for You?

Here’s the honest breakdown based on your use case:

Choose Banuba if:

You’re building a social media app and AR effects are central to your product
You need beauty filters, face masks, and creative effects out of the box
Your primary audience expects TikTok-style creative tools
You’re comfortable with custom pricing and optional feature licensing

Choose Meishe if:

You’re targeting Asian markets where Meishe has strong adoption
You need professional-grade 4K and HDR video processing
Real-time preview and film-quality output are critical
You have access to Chinese documentation resources or engineering support

Choose BytePlus if:

You want to replicate TikTok/CapCut’s editing experience
You need access to 80,000+ effects and filters
Machine learning-powered visual enhancements are important
You’re comfortable with annual licensing and want ByteDance’s proven architecture

Choose FFmpeg if:

You need backend video processing, transcoding, or format conversion
You’re building automation pipelines, not user-facing editors
You have strong video engineering expertise
You’re okay with command-line complexity and building all UI yourself
Be aware: FFmpegKit is officially retired; plan for community forks

Choose GStreamer if:

You need deep control over multimedia processing
You’re building custom streaming, playback, or editing applications
You have strong multimedia engineering expertise
You’re willing to invest significant time in integration and UI development
You need specialized codec support or embedded system deployment

Choose IMG.LY CE.SDK if:

You need both interactive editing and server-side automation
Cross-platform consistency is critical (Web, iOS, Android, React Native, Flutter)
You want a production-ready editor that integrates in hours, not months
Template-based workflows and creative automation are important
You need enterprise support, SLAs, and ongoing updates
Your team wants to focus on product features, not rebuilding video editing infrastructure

Build vs Buy: What’s the Real Cost?

Let’s be honest about the engineering investment required:

Building on FFmpeg or GStreamer:

Months to build a basic timeline editor with preview
Ongoing maintenance for device compatibility, codec updates, performance optimization
No UI components — you’re building everything from scratch
Scaling challenges when you need templates, automation, or new features

Commercial SDKs (Banuba, Meishe, BytePlus):

Days to weeks for basic integration
Pre-built UI and effects libraries
Dedicated support for troubleshooting
Licensing costs vary; evaluate based on your revenue model

IMG.LY SDK:

Hours to integrate a working editor
Production-ready UI with full customization
Dual-purpose: client-side editing + server-side automation
Template system and AI features included
Enterprise support and regular updates

Ask yourself:

What’s your timeline? If you need to ship in weeks, open-source frameworks won’t get you there.
What’s your team’s expertise? Video processing is complex; building from scratch requires specialized knowledge.
What happens when you scale? Adding templates, automation, or AI features to a custom-built solution takes months of additional work.

Commercial SDKs cost money upfront but save significant engineering time. Open-source tools are “free” but expensive in development hours and opportunity cost.

Conclusion: The Right SDK Depends on Your Goals

There’s no one-size-fits-all answer, but here’s the summary:

FFmpeg and GStreamer are powerful processing engines for developers who need backend automation or custom pipelines. They give you complete control but require significant expertise and offer no user-facing components. Great for transcoding, format conversion, and specialized workflows — not for building interactive editors.

Banuba, Meishe, and BytePlus are excellent for social media apps that need AR effects, beauty filters, and TikTok-style editing. They provide pre-built editors with extensive effects libraries, but customization beyond theming can be limited, and they’re focused primarily on client-side editing (no server automation).

IMG.LY CE.SDK is the only solution that combines production-ready interactive editing with server-side creative automation. We provide cross-platform consistency, a complete template system, AI features, and enterprise support — all in one platform. Where other SDKs require you to choose between editing and automation, we give you both.

If you’re building an app where video editing is a core feature (not a side project), and you need to ship fast without compromising on quality or scalability, our SDK eliminates months of development work and ongoing maintenance headaches.

The real question isn’t “which SDK is cheapest?” It’s “how much engineering time will we spend building, maintaining, and scaling a custom solution — and what could we build instead if we had that time back?”

Ready to see what IMG.LY SDK can do? Explore our demos or get in touch to discuss your project.

Best Open Source Video Editor SDKs: 2026 Roundup

Vatsala — Mon, 10 Nov 2025 11:13:59 GMT

If you’ve ever tried building a video editing feature from scratch, you know how quickly things can get complicated. Codecs, pipelines, formats, integrations, and performance tuning all come into play.

That’s why developers often turn to open-source SDKs that make video processing more accessible and flexible.

In this guide, we’ll break down some of the most widely used open-source video SDKs, focusing on how easy these tools are to build with, their use cases, and who they’re best for. We’ll also look at where open-source flexibility meets its limits, and how commercial SDKs like IMG.LY can save you time and complexity when building production-ready video products.

1. FFmpeg

Let’s start the comparison with one of the most popular open source video editor SDKs. FFmpeg is a command-line multimedia framework that powers much of the modern video ecosystem. It supports everything from transcoding to advanced automation, making it one of the most widely adopted open-source solutions for video processing.

Features & capabilities: FFmpeg includes transcoding, filtering, cropping, resizing, overlaying, color grading, audio processing, and format conversion. Its flexibility comes from its powerful command-line interface, allowing developers to script nearly any video transformation task.
Platforms: The tool offers broad cross-platform compatibility, running natively on Windows, macOS, and Linux. Its portability allows it to integrate into a wide range of development environments.
Building difficulty & potential roadblocks: FFmpeg is quite difficult to learn and implement for beginners. It requires strong knowledge of scripting, codecs, and CLI-based workflows. Due to its steep learning curve, debugging complex filter chains can be time-consuming, and integrating it into GUI-based environments is also challenging. Developers must also navigate potential H.264 commercial licensing restrictions while using this tool.
Use Cases: FFmpeg is best suited for server-side batch processing, video pipelines, and automated transcoding. While it excels in backend automation, it lacks an interactive editor UI or cross-platform embedding.
Future-proofing, support & pricing: FFmpeg is a mature and stable project used across many industries for years, although its innovation is slow. Most developers using the tool rely on community forums and documentation for troubleshooting and setup help. It’s completely free and open-source, but encoding with certain codecs like H.264 may still require a separate commercial license.
Who it’s for: This video editor SDK is ideal for developers handling large-scale backend video processing or transcoding tasks. It’s powerful and reliable, but not beginner-friendly or suited for products needing a visual editing interface.

Comparison to IMG.LY

FFmpeg is purely backend and lacks an interactive editor or cross-platform embedding capabilities. However, it performs exceptionally well in large-scale automation pipelines, where speed, reliability, and format support are critical. IMG.LY CE.SDK, by contrast, gives you a fully embeddable video editor, UI components, and automation workflows in a unified SDK. All without the complexity of manual scripting.

Check out why IMG.LY is a great alternative to FFmpeg here.

2. MoviePy

The next open source video editor on the list is MoviePy. It’s a Python library for programmatic video editing. It allows developers to edit video through code, making it particularly useful for automated workflows or content prototyping.

Features & capabilities: It supports cutting, compositing, adding text overlays, transitions, and visual effects. Developers can use Python scripts to build video sequences and automate rendering.
Platforms: MoviePy works across all major platforms that support Python. It runs in standard Python environments without requiring extra setup, which makes it accessible for most developers.
Building difficulty & potential roadblocks: MoviePy is easier to use than FFmpeg, but still requires scripting. It’s suitable for Python developers for prototyping, but it can struggle with performance when handling large video files. Developers often face challenges with dependency management and the absence of a real-time UI.
Use cases: This tool is best for automated content generation, research, and rapid prototyping of video workflows. It’s ideal for proof-of-concept projects where scripting flexibility matters more than performance.
Future-proofing, support & pricing: MoviePy is actively maintained by its niche community of developers. While it serves a smaller user base compared to larger frameworks, its reliability and accessibility make it a consistent choice for Python-based video projects. You can find support through community documentation that explains most functions clearly. It’s free and open-source, which makes it especially appealing for experimentation, research, and smaller-scale automation setups.
Who its for: MoviePy is a great choice if you’re a Python developer wanting automation or experimental workflows. However, it’s not ideal for production-scale or interactive use cases due to performance limits and the absence of a UI.

Comparison to IMG.LY

MoviePy is designed for scripting and backend automation. It works best for creating short automated clips or experimental workflows where developers want full control through Python code.

IMG.LY CE.SDK goes beyond backend scripting by offering ready-to-embed editors, automation APIs, and full multi-platform support for web and mobile. This makes it a more complete choice if your team needs both automation and interactive editing within products.

3. OpenShot Library / MLT Framework

The OpenShot Library, built on the MLT Framework, is a C++/Python library for video compositing and timeline editing. It powers the OpenShot video editor and can be integrated into custom desktop applications.

Features & capabilities: It provides timeline editing, transitions, effects, and audio mixing. Developers can implement advanced video composition features similar to traditional desktop editors.
Platforms: The library is cross-platform, working reliably across major desktop operating systems, including Windows, macOS, and Linux. It can be integrated into various environments, which makes it useful if you’re building desktop editors or applications that require timeline-based video editing.
Building difficulty & potential roadblocks: The integration complexity is medium-high, as the API can be unstable, and managing dependencies can be difficult. Developers may also encounter documentation gaps, making it challenging to set up and maintain. Integrating the library into a GUI is not straightforward, and limited server-side automation means it is less suited for scalable or cloud-based workflows.
Use cases: OpenShot Library is suitable for you if you’re looking to build desktop-based editors, experimental timeline tools, or custom video composition applications.
Future-proofing, support & pricing: The framework is actively maintained and works well for desktop video editing applications. However, it is not designed for server-side automation or large-scale deployment. The support is community-driven, so the updates and fixes depend on volunteer contributions, which can affect long-term reliability for enterprise use. The framework is free and open-source, making it accessible to anyone looking to experiment or build lightweight video editing tools.
Who its for: OpenShot/MLT fits developers building desktop-focused editors who need timeline control but can manage API and dependency challenges. It’s less practical for cloud or mobile workflows.

Comparison to IMG.LY

While OpenShot/MLT excels in desktop-based timeline editing, it is better suited for applications that prioritize local processing and desktop workflows.

IMG.LY CE.SDK, on the other hand, offers embedded, cross-platform editors with built-in automation, making it a more versatile choice for SaaS and enterprise environments that need scalability, faster integration, and an intuitive editing experience for end users.

4. GStreamer

GStreamer is a multimedia framework for building video and audio pipelines. It’s a foundational tool in many streaming and broadcast systems and allows developers to create complex pipelines for capturing, processing, and outputting media in real time.

Features & capabilities: This open source video editor supports real-time processing, filters, and complex pipelines for media processing and streaming. Developers can construct customized processing chains for advanced workflows.
Platforms: GStreamer is cross-platform, supporting multiple programming languages with bindings for C, Python, Java, and Rust. You can run it on Windows, macOS, and Linux, and integrate it into both desktop and server environments. This makes it flexible for building diverse media workflows.
Building difficulty & potential roadblocks: Building with GStreamer is complex. It requires deep knowledge of pipelines and plugins, and debugging can be time-intensive. UI integration adds another layer of difficulty.
Use cases: Despite its building difficulty, developers use GStreamer for real-time video streaming, server-side processing, and for broadcast applications requiring precise control over data flow.
Future-proofing, support & pricing: GStreamer is mature and widely used in the media industry. It continues to be a reliable choice for building streaming and broadcast systems, but it requires significant development expertise to configure and maintain. Developers often rely on community resources for support, though some commercial assistance is available. It’s free and open-source, which makes it accessible for experimentation and custom media workflows.
Who it’s for: The tool is ideal for developers who need real-time video pipelines or streaming capabilities. But it may not be a fit for applications requiring easy embedding or interactive UIs.

Comparison to IMG.LY

GStreamer operates at the infrastructure level, ideal for backend media processing where you need precise control over data flow and performance. It gives you the flexibility to build custom video pipelines, but doing so requires significant technical effort and time.

IMG.LY provides a ready-to-embed, interactive editor with automation and multi-platform support, so you can focus on building user experiences rather than managing low-level media infrastructure.

5. Remotion

Remotion enables developers to create videos programmatically using React components. Developers can define video scenes, transitions, and animations directly in React. While it’s a flexible approach, building long or high-resolution videos can demand careful optimization to ensure smooth performance.

Features & capabilities: It supports timeline-based video composition, text overlays, animations, audio integration, and programmatic transitions, all rendered through React. Developers can create videos entirely with code, defining scenes and effects inside React components.
Platforms: Remotion is built for Node.js and browser-based environments via headless rendering. You can render videos directly in the browser or on a Node.js server, which gives developers flexibility in how they deploy and automate video creation.
Building difficulty & potential roadblocks: Building difficulty using Remotion is at a medium level because it requires React and JavaScript proficiency. The potential issues you might face while using this include debugging challenges with high-resolution or long-duration renders, along with limited server-side optimization that can affect scalability and performance.
Use cases: Remotion is well-suited for automated video generation, marketing content, and dynamic SaaS video templates. You can use it to create personalized videos or promotional content at scale, using data or user inputs to generate customized output.
Future-proofing, support & pricing: The tool is actively maintained and is built with a modern web stack using React and TypeScript, which ensures long-term stability and adaptability. You can find help through detailed documentation, GitHub issues, and an engaged developer community. While it doesn’t offer formal support, its open-source nature encourages collaboration and contributions that keep the framework improving. Like other tools we’ve discussed, this is also free and open-source, making it an accessible choice for developers exploring programmatic video creation.
Who it’s for: Based on its features and capabilities, it’s best for React developers who want to generate videos programmatically. However, it lacks an interactive editor and may not scale easily for enterprise automation.

Comparison to IMG.LY

Remotion excels in programmatic video creation, allowing you to build videos entirely through code with precision and flexibility. However, it lacks interactive editing tools or native SDKs that can be directly embedded into products.

IMG.LY CE.SDK, by comparison, gives you both automation capabilities and user-facing editors across platforms, helping teams build complete video experiences without maintaining separate systems. You can find more information on how IMG.LY compares to Remotion here.

6. IMG.LY CE.SDK

A commercial solution that offers enterprise-grade functionality and developer-friendly implementation.

IMG.LY CreativeEditor SDK is built for interactive video editing and automation. It gives developers the tools to build powerful, embeddable video editors without the complexity of starting from scratch. It balances the flexibility developers expect from open-source frameworks with the stability and support of a commercial-grade platform.

Features & capabilities: It includes timeline editing, multi-layer video composition, templates, AI-assisted editing, transitions, video export, and server-side automation. The SDK simplifies complex workflows by offering prebuilt editors and APIs for integration.
Platforms: Available on Web, iOS, Android, React Native, Flutter, Node.js, and Electron. This broad platform support allows developers to build consistent video editing experiences across desktop, mobile, and web environments. Whether you’re integrating into an existing app or launching a new product, the IMG.LY CE SDK ensures a unified editing interface and workflow across all platforms.
Building difficulty & potential roadblocks: Integration is straightforward, with minimal setup required, making it the easiest SDK to build with among all the tools we compared in this list. Most implementation effort lies in customizing workflows rather than solving technical barriers. This simplicity comes from well-documented APIs, prebuilt UI components, and consistent cross-platform behavior, which together reduce the development time. Potential roadblocks are minimal, allowing you to focus on building product features instead of managing infrastructure or compatibility issues.
Use cases: IMG.LY is best suited for SaaS apps, marketing automation, social content tools, and video personalization platforms that need seamless interactive editing.
Future-proofing, support & pricing: Frequent releases, an expanding AI roadmap, and a scalable engine ensure long-term reliability for developers and enterprises. You get access to dedicated onboarding engineers, solution architects, and enterprise SLAs that make implementation and scaling easier. Pricing follows a custom enterprise licensing model, offering flexibility for different business needs. But you can take a free trial to get started.
Who it’s for: IMG.LY is designed for companies that need scalable, interactive video editing and automation in one package. Its ideal for teams seeking low development overhead and enterprise-grade reliability.

Why IMG.LY stands out as the best open source video editor SDK

IMG.LY combines interactive editing, server-side automation, and multi-platform SDKs in one stack, giving you everything needed to build scalable, modern video products. You can create, edit, and automate workflows within the same ecosystem without relying on separate tools. None of the open-source options on this list deliver this level of integration and consistency across web, mobile, and desktop environments.

Check out how IMG.LY has helped over 600 innovative startups, government entities, and Fortune 500 companies to streamline their design, video, and photo editing workflows. Read our case studies here.

Overview table

Here’s a brief overview of all the video editor SDKs we’ve discussed to help you choose the right one.

Feature / Use Case	FFmpeg	MoviePy	OpenShot / MLT	GStreamer	Remotion	IMG.LY CE.SDK
Timeline editing	❌ No GUI timeline; timeline-like operations only possible via scripting in CLI.	⚠️ Timeline functionality simulated through Python scripts; suitable for small-scale projects.	✅ Native timeline-based video editing with GUI; library supports composition though GUI integration can be limited.	⚠️ Pipeline-centric; timeline must be assembled programmatically, no native GUI timeline.	✅ Timeline created programmatically using React components; no interactive GUI timeline.	✅ Full-featured interactive timeline, multi-layer support, drag-and-drop UI
Filters & Effects	✅ Supports CLI-based filters, overlays, color correction; requires manual configuration	✅ Python effects library; scripting needed to combine filters	✅ Built-in video effects and transitions; limited prebuilt UI	✅ Plugin-based filters; flexible but requires pipeline setup	✅ Animations, text overlays, audio effects via scripting; programmatic transitions	✅ AI-enhanced effects, transitions, multi-layer composition, background removal
Server-side automation	✅ Excellent for backend batch processing and transcoding; CLI automation is robust	✅ Python scripting enables automated content generation	⚠️ Limited server-side automation; mainly library-level	✅ Suitable for large-scale pipelines and streaming	✅ Automated video rendering via Node.js; works with server-side scripts	✅ Full automation APIs; combines server-side rendering + interactive editing in one SDK
Ease of embedding	❌ CLI only; difficult to embed in apps	⚠️ Python scripts can be integrated, but no GUI	⚠️ Library-only; integration requires custom UI	⚠️ Complex pipelines; requires deep development knowledge	⚠️ Node.js / headless browser integration possible; UI must be custom-built	✅ Ready-to-embed SDKs for Web, iOS, Android, React Native, Flutter; includes prebuilt editors
Difficulty building / integration	High — complex CLI usage, codec handling, and scripting required	Medium — Python knowledge required, scripting-intensive	Medium-High — API can be unstable, dependencies must be managed	High — pipeline setup and plugin management are challenging	Medium — React knowledge needed; performance optimization may be required	Low — SDK provides prebuilt editor components and APIs for easy integration
Potential roadblocks	CLI complexity, codec licensing (H.264), debugging pipelines, no GUI	Large videos may be slow, performance issues, dependency management	API instability, documentation gaps, integration with UI requires effort	Steep learning curve, pipeline debugging, plugin version conflicts	Rendering performance for long/high-resolution videos, debugging programmatic scripts	Minimal; most challenges relate to workflow decisions during integration
Cross-platform support	✅ Desktop/server; Windows, macOS, Linux	✅ Desktop/server; cross-platform Python	✅ Desktop/server; cross-platform	✅ Desktop/server; cross-platform	✅ Node.js + headless browser; works across server environments	✅ Web + mobile + desktop; consistent UI across platforms
AI / Automation	❌ None	❌ None	❌ None	❌ None	⚠️ Programmatic automation via scripting	✅ AI-assisted editing, automation workflows, plugin ecosystem
Scalability	✅ Excellent for batch and server pipelines	⚠️ Limited; performance depends on scripting and hardware	⚠️ Medium; suitable for desktop-scale apps	✅ Large-scale pipelines, real-time streaming	✅ Programmatic generation can scale, but may need server resources	✅ Enterprise-grade; cloud-ready, multi-platform, high-volume video workflows
Pricing	Free, OSS; H.264 encoding may require commercial license	Free, OSS	Free, OSS	Free, OSS	Free, OSS	Custom enterprise licensing
Best For	Developers building automation pipelines, server-side video processing, or streaming workflows	Python developers building scripted video content and automation	Developers building desktop-focused video apps with timeline editing	Developers needing real-time pipelines or advanced streaming	Developers using React for programmatic video generation and templating	Companies needing interactive, embedded video editing + AI automation + multi-platform SDK

Choosing the right video SDK: How to make the right choice

When choosing the right video SDK, the best option depends on what you’re building and who it’s for.

Choose open-source SDKs like FFmpeg, MoviePy, OpenShot/MLT, GStreamer, and Remotion if you prefer flexibility and complete control. These tools are free, customizable, and well-suited for automation, research, or proof-of-concept projects. However, they often require significant development time, scripting knowledge, and ongoing maintenance, which can slow down production or scaling.

For teams building commercial or enterprise-ready video products, commercial SDKs offer a more practical route. They save you time on integration, provide dedicated support, and come with consistent updates to ensure reliability across platforms.

That’s why developers choose IMG.LY SDK.

It combines interactive editing, automation, and cross-platform SDKs in a single stack, something open-source solutions can’t fully replicate. It’s designed for SaaS, social, and enterprise use cases where scalability, ease of use, and performance matter most. You can embed editors, automate workflows, and scale confidently without managing multiple systems.

So if you want a complete, production-ready platform with AI features, automation, and an intuitive editing experience, IMG.LY is the right choice.

Get in touch with our team to see how it’s deployed in over 500 applications and used by millions of users across 29 countries.

Start a free trial or book your call today!

The Top 7 Video Editing SDKs in 2026

Jan — Tue, 02 Sep 2025 11:19:08 GMT

With dozens of video editing SDKs on the market, choosing the right one can feel like a daunting task.

To help you cut through the noise, we’ve put together a breakdown of the 7 best video editing SDKs in 2026: IMG.LY, Meishe SDK, Banuba, Shotstack, BytePlus Effects, Rendley, and Picsart. We’ll cover:

Key features and capabilities
Supported platforms and customization options
Ideal use cases and trade-offs

This guide is unbiased, but we’ll also highlight how IMG.LY compares and where it stands out as the only solution that combines a polished editor with scalable automation in a single package.

1. IMG.LY CreativeEditor SDK (CE.SDK)

Choosing IMG.LY means selecting a platform that offers both: a Canva-grade editor for your users and a powerful Engine API for automation. That dual focus is what sets CE.SDK apart.

Features & capabilities: CE.SDK works best when you see it as a bridge between what end users expect and what your product team needs behind the scenes. On the surface, users get familiar tools including multi‑track editing, ready‑made templates, and a growing set of AI features like text‑to‑image, text‑to‑video, and AI voiceovers. Behind the scenes, developers can extend and customise with a plugin system so the editor adapts as your product evolves.
Platforms & customization: This flexibility carries over to platforms. CE.SDK works across Web, iOS, Android, React Native, Flutter, Electron, and Node.js. It’s also fully white‑label, which means your customers see a seamless extension of your brand, not a third‑party tool.
Implementation & use cases: Getting started with our tool doesn’t require a huge lift. Teams can spin up a proof of concept quickly, then scale into enterprise deployment when ready. That’s why you’ll see CE.SDK inside SaaS platforms, e‑commerce personalization tools, DAM systems, and even social networks.
Future‑proofing, support & pricing: What reassures teams is the long‑term roadmap: regular feature releases, AI integrations, and direct support from solution engineers. Enterprise SLAs and SSO come standard. Pricing depends on the usage, which makes it easier to scale without committing to rigid licensing.
Who it’s for: CE.SDK is valuable for SaaS, MarTech, e-commerce, and DAM platforms. These teams need to give users a simple, branded editing experience while also managing complex automation in the background. Instead of stitching together multiple tools or sacrificing one capability for another, CE.SDK provides an all-in-one foundation: polished editing, scalable automation, enterprise-grade support, and ongoing AI-driven innovation.

Key differentiator

CE.SDK doesn’t force you to choose between usability and power. On one side, it delivers a polished, user-facing editor that feels familiar to end users. On the other hand, it provides a powerful automation engine that scales with your product. Most SDKs lean heavily in one direction. They either focus on end-user editing or specialize in backend automation. CE.SDK is different because it combines both in a single platform.

2. Meishe SDK (Meicam)

Meishe SDK, also known as Meicam, is a mature Chinese SDK that has carved out a space in many professional apps across Asia. Think of it as a toolkit built for industries that need stability and advanced editing power, though it comes with a few trade‑offs that teams should weigh carefully.

Features & capabilities: Meishe offers multi‑track timelines, real‑time effects, and plugin support across mobile, web, and PC. Industries like automotive, broadcasting, and education have already used Meishe successfully, showing how it handles complex and demanding video workflows.
Platforms & customization: It supports full UI customization, white‑labeling, and plugins. And while customization depth is solid, integration tends to be heavier compared to other tools. Documentation can feel dense, which sometimes slows teams down as they work toward launch.
Implementation & use cases: Meishe SDK is beginning to layer in AI integrations like intelligent editing and motion tracking. For large organizations in Asia with strong internal dev resources, these capabilities can be appealing.
Future‑proofing, support & pricing: Meishe continues to expand with new AI features like facial recognition and virtual anchors. It also offers custom enterprise support agreements. However, teams often struggle with the integration process, and the developer experience feels less polished. Setting up complex projects can take longer, and the documentation isn’t as approachable, which leaves some developers hesitant to adopt it widely. Pricing typically follows an enterprise licensing model, which can be less flexible for fast‑scaling SaaS companies.
Who it’s for: Meishe SDK is best suited for large-scale apps in Asia and companies with internal dev resources.

How it compares to IMG.LY

Meishe delivers solid editing capabilities and is a proven choice in professional and regional contexts. But the trade‑offs become clear when you look at integration and support. It can feel heavy to implement, and documentation isn’t as approachable.

IMG.LY pulls ahead here with stronger web support, compatibility with creative file types like PSD, AI, and INDD, and a faster onboarding process that makes it easier for teams to move from idea to production.

Learn more about how IMG.LY compares to Meishe SDK here.

3. Banuba

Banuba is a mobile‑first SDK with a strong focus on augmented reality (AR). It has built its reputation on powering social and UGC apps with effects that mimic the TikTok experience. If your product relies on immersive filters, beauty effects, or virtual try‑on, Banuba often appears at the top of the evaluation list.

Features & capabilities: The SDK provides a TikTok‑like editor with AR masks, beauty filters, face tracking, background removal, and even virtual try‑on features. These tools are designed to keep users engaged with interactive and shareable content.
Platforms & customization: Banuba supports iOS, Android, Flutter, and React Native. It offers modular components with a preset UI, which makes implementation faster for mobile. That said, customization options are limited when compared to solutions designed for enterprise-level flexibility.
Implementation & use cases: Integration is relatively quick for mobile teams, and the SDK has proven popular among social media platforms, beauty apps, and e‑commerce companies offering AR try‑on. However, support for web or large‑scale enterprise environments is limited, which narrows its scope.
Future‑proofing, support & pricing: The company continues to expand its AR and AI features, focusing on personalization and beauty‑driven effects. Banuba operates with a smaller team of about 70 employees, which can affect the pace of enterprise‑grade support. Licensing costs are typically high and not publicly disclosed, which may be a barrier for smaller companies.
Who it’s for: Banuba is best suited for mobile apps that need advanced AR features like beauty filters, face tracking, or virtual try‑on to keep users engaged.

How it compares to IMG.LY

Banuba leads when it comes to AR‑driven capabilities, making it a natural fit for beauty and social platforms. But when teams look beyond filters to enterprise readiness, automation, and cross‑platform support, other options such as IMG.LY offer broader possibilities.

Learn more about how IMG.LY compares to Banuba here.

4. Shotstack

Shotstack focuses squarely on automation. It’s a cloud‑based video editing API designed for bulk rendering rather than end‑user editing. Teams often evaluate it when they need to generate thousands of videos quickly and at scale.

Features & capabilities: Shotstack runs on a JSON‑driven API that lets developers programmatically create and assemble video content. With this approach, teams can handle automated ad generation, personalization, or large‑scale marketing campaigns. While powerful for automation, it doesn’t include a native editor, which means you must build a custom UI if you want end‑user editing.
Platforms & customization: Shotstack is built as a REST API in the cloud, so it fits naturally into modern development stacks. It allows teams to design workflows programmatically, though the absence of prebuilt UI components makes it harder to use the tool right away as compared to other SDKs.
Implementation & use cases: Developers appreciate the smooth onboarding experience and clear API structure. Typical use cases include bulk rendering of ads, dynamic personalization for campaigns, and other scenarios where scaling output matters more than in‑app editing.
Future‑proofing, support & pricing: Shotstack continues to invest in automation and AI‑powered generation, offering tools that personalize video creation at scale. The vendor provides commercial SLAs, but support resources remain limited given the team size. Pricing follows a pay‑as‑you‑go model ($0.30 per minute) or subscription plans, which can work well for predictable, high‑volume usage.
Who it’s for: Shotstack is best suited for teams that need scalable rendering pipelines and automation rather than in‑app editing features.

How it compares to IMG.LY

Shotstack gives you powerful rendering automation and programmatic workflows. IMG.LY takes it further by combining those automation strengths with a complete, user‑facing editor, so you can address both your development needs and your end‑users’ experiences in one solution.

Get a detailed comparison of IMG.LY CreativeEditor SDK and Shotstack here.

5. BytePlus Effects

BytePlus Effects is modelled after TikTok and CapCut. It’s designed to give app developers the same kind of short‑form, social‑first experience that has made those platforms successful. As a result, it appeals to teams that want to replicate TikTok‑like engagement inside their own apps.

Features & capabilities: The SDK offers more than 80,000 effects and filters, including AR stickers and beautification tools. These features aim to keep users engaged by giving them endless ways to personalize and enhance their content.
Platforms & customization: BytePlus integrates with iOS, Android, React Native, and Flutter, making it a strong option for mobile‑first development. You can customise the UI to match your brand, but customization beyond theming is limited, which can be a constraint if you need deeper control.
Implementation & use cases: Since it’s optimized for mobile integration, you can embed it relatively quickly into short‑form consumer video apps. Common use cases include social platforms, beauty apps, and any consumer‑facing product that thrives on AR‑enhanced video.
Future‑proofing, support & pricing: With the backing of TikTok’s ecosystem, BytePlus is evolving rapidly, adding new AI‑driven AR and beauty effects frequently. However, commercial support feels less transparent, and licensing comes through enterprise negotiations with annual fees. This structure can work for large consumer platforms, but may be harder for smaller teams.
Who it’s for: BytePlus is best suited for apps that want to recreate TikTok‑style user experiences and rely heavily on prebuilt AR effects to keep users engaged.

How it compares to IMG.LY

BytePlus takes a step ahead when it comes to prebuilt effects and AR‑driven experiences. But if you need more flexibility in customization, automation capabilities, or enterprise‑grade workflows, IMG.LY offers a broader solution.

For a detailed comparison, take a look at our guide on IMG.LY vs BytePlus Video Editor.

6. Rendley

Rendley is a newer player in the SDK space and has gained attention because of its browser‑only approach. It’s JavaScript‑based and runs entirely in the browser, which means you don’t need a server to get started. This makes it attractive for teams that want a lightweight, client‑only setup without managing infrastructure.

Features & capabilities: The SDK supports multi‑track editing, keyframes, and even integrates with After Effects (AE). These features give frontend developers enough flexibility to build interactive editing experiences directly in the browser.
Platforms & customization: Rendley runs entirely in the browser, which makes it a natural fit for lightweight web apps and UGC platforms. Developers get flexibility through an open, in‑browser approach. However, without enterprise‑level frameworks, scaling to larger organizations becomes more difficult.
Implementation & use cases: Setting up Rendley is straightforward for frontend teams, which makes it appealing for lightweight UGC applications or smaller web projects. That ease of entry, however, comes with limits: AI integrations aren’t a core focus, so its potential for more advanced future applications remains restricted.
Future‑proofing, support & pricing: Rendley is still early‑stage and hasn’t yet proven itself at enterprise scale. Support is provided by a small vendor team, which can make long‑term stability less certain. Pricing details are not publicly available, leaving prospective users to negotiate directly.
Who it’s for: Rendley fits developers who want a browser‑native, client‑only editing tool without the need for server infrastructure.

How it compares to IMG.LY

Rendley works well as a lightweight, browser‑native solution. But if you need enterprise‑grade robustness, automation, or dedicated support, IMG.LY offers more comprehensive coverage.

Learn more about how IMG.LY is a great alternative for Rendley.

7. Picsart Video SDK

Picsart Video SDK is an embeddable video editor SDK that brings Picsart’s creative editing tools into third-party apps or websites.

Features & capabilities: This SDK brings the company’s well‑known creative editing tools into third‑party products. Out of the box, you get features like trimming, multi‑scene editing, transitions, dynamic audio, subtitles, and text overlays, enough to cover the basics of video creation. AI‑driven tools extend these capabilities with smarter image and video editing options.
Platforms & customization: The SDK is React Native‑based but optimized for web embedding, making it appealing for web‑first platforms. You can configure the UI, apply theming, white‑label the experience, toggle features on or off, and integrate your own asset library so the editor matches your product’s design and workflow.
Implementation & use cases: One of Picsart’s strengths is ease of setup: installation is fast, with a React editor installation process that reduces complexity, documentation is detailed, and the editor is designed to embed with minimal lift. This makes it a good choice for advertising or marketing platforms, edu‑tech products, and media platforms that want to give users creative tools quickly.
Future‑proofing, support & pricing: The SDK is backed by Picsart’s large ecosystem and its AI research arm (PAIR), so teams can expect regular updates, new features, and scalable performance. Support comes through developer documentation, a support team, and enterprise collaboration options. Pricing isn’t public, but it’s likely offered as enterprise or usage‑based licensing.
Who it’s for: Picsart’s Video SDK is best for teams that need a web‑based video editor to power product features or educational video production without investing heavily in custom development.

How it compares to IMG.LY

Picsart offers a fast, embeddable editor with AI effects and a strong ecosystem. However, IMG.LY provides deeper customization, more automation capabilities, cross‑platform support, and enterprise‑grade integrations.

Overview Table (Use Cases vs. Solutions)

Conclusion

When you line these SDKs up side by side, it’s clear that each one has its own niche strengths and limitations. Here’s a quick overview:

Banuba / BytePlus: These are the strongest options for AR and social apps, with beauty filters, effects, and TikTok-like workflows.
Meishe: A professional, Asia-centric SDK with heavy native capabilities, but a steeper implementation curve.
Shotstack / Rendley: Both shine in automation pipelines or lightweight browser-based setups, but they don’t offer polished editor UIs.
Picsart: A strong web-first, prebuilt editor with AI effects that’s simple to embed, though limited in customization and automation.

Where does that leave you?

If you’re evaluating SDKs, you need to balance two priorities: delivering a great editor UX for your users and scaling automation behind the scenes. Only IMG.LY covers both ends: offering a polished, enterprise-ready editor and a scalable automation engine.

That makes it the go-to option for teams planning not only their current projects but also long-term growth. With IMG.LY, you can give users a polished editing experience today while building the automation backbone that will let your product scale tomorrow

If you’d like to see how IMG.LY can fit into your platform, get in touch with our experts today for a deeper look and tailored guidance.

A Modern JavaScript Video Editor: Integration Guide

Antonello — Thu, 16 Jan 2025 15:29:04 GMT

Discover how to integrate IMG.LY’s JavaScript video editor into your web application and unlock its full range of features.

Video content has always been a powerhouse for engagement, becoming even more impactful with the rise of short-form videos. Platforms like YouTube and TikTok have built their empires on video content, as that remains the preferred medium for both creating and consuming information.

Not only have those platforms changed how we consume information, but they have also transformed user behavior. We do not just want to watch videos—we want to create them, expecting the process to be both simple and professional.

Here is why embedding video creation and editing capabilities directly into your website, web or mobile application can significantly boost user engagement and satisfaction.

In this guide, you will learn how to integrate a JavaScript video editor using CreativeEditor SDK (CE.SDK). We will explore when it is most useful and what customizations it supports to suit your unique needs.

Want to jump into the code? For a quick start, visit our GitHub repository.

Let’s dive in!

Why Does Your JavaScript Web App Need a Video Editor?

The world of content is constantly evolving—from text to images, from static visuals to long-form videos, and now from long videos to bite-sized clips. What stays consistent is that video content resonates deeply with us as humans.

No wonder, TikTok tops global app download charts, while YouTube, Facebook, and Instagram rank among the most visited sites right after Google. These platforms have not just built their empires on video—they have revolutionized how we think about video production.

They set the gold standard by enabling anyone to create professional-looking videos with minimal effort, offering tools for adding filters, overlays, audio, and text in just a few clicks. This ease of use has made intuitive video editing a must-have for web applications featuring social media integration, marketing ambitions, or content management capabilities.

By embedding a user-friendly JavaScript video editor in your application, you can ride this trend, providing a feature billions of users are already familiar with. The payoff? Lower barriers to user-generated content, enhanced engagement, and wider content distribution.

CreativeEditor SDK from IMG.LY delivers a seamless, high-performance, and feature-rich JavaScript solution for in-browser design, video, and photo editing—ready to meet your users’ expectations.

Getting Started: Adding a Video Editor in JavaScript

Follow this step-by-step guide to learn how to integrate a JavaScript video editor into your site using CreativeEditor SDK.

Get started with integrating CE.SDK in a vanilla JavaScript application!

Requirements

CreativeEditor SDK runs directly in your browser’s JavaScript engine, so no specific prerequisites are needed.

If your web application relies on Node.js, ensure that you have the latest stable versions of Node.js and NPM installed.

Installation and Library Import

In a vanilla JavaScript application, create a JavaScript module file (e.g., video-editor.js) and import the CreativeEditorSDK library:

import CreativeEditorSDK from '<https://cdn.img.ly/packages/imgly/cesdk-js/1.42.0/index.js>';

Note: In this example, the SDK is served from our CDN for convenience. In a production environment, you should host assets on your own servers for improved control and performance.

Alternatively, if you are using a bundler like Webpack, Rollup, Parcel, or Vite, and you want to integrate the CreativeEditor module within your existing project, simply add the @cesdk/cesdk-js npm package as a dependency to your project:

npm install [@cesdk/cesdk-js](<https://www.npmjs.com/package/@cesdk/cesdk-js>)

You can then import it as below:

import CreativeEditorSDK from "@cesdk/cesdk-js";

Well done!

Initialize the Video Editor

In your JavaScript module, right below the library import, initialize CreativeEditor SDK with the following logic:

// src/video-editor.js

import CreativeEditorSDK from '<https://cdn.img.ly/packages/imgly/cesdk-js/1.42.0/index.js>';

// your CE.SDK license and user configs
const config = {
  license: '<YOUR_LICENSE>',
  userId: '<YOUR_USER_ID>',
};

CreativeEditorSDK.create('#cesdk_container', config).then(async (editor) => {
  // do something with your instance of CreativeEditor SDK...

  // when done, clean up and free up resources
  editor.dispose();
});

Replace <YOUR_LICENSE> with the license key you get from CreativeEditor SDK and <YOUR_USER_ID> with your user ID. The user ID is optional and helps track MAUs (Monthly Active Users) across different devices.

To integrate the video-editor.js file, import it into your HTML page like this:

<script type="module" src="video-editor.js"></script>

Note the type=“module” attribute. This tells the browser to treat the script as an ES6 module, so that you can use import and export statements within your JavaScript code.

Make sure the same HTML page includes the following div element where the video editor will be embedded:

<div id="cesdk_container" style="width: 100%; height: 100vh;"></div>

This will load the video editor with the default video preset, giving users the ability to trim, cut, apply filters, add text overlays, include music, and more to enhance their videos.

Congratulations, you have successfully integrated the video editor!

CreativeEditor SDK: JavaScript Video Editing API for Web, Desktop, and Mobile

You just saw how to integrate the CE.SDK into a browser application. Yet, do not forget that the SDK supports a wide variety of frameworks and libraries—including mobile and web applications.

Web Framework Support

CE.SDK is designed to work with several popular JavaScript frameworks and libraries. For more detailed integration instructions, take a look at the official page on the documentation for each framework:

Additionally, the SDK is available for headless mode and works well in a Node.js environment.

Cross-Platform Support

One of the standout features of CreativeEditor SDK is its cross-platform philosophy. This extends beyond JavaScript ecosystems for the web, and includes mobile (iOS and Android) and desktop, thanks to support for:

That is made possible through a powerful engine that powers your app via features like:

Unified API: The same underlying API is shared across web, desktop, iOS, and Android applications.
Cross-Platform Feature Parity: CE.SDK guarantees that features are available consistently across platforms. Since core functionality is implemented at the engine level, features you use on one platform will be available on others, with only slight differences in release timelines.
Interoperable Designs: Designs created in the editor component on one platform work on all platforms supported by CE.SDK. Whether a user is designing on iOS, Android, or the web, their design files can be imported seamlessly between platforms.

Native iOS and Android libraries, along with other frameworks, are also available. Learn more in our documentation!

JavaScript Video Editor Use Cases

It is time to explore some key use cases. Let’s see how the unique features of the CreativeEditor SDK can cover many scenarios!

CreativeEditor SDK features what users need to create engaging and easy-to-share videos optimized for popular social media platforms like Instagram, TikTok, YouTube, LinkedIn, and more. This is possible due to a large set of capabilities, which include:

Reusable Templates: Users can either design their own templates and share them with the community or download those created by others. This variety of ready-to-use templates for different scenarios helps users skip the daunting blank canvas to bring their ideas to life. Explore various templates in our video editor demo.
Music and Audio Library: In CE.SDK, adding audio to videos is simple and intuitive. Given the impact of audio, users can set the tone with music or narration in just a few clicks, creating a more immersive atmosphere for their content.
Animations: The SDK includes a wide selection of animations to enhance the design elements positioned within video scenes.

After creating a video within your web app, users can export it directly from CE.SDK in the appropriate formats and aspect ratios for their target social media platforms.

Product Showcase for E-Commerce Applications

Images have long been a simple yet powerful tool for showcasing products on e-commerce platforms, and sites like eBay, Amazon, AliExpress, and Walmart have relied on them for years (and still do!).

However, in recent years, customer expectations have shifted. Today’s buyers crave more interactive and immersive ways to visualize products—they want to see how items look and perform in real-world settings.

Short, dynamic product videos offer a superior presentation experience. According to an analysis by Firework, video content increases purchase likelihood by 51%, highlighting its undeniable impact on buying decisions. This is why many sellers have already embraced video to enhance product displays.

With a CE.SDK-powered JavaScript video editor, producing compelling videos that deliver a seamless, multi-device shopping experience becomes effortless. Plus, reusable templates help you generate unique product videos while maintaining brand consistency.

Engaging Video Messages for Sales Outreach

Marketers and sales teams know that cold emails often come across as impersonal and boring. The solution to this challenge? Personalized video messages!

Customized video messages are proving to be an effective outreach tool, with studies showing significantly higher conversion rates.

With CreativeEditor SDK, sales and marketing teams can easily create personalized videos tailored to individual clients or leads, making their outreach more engaging and impactful. Unlike traditional email campaigns, personalized videos create a sense of real, one-on-one interaction.

Additionally, the SDK’s translation features help sales teams break down language barriers, allowing them to reach a global audience. This ensures that the personalized messages resonate with clients from different regions.

Explore this feature in our translation and internationalization demo.

Digital Asset Management

DAM, short for Digital Asset Management, is the process of organizing, storing, and managing digital assets, including video content. As your business grows, an effective DAM system becomes key to enabling multiple teams to easily access and collaborate on assets across different projects.

CreativeEditor SDK backs DAM workflows by offering powerful tools to organize, edit, and repurpose video content through an embeddable, centralized interface. Its core JavaScript video editor component empowers users to:

Effortlessly adapt and customize video assets.
Ensure brand consistency while automating updates across various assets.
Edit content efficiently within a collaborative environment.

Although CE.SDK does not provide built-in role-based permissions, it integrates smoothly with backend systems to control user access. In particular, its flexible architecture supports the definition of custom hooks for permission checks to customize the editor’s behavior.

Automated Video Creation

CreativeEditor SDK streamlines the automation of asset creation by enabling users to generate on-brand video content variations for multiple channels. Thanks to adaptable templates, dynamic text variables, and lockable designs, the SDK ensures consistency and brand compliance over all produced videos.

Given a template, the creative engine automates the generation of countless personalized assets by populating them with resources from various data sources. That eliminates manual effort, reduces design bottlenecks, and accelerates production, making it perfect for scaling campaign-specific videos or building dedicated marketing tech.

Customizing your CreativeEditor SDK Instance

CreativeEditor SDK is not a one-size-fits-all JavaScript video editor. Instead, it is built for flexibility, offering a wide set of customization options to tailor the editor to your unique requirements and brand identity. These include:

Theming Options: Match the editor’s look to your app’s style with built-in themes, generate new ones using the theme generator, or create custom themes manually. Explore theming possibilities in our dedicated demo.
Custom UI: Build entirely bespoke JavaScript video editing user interfaces that align with your specific use case.
Media Library Integration: Set up sortable, flexible media libraries and integrate popular third-party libraries like Unsplash and others. Get easy access to external assets.
Localization: Adapt the editor to different languages and regions with full i18n support, letting you extend or overwrite any language setting.
Toolbar Customization: Rearrange toolbar elements, update icons, or rename tools to deliver a tailored user experience.

With these customization options, CreativeEditor SDK ensures your video editor is as unique as your JavaScript application.

Conclusion

Implementing a JavaScript video editor in your web app can greatly improve the user experience and provide a powerful feature to drive higher engagement, retention, and even product distribution. This is true whether you are developing an e-commerce platform, a social media app, a tool for influencers, or a SaaS web solution.

With the CreativeEditor SDK, adding a fully customizable video editing experience to your web application takes only a few minutes. Explore CE.SDK’s video capabilities and dive into the docs.

Stay tuned for more updates, and please reach out if you have any questions. Thank you for reading.

Over 3,000 creative professionals gain early access to our new features, demos, and updates—don’t miss out, and subscribe to our newsletter.

How I Built a Short Video Generator with AI & CE.SDK in One Day

Eray — Thu, 09 Jan 2025 11:27:13 GMT

Here’s the crux of product development in the age of LLMs: how much can AI truly accelerate the development process?

We have seen videos of solo developers building small apps entirely with AI with just a few prompts. But how does it scale to more complex development projects? As LLMs rapidly evolve, their scope and impact will only increase.

That’s why I regularly challenge myself to build a small project with the help of AI. I’m a prime candidate to test the AI productivity boost: a jack-of-all-trades (and a master of none) with a background in both design and engineering, yet no hands-on experience in the past five years. My latest challenge? Build a web-based short video generator within one day.

In this post, I’ll share the most intriguing takeaways from tackling this project.

Why a Short Video Generator?

Why focus on this idea? It’s simple: to ride the wave of a new trend. A format called “faceless” short videos is gaining traction among creators on platforms like YouTube and TikTok.

https://www.youtube.com/embed/DfQ3fhqfKVc?feature=oembed

What’s fascinating about these videos is their automation: an LLM generates a script, which is then transformed into speech, images, and text assets using various AI services. These assets are automatically assembled into a cohesive video.

The general concept is compelling: It’s still generative content, but mixed with classic video composition techniques. This approach offers greater accuracy, consistency, and control over pure generative AI.

The potential to automate video production at this scale is exciting. Add its relatively low complexity and high production value, and it became the perfect topic for my challenge.

Enter CE.SDK

Another reason I chose this challenge was its compatibility with CE.SDK, our design and video editor library. CE.SDK offers a robust editing toolkit that integrates into any product with just a few lines of code. Its features, like headless mode, are ideal for automating workflows like video generation.

Most faceless video services use React-based video generation and achieve fair results. However, using CE.SDK instead of a react-based library could potentially boost the overall experience with three critical improvements:

Editable Outputs: This is huge. Full automation often needs human adjustments for fine-tuning. CE.SDK enables automated video generation while allowing manual refinement of the results.
Enhanced Visual Quality: CE.SDK has its own rendering pipeline, allowing for more nuanced visual effects and animations. When you’re competing against others in this space, it can make a huge difference if you’re able to produce higher fidelity in the visual output.
Visual Design Workflow: Create design components or even entire templates visually, and then use them via code. This authoring workflow can be extremely helpful in creating rich, interesting designs for the generated videos.

The Ground Rules

To keep the challenge focused, I set strict rules:

Time Limit: Spend no more than 12 hours on the challenge.
No Manual Coding: Avoid writing any code yourself—everything should be built through conversations with AI.
Trust the AI: Do not read or analyze code generated by the AI. Rely entirely on its decisions.
Skip External Research: Do not read or explore the APIs you intend to use. Instead, provide links to the AI and let it determine how to use them.
Compare AI Performance: Alternate Claude Sonnet 3.5 and ChatGPT o1 for code generation to evaluate which performs better.

The Tools & Workflow

Code Editor: Cursor
Built on VSCode’s foundation, Cursor stood out as the only editor offering both an integrated chat interface and the ability to switch between different LLMs. However, with GitHub’s recent significant updates to Copilot, I’ll switch to VSCode with Copilot for future challenges.

UI Prototyping: Claude Artifacts
Rather than building the entire project in my code editor, I chose to prototype the UI directly through Claude’s web interface. The benefits were immense:

Instant results: To create an artifact, Claude streamlines development by automatically writing and compiling code while leveraging essential UI libraries and components. This automation eliminates setup time and technical overhead, allowing me to focus purely on design iterations.
Instants Variations: Claude enables rapid prototyping through parallel conversations. When a design direction didn’t quite work, I could simply start a fresh conversation with modified requirements and evaluate a new prototype. This approach helped me develop three viable concepts quickly - a pace that would have been impossible in a traditional code editor.
Quality of execution: Claude transforms rough concepts into polished, intuitive interfaces. Its suggestions often surpassed my initial ideas, offering sophisticated solutions I hadn’t considered.
Keep it clean: By prototyping outside the code editor, I kept the main project’s codebase clean and focused. This separation prevented the accumulation of experimental code and maintained the clarity of our primary development environment.

Quickly prototype your interface with Claude Artifacts.

APIs
Key APIs used in the project included:

Script Generation: Claude Sonnet 3.5 vs various ChatGPT models.
Image/Video Assets: Fal.ai Flux models.
Speech Synthesis: ElevenLabs.

Building the App: Divide and Conquer

After having prototyped the UI, I started to chat with the LLM inside the code editor so that it can code the app. To work with the AI efficiently, I followed a divide-and-conquer approach. Rather than simply asking it to “build me a video app,” I broke down the problem into manageable steps:

Generate a video script
Create an AI prompt that includes user input and examples of the desired output format. Pass this prompt to the LLM API.
Parse the script to generate assets (speech, images, text)
Parse the LLM’s response to extract image prompts and speech paragraphs. Send these to their respective APIs.
Compose the final video
Load all the generated assets into a predefined template to generate the finished video through the CE.SDK library.

After completing these steps, I was finally able to generate my first fully automated videos! With a few more tweaks and additions, I had an MVP ready within twelve hours.

The final result: A Short Video Generator

There are still some missing features, partly because I spent a significant amount of time refining the prompt to generate the video script. I also had to bend the rules occasionally—sometimes the LLM would hit a wall, and I had to read or write small snippets of code.

Key Takeaways

Engineering Knowledge Is Essential
You should have some engineering background to achieve the AI productivity boost in development.

AI doesn’t solve everything for you. You are still the architect. You provide a lot of input and guidance. AI often needs to be pointed to the right strategy. Foundational knowledge of computer science is hugely advantageous for working with AI effectively.
As mentioned, I had to read and write a few lines of code myself. Without coding experience, I would have probably not been able to progress, as the LLM was not able to.
The getting started experience is nowhere close to novice-friendly. How do you get started with a new project in a code editor that actually requires you to do the setup manually? My workaround was to create an empty project, and then ask the LLM to instruct me to use a boilerplate for react. Again, this is engineering knowledge, any novice would have hit a wall already at this point.

Claude Outperformed ChatGPT
Claude was a clear winner in the side-by-side comparison, because of three reasons:

Claude Artifacts was a game changer for UI prototyping.
It was generally better at writing and understanding code. Difficult to quantify, but in some cases Claude fixed the mess ChatGPT left in the code
Claude can process URLs, which makes working with APIs much smoother.

Who would have thought new LLMs would catch up to OpenAI so quickly after they released the first version of ChatGPT?

Complexity Slows AI
The more code in my project, the slower the overall progress. LLMs struggled with the growing complexity. Their context windows filled more quickly, and their responses became increasingly unreliable. At some point, it becomes extremely difficult to make architectural changes, especially if this affects multiple parts of the app. When trying to fix errors, you’ll often find yourself in a whack-a-mole game. While the AI would resolve one issue, it would inadvertently introduce new problems elsewhere, creating an endless loop of fixes and regressions.

Ultimately, the time invested in this challenge was well worth it. While LLMs can’t build products end to end on their own, they can significantly streamline product development when paired with the right human collaboration. The real question is whether development teams are ready to adapt their habits and explore new workflows to boost productivity.

Next Steps

This challenge has inspired me to refine and expand on this project. Future iterations will focus on harnessing CE.SDK’s unique features to push the boundaries of automated video generation.

Stay tuned for part two of this series—there’s much more to explore!

UPDATE: Read part two - a cookbook how to build your own short video creator!

Over 3,000 creative professionals gain early access to our new features, insights and updates—don’t miss out, and subscribe to our newsletter.

A Modern Vue.js Video Editor: Setup Guide

Antonello — Wed, 08 Jan 2025 11:24:43 GMT

Discover how to integrate IMG.LY’s video editor into your Vue.js application and unlock its full potential.

Platforms like Instagram, YouTube, and TikTok have revolutionized how we engage with content, setting new standards for consuming video media. With the growing popularity of short-form videos, this trend shows no signs of slowing down.

Users now not only love to watch videos but also expect intuitive video creation and editing features from modern web applications. Here is why adding a video editor to your Vue.js web application can significantly boost user engagement and satisfaction.

In this guide, you will discover how to integrate a video editor into a Vue.js project using CreativeEditor SDK (also referred to as CE.SDK). We will also discuss when this functionality is most beneficial and how to customize the editor for your specific needs.

For a quick setup, take a look at the GitHub Vue.js video editor integration repository to kick off your project.

Let’s dive in!

Why You Should Add a Video Editor to Your Vue.js App?

The digital landscape is constantly evolving, but one truth has remained steady: video content continues to dominate.

Statistics about videos are clear. According to Datareportal, over one-third of all Instagram reels are videos. Similarly, YouTube Shorts garners over 70 billion daily views, and TikTok boasts more than 1.5 billion monthly active users worldwide.

The reasons behind these staggering numbers are two:

Videos are incredibly engaging for audiences.
Social media platforms have made it remarkably easy to create professional-looking content.

Users now expect to be able to add filters, overlays, audio, music, and text with just a few clicks. As a result, not only do we anticipate video editing features in web applications, but we also demand that these features be simple to use.

By integrating an intuitive video editor, your Vue.js web app can capitalize on that trend. The goal is to provide a feature that billions of users are already familiar with—and likely expect from your application.

The payoff? Lowering the barriers to user-generated content, increasing engagement, and driving product distribution!

How to Integrate a Video Editor in Vue.js

In this section, you will learn how to set up a Vue.js video editor using CreativeEditor SDK.

Requirements

Before starting, ensure you have the latest LTS version of Node.js installed on your machine. Otherwise, download and install it from the official Node.js website.

If you do not already have a Vue.js project, create a new Vite-based Vue project by running the following command:

npm create vue@latest

This will install and run create-vue, the official Vue project scaffolding tool. During the process, you will be prompted to select optional features like TypeScript and testing support. Below is an example of how you can respond to the prompts:

√ Project name: ... my-vue-video-editor-app
√ Add TypeScript? ... No / Yes
√ Add JSX Support? ... No / Yes
√ Add Vue Router for Single Page Application development? ... No / Yes
√ Add Pinia for state management? ... No / Yes
√ Add Vitest for Unit Testing? ... No / Yes
√ Add an End-to-End Testing Solution? » No
√ Add ESLint for code quality? » Yes
√ Add Prettier for code formatting? ... No / Yes

If you are unsure about an option, simply select “No” by pressing Enter.

After the project is set up, navigate to the project folder and install CreativeEditor SDK via @cesdk/cesdk-js package with this command:

npm install @cesdk/cesdk-js

Your package.json file will now include the SDK as a dependency:

"dependencies": {
"@cesdk/cesdk-js": "^1.41.1",
"vue": "^3.5.13",
"vue-router": "^4.4.5"
}

Finally, open your project in a JavaScript IDE, and you are ready to start coding!

Create the Video Editor Component

In the src/components folder, create a new file named VideoEditor.vue. This file will serve as your Vue.js single-file component for the CE.SDK-based video editor.

In the like this:

import CreativeEditorSDK from '@cesdk/cesdk-js';

Next, create your video editor component using the following lines of code:


<!-- src/components/VideoEditor.vue -->

<template>
  <div id="cesdk_container" style="height: 100vh; width: 100vw"></div>
</template>

<script>
import CreativeEditorSDK from '@cesdk/cesdk-js'

export default {
  props: { config: Object },

  _cesdk: null,

  mounted: function mounted() {
    CreativeEditorSDK.create('#cesdk_container', this.config).then(async (instance) => {
      this._cesdk = instance
      // customize the editor behavior...
    })
  },

  methods: {},

  watch: {},

  beforeUnmount: function beforeDestroy() {
    // clean up the CE.SDK instance
    if (this._cesdk) {
      this._cesdk.dispose()
      this._cesdk = null
    }
  },
}
</script>

The component defined above embeds the CreativeEditorSDK JavaScript element into an HTML <div> container.

Use the Component

You can now import the VideoEditor component in the

import VideoEditor from './components/VideoEditor.vue';

Then, include it in the

A Modern React Video Editor: Integration Guide

Antonello — Wed, 08 Jan 2025 09:31:11 GMT

Learn how to integrate IMG.LY’s video editor for React into your web app and make the most of all its features.

Video content has seen steadily growing demand, especially with the rising popularity of short-form videos. It is no surprise that platforms like YouTube have heavily invested in short-form video content, as video remains a dominant medium for users to create and consume content.

Platforms like Instagram, TikTok, and YouTube have changed user habits forever. Here is why integrating video creation and editing directly within your web application can dramatically enhance user satisfaction.

In this guide, you will see how to integrate a video editor into a React app using CreativeEditor SDK (CE.SDK, for short). We will discuss when it is useful and explain how to customize the editor for your specific use cases.

For a quick start, check out the GitHub repository featuring the code for integrating a React video editor.

Let’s dive in!

Why Integrate a Video Editor in Your React Web App?

The digital landscape is ever-evolving, but one truth has remained constant for several years: video content reigns supreme.

The data speaks for itself. Platforms like TikTok boast over 1.04 billion monthly active users worldwide. Similarly, one of most recent Google’s earnings call revealed that YouTube Shorts generated approximately 70 billion daily views in just one quarter—a significant leap from 30 billion daily views just two years ago.

These platforms have set the gold standard by empowering users to create professional-looking videos effortlessly—adding filters, overlays, audio, and text with just a few clicks. This simplicity has made video editing an essential feature across various industries, from social media apps to marketing tools.

Then, the shift toward shorter, more engaging videos has transformed how users create content and how we consume it. Audiences now demand bite-sized, engaging clips that are easy to produce and share.

By integrating an easy-to-use video editor, your React web app can tap into this trend. The idea is to offer a feature that billions of users are familiar with—and may already expect from your application.

The result? Lowering the barrier for user-generated content, boosting engagement, and driving distribution!

React’s flexibility and component-based architecture make it the perfect match for IMG.LY’s CreativeEditor SDK, which guarantees a seamless, high-performance, and feature-rich experience for design, video, and photo editing—all directly in the browser.

Getting Started: Adding a Video Editor in React

Follow this step-by-step tutorial section and learn how to set up a React video editor in your web app using CreativeEditor SDK. For a different approach, see our guide on how to build a video editor in React with Wasm.

Integrate CE.SDK in React with the following instructions!

Requirements

Before getting started, make sure you have the latest LTS version of Node.js installed on your machine. Otherwise, download it from the official website and install it.

Next, if you do not already have a React project set up, create a new one using Vite:

npm create vite@latest my-react-video-editor-app – --template react

Install CE.SDK via the @cesdk/cesdk-js package with this command:

npm install @cesdk/cesdk-js

Your package.json file will now include it as a dependency:


"dependencies": {
  "@cesdk/cesdk-js": "^1.41.1",
  "react": "^18.3.1",
  "react-dom": "^18.3.1"
}

Load your project in a JavaScript IDE, as you are ready to start coding!

Create the Video Editor Component

In the src folder, create a VideoEditor.jsx file. This will contain your CE.SDK-based React video editor component.

Import CreativeEditorSDK from @cesdk/cesdk-js as below:

import CreativeEditorSDK from '@cesdk/cesdk-js';

Then, initialize your video editor React component with this logic:

// src/VideoEditor.jsx

import CreativeEditorSDK from '@cesdk/cesdk-js';
import { useEffect, useRef, useState } from 'react';

// your CE.SDK license and user configs
const config = {
  license: '<YOUR_LICENSE>',
  userId: '<YOUR_USER_ID>',
};

export default function VideoEditor() {
  const cesdk_container = useRef(null);
  const [cesdk, setCesdk] = useState(null);

  useEffect(() => {
    // if the CE.SDK container has already been initialized
    if (!cesdk_container.current) {
      return;
    }
    let cleanedUp = false;

    // initialize a CE.SDK instance
    let instance;
    CreativeEditorSDK.create(cesdk_container.current, config).then(
      async (_instance) => {
        instance = _instance;
        if (cleanedUp) {
          instance.dispose();
          return;
        }

        // customize the editor behavior...

        setCesdk(instance);
      }
    );

    // clean up the CE.SDK instance
    const cleanup = () => {
      cleanedUp = true;
      instance?.dispose();
      setCesdk(null);
    };

    return cleanup;
  }, [cesdk_container]);

  return (
    <div
      ref={cesdk_container}
      style={{ width: '100vw', height: '100vh' }}
    ></div>
  );
}

Replace <YOUR_LICENSE> with the license key you obtain from CreativeEditor SDK and <YOUR_USER_ID> with your user ID to optionally track monthly active users (MAUs) across different devices.

The component defined above loads the CreativeEditorSDK JavaScript element into an HTML

element.

Use the Component

You can now import the VideoEditor component as follows:

import VideoEditor from './VideoEditor';

Then, use it as below:

<VideoEditor />

This will open the video editor with the video preset, allowing users to trim, cut, apply filters, add text overlays, include music, and more to enhance their videos.

Have a look at our interactive demo to see what the resultant editor should look like.

React Video Editor Use Cases

Now that you know how to integrate a React video editor into your web app, you are ready to explore some key use cases. See how the specific features of CreativeEditor SDK can support different scenarios.

Social Media Publishing

CreativeEditor SDK equips users with the tools they need to create engaging video content. It makes it easier to produce shareable videos for popular social media platforms like Instagram, TikTok, and LinkedIn with features like:

Reusable Templates: Start with video templates downloaded from others or create your own templates and share them with the community. By selecting from a variety of ready-to-use templates for different use cases, users can avoid the blank canvas syndrome and bring their ideas to life quickly. You can explore a range of different templates in our video editor demo.
Music and Audio Library: Users can easily add audio files to their videos, setting the tone through music or narration and creating a captivating atmosphere for their content.
Animations: The SDK comes with a wide set of configurable animations to improve the appearance of design elements within video scenes, significantly boosting engagement.

Once a video has been created in your React application, CE.SDK lets users export it in the appropriate formats and aspect ratios for the target social media platforms.

Digital Asset Management

DAM, short for Digital Asset Management, refers to the process of organizing, storing, and managing any digital asset—including videos. Over time, DAM has become essential for businesses to maintain efficiency, streamline workflows, and ensure brand consistency across teams.

CreativeEditor SDK supports DAM by giving your team the ability to organize, edit, and repurpose video content within a centralized, embeddable system. Within the React video editor component, users can easily adapt and edit their assets, ensuring brand consistency while automatically propagating changes across multiple assets.

Video templates support placeholders and permissions to guide users’ designs, guaranteeing that all assets stay on-brand. While CE.SDK does not directly support role-based permissions, it can be integrated with any backend technology or framework to control user access.

Keep in mind that the SDK is also extendable. That way, developers can create custom hooks that check permissions and customize the editor’s behavior accordingly.

Marketing Automation

CreativeEditor SDK provides marketing tech to efficiently craft branded, campaign-specific videos at scale.

Features like pre-designed, editable, and customizable designs help save time in video production and management. Changes to these templates can be automatically propagated, also eliminating the need for manual updates.

The SDK also supports advanced scenarios like A/B testing, so that your marketing teams can campaign reach by comparing different solutions to see how they perform. Plus, the ability to generate customized videos with configurable text variables makes personalizing content easier than ever.

Personalized Videos for Sales Outreach

We all know how boring and annoying cold emails can be. Marketers and salespeople understand this too, which is why personalized video messages have become the new frontier for pitching.

Thanks to CreativeEditor SDK, sales teams can easily produce customized videos tailored to specific clients or leads. These videos are far more engaging than standard emails because they feel like a real conversation.

Also, the translation capabilities offered by the SDK allow sales teams to reach multiple audiences worldwide, breaking down language barriers and personalizing the message for a broader range of targets. Test this feature in our translation and internationalization demo.

E-Learning

CreativeEditor SDK provides educators with the tools they need to create informative videos. Teachers and coaches can quickly produce professional-quality content without requiring extensive technical skills.

The SDK enhances the learning experience on your React-based e-learning platform through features like:

Reusability: Build a library of templates that can be easily adapted and integrated into existing materials.
Easy video production: Record, edit, and arrange videos directly within the editor, accessible on desktop, mobile, or tablet.
Plugins for learner interactivity: Boost engagement by integrating plugins that add quizzes, polls, and other interactive components within the videos.

Customizing your CreativeEditor SDK Instance

CreativeEditor SDK does not offer a static, pre-configured React video editor experience. Quite the opposite, it presents several customization features to tailor the editor to your specific needs and brand requirements.

The key customization options are:

Build Custom UIs: Define fully custom user interfaces adapted to your specific use case.
Theming: Adjust the editor’s theme to match your app’s design. Choose from built-in themes, generate new ones using the theme generator, or manually create a custom theme. Test theming in our dedicated demo.
Media Libraries: Set up customizable, sortable media libraries. CE.SDK supports integration with third-party libraries accessible via API, such as Unsplash, allowing you to easily access and use external media assets.
Toolbar Customization: Reposition toolbar elements, change icons, or rename tools to suit your needs, providing a unique editing experience.
Internationalization: Adapt the video editor component to different languages and regions. CE.SDK offers full i18n support, enabling you to overwrite and extend all text strings in any language.

Conclusion

Integrating a React video editor into your web app can significantly enhance the user experience and serve as a valuable feature to boost retention, engagement, and potential product distribution. This holds true whether you are building a social media platform, a tool for influencers, a marketing SaaS, or an e-learning system.

With CreativeEditor SDK, you can quickly add a fully customizable video editing experience to your React application in just minutes.

By following the steps outlined in this blog post, you can bring professional-level video editing features to your web users. Explore CE.SDK’s video capabilities and dive into the docs.

Stay tuned for more updates, and please reach out if you have any questions. Thank you for reading.

Over 3,000 creative professionals gain early access to our new features, demos, and updates—don’t miss out, and subscribe to our newsletter.

A Modern Angular Video Editor: Setup Guide

Antonello — Wed, 08 Jan 2025 08:19:25 GMT

Learn how to integrate IMG.LY’s video editor for Angular into your web application and get the most out of it.

TikTok, Instagram, Facebook, WhatsApp Messenger, YouTube, and X are among the most popular social media platforms. They consistently rank in the top 10 most visited websites and downloaded mobile apps globally. Have you ever asked what is the common thread between them? Video content!

These platforms have revolutionized how we consume video content. Videos are now shorter, often include subtitles for silent viewing, and are designed to be engaging, professionally produced, and artfully crafted.The challenge lies in meeting user expectations, as modern web applications are now expected to offer intuitive video creation and editing tools. After all, Instagram and TikTok have set the bar quite high when it comes to seamless video production.

This guide will walk you through implementing a video editor in your Angular web app using CreativeEditor SDK (CE.SDK). We will also take a look at some scenarios where this video editing is useful and explain how to customize the editor to meet your unique requirements.To jumpstart your project, check out the GitHub repository for Angular video editor integration.

Let’s dive in!

Why Add a Video Editor to an Angular Application?

Over the past few months, AI has been revolutionizing the tech industry. It all started with AI-generated text and images, but what is next on the horizon? AI-generated videos!

The appeal is clear—numerous studies show that video is the most engaging medium, resonating deeply with us as humans. This is no surprise, given that YouTube and Instagram rank among the top five most visited websites, and TikTok is the most downloaded app worldwide.

The problem is that users now demand more than just video content. They expect engaging, professionally edited videos. On top of that, platforms like Instagram and TikTok have raised the bar for intuitive video production and editing.

As a result, we all expect to be able to add filters, overlays, audio, music, and text to videos with just a few clicks. Meeting these expectations is essential for any application offering video generation features.

Adding an easy-to-use video editor into your Angular project gives users a powerful tool that they are likely to desire and are already familiar with. That will surely boosts user engagement and help you accelerate the distribution of your online product or service!

How to Set Up a Video Editor in Angular

In this section, you will learn how to integrate an Angular video editor into your wev application through CreativeEditor SDK.

Requirements
Before you begin, make sure you have the latest LTS version of Node.js installed on your machine. If that is not your case, download and install it from the official Node.js website.

Next, open your terminal and run the following command to install the Angular CLI globally:

npm install -g @angular/cli

This will make it easy to create and manage Angular projects.

Once the installation is complete, if you don’t have an Angular project set up, initialize a new Angular project by running:

ng new my-angular-video-editor-app

You will be prompted with a few questions:

Would you like to share pseudonymous usage data about this project with the Angular Team at Google under Google's Privacy Policy at https://policies.google.com/privacy. For more details and how to change this setting, see https://angular.dev/cli/analytics.
No
Global setting: disabled
Local setting: No local workspace configuration file.
Effective status: disabled
✔ Which stylesheet format would you like to use? CSS [ https://developer.mozilla.org/docs/Web/CSS ]
✔ Do you want to enable Server-Side Rendering (SSR) and Static Site Generation (SSG/Prerendering)? No

If you are unsure, press Enter to accept the default answer.

After the project is created, navigate to the project folder and install the CreativeEditor SDK (@cesdk/cesdk-js) npm package by running:

npm install @cesdk/cesdk-js

Your package.json file will now include the SDK as a dependency:

"dependencies": {
  "@angular/animations": "^19.0.0",
  "@angular/common": "^19.0.0",
  "@angular/compiler": "^19.0.0",
  "@angular/core": "^19.0.0",
  "@angular/forms": "^19.0.0",
  "@angular/platform-browser": "^19.0.0",
  "@angular/platform-browser-dynamic": "^19.0.0",
  "@angular/router": "^19.0.0",
  "@cesdk/cesdk-js": "^1.41.1",
  "rxjs": "~7.8.0",
  "tslib": "^2.3.0",
  "zone.js": "~0.15.0"
}

Open your project in a JavaScript IDE, as you are ready to start coding!

Create a Video Editor Component

First, use the Angular CLI to generate the scaffold for your video editor component:

ng generate component video-editor

Open the video-editor.component.ts file inside the src/app/video-editor folder and initialize your CE.SDK-based Angular video editor component as below:


import { Component, ElementRef, ViewChild } from '@angular/core';
import CreativeEditorSDK, { Configuration } from '@cesdk/cesdk-js';

Component({
  selector: 'app-video-editor',
  imports: [],
  templateUrl: './video-editor.component.html',
  styleUrl: './video-editor.component.css'
})

export class VideoEditorComponent {
  ViewChild('cesdk_container') containerRef: ElementRef = {} as ElementRef;

  ngAfterViewInit(): void {
    const config: Configuration = {
      license: '<YOUR_LICENSE>',
      userId: '<YOUR_USER_ID>',
    };
    CreativeEditorSDK.create(this.containerRef.nativeElement, config).then(
      async (instance: any) => {
        // customize the editor behavior...
        await instance.createDesignScene();
      }
    );
  }
}

Replace <YOUR_LICENSE> with the license key provided by CreativeEditor SDK. Optionally, also set <YOUR_USER_ID> to your user ID to start collecting monthly active user (MAU) data.Then, define video-editor.component.html as below:

<div #cesdk_container [style.height.vh]="'100'" [style.width.vw]="'100'"></div>

This way, VideoEditorComponent will be mounted on the above

element.

Use the Component

You can now import the component and register it in your app.components.ts file with these lines of code:

import { Component } from '@angular/core';
import { RouterOutlet } from '@angular/router';
import { VideoEditorComponent } from './video-editor/video-editor.component'; // import the video editor component

@Component({
  selector: 'app-root',
  imports: [RouterOutlet, VideoEditorComponent], // register the video editor component
  templateUrl: './app.component.html',
  styleUrl: './app.component.css',
})
export class AppComponent {
  title = 'my-angular-video-editor-app';
}

Next, you can use it in app.component.html with:

<app-video-editor></app-video-editor>

This setup will open the video editor with a predefined video template, allowing users to trim, cut, apply filters, add text overlays, insert music, and make other video enhancements.

Have a look at our interactive demo to see what the resultant editor should look like.

Use Cases the Your Angular Video Editor

After learning how to create an Angular video editor component with a basic CreativeEditor SDK integration, it is time to explore some practical use cases in real-world scenarios.

Video Messages for Marketing Outreach

Cold emails often come across as generic and impersonal, often ending up in spam or being ignored. In contrast, personalized video messages are transforming marketing outreach.

CreativeEditor SDK enables marketers to create compelling videos that stand out from standard email approaches with capabilities like:

Personalized Video Messages for Leads: Create tailored videos for individual clients or prospects, adding a personal touch to your marketing outreach efforts and make a stronger impact compared to traditional cold emails.
Global Reach with Translation Features: Use the SDK’s built-in translation and internationalization tools to engage with a global audience. Customize messages to fit local cultures and ensure a personalized experience. Try out this feature in our translation demo.

Educational Videos for E-Learning Platforms

CreativeEditor SDK offers users in the e-learning industry an intuitive tool to create engaging and educational videos.

Educators, teachers, and coaches do not need technical skills, as video creation is simple and accessible. Specifically, users can record, edit, and organize videos across desktop, mobile, or tablet browsers with just a few clicks.

The SDK simplifies content creation through reusable templates. Instructors can integrate their materials into those template to maintain consistency while covering different topics. Finally, support for interactive plugins—such as quizzes, polls, and other engagement tools—adds a dynamic layer to video lessons.

CreativeEditor SDK simplifies the process of producing shareable videos for social media sites like Instagram, TikTok, YouTube, but also LinkedIn and others. That is possible thanks to features like:

Reusable Templates: Start with video templates from other creators or design your own and share them with the community. By choosing from a variety of pre-designed templates for different needs, users can avoid the frustration of starting from scratch and bring their ideas to life quickly.
Animations: Access a broad selection of customizable animations to enhance the visual appeal of video elements, driving higher engagement.
Audio Library: Effortlessly incorporate audio files into your videos, such as music, voiceovers, or sound effects, to set the mood and create an immersive experience for viewers.

Once a video is created in Angular application with CE.SDK, users can export it in the ideal formats and aspect ratios for different social media platforms.

Showcase Products on E-Commerce Applications

Images have long been a simple and effective way to showcase products on e-commerce platforms. Many sites, from eBay to Amazon, have used them for years. At the same time, customer expectations have evolved, and they now seek more engaging ways to visualize products.

Short, dynamic product videos significantly enhance product presentation. In particular, Amazon data shows that adding videos can boost sales by up to 9.7%. It is no surprise that many Amazon sellers have already adopted video to showcase their products.

With a CE.SDK-based Angular video editor, you can easily create videos that work seamlessly across multiple devices for a unified shopping experience. Thanks to reusable templates, you can customize product videos while maintaining scalability and brand consistency.By leveraging multiple templates and feeding them with diverse data, you can generate automated product video variations at scale.

Smart and Automated Workflows

CreativeEditor SDK supports the development of a tool for creating branded videos at scale.

As it is based on ready-made and editable templates, it simplifies video production and management. The reason is that users can define these templates once through an intuitive point-and-click interface, then effortlessly customize the produced videos via different input resources or configurable text variables.

That automated workflow process boosts productivity and scalability. The SDK also supports advanced features like A/B testing. That way, teams can create multiple versions of a campaign video, distribute them on social platforms, and compare their performance.

Customizing your CreativeEditor SDK Instance

CreativeEditor SDK features a versatile Angular video editor experience that can be easily configured and customized to fit your specific requirements and visual preferences.Key customization options supported by CE.SDK include:

Feature Activation: Enable or disable features as you need, so that you can control the functionality available to users.
Custom UIs: Create fully personalized user interfaces, adapting the editor to your unique use case. This includes repositioning toolbar elements, changing icons, or renaming tools for a tailored editing experience.
Internationalization: Adapt the video editor for different languages and regions. CE.SDK provides full support for internationalization, enabling you to customize all text strings in any language.
Export Options: Configure which file formats users can select for exporting, along with settings for quality, dimensions, and more.
Role Customization: CE.SDK supports roles, which are a set of global settings and scopes. When the role changes, the default settings for that role are applied. You can also use a callback to adjust configurations whenever the role changes and define custom roles to tailor settings for specific user needs or workflows.
Media Libraries: Create custom, sortable media libraries. CE.SDK supports integration with third-party libraries via API, offering easy access to external media assets.
Choose the Start Video: Set the editor to display a predefined video at the start, eliminating the blank canvas effect.
Theming: Adjust the editor’s theme to match your app’s design. You can select from built-in themes, generate new ones using the theme generator, or manually create a custom theme.

See all of these customizations in action in our customization demo.

Conclusion

Adding an video editor to your Angular site or web application greatly enhances user experience. Such a feature drives product success by improving user reviews and increasing retention. Whether you are creating a marketing tool, an e-learning or e-commerce platform, or any web app with social media functionality, a video editor adds immense value.

CreativeEditor SDK gives you what you need to implement a fully customizable video editing solution into your Angular application in minutes.

By following the steps in this guide, you learned how to equip your users with a professional and intuitive video editing experience. Explore CE.SDK’s video capabilities and dive into the docs.

Stay tuned for more updates, and please reach out if you have any questions. Thank you for reading.

Over 3,000 creative professionals gain early access to our new features, demos, and updates—don’t miss out, and subscribe to our newsletter.

A Modern Video Editor SDK for Your React Native App

Jan — Mon, 06 Jan 2025 10:40:35 GMT

Learn how to integrate IMG.LY’s video editor for React Native into your app and how to leverage its capabilities best.

Why Add a Video Editor to Your React Native App?

Video content is solidifying its status as the most engaging form of digital media. Platforms like TikTok, Instagram Reels, and YouTube Shorts have made video consumption and creation an engrained habit with billions of users. You can harness this trend by adding a video editor to your app significantly enhancing user engagement and retention.

React Native, with its ability to create cross-platform applications from a single codebase, is a perfect match for IMG.LY’s CreativeEditor SDK Video Editor. It ensures seamless performance on iOS and Android, powered by the same unified graphics engine across platforms.

Whether your app focuses on social media, marketing, or eCommerce, integrating a video editor empowers users with a creative tool set while elevating the overall experience.

Getting Started: Integrating the Video Editor in React Native

Requirements

Before diving into the integration, ensure your environment meets these requirements:

React Native: 0.73+
iOS: 16+
Swift: 5.10 (Xcode 15.4)
Android: 7+

To get started, add the @imgly/editor-react-native package to your project:

npm install @imgly/editor-react-native

Setting Up the Editor

Once the package is installed, initialize the editor by importing the necessary modules and creating an instance of EditorSettingsModel. You’ll need a license key, which you can obtain from the IMG.LY dashboard.

Here’s how to set up and launch the video editor:

import IMGLYEditor, { EditorSettingsModel } from '@imgly/editor-react-native';

export const openVideoEditor = async (): Promise<void> => {
  const settings = new EditorSettingsModel({
    license: 'YOUR_LICENSE_KEY',
  });

  const result = await IMGLYEditor.openEditor(settings);
};

This launches the editor with the Video Editor preset, enabling users to trim, cut, and enhance their videos with filters, text overlays, stickers, and music.

Use Cases: Building a TikTok-Like Experience

Now that the video editor is integrated into your React Native app, let’s explore some key use cases and how to configure the editor to support them.

Short-Form Video Creation

For apps targeting TikTok-style short-form video content, prioritize features that simplify the editing process:

Timeline Control: Allow users to trim clips and sync overlays like stickers or music.
Filters & Effects: Offer filters to let users add certain moods to their videos with themes like retro, high contrast, or pastel tones.
Text & Stickers: Add captions and playful stickers for videos that are often consumed on mute.
Music & Audio: Let users add soundtracks or sound effects, with a library of trending music for inspirational background music.
Video Templates: Provide ready-made templates that users can customize for specific occasions or themes.

This setup allows influencers and brands to create professional-looking videos that they can share across social media platforms with ease.

Influencers and Marketing

If your app serves influencers or businesses, the ability to create polished, on-brand videos is key. Features to consider:

Branded Templates: Pre-designed templates aligned with specific brand aesthetics, simplifying content creation for marketing campaigns.
Watermarks: Add brand logos or watermarks to videos, ensuring creators and brands maintain visibility.

These features empower influencers and businesses to quickly generate content that’s ready for distribution across platforms.

E-commerce and User-Generated Content

Video editing is a powerful tool for e-commerce apps, enabling sellers and customers to create engaging product demos, unboxing videos, reviews and tutorials. Features like trimming, filters, and music tools make it easy to produce compelling content that enhances the shopping experience.

For example:

Vendors can create promotional videos for products.
Customers can share authentic reviews or tutorials, increasing trust and boosting sales.

Customization Options with CreativeEditor SDK

The React Native plugin offers a range of customization options to adapt the editor to your app’s needs:

UI Customization: Change themes, colors, and layouts to match your app’s branding.
Video Presets: Configure presets for specific use cases, such as limiting video length or optimizing for a particular resolution.
Custom Assets: Add unique filters, stickers, and fonts to create a personalized experience for your audience.
Templates: Use the CreativeEditor SDK Web UI to create custom templates, enabling users to start with professional-grade designs.

Conclusion

Integrating a video editor into your React Native appwill improve your UX, and help boost engagement, retention, and potential distribution of your product, whether you’re building a social media platform, an influencer tool, or an e-commerce app.
With CreativeEditor SDK, you can create a TikTok-like video editing experience or offer specialized tools for businesses and creators.

By following the steps in this guide, you can empower your users to create professional-quality video content directly within your app. Explore the full capabilities of the SDK by visiting the React Native documentation and getting started today.

Stay tuned for updates, and don’t hesitate to reach out with any questions.

Thanks for reading!

3,000+ creative professionals gain early access to new features and updates—don’t miss out, and subscribe to our newsletter.

CE.SDK Video Editor Now Available on Android

Jan — Tue, 22 Oct 2024 11:44:02 GMT

We are excited to announce the release of CE.SDK’s video editing and video content creation tools for Android!

After the successful iOS launch, CE.SDK’s professional video editing capabilities are now available for Android. Whether your app focuses on social media, e-commerce, or marketing technology, CE.SDK enables users to create high-quality videos directly within your app.

Getting Started

Getting up and running with an instance of the CE.SDK video editor for Android is easy.

After downloading your license (get your trial license here) from your dashboard, simply invoke VideoEditor as composable function, Activity or Fragment.

Our Video Editing Backstory

Since we launched VideoEditor SDK almost ten years ago, we have seen an astounding range of creative and unique use cases of our SDK in customer projects. From Cameo connecting celebrities and their fans in new ways, over Multibrain supercharging their users marketing campaigns with editable video content, to Zigazoo powering video content within their social network for kids while putting safety and parental control first.

Since then, millions of users have experienced IMG.LY’s VideoEditor SDK through our customers’ products, shaping how they expect to interact with and modify videos. Continuous feedback from both our customers and their users has also influenced the way we approach video interface design, helping us refine and innovate along the way.

Our goal was to combine the reliability and robustness of the VideoEditor SDK with true cross-platform compatibility and the flexibility to meet diverse needs. By applying the lessons we’ve learned, we aimed to deliver an exceptional video editing user experience straight out of the box. We described how those learnings shaped the design of the mobile video editing interface.

Key Capabilities

With CE.SDK’s sleek timeline interface, your Android users can now take their video editing from simple transforms and adjustments to complex composition and multi-track editing:

Timeline-Based Editing
Split, trim, arrange video and audio tracks. Position elements such as images and stickers on the timeline and control their duration.

Multi-Track Editing
Work with multiple video and audio tracks, allowing for complex composition.

Transform & Enhance
Crop, flip, rotate, and use presets for common video formats. Add filters, effects, blur and essential adjustments.

Customizable Templates
Create and import templates using our web video editor, to jumpstart your users’ video composition and designs.

Asset Integration
Integrate your own asset libraries for audio tracks, sound effects, images, and more.

Cross-platform Interoperability
CE.SDK’s video capabilities extends across iOS, Android and the Web, enabling cross-platform applications to offer seamless video editing capabilities. Users can edit and save work in progress and pick up on any device.

Check out the showcase app for an interactive demo of these features.

Customization

The ability to tailor the video editor to your app’s particular use case has been a front and center concern in its development.

UI Customization: While theming is currently limited to dark and light model, future releases will introduce more flexible theming, allowing you to modify the look and feel of the editor to match your app’s branding. Furthermore, we expose callbacks that make it possible to hook into editor events and overlays for custom dialogues.
Configure Video Presets: You can configure the editor to create video presets based on your users’ needs. For instance, you may want to fix the video’s aspect ratio or optimize for certain resolutions, depending on the target platform.
Video Templates: With the CE.SDK video editor web UI, you can create an unlimited number of video templates, such as collages, text designs, and animations, providing your users with professional-quality starting points for their video designs.
Assets: Provide custom filters, fonts, and stickers to enhance the user experience. For niche apps, this can be an excellent way to engage users by offering content that feels unique to your community.

CE.SDK’s new Android video editing capabilities are perfect for a variety of use cases, including:

Social Media Applications: The CE.SDK video editor for Android excels at short-form video, ideal for social media applications, whether your users are publishing to other networks or you run a network yourself.
Ecommerce: Allow your users to create engaging product showcases, ads, and promotional videos, testimonials or reviews.
Marketing Tech Platforms: Users can leverage our versatile templating to easily create polished social media and marketing graphics from within your app.

What’s Next?

This Android release is just the beginning! We are about to launch a Camera UI for Android and are working on more advanced template creation features. So stay tuned.
To see some of these features in action, check out our iOS demo, where the next phase of innovation is unfolding.

Get Started

Explore our Video UI Showcase and Documentation for Android to discover how CE.SDK can streamline your content creation projects and make Android video editing easier than ever.

Over 3,000 creative professionals gain early access to new features and updates—don’t miss out, and subscribe to our newsletter.

CE.SDK v1.21 Release Notes

Neslihan — Thu, 22 Feb 2024 16:22:28 GMT

Since our last release, we’ve been crafting new features to empower your users’ creative journey. Today, we are happy to introduce CE.SDK v1.21!

Create Videos With A New Timeline for Web

Create eye-catching videos within your web app for any platform, including Instagram, TikTok, or YouTube! Here’s what’s new: the integrated timeline supports the arrangement of elements like videos, photos, text, audio, shapes and stickers. Users can fine-tune their projects with adjustments or filters, and personalize their creations with audio from a customizable library.

To simplify your content creation, use our formats that automatically set your canvas size for social media and other popular video resolutions.

Effectively arrange and edit multiple elements within your videos, offering precise control over the editing process. Easily split, trim, and replace. Lastly, make it pop by adding audio files to the composition.

Creating templates with placeholders for your users is just as easy. Simply select an element, click ‘Placeholder’, and decide which elements can be edited.

To integrate, browse our Guide. Try the video editor live demo yourself. This showcase contains templates, audio and video examples for you to try.

Keep Designs in Focus on iOS

Our new Camera Zoom Limits make editing a design easier. Your page stays in focus to avoid accidental scrolling outside the design. The zoom level is set within a minimum and maximum range, ensuring a practical, usable view at all times. When you select an element in your design, it stays in focus when opening adjustments or other inspectors. It allows you to immediately see changes made to the selected element. This improvement is available for iOS and Android, and can be tested in our Design Editor Demo on the App Store and Google Play.

Ensure Color Purity in Print

Our newly introduced Underlayer API guarantees the preservation of color purity whenever you export designs using our CE.SDK for print. This solution specifically addresses the challenge of maintaining the richness and vibrancy of colors, irrespective of the color of the canvas, which could range from apparel to paper.

When you’re ready to export your design, this feature adds a special ‘underbase’ layer, underneath your design. This layer, typically a white or specific primer coat, makes sure the final printed colors match your original vision perfectly.

Very soon: Integrate Short-Form Video Creation

Video remains key for attracting, engaging and retaining audiences, especially on mobile. Creating a video editor can be tough, thus we’re thrilled to soon release our turnkey solution for mobile video content creation.

Combined with our new Camera SDK, users can seamlessly blend video, audio, text, and graphics on a sleek timeline. It includes features like voiceover, zoom, tap to record, and the popular split screen modes for reactions and duets. You may recognize these from Instagram or TikTok!

Last chance: Secure your waitlist spot to our Video Content Creation Release. You will also receive access to our TestFlight app.
Registration is only open until March 6, 2024.

? Gain Access to our Video Content Creation Release
? Download Feature Exposé instantly (PDF)

We can’t wait to hear your feedback!

Thanks for reading. Join over 3000 specialists with powerful apps, and subscribe to our newsletter. We keep you in the loop with brand-new features and updates.

How To Build a Video Editor With Wasm in React

Antonello — Mon, 16 Jan 2023 16:31:57 GMT

You may think that video processing can only be performed on a server, but this is not true. Thanks to WebAssembly (Wasm), you can run high-performance code written in C or C++ in your browser. This opens up a lot of possibilities and gives you the ability to build a client-side video editor. Let’s now learn how to create a Wasm-based video editor in React.

Follow this tutorial and learn how to build the application below:

This React video editor allows users to upload a video, select a portion of it, convert it to GIF, and download the resulting image file – all of this in your browser.

What is WebAssembly?

WebAssembly (also called Wasm) is a new type of code that modern web browsers can run and understand. Specifically, Wasm provides new functionality to web development and brings significant performance benefits. This applies to both frontend and backend, since Wasm can be used by both clients and servers.

Wasm code should not be written by hand. This is because Wasm is a binary instruction format. So, Wasm is designed to be a compilation target for source languages such as C, C++, Rust, and others. Learn more about Wasm on the WebAssembly MDN Web Docs page.

Wasm provides a way to run code written in several languages on the Web at near-native speed. This means that WebAssembly forms can be easily imported and executed by a Web client or server application. In other words, you can use WebAssembly functions via JavaScript and achieve results that were not previously possible on a browser, especially in terms of performance.

What is `ffmpeg.wasm`?

As stated on the GitHub page of the project, ffmpeg.wasm is a WebAssembly and JavaScript port of FFmpeg. If you are not familiar with it, FFmpeg is an open-source software suite that includes several libraries and programs for managing audio, video, streams, and other media files. All of these tools can be invoked and executed via the ffmpeg command-line instruction.

Therefore, ffmpeg.wasm enables video and audio processing in JavaScript-based web applications. In detail, it enables video and audio recording, format transcoding, video and audio editing, and video scaling. Even though it is a WebAssembly-based library, you can use it in your JavaScript code just like any other npm library. This is the power of Wasm.

Since it transpiles to Wasm, you can take advantage of ffmpeg.wasm directly in your browser without performance concerns. This means that ffmpeg.wasm opens the door to client-side audio and video processing. Let’s now learn how to use ffmpeg.wasm to build a client-side video editor in React!

Building a Video Editor in React with WASM

In this step-by-step tutorial, you will learn how to build a Wasm-based video editor in React with ffmpeg.wasm. This React video editor application will allow you to upload a video, trim it, and convert it to GIF in the browser, without using any backend functionality or external API.

Clone the GitHub repository that supports the tutorial and try the video editor application by launching the following commands:

git clone https://github.com/Tonel/video-editor-wasm-react
cd video-editor-wasm-react
npm install
npm run start

Let’s waste no more time and see how to build a video editor application in React.

Prerequisites

This is the list of libraries the video editor application you are about to build depends on:

Node.js and npm 8+ and higher
React 18.2+
[ffmpeg.wasm](https://github.com/ffmpegwasm/ffmpeg.wasm)
[antd](https://www.npmjs.com/package/antd) >= 4.3
[video-react](https://www.npmjs.com/package/video-react) >= 0.15

antd is one of the most popular UI libraries for React. In this tutorial, its [Slider](https://ant.design/components/slider/) component will be used to implement the video cutting feature. So, any other UI library including a slider component with a range option will do.

video-react is one of the most advanced and reliable HTML5 video players for React. You can replace it with any other React video player library.

Initializing a React Project

Let’s initialize a new Create React App React project called video-editor-wasm-react with the command below:

npx create-react-app video-editor-wasm-react

Your video-editor-wasm-react directory should now contain the following files:

video-editor-wasm-react
├── README.md
├── node_modules
├── package.json
├── .gitignore
├── public
│   ├── favicon.ico
│   ├── index.html
│   ├── logo192.png
│   ├── logo512.png
│   ├── manifest.json
│   └── robots.txt
└── src
    ├── App.css
    ├── App.js
    ├── App.test.js
    ├── index.css
    ├── index.js
    ├── logo.svg
    ├── reportWebVitals.js
    └── setupTests.js

Enter the video-editor-wasm-react folder in your terminal and launch a React local server with the commands below:

cd video-editor-wasm-react
npm start

Now, visit the [http://localhost:3000/](http://localhost:3000/) page in your browser, and you should be seeing the default Create React App screen.

Before installing ffmpeg.wasm, you need to get your server ready. As stated in the official documentation, fmmpeg.wasm depends on [SharedArrayBuffer](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/SharedArrayBuffer). This means that only browsers that support SharedArrayBuffer can run ffmpeg.wasm. You can find a complete list of all browsers here.

In the most popular browsers, SharedArrayBuffer is only available to cross-origin isolated webpages. To enable this, you need to set the following headers in your server hosting the React application:

Cross-Origin-Embedder-Policy: require-corp
Cross-Origin-Opener-Policy: same-origin

In a Create-React-App application, you achieve this by creating a src/setupProxy.js file and making sure it contains the following code:

module.exports = function (app) {
    app.use(function (req, res, next) {
        res.setHeader("Cross-Origin-Opener-Policy", "same-origin")
        res.setHeader("Cross-Origin-Embedder-Policy", "require-corp")
        next()
    })
}

Your local development server is now ready to use ffmpeg.wasm!

Installing the Project’s Dependencies

It is now time to add the aforementioned required dependencies to your project.

First, install ffmpeg.wasm with the following command:

npm install @ffmpeg/ffmpeg @ffmpeg/core

Now, let’s install Antd Design:

npm install antd

Finally, it is time to install Video-React:

npm install video-react redux

Note that video-react also requires [redux](https://www.npmjs.com/package/redux) to work.

You have now everything you need to start developing your React video editor!

Uploading a Video to the Video Editor

Create a VideoUpload component as below:

// src/components/VideoUpload.js

import { Button, Upload } from 'antd';

function VideoUpload({ disabled, onChange = () => {}, onRemove = () => {} }) {
  return (
    <>
      <Upload
        disabled={disabled}
        beforeUpload={() => {
          return false;
        }}
        accept="video/*"
        onChange={(info) => {
          if (info.fileList && info.fileList.length > 0) {
            onChange(info.fileList[0].originFileObj);
          }
        }}
        showUploadList={false}
      >
        <Button>Upload Video</Button>
      </Upload>
      <Button
        danger={true}
        disabled={!disabled}
        onClick={() => {
          onRemove(undefined);
        }}
      >
        Remove
      </Button>
    </>
  );
}

export default VideoUpload;

As you can see, this component uses the Antd Design Upload component to allow users to upload a video file. Then, a “Remove” button gives users the ability to remove the uploaded video. Note that when the Upload component is enabled, the “Remove” button is disabled and vice versa. This way, users can deal with only one video at a time.

Playing a Video in React

You now need a VideoPlayer component to play the uploaded video. You can build it as below:

// src/components/VideoPlayer.js

import {
  BigPlayButton,
  ControlBar,
  LoadingSpinner,
  Player,
  PlayToggle,
} from 'video-react';
import 'video-react/dist/video-react.css';
import { useEffect, useState } from 'react';

export function VideoPlayer({
  src,
  onPlayerChange = () => {},
  onChange = () => {},
  startTime = undefined,
}) {
  const [player, setPlayer] = useState(undefined);
  const [playerState, setPlayerState] = useState(undefined);

  useEffect(() => {
    if (playerState) {
      onChange(playerState);
    }
  }, [playerState]);

  useEffect(() => {
    onPlayerChange(player);

    if (player) {
      player.subscribeToStateChange(setPlayerState);
    }
  }, [player]);

  return (
    <div className={'video-player'}>
      <Player
        ref={(player) => {
          setPlayer(player);
        }}
        startTime={startTime}
      >
        <source src={src} />
        <BigPlayButton position="center" />
        <LoadingSpinner />
        <ControlBar autoHide={false} disableDefaultControls={true}>
          <PlayToggle />
        </ControlBar>
      </Player>
    </div>
  );
}

This is a simple video-react-based video player component, which only allows playing or stop the video file received with the src prop.

Cutting a Video in React

Your goal is to allow users to select a portion of the video and watch it before converting it into GIF. Implement this with the logic below:

import { Slider } from "antd"
import { sliderValueToVideoTime } from "../utils/utils"

function VideoEditor() {
  const [sliderValues, setSliderValues] = useState([0, 100])

  // logic to handle videoFile, videoPlayer, and videoPlayerState...

  useEffect(() => {
      const min = sliderValues[0]
      // when the slider values are updated, updating the
      // video time
      if (min !== undefined && videoPlayerState && videoPlayer) {
          videoPlayer.seek(sliderValueToVideoTime(videoPlayerState.duration, min))
      }
  }, [sliderValues])

  useEffect(() => {
      if (videoPlayer && videoPlayerState) {
          // allowing users to watch only the portion of
          // the video selected by the slider
          const [min, max] = sliderValues

          const minTime = sliderValueToVideoTime(videoPlayerState.duration, min)
          const maxTime = sliderValueToVideoTime(videoPlayerState.duration, max)

          if (videoPlayerState.currentTime < minTime) {
              videoPlayer.seek(minTime)
          }
          if (videoPlayerState.currentTime > maxTime) {
              // looping logic
              videoPlayer.seek(minTime)
          }
      }
  }, [videoPlayerState])

  return (
          // other video editor components...
          <Slider
            disabled={!videoPlayerState}
            value={sliderValues}
            range={true}
            onChange={(values) => {
              setSliderValues(values)
            }}
            tooltip={{
              formatter: null,
            }}
          />
        // ...
}

This component equips users with the ability to select a portion of the uploaded video with the Antd Design Slider component and watch it in loop, before converting it into a GIF file.

Specifically, the logic here uses the sliderValueToVideoTime() function below to transform the slider values into time coordinates:

// src/utils/utils.js

export function sliderValueToVideoTime(duration, sliderValue) {
    return Math.round(duration * sliderValue / 100)
}

Note that the actual video processing slider will be performed by the next component through ffmpeg.

Converting a Video to GIF in React

To convert a video to GIF, create a VideoConversionButton component as follows:

// src/components/VideoConversionButton.js

import { Button } from 'antd';
import { fetchFile } from '@ffmpeg/ffmpeg';
import { sliderValueToVideoTime } from '../utils/utils';

function VideoConversionButton({
  videoPlayerState,
  sliderValues,
  videoFile,
  ffmpeg,
  onConversionStart = () => {},
  onConversionEnd = () => {},
  onGifCreated = () => {},
}) {
  const convertToGif = async () => {
    // starting the conversion process
    onConversionStart(true);

    const inputFileName = 'gif.mp4';
    const outputFileName = 'output.gif';

    // writing the video file to memory
    ffmpeg.FS('writeFile', inputFileName, await fetchFile(videoFile));

    const [min, max] = sliderValues;
    const minTime = sliderValueToVideoTime(videoPlayerState.duration, min);
    const maxTime = sliderValueToVideoTime(videoPlayerState.duration, max);

    // cutting the video and converting it to GIF with an FFMpeg command
    await ffmpeg.run(
      '-i',
      inputFileName,
      '-ss',
      `${minTime}`,
      '-to',
      `${maxTime}`,
      '-f',
      'gif',
      outputFileName
    );

    // reading the resulting file
    const data = ffmpeg.FS('readFile', outputFileName);

    // converting the GIF file created by FFmpeg to a valid image URL
    const gifUrl = URL.createObjectURL(
      new Blob([data.buffer], { type: 'image/gif' })
    );
    onGifCreated(gifUrl);

    // ending the conversion process
    onConversionEnd(false);
  };

  return <Button onClick={() => convertToGif()}>Convert to GIF</Button>;
}

export default VideoConversionButton;

This component uses ffmpeg.wasm to launch an ffmpeg command. This command takes care of clipping the video to the time limits defined by sliderValues and converting it to GIF. Note that all these operations are performed client-side in the browser.

In detail, the ffmpeg -ss flag defines the time from which to start reading the video file, while -to defines the end time. Then, the gif option specifies that you want to produce a GIF file. Learn more about the flags and options offered by ffmpeg here.

The resulting GIF image is stored in the output.gif memory file, loaded as a valid "image/gif" Blob, and finally converted to a valid image URL with the [URL.createObjectURL()](https://developer.mozilla.org/en-US/docs/Web/API/URL/createObjectURL_static) native function.

Putting It All Together

Now, let’s see the full code of the VideoEditor component:

// src/components/VideoEditor.js

import { createFFmpeg } from '@ffmpeg/ffmpeg';
import { useEffect, useState } from 'react';
import { Slider, Spin } from 'antd';
import { VideoPlayer } from './VideoPlayer';
import { sliderValueToVideoTime } from '../utils/utils';
import VideoUpload from './VideoUpload';
import VideoConversionButton from './VideoConversionButton';
const ffmpeg = createFFmpeg({ log: true });

function VideoEditor() {
  const [ffmpegLoaded, setFFmpegLoaded] = useState(false);
  const [videoFile, setVideoFile] = useState();
  const [videoPlayerState, setVideoPlayerState] = useState();
  const [videoPlayer, setVideoPlayer] = useState();
  const [gifUrl, setGifUrl] = useState();
  const [sliderValues, setSliderValues] = useState([0, 100]);
  const [processing, setProcessing] = useState(false);

  useEffect(() => {
    // loading ffmpeg on startup
    ffmpeg.load().then(() => {
      setFFmpegLoaded(true);
    });
  }, []);

  useEffect(() => {
    const min = sliderValues[0];
    // when the slider values are updated, updating the
    // video time
    if (min !== undefined && videoPlayerState && videoPlayer) {
      videoPlayer.seek(sliderValueToVideoTime(videoPlayerState.duration, min));
    }
  }, [sliderValues]);

  useEffect(() => {
    if (videoPlayer && videoPlayerState) {
      // allowing users to watch only the portion of
      // the video selected by the slider
      const [min, max] = sliderValues;

      const minTime = sliderValueToVideoTime(videoPlayerState.duration, min);
      const maxTime = sliderValueToVideoTime(videoPlayerState.duration, max);

      if (videoPlayerState.currentTime < minTime) {
        videoPlayer.seek(minTime);
      }
      if (videoPlayerState.currentTime > maxTime) {
        // looping logic
        videoPlayer.seek(minTime);
      }
    }
  }, [videoPlayerState]);

  useEffect(() => {
    // when the current videoFile is removed,
    // restoring the default state
    if (!videoFile) {
      setVideoPlayerState(undefined);
      setSliderValues([0, 100]);
      setVideoPlayerState(undefined);
      setGifUrl(undefined);
    }
  }, [videoFile]);

  return (
    <div>
      <Spin
        spinning={processing || !ffmpegLoaded}
        tip={!ffmpegLoaded ? 'Waiting for FFmpeg to load...' : 'Processing...'}
      >
        <div>
          {videoFile ? (
            <VideoPlayer
              src={URL.createObjectURL(videoFile)}
              onPlayerChange={(videoPlayer) => {
                setVideoPlayer(videoPlayer);
              }}
              onChange={(videoPlayerState) => {
                setVideoPlayerState(videoPlayerState);
              }}
            />
          ) : (
            <h1>Upload a video</h1>
          )}
        </div>
        <div className={'upload-div'}>
          <VideoUpload
            disabled={!!videoFile}
            onChange={(videoFile) => {
              setVideoFile(videoFile);
            }}
          />
        </div>
        <div className={'slider-div'}>
          <h3>Cut Video</h3>
          <Slider
            disabled={!videoPlayerState}
            value={sliderValues}
            range={true}
            onChange={(values) => {
              setSliderValues(values);
            }}
            tooltip={{
              formatter: null,
            }}
          />
        </div>
        <div className={'conversion-div'}>
          <VideoConversionButton
            onConversionStart={() => {
              setProcessing(true);
            }}
            onConversionEnd={() => {
              setProcessing(false);
            }}
            ffmpeg={ffmpeg}
            videoPlayerState={videoPlayerState}
            sliderValues={sliderValues}
            videoFile={videoFile}
            onGifCreated={(girUrl) => {
              setGifUrl(girUrl);
            }}
          />
        </div>
        {gifUrl && (
          <div className={'gif-div'}>
            <h3>Resulting GIF</h3>
            <img
              src={gifUrl}
              className={'gif'}
              alt={'GIF file generated in the client side'}
            />
            <a
              href={gifUrl}
              download={'test.gif'}
              className={'ant-btn ant-btn-default'}
            >
              Download
            </a>
          </div>
        )}
      </Spin>
    </div>
  );
}

export default VideoEditor;

Since ffmpeg takes time to load, you need to let users know that they need to wait a while before they can use the video editor component. Also, ffmpeg operations take time to execute. This wait logic is implemented by using the Antd Design [Spin](https://ant.design/components/spin/) component.

Also, note that by passing the log: true option to the createFFmpeg() function, ffmpeg will log useful debug info in the console. For example, after ffmpeg gets loaded, you should be able to see the following lines in the browser console:

[info] use ffmpeg.wasm v0.11.5
createFFmpeg.js:43 [info] load ffmpeg-core
createFFmpeg.js:43 [info] loading ffmpeg-core
createFFmpeg.js:43 [info] ffmpeg-core loaded

What the VideoComponent does is use all the components presented earlier to allow users to upload a video, select a portion through a slider, convert it to GIF, and download the resulting GIF file.

Et voilà! You just learned how to build a client-side video editor in React without using any backend functionality!

Commercial Alternative

VideoEditor SDK by IMG.LY provides powerful video editing features, including cropping and trimming videos in your project. You will receive staples of video editing, including straightening videos, filters, brightness, color adjustments, and more.

Conclusion

Building a client-side video processing and editing application that uses only the browser possible. With WebAssembly, you can run high-performance code written in C or C++ in JavaScript. This allows you to perform complex operations at lightning speed directly in the browser, without having to delegate the work to a server.

In this tutorial, you learned how to use ffmpeg.wasm to build a video editor in React. ffmpeg.wasm is the Wasm port of ffmpeg and enables video and audio processing and editing directly in the browser. Using it to build a web application to upload a video, cut it, and export it to GIF requires only a few lines of code, and here we have seen how to implement such a video editing application.

If your app goes beyond merely displaying video, and you want to allow your users to also edit video or create video based templates in the browser, explore our VideoEditor SDK for the Web – a performant video editing solution based on WASM and WebCodecs. Try the editor for yourself in action with our showcases.

Thanks for reading! Let us know what you think on Twitter! To stay in the loop, subscribe to our Newsletter.

CE.SDK v1.9.0 Release

Neslihan — Tue, 13 Dec 2022 08:21:50 GMT

We are happy to shine light on more new features since our CE.SDK v1.8.0 Release. To build powerful features for your application, we are excited to hear your feedback and suggestions.

CE.SDK v1.9.0 is out now, and it includes:

Video Support for Web
Video Timelines
Web Audio Support
Native iOS Platform Support
Swift Package
Common Touch Gesture Support
Apparel UI Showcase
Spot and Named Colors
More Showcases

Video Support for Web

We now support adding and editing videos in your web browser. You can apply video fills, add blocks to the scene, and combine any other block to create videos and stories with CE.SDK. For now this feature is only supported in Chromium based browsers.

Video Timelines

Video Timelines and Trimming is coming to our Studio and Design UIs. This adds complete client-side video editing in the browser to our User Interfaces.

Web Audio Support

In addition to video support, we also introduce a new block type for audio. You can use audio blocks to add audio files in MP3 and M4a formats to your scene. Like design blocks, you can add and modify them via the Block APIs and attach them to a scene. Note that audio blocks have no visual representation on the canvas, but only in the timeline.

We dedicate our first implementation to the web. However, native mobile implementations will follow soon.

Native iOS Support

With this feature, we support developing native iOS applications with our SDK. It comes with full Swift API support and many integration examples.

Additionally, CE.SDK v1.9.0 comes with Common Touch Gesture to improve the editing experience on touchpads and mobile devices. That includes gestures like pinch, spread, drag, rotate, tap, and double tap.

Spot and Named Colors

With this release we are extending our support for print use cases by adding spot colors which enable the use of custom color mixes in the printing process. Consult the guides on creating spot colors for more information.

More Showcases

To explore CE.SDK capabilities firsthand, and to look into cases that might be comparable to yours, we provide more showcases on our website.

Easily build a

Mobile UI
Photo UI for easy photo editing
Post & Greeting Card UI to provide templates and easy adaption for print
Apparel UI to let users create fantastic apparel designs
Apparel UI Mobile.

Thanks for reading! Let us know what you think on Twitter! To stay in the loop, subscribe to our Newsletter.

How To Build a Video Player in JavaScript

Paul — Tue, 27 Sep 2022 17:02:49 GMT

Probably a decade ago, it was impossible to play video or audio inside your browser without any third-party services such as Flash or Silverlight. You needed to install a plugin and only play your media while using it, so as you can see, it was very uncomfortable, with low speed and high delays. Nowadays, we have JavaScript with the new version of HTML5. With these new technologies and tools, we can stream our video much quicker, easier, and without any latency. To do it, you will need only a simple tag and give a link to your video stored on your computer. The simple attribute controls will give you a default video player built into the browser. It’s elementary and doesn’t have many features, so if you want to stream a video on your website in a more professional way using your video player, you’ll need to use JavaScript. And we’ll teach you how to do it in this article!

By the end of this guide, you’ll have something similar to this, so if you’re excited, keep reading and follow this tutorial step-by-step!

See the Pen How to build a video player in Javascript by Paul Knulst (@paulknulst) on CodePen.

Setting Up the Project

Assuming you are working with UNIX system (or have Git BASH on Windows) you can create all three files that are necessary to build a video player in JavaScript with this command:

mkdir video-player
cd video-player
touch index.html script.js style.css

To add a simple video player to our application, we have to add the following code to our index.html:

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <title>How to build a video player in Javascript</title>
        <link rel="stylesheet" href="style.css" />
    </head>
    <body>
        <div class="player">
            <video class="video" controls>
                <source
                    src="<https://ftp.f1nalboss.de/data/imgly/videoplayer/testvideo.mp4>"
                    type="video/mp4"
                />
                <source
                    src="<https://ftp.f1nalboss.de/data/imgly/videoplayer/testvideo.mp4>"
                    type="video/webm"
                />
                <p>No HTML5 video supported</p>
            </video>
        </div>
        <script src="script.js"></script>
    </body>
</html>

Within the above code, the <video> element uses a remote video from my FTP. You can either use my default video or add any video from your local computer by adjusting the src attribute. HTML5 specification supports three different video formats, and the snippet used multiple <source> tags to make the videos available in MP4 and WebM. Furthermore, the <p> tag is used to display pre-defined content to user agents that do not support the video element.

The HTML5 <video> tag accepts several native attributes. For example, the controls attribute displays the standard player controls when added or set to true. You can find out more about all video attributes here.

Before continuing, you should apply all styles that are needed within this tutorial by populating your style.css with all styles from this CodePen. Save and open your index.html and load it within the browser to see the embedded video player as seen below:

Customize the Video Player With JavaScript

To customize the video player, you first have to remove the controls attribute that displays Play, Pause, Volume, etc. because you will implement your own custom controls within this tutorial. Now, check your browser, you will recognize that the controls are gone, and you cannot play the video anymore.

Add Play and Pause

To enable play and pause the video, you have to add a new button to the index.html:

<div class="controls">
    <button
            class="controls__btn playPauseBtn"
            title="Toggle Play"
            >
        ►
    </button>
</div>

Afterward, open your script.js and enable functionality by adding this code:

const videoContainer = document.querySelector(".video-container");
const playPauseBtn = document.querySelector(".playPauseBtn");
function togglePlay() {
  if (videoContainer.paused || videoContainer.ended) {
    videoContainer.play();
  } else {
    videoContainer.pause();
  }
}
function updatePlayBtn() {
  playPauseBtn.innerHTML = videoContainer.paused ? "►" : "❚❚";
}
playPauseBtn.addEventListener("click", togglePlay);
videoContainer.addEventListener("click", togglePlay);
videoContainer.addEventListener("play", updatePlayBtn);
videoContainer.addEventListener("pause", updatePlayBtn);

Within this javascript code, first, the video-container element and the playPauseBtn is selected (Line 1 and 2). Then two functions are defined: togglePlay() and updatePlayBtn(). togglePlay() is used to stop and start the video based on its actual state. updatePlayBtn is used to switch between the Icon which is shown within the video player.

In the last part of the snippet, a click event listener is added to the playPauseBtn that executes the togglePlay() function. Next, three click event listeners are added to the videoContainer that executes togglePlay() on mouse click and also executes updatePlayBtn based on the video’s state.

Now you can reload your index.html and should be able to play and pause the video by either clicking the video or the button:

Add Progress Bar

Next, a progress bar will be implemented to show the current timestamp of the video when played. First, add a div tag to the index.html which will act as the progress bar:

<div class="controls">
    <div class="progress">
    	<div class="progress__filled"></div>
    </div>
    // ..
</div>

Then open the script.js and add the following snippet:

const progress = document.querySelector(".progress");
const progressBar = document.querySelector(".progress__filled");

function handleProgress() {
  const progressPercentage = (videoContainer.currentTime / videoContainer.duration) * 100;
  progressBar.style.flexBasis = `${progressPercentage}%`;
}

function jump(e) {
  const position = (e.offsetX / progress.offsetWidth) * videoContainer.duration;
  videoContainer.currentTime = position;
}

videoContainer.addEventListener("timeupdate", handleProgress);
progress.addEventListener("click", jump);
let mousedown = false;
progress.addEventListener("mousedown", () => (mousedown = true));
progress.addEventListener("mousemove", (e) => mousedown && jump(e));
progress.addEventListener("mouseup", () => (mousedown = false));

In this snippet, the progress container and the progress__filled element will be selected, and two functions will be added: handleProgress() and jump(e). handleProgress() will be responsible for updating the progress bar. The jump(e) function is used to enable clicking on the progress bar to jump to the position within the video.

The last part contains all event listeners that are needed for the progress bar. The handleProgress() will be called on every timeupdate event. Also, clicking anywhere on the progress bar will call the jump(e) method and the video will jump to the position. Additionally, mousedown, mousemove, and mouseup will be used to enable sliding through the video while holding the mouse button down on the progress bar.

Closing Notes

Congratulations! If you followed the tutorial, you learned how to implement your own video player and add custom controls using JavaScript. Now, you can use my CodePen and start implementing more controls like volume control, keyboard shortcuts, or skip controls to build your own customized video player.

If your app goes beyond merely displaying video, and you want to allow your users to also edit video or create video based templates in the browser, check out our Video Editor for Web!

How to Crop and Trim Videos in Flutter

Michael H. — Tue, 27 Sep 2022 08:45:16 GMT

If you are looking for a package that crops and trims videos in Flutter, you must have already come across the video_trimmer Flutter package. This package can trim videos but does not provide video cropping (at least not out-of-the-box). In fact, none of the packages on pub.dev, as of today, allow cropping a video in Flutter. If you have dug deeper, you might have come across FFmpeg — a powerful video editing command line tool, that is not the easiest to get started with. See the Ultimate Guide to FFmpeg for help.In this article we will use the FFmpeg library to crop and trim a video in a Flutter project.

Here is a list of packages that we will be using; ffmpeg_kit_flutter package for cropping and trimming videos, the path_provider package to get the path to the application or external directory where the video files will be stored, and the video_player package to play the video preview.

This article will not cover building any UI for cropping and trimming. But, it will discuss in brief how to crop the video using the video_trimmer library as well. If you want to package this workflow for production, check out our guide on running FFmpeg inside a Docker container. Also, you can try out the code used in this article from this GitHub repository.

Get Started

The end result of this tutorial will be a simple app that would look like the following screenshot.

When you tap the Save Video, the preview will refresh with the cropped and trimmed video replacing the original video. Follow the instructions in this article, and you will be able to develop a similar Flutter app.

First, let us start by adding dependencies to a new Flutter project.

Add Dependencies

In your project’s pubspec.yaml file add the following 3 dependencies.

dependencies:
  ...
  ffmpeg_kit_flutter: ^4.5.1
  path_provider: ^2.0.11
  video_player: ^2.4.6

Then, execute flutter pub get command from the project folder root.

Set Minimum SDK Version and Platform Version

The ffmpeg_kit_flutter plugin runs on Android SDK API level 24+ and iOS SDK 12.1+. Therefore, modify the module level build.gradle file to declare the minSdkVersion.

android {
  defaultConfig {
    ...
    minSdkVersion 24
    ...
  }
}

Then, modify the Podfile to declare the minimum global platform.

# Uncomment this line to define a global platform for your project
platform :ios, '12.1'

Add a Video Asset

For simplicity, we will be using a video asset instead of implementing a file picker. Choose a video file you would like to work with or download this sample video file. Next, copy the video file to a new directory named assets at the root of your project folder.

And then reference the video file from the pubspec.yaml file.

flutter:
  assets:
    - assets/file1.mp4

Execute flutter pub get again.

Having added the required dependencies, let us move on to coding.

Implement Video Crop and Trim

Replace the code in your main.dart file with the following code in the code block. This will be our starter code.

import 'package:flutter/material.dart';

void main() {
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);

  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Crop and Trim Demo',
      home: const MyHomePage(),
    );
  }
}

class MyHomePage extends StatefulWidget {
  const MyHomePage({Key? key}) : super(key: key);

  @override
  State<MyHomePage> createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("Flutter Crop and Trim"),
      ),
      body: Column(
        children: [

        ],
      ),
    );
  }
}

Initialize the Input Player

Add the following code to the _MyHomePageState class.

import 'dart:io';

...
import 'package:flutter/services.dart';
import 'package:path_provider/path_provider.dart';
import 'package:video_player/video_player.dart';

...

class _MyHomePageState extends State<MyHomePage> {
  late String inputPath;
  VideoPlayerController? controller;
  String outputPath = "";

  ...

  @override
  void initState() {
    super.initState();
    copyVideoToApplicationDirectory().then((path) async {
      inputPath = path;
      controller = VideoPlayerController.file(File(inputPath));
      await controller?.initialize();
      await controller?.play();
      setState(() {});
      outputPath = await getOutputPath();
    });
  }

  ///Copy input file to ApplicationStorage Directory
  ///returns path to copied video
  Future<String> copyVideoToApplicationDirectory() async {
    const filename = "file1.mp4";
    var bytes = await rootBundle.load("assets/file1.mp4");
    String dir = (await getApplicationDocumentsDirectory()).path;
    writeToFile(bytes, '$dir/$filename');

    return '$dir/$filename';
  }

  ///Write to Path.
  Future<void> writeToFile(ByteData data, String path) {
    final buffer = data.buffer;
    return File(path).writeAsBytes(
        buffer.asUint8List(data.offsetInBytes, data.lengthInBytes));
  }
}

The copyVideoToApplicationDirectory method is copying the video from Assets to the Application directory on the phone’s file system. The resulting path is then stored in the inputPath variable which is then supplied to the FFmpeg command. For large‑scale workloads, you can move this FFmpeg command to AWS Spot Instances; our AWS guide shows how to configure a cloud environment for scalable video processing.

Next, add the VideoPlayer widget to the Column widget.

body: Column(
  children: [
    (controller != null)
        ? AspectRatio(
        aspectRatio: controller!.value.aspectRatio,
        child: VideoPlayer(controller!))
        : const SizedBox(),
  ],
),

Run the app and the video should start playing.

In the next step, we will add the FFmpeg command, but before that add the following 2 more methods to the _MyHomePageState class.

...

import 'package:ffmpeg_kit_flutter/ffmpeg_kit.dart';
import 'package:ffmpeg_kit_flutter/log.dart';
import 'package:ffmpeg_kit_flutter/return_code.dart';

...

class _MyHomePageState extends State<MyHomePage> {
  ...

  /// Output path with a file name where the result will be stored.
  Future<String> getOutputPath() async {
    final appDirectory = Platform.isAndroid
        ? await getExternalStorageDirectory()
        : await getApplicationDocumentsDirectory();
    final externalPath = '${appDirectory?.path}/out_file.mp4';
    return externalPath;
  }

  ///Executes the FFMPEG [command]
  ///Note: Green bar on the right is a Flutter issue. <https://github.com/flutter/engine/pull/24888>
  ///Should get fixed in a 3.1.0+ stable release <https://github.com/flutter/engine/pull/24888#issuecomment-1212374010>
  Future<void> ffmpegExecute(String command) async {

    final session = await FFmpegKit.execute(command);

    final returnCode = await session.getReturnCode();
    if (ReturnCode.isSuccess(returnCode)) {

      print("Success");
      //Replace the preview video
      await controller?.pause();
      await controller?.dispose();
      controller = VideoPlayerController.file(File(outputPath));
      await controller?.initialize();
      await controller?.play();
      setState(() {});

    } else if (ReturnCode.isCancel(returnCode)) {

      print("Cancel");

    } else {

      print("Error");
      final failStackTrace = await session.getFailStackTrace();
      print(failStackTrace);
      List<Log> logs = await session.getLogs();
      for (var element in logs) {
        print(element.getMessage());
      }

    }
  }
}

The getOutputPath method provides the path where the resulting video will be saved. The outputPath will be passed to the FFmpeg command whereas the ffmpegExecute method is where the FFmpeg magic takes place.

The ffmpegExecute method expects a valid FFmpeg String command. The String command is then passed to the FFmpegKit.execute method which returns an instance of FFMpegSession . It will tell us whether our command was executed successfully or not. If it was not executed successfully, we can extract error logs from it.

FFmpeg Execute Command

Add a TextButton from where the FFmpeg command shall be sent.

TextButton(
  child: Text('Save Video'),
  onPressed: () async {
    //TODO: Call FFMPEG Execute
  },
),

Next, call the following ffmpegExecute method from the onPressed property.

ffmpegExecute('-ss 0:00:15 -to 0:00:45 -y -i $inputPath -filter:v "crop=320:150" -c:a copy $outputPath');

Run the app and tap the Save Video button. You will notice that the player is now playing the new cropped and trimmed video.

If you were able to successfully follow the instructions up till here, it is time to dig a little deeper into the FFmpeg command that we just ran earlier.

Understanding the FFmpeg Command

Because command FFmpeg is a command line tool, it expects string-only commands. For this reason, we do not have any dart Classes, Methods, or Parameters to work with that we usually get when working with a dart plugin. Let us dissect the above command line command that is helping us crop and trim a video.

Command	Description
-ss 0:00:15	Seeks to position on the input video. The trim starts from this position.
-to 0:00:45	Stops reading at the position in the input video. The trim stops at this position. The total length of the video is 0:02:05.
-y	Overwrite output files. Helpful when the Save Video button is tapped more than once.
-i $inputPath	Input file location. This is the file on which the crop and trim are applied.
-filter:v	Apply a filter to the video stream.
”crop=320:150”	Apply a crop filter from the center of the video that is 320 pixels wide and 150 pixels tall. The original dimensions of the video were 320 x 240.
-c:a copy $outputPath	Specifies the codec with which the output file must be encoded. Here, copy is a special value to indicate the stream is not to be re-encoded. The a after the colon is a stream specifier for the audio stream.

That will be either the application directory or the external directory of the application, depending on whether the app is running on iOS or Android.

You can check out the app’s code and play with it by downloading it from this GitHub Repository. This project allows you to tweak the duration of the trim and dimensions of the crop, so it has more code, but at the heart of it, it still uses the above FFmpeg command.

Cropping Using the video_trimmer Plugin

As a bonus, here is a tip on how to use the video_trimmer plugin for cropping videos.

The video_trimmer plugin also uses FFmpeg at its core and allows us to pass on an FFmpeg command while saving the video. For this reason, it is an easy task for us to apply the crop to a video using the video_trimmer plugin.

To do this, pass the following command to the saveTrimmedVideo method’s ffmpegCommand parameter as shown in the code block below. The video_trimmer package expects the customVideoFormat parameter argument when the ffmpegCommand parameter is used.

await _trimmer
    .saveTrimmedVideo(
        startValue: _startValue,
        endValue: _endValue,
        ffmpegCommand:
            '-filter:v "crop=320:150"',
        customVideoFormat: '.mp4')
    .then((value) {
  setState(() {
    _value = value;
  });
});

Limitations of this Approach

The crop that we are applying is from the center of the frame. The present command would also need starting coordinates to crop a non-center frame.

The project will need a refined UI for cropping and trimming videos to offer a complete app experience to users. The current approach is miles away from creating that experience.

But perhaps the most significant limitation is FFmpeg’s licensing. FFmpeg is available with both LGPL and GPL licenses, so you must ensure your project is compatible with those licenses. For many commercial projects, this is a non-starter. Alternatively, you can run FFmpeg on Google Cloud Platform; our GCP tutorial walks you through setup.

Commercial Alternative

VideoEditor SDK (VE.SDK) from IMG.LY provides powerful video editing features, including cropping and trimming videos in a Flutter project. You will receive staples of video editing, including straightening videos, filters, brightness, color adjustments, and more. Follow our guide to learn how to integrate IMG.LY’s video editor for Flutter into your app.

Conclusion

While still a complex topic, video manipulation is more attainable to implement on Flutter than on native Android. Nevertheless, FFmpeg is the only open-source, free-to-use option to edit videos on Flutter right now. To automate cropping and trimming across many files or build a transcoding server, see our article on building a production‑ready batch video processing server.

PE.SDK and VE.SDK 10 for Android and 11 for iOS Release

Sascha — Wed, 04 May 2022 12:46:21 GMT

We are thrilled to announce the release of PhotoEditor SDK and VideoEditor SDK 10 for Android and 11 for iOS. This new major version is packed with features and improvements.

This release is adding:

Custom Watermarks
Background Removal for Photos
Background Removal for Stickers
Custom Sticker Libraries
Giphy Integration
And More Updates for Android and iOS

Custom Watermarks

With our new support for custom watermarks, you can add your company logo or any other image to photo and video exports. You can place your watermark in either corner or the center of your photo and video. Additionally, you can specify the size of the watermark and determine its distance from the outline if you choose to place it near a corner. Your users will not be able to remove nor modify the watermark.

For more details on Custom Watermarks, take a look at our documentation for Android or iOS.

Background Removal for Photos

You have unwaveringly requested this feature: we are excited to offer the automatic removal of backgrounds for static content! Background Removal is fully running on-device and currently specializes in images containing a person only. PE.SDK enables this feature exclusively when it detects a person in the photo.

The removed background will turn transparent if your selected output supports transparency, such as PNG. In other cases, such as JPG, your background removal will be tinted black.

This feature is available on Android and iOS 15.0 and higher only. Easily enable Background Removal for Photos with our Android guide or iOS guide.

Background Removal for Stickers

A more common use case for automatic background removal is with stickers, so we’ve also added this functionality. Select a sticker including a person and tap the Remove BG button. Simple!

This feature is available on Android and iOS 15.0 and higher only. Easily enable Background Removal for Stickers with our Android documentation or iOS documentation.

Custom Sticker Libraries

We wanted to make it easier for you to provide your users with more sticker tool content. So far, you were able to create multiple sticker categories with different stickers that could either be part of your app or stored on a server. Additionally, you could enable our personal stickers feature on iOS or Android), giving your users the option to select stickers from their camera roll.

We have now added more ways to provide your users with stickers.

Android

You can now create sticker categories that do not present our sticker selection interface, but will instead load any arbitrary Fragment. That gives you complete control over the sticker selection screen, and you can use it to load and display any content. When the user selects any of your stickers, all you have to do is pass it back to the SDK with a callback. Get started with your Custom Sticker Library with our Android documentation.

iOS

You can now create sticker categories that do not present our sticker selection interface, but will instead load any arbitrary view controller that conforms to the StickerCollection protocol. That gives you complete control over the sticker selection screen, and you can use it to load and display any content. When the user selects any of your stickers, simply pass it back to the SDK using a delegate method.
Additionally, we’ve created a new StickerProviderCategory that you can pass any object conforming to the StickerProvider protocol. This category provides most of the features required to interact with sticker content providers, such as search and pagination. You can use this category to very quickly integrate any sticker service.

Find more information on Custom Sticker Libraries in the iOS documentation.

GIPHY Integration

This online database and search engine for funny GIFs and beautiful animations is a staple in many social applications. Easily integrate GIPHY into your app:

Android

Using our new Custom Sticker Library, we’ve also created an integration for GIPHY on Android. All you have to do is head over to GIPHY, create your API key, pass it to your GiphySettings and create a GiphyStickerCategoryItem. Your users will then immediately have access to all the content GIPHY has to offer.

For more details, visit our documentation on adding GIPHY for Android.

iOS

Using the new StickerProviderCategory, we added GIPHY support on iOS. All you have to do is head over to GIPHY, create your API key, and pass this to the GIPHY sticker category. Your users will then immediately have access to all the content GIPHY has to offer.

For more details, visit our documentation here.

More Updates for Android

Additionally, we have:

Increased the minimum API level for PhotoEditor SDK from 16 (Android 4) to 21 (Android 5), which ensures support for 98% of all phones in use.
Added support for headless video exporting.
Increased video playback stability.
Fixed a number of issues with degraded audio quality in videos.
And added the ability to choose a theme at runtime.

More Updates for iOS

Additionally, we have:

Increased our deployment target from iOS 9 to iOS 13.
Migrated all usage of OpenGL to Metal.
Added a better result API.
Added support for SwiftUI.
Enhanced our video export to display a progress indicator and the option to cancel the export.

How to Make Videos from Still Images with AVFoundation and Swift

Walter — Thu, 10 Feb 2022 15:35:45 GMT

Whether making a slide show or breaking up video tracks with title scenes, inserting still images into a video file can be tricky. This tutorial will show you how to convert still images into standard Quicktime video files so you can work with them further in your favorite video editor. This tutorial was created and tested with Xcode 13 and Swift 5. This tutorial will discuss two strategies:

convert each image to a separate movie and stitch them together later (this is best suited for times you want to interleave the images and other video files using some other editing workflow)
create a “blank” video and use the applyingCIFiltersWithHandler variation to overlay the images (this is best suited for times you want to make a quick slide show with no further editing)

As with most AVFoundation code, the Xcode simulator is not always the best platform for running the code. Test on an actual device if you can. A demo project with this code (and some extra goodies) can be found on GitHub.

The Problem with an Image

The basic models that are used in AVFoundation for making video files are AVAsset and AVAssetTrack. You can compose multiple tracks and assets together to make a single video file. All tracks must have some media data and a duration. Static image files don’t have a duration. This is the primary problem you have to overcome when you want to add static images to video.
Fortunately, you can use many of the same AVFoundation tools that are used for video capture and frame manipulation. However instead of using a CADisplayLink and AVPlayerItemVideoOutput or an AVCaptureDevice to provide frame buffers to save, you will create the frame buffers manually. Then you can use AVAssetWriter to convert the frame buffers into a video file.

Some items to consider before you actually generate the video file are:

What framerate to use? Because the image doesn’t have any motion, you can use a very low frame rate to create smaller file sizes. However, this might cause issues if you are interleaving it with regular video, which usually has a frame rate of 30 or 60 fps (or higher, for slow motion video)
What dimensions will the final video have? It is easy to resize an image and add padding using CoreImage or some image editing software before it becomes a video. As the image becomes a video and moves through different steps in an AVFoundation pipeline, the different classes in AVFoundation will resize or crop the images in different ways when the input dimensions and output dimension don’t match.

Writing Buffers using `AVAssetWriter`

The AVAssetWriter exists to encode media to a file on disk. Though this tutorial will use a single video input AVAssetWriter supports multiple inputs of different kinds (audio, video, metadata). It is quite similar to AVAssetExportSession. The difference is that AVAssetWriter uses multiple inputs and each input is a single track where the AVAssetExportSession takes a single AVAsset as an input. The result of both is a single file.

As indicated above, our basic strategy will be:

Create a pixel buffer that is the correct color space and size to hold the image
Render the image into the pixel buffer
Create an AVAssetWriter with a single video input
Decide how many frames will be required to create a video of the desired duration
Make a loop, and each time through the loop, append the pixel buffer
Clean up

Create the Pixel Buffer

The code below creates a CIImage from an image file. Then it creates a pixel buffer the same size as the image and uses a standard color space. Finally, a CIContext renders the image into the pixel buffer.

//create a CIImage
guard let uikitImage = UIImage(named: imageName), var staticImage = CIImage(image: uikitImage) else {
  throw ConstructionError.invalidImage //this is an error type I made up
}
//create a variable to hold the pixelBuffer
var pixelBuffer: CVPixelBuffer?
//set some standard attributes
let attrs = [kCVPixelBufferCGImageCompatibilityKey: kCFBooleanTrue,
     kCVPixelBufferCGBitmapContextCompatibilityKey: kCFBooleanTrue] as CFDictionary
//create the width and height of the buffer to match the image
let width:Int = Int(staticImage.extent.size.width)
let height:Int = Int(staticImage.extent.size.height)
//create a buffer (notice it uses an in/out parameter for the pixelBuffer variable)
CVPixelBufferCreate(kCFAllocatorDefault,
                    width,
                    height,
                    kCVPixelFormatType_32BGRA,
                    attrs,
                    &pixelBuffer)
//create a CIContext
let context = CIContext()
//use the context to render the image into the pixelBuffer
context.render(staticImage, to: pixelBuffer!)

Though we generally think of CIImage as an image, Apple is clear that it is not an image by itself. CIImage needs a context for rendering. This is where a lot of the power of CoreImage and filters and GPU rendering come from, the fact that CIImage is just the instructions for creating an image. Note: You can also use CGImage and the CoreGraphics framework to create pixel buffers. I find it easier to use the CoreImage framework.

Configure AVAssetWriter

Now with a buffer created, you can configure the AVAssetWriter. It will take several parameters as a dictionary to determine the dimensions and format of the outputs. You can either set them individually or else Apple provides presets.
One of the most important settings is the output dimension. If the output dimension matches the original image, the video file will show no distortion or letterboxing. However, if the output is smaller, it will compress the image until it fits. If the output is larger, the image will expand until its width or height matches the output size and then will letterbox. Note: if an image expands too much, it will appear grainy. The image below shows different output sizes for a 640 x 480 input image.

To create your settings for the AVAssetWriter first create a dictionary containing the different values. The example here sets an output dimension of 400 x 400 and provides for .h264 encoding.

let assetWriterSettings = [AVVideoCodecKey: AVVideoCodecType.h264, AVVideoWidthKey : 400, AVVideoHeightKey: 400] as [String : Any]

To use one of the presets, use the AVOutputSettingsAssistant. You can read about the different settings in the Apple documentation. An example to create 1080p video output would look like this:

let settingsAssistant = AVOutputSettingsAssistant(preset: .preset1920x1080)?.videoSettings

Write the pixel buffer to the video file

With the settings configured, the asset writer can loop through and append the contents of the pixel buffer to create each frame of the video. Something important to notice in the code below is that AVFoundation has a philosophy to preserve data. So, it will make copies, and it will generally not overwrite files. That is why you have to delete any old files before you can create the new AVAssetWriter.

//generate a file url to store the video. some_image.jpg becomes some_image.mov
guard let imageNameRoot = imageName.split(separator: ".").first, let outputMovieURL = FileManager.default.urls(for: .documentDirectory, in: .userDomainMask).first?.appendingPathComponent("\(imageNameRoot).mov") else {
  throw ConstructionError.invalidURL //an error i made up
}
//delete any old file
do {
  try FileManager.default.removeItem(at: outputMovieURL)
} catch {
  print("Could not remove file \(error.localizedDescription)")
}
//create an assetwriter instance
guard let assetwriter = try? AVAssetWriter(outputURL: outputMovieURL, fileType: .mov) else {
  abort()
}
//generate 1080p settings
let settingsAssistant = AVOutputSettingsAssistant(preset: .preset1920x1080)?.videoSettings
//create a single video input
let assetWriterInput = AVAssetWriterInput(mediaType: .video, outputSettings: settingsAssistant)
//create an adaptor for the pixel buffer
let assetWriterAdaptor = AVAssetWriterInputPixelBufferAdaptor(assetWriterInput: assetWriterInput, sourcePixelBufferAttributes: nil)
//add the input to the asset writer
assetwriter.add(assetWriterInput)
//begin the session
assetwriter.startWriting()
assetwriter.startSession(atSourceTime: CMTime.zero)
//determine how many frames we need to generate
let framesPerSecond = 30
//duration is the number of seconds for the final video
let totalFrames = duration * framesPerSecond
var frameCount = 0
while frameCount < totalFrames {
  if assetWriterInput.isReadyForMoreMediaData {
    let frameTime = CMTimeMake(value: Int64(frameCount), timescale: Int32(framesPerSecond))
    //append the contents of the pixelBuffer at the correct time
    assetWriterAdaptor.append(pixelBuffer!, withPresentationTime: frameTime)
    frameCount+=1
  }
}
//close everything
assetWriterInput.markAsFinished()
assetwriter.finishWriting {
  pixelBuffer = nil
  //outputMovieURL now has the video
  Logger().info("Finished video location: \(outputMovieURL)")
}
}

Now, your image has become a Quicktime video of whatever duration you specified and is ready for use as any other video file! You can now continue with the like of VideoEditor SDK to trim videos, and add filters or overlays. You might also want to combine the video with other video files to make a new creation.

Say hi to my dog! A plain video from still images

Creating a Blank Video

The previous example created a single .mov file for each of your images. The most robust way to get these images into a video with sound, transitions, etc., is to use AVMutableComposition with multiple tracks and layer instructions. However, for a quick slideshow with just a few elementary transitions, a strategy is to create a blank movie and then use AVVideoComposition with (asset: AVAsset, applyingCIFiltersWithHandler applier: @escaping (AVAsynchronousCIImageFilteringRequest) -> Void). That will let you use CIImage and CIFilter to paint each frame of the blank movie with images.

Our basic strategy for this method will be:

Create a pixel buffer that is the right color space and size and fill it with a solid color
Create an AVAssetWriter with a single video input
Decide how many frames will be required to create a video of the desired duration
Make a loop and each time through the loop append the pixel buffer
Create an AVVideoComposition to add the images to the individual frames of the video
Let AVPlayer combine the video and the composition

In the first strategy, you started by making a pixel buffer and using an AVAssetWriter to create the video file using this code:

guard let uikitImage = UIImage(named: imageName), var staticImage = CIImage(image: uikitImage) else {
  throw ConstructionError.invalidImage //this is an error type I made up
    }

However, this time, instead of using a source image, you create a CIImage that is a single color.

let staticImage = CIImage(color: bgColor).cropped(to: CGRect(x: 0, y: 0, width: 960, height: 540))

The CIImage(color:) initializer creates an image that is of infinite size and is just a single color. Using the .cropped(to:) modifier lets you make it the same size as the AVAssetWriter output so that there won’t be any letterboxing. The rest of the code is the same as before and the end result will be a video file that is just the single color.

Adding a Composition

Once the video file has been created and saved to disk, load it as an asset, then create an AVVideoComposition. This allows you to generate individual frames. The function below uses the request property of the composition. This has a CIImage representation of the current frame as well as the timestamp of when this frame will appear. The .fetchSlide(forTime:) is a helper function in the demo app that returns the appropriate CIImage for the slide to display. Then the .sourceOverCompositing filter combines the original frame image with the slide. Using a CGAffineTransform moves the slide across the screen as the video plays.

func createComposition(_ asset: AVAsset) {
  let slideshowComposition = AVVideoComposition(asset: asset) {[weak self] request in
    guard let self = self else { return }
    let slide = self.fetchSlide(forTime: request.compositionTime)
    let compose = CIFilter.sourceOverCompositing() //filter to join two images
    compose.backgroundImage = request.sourceImage
    compose.inputImage = slide?.transformed(by: CGAffineTransform(translationX: request.compositionTime.seconds * 50, y: 0))
    //always finish with the last output of the pipeline
    request.finish(with: compose.outputImage!, context: nil)
  }
  self.outputSlideshow = slideshowComposition
}

Because the creation of the video is done asynchronously, you can composite images over the original frame and add filters without the danger of impacting the final frame rate. Recall that CIFilter works as a pipeline, each CIFilter has an .outputImage and most have .inputImage and some configuration settings. Feeding the output from one filter to the input of the next will let you build complex compositions. Once a composition has been created, AVPlayer can join the original video with the composition for playback or export.

let item = AVPlayerItem(asset: self.outputMovie!)
item.videoComposition = outputSlideshow
self.player = AVPlayer(playerItem: item)

The code above might generate a video like this one.

As with the first video, the final video is a plain .mov file.

Going Further

In this tutorial, you saw two ways to convert static images into .mov files that you can then edit with any video editor. The sample project also has some code for exporting your creation as a .mov file and code for adding sound to the creation.

These are not the only ways to go about solving this problem. For example, instead of creating a blank video and overlaying the images, using a stock video of waves at the beach and overlaying the images might work better for your project. Conversely, because the initial pixel buffer is created from a CIImage, there is no reason that the CIImage cannot be the end of a long pipeline of CIFilters. This way the composition is done at the beginning, and the AVAssetWriter is the only tool needed. The best strategy is the one that makes sense to you and that works with the kinds of media you have.

Thanks for reading! We hope that you found this tutorial helpful. Feel free to reach out to us on Twitter with any questions, comments, or suggestions!

Looking to integrate video capabilities into your app? Check out our Video Editor SDK, Short Video Creation, and Camera SDK!

To stay in the loop with our latest articles and case studies, subscribe to our Newsletter.

May the Force Trim be with you: A New Feature in VE.SDK

Neslihan — Tue, 14 Dec 2021 15:01:31 GMT

It has been a fantastic year for video editing – the video composition tool and audio support enhanced our VideoEditor SDK offerings, enabling developers to bring more high-quality features right into your products and apps. Today, we deliver another feature to enhance your developer experience.

Force Trim

The VideoEditor SDK trim tool allows your users to determine the start and end frame of a video clip, and thus change the duration of their footage. Now you are also able to enforce a minimum and maximum duration of videos.

Additionally, the update allows configuring the startup behavior of your editor. Possible values are always, ifNeeded, and silent (the default).

always will always automatically present the composition tool or the trim tool after opening the editor and force your users to change the length of the video(s).
ifNeeded will only present
a) the composition tool, if your initial composition is longer than the maximum duration or shorter than the minimum duration, or
b) the trim tool, if your initial video is longer than the maximum duration.
silent will automatically trim the video to the maximum duration without opening any tool.

Find the right set-up for your use-case in our official documentation for iOS and Android. Once the trim tool is part of your subscription, you are ready to enhance your user experience.

Frameworks

Of course, our wrappers for Flutter, Cordova and React Native have been updated to support force trim.

Built to Build

Force Trim will come in handy for use cases, such as social media stories and posts, that have been popularly limited to bite size 15 or 60 seconds by widely loved apps – see TikTok or Instagram. Adopting a ready-to-use solution like VideoEditor SDK will set you straight onto your path of creating equally beautiful apps by saving you resources and streamlining your process.

A Sleek User Experience

Newly in is the interactive and animated timeline, that now elegantly adjusts to the trimming process.

Aware of how time-consuming and costly app development can be for you, our team is committed to delivering more features to enhance your developer experience. Feel free to reach out to us on Twitter with any questions, comments, or suggestions!

Thank you for reading, and happy development!

How To Add Text to Video in Swift

Walter — Fri, 15 Oct 2021 15:05:59 GMT

In this article, you will see how to use Swift and AVMutableVideoComposition to add a text overlay to a video clip. The code in this article uses Swift 5. Clone this repository for a Swift Playground with the example code.

Setting up

To access the AVFoundation and CoreImage objects, be sure to add these imports to your code

import AVFoundation
import CoreImage.CIFilterBuiltins

Importing the CIFilterBuiltins lets you use autocompletion when working with CIFilters. Otherwise, just import CoreImage. But then you will need to access the filter properties using strings.

When working with video clips and movie files, the basic starting point is the AVAsset class. This class combines all of the timed video and audio tracks that make up a movie. Additionally there may be subtitles and timed metadata or captions.

Creating a Video Composition

After you create a video composition for an asset, you can apply it to an AVPlayerItem to display on screen or to an AVAssetExportSession to write to a file. The composition for this tutorial will use the init(asset:applyingCIFiltersWithHandler:) initializer. Then you can apply CIFilters to each frame of the video.

First, load a movie file as an AVAsset using its URL.

//Fetch a URL for the movie from the bundle
let waterfallURL = Bundle.main.url(forResource: "waterfall", withExtension: "mov")
//Create an AVAsset with the url
let waterfallAsset = AVAsset(url: waterfallURL!)

Now you can create a AVMutableVideoComposition with the asset

let titleComposition = AVMutableVideoComposition(asset: waterfallAsset) {request in
//apply filters here
request.finish(with: request.sourceImage, context: nil)
}

The code above passes the video frame unaltered. The request is the current video frame. It is an AVAsynchronousCIImageFilteringRequest object. The request object has three properties:

the sourceImage which is the video frame as a CIImage
the renderSize which is the size of the video frame
compositionTime which is the timestamp of the current frame

The code in the handler will run once for each frame of the video clip.

Generating a Text Image

Because the sourceImage is a CIImage, you can use any of the over 200 CIFilter objects that Core Image provides. There are two text generator filters: CIAttributedTextImageGenerator and CITextImageGenerator. Either of these will render a string as a CIImage. This tutorial will use the Attributed Text version so you can modify the color and add a shadow.

Start by creating a shadow and then creating a dictionary of attributes to apply to the string.

let whiteShadow = NSShadow()
whiteShadow.shadowBlurRadius = 5
whiteShadow.shadowColor = UIColor.white
let attributes = [
  NSAttributedString.Key.foregroundColor : UIColor.blue,
  NSAttributedString.Key.font : UIFont(name: "Marker Felt", size: 36.0)!,
  NSAttributedString.Key.shadow : whiteShadow
]

Create the attributed string by combining the string and the attributes

let waterfallText = NSAttributedString(string: "Waterfall!", attributes: attributes)

Provide the attributed string and a scale factor to the filter to generate an image like the one shown above.

let textFilter = CIFilter.attributedTextImageGenerator()
textFilter.text = waterfallText
textFilter.scaleFactor = 4.0

The textFilter.outputImage will be the image of the rendered text with the attributes applied. The extent of the outputImage will be a rectangle that is large enough to encompass the text. The text will render on a single line, it doesn’t wrap using this method.

If you were to place the text on the video image at this point, the bottom-left of the text would be at the bottom-left of the video. Unlike UIView objects, the origin point (0,0) is at the bottom-left, not the top-left. To center the text and move it off of the bottom, you can apply a standard CGAffineTransform

let centerHorizontal = (request.renderSize.width - textFilter.outputImage!.extent.width)/2
let moveTextTransform = CGAffineTransform(translationX: centerHorizontal, y: 200)
let positionedText = textFilter.outputImage!.transformed(by: moveTextTransform)

Now finish the pipeline by composing the new text image over the original source image.

positionedText.composited(over: request.sourceImage)

All together, the original composition now becomes

let titleComposition = AVMutableVideoComposition(asset: waterfallAsset) { request in
//Create a white shadow for the text
let whiteShadow = NSShadow()
whiteShadow.shadowBlurRadius = 5
whiteShadow.shadowColor = UIColor.white
let attributes = [
  NSAttributedString.Key.foregroundColor : UIColor.blue,
  NSAttributedString.Key.font : UIFont(name: "Marker Felt", size: 36.0)!,
  NSAttributedString.Key.shadow : whiteShadow
]
//Create an Attributed String
let waterfallText = NSAttributedString(string: "Waterfall!", attributes: attributes)
//Convert attributed string to a CIImage
let textFilter = CIFilter.attributedTextImageGenerator()
textFilter.text = waterfallText
textFilter.scaleFactor = 4.0
//Center text and move 200 px from the origin
//source image is 720 x 1280
let positionedText = textFilter.outputImage!.transformed(by: CGAffineTransform(translationX: (request.renderSize.width - textFilter.outputImage!.extent.width)/2, y: 200))
//Compose text over video image
request.finish(with: positionedText.composited(over: request.sourceImage), context: nil)
}

Displaying The Finished Video

With an AVAsset and an AVMutableVideoComposition you can now combine the two into an AVPlayer to display in an AVPlayerViewController or in your own UIViewController

let waterFallItem = AVPlayerItem(asset: waterfallAsset)
waterFallItem.videoComposition = titleComposition
let player = AVPlayer(playerItem: waterFallItem)

As stated above, you can also combine the asset and the composition and write them to a new movie file using an AVAssetExportSession.

Going Further

The method in this tutorial is suitable for adding watermark or title text to videos. If you want to give users the ability to add custom text, there is more work to do. You will need to create font and color pickers as well as code to position the text in the frame.

You can use an editor such as VideoEditorSDK to allow your users to add annotations, text and filters to their clips. They can even add audio or combine clips to make a great creation.

Wrapping Up

In this article, you saw how to use AVMutableVideoComposition to add text to a video clip. Further, you saw how using an SDK such as VideoEditorSDK allows you to annotate and enhance your clips before sharing. Including typography, audio support and video composition, IMG.LY provides a comprehensive solution for mobile video editing – find the documentation here.

Looking for more video capabilities? Check out our solutions for Short Video Creation, and Camera SDK!

Thanks for reading! We hope that you found this tutorial helpful. Feel free to reach out to us on Twitter with any questions, comments, or suggestions!

Video Editor – IMG.LY Blog

Building a CapCut-Like Video Editor with CE.SDK and AI

Build this with AI in minutes

Introduction

Architecture Overview

Step 1: Project Setup

Why so many packages?

Step 2: The React Component

Step 3: Creating the Video Scene

Browser support

Step 4: The CapCut Dark Theme

Setting the base theme

Custom CSS overrides

Responsive scale

Step 5: AI Plugin Integration

The unified AiApps approach

Provider categories explained

The proxy server requirement

Background removal

Step 6: UI Customization with the Component Order API

Adding the AI button to the dock

AI options in the canvas context menu

Custom export button in the navigation bar

Step 7: Wiring Generated Audio into the Asset Library

Step 8: Custom Labels with i18n

The Complete File Structure

What We Get Out of the Box

Going to Production

1. License key

2. Proxy server

3. Disable dry run

Key Takeaways

Resources

Best Video SDKs for Mobile Applications: A Comprehensive Comparison for Developers

The Challenge: Building Video Editing Into Mobile Apps

Processing Power vs Battery Life

Device Fragmentation

User Expectations Are Higher Than Ever

Understanding Video SDK Options

1. IMG.LY CE.SDK (The Complete Solution)

Core Capabilities

Platform Support

Technical Architecture

Ideal Use Cases

Real Customer Examples

Limitations

Pricing / Licensing

Who It’s For

Why IMG.LY SDK Stands Out

2. Meishe SDK

Core Capabilities

Platform Support

Ideal Use Cases

Limitations

Pricing / Licensing

Who It’s For

How it compares to IMG.LY

3. BytePlus Video Editor SDK

Core Capabilities

Platform Support

Ideal Use Cases

Limitations

Pricing / Licensing

Who It’s For

How it compares to IMG.LY

4. Banuba Video Editor SDK

Core Capabilities

Platform Support

Ideal Use Cases

Limitations

Pricing / Licensing

Who It’s For

How it compares to IMG.LY

5. FFmpeg (via FFmpegKit)

Core Capabilities

Platform Support

Ideal Use Cases

Limitations

Pricing / Licensing

Who It’s For