OpenVideo-AI-Editor-for-TikTok-Shorts
OpenVideo
A high-performance video rendering and processing library for the web, built with WebCodecs and PixiJS.
Official Editors
The editor has been removed from this core repository and moved to dedicated repositories. We now offer two official, open-source video editors built on top of OpenVideo:
-
React Video Editor: GitHub Repository Live Demo -
Vue Video Editor: GitHub Repository Live Demo
Features
- Browser-Based Rendering: Leverages modern WebCodecs for efficient video encoding and decoding directly in the browser.
- Advanced Composition: Powered by PixiJS for complex multi-track layering, transforms, and real-time previews.
- Universal Clip Support: Built-in support for Video, Audio, Image, Text, and Captions.
- Dynamic Effects & Transitions: Extensible GLSL-based effects (Chromakey, etc.) and transitions.
- JSON Serialization: Full project state can be serialized to and from JSON for easy persistence and cloud rendering.
- Low Latency: Optimized for interactive video editing experiences.
Documentation
Comprehensive documentation is available at docs.openvideo.dev.
Installation
npm install openvideo
Quick Start
Basic Composition
import { Studio, Video } from 'openvideo';
// 1. Initialize the Studio (Project State & Preview)
const studio = new Studio({
width: 1920,
height: 1080,
fps: 30,
canvas: document.getElementById('preview-canvas') as HTMLCanvasElement,
spacing: 20
});
// 2. Load and add a Video Clip
const video = await Video.fromUrl('https://example.com/video.mp4');
await studio.addClip(video);
// 3. Start Preview
studio.play();
Core Components
Studio: Manages the project state, including tracks, clips, and timeline configuration.Compositor: The rendering engine that handles playback, seeking, and final export using WebCodecs.Clips: Specialized objects for different media types (Video,Audio,Text,Image,Caption, etc.).JsonSerialization: Utilities to convert your entire project into a portable JSON format.
Technology Stack
- WebCodecs: For ultra-fast, hardware-accelerated video processing.
- PixiJS: For a robust and performant 2D/3D rendering engine.
- wrapbox: Internal utility for low-level MP4 box manipulation and muxing.
Contact
For inquiries, support, or custom solutions, reach out to us at hello@openvideo.dev.
License
See LICENSE.