DOCSEARCHbyAlgolia
Submit Docs

trykimu/videoeditor

repository·main·Indexed 24 days ago

https://github.com/trykimu/videoeditor

An AI-powered open-source video editor featuring multi-track editing, real-time preview, and a 'Vibe AI Assistant'. The project utilizes a FastAPI backend, a Vite-powered frontend, and Remotion for video rendering, with authentication handled by BetterAuth and AI features powered by Gemini.

Tokens
5.2K
Snippets
18
Records
30
Agent score
80%

What's inside videoeditor

  1. Provide source code access for remote network users

    main
    If your software interacts with users remotely through a computer network (such as a web application), the AGPL requires that you provide a way for users to obtain the source code. A common implementation is to include a "Source" link in the application interface that leads users to an archive of the code.

  2. Apply GNU AGPLv3 notices to new programs

    main

    To distribute a new program under the GNU Affero General Public License (AGPL), you should attach specific notices to the start of each source file. This effectively states the exclusion of warranty and provides a pointer to the full license. Each file should include at least a copyright line and a pointer to the full notice. Additionally, you should include contact information via electronic and paper mail.

    Open-Source Video Editor
Copyright (C) 2025 Kimu Team

This program is free software: you can redistribute it and/or modify
it under the terms of the GNU Affero General Public License as published by
the Free Software Foundation, either version 3 of the License, or
(at your option) any later version.

This program is distributed in the hope that it will be useful,
but WITHOUT ANY WARRANTY; without even the implied warranty of
MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
GNU Affero General Public License for more details.

You should have received a copy of the GNU Affero General Public License
along with this program.  If not, see <http://www.gnu.org/licenses/>.

  3. Deploy to production using Docker

    main

    In production, the entire stack runs in Docker behind an Nginx proxy. Nginx handles routing for the backend, the video renderer, and the frontend. By default, it listens on ports 80 (redirecting to 443) and 443.

    Nginx Routing:

    • /backend/* → FastAPI
    • /renderer/* → Renderer (video rendering)
    • /* → Frontend (React Router SSR)

    Deployment Commands:

    Standard deployment:

    docker compose up -d

    Deployment with a custom domain:

    PROD_DOMAIN=yourdomain.com docker compose up -d

  4. Set up the backend development environment

    main

    To set up the backend, use uv to synchronize all dependency groups and install the pre-commit hooks. This ensures the environment is consistent and code quality checks are active.

    uv sync --all-groups
uv run pre-commit install

  6. Set up local development environment

    main

    To run the video editor locally, you need to install dependencies for both the frontend/renderer (via pnpm) and the backend (via uv). The development setup involves running four distinct processes: a Dockerized Postgres instance, a FastAPI backend, a video renderer, and a Vite-powered frontend. Vite handles proxying requests to the backend and renderer automatically.

    Requirements:

    • Node.js 20+
    • Python 3.12+
    • pnpm
    • Docker (for postgres only)

    Proxy Routing (via Vite):

    • /backend/* → FastAPI at :3000
    • /renderer/* → Renderer at :8000
    • /* → React Router SSR (Vite)

    Access the application at http://localhost:5173.

    # Install dependencies
pnpm i
cd backend && uv sync && cd ..

# 1. Start postgres
docker compose -f docker-compose.dev.yml up -d

# 2. Start FastAPI  (terminal 1)
cd backend && uv run uvicorn main:app --reload --port 3000

# 3. Start renderer  (terminal 2)
pnpm dlx tsx app/videorender/videorender.ts

# 4. Start frontend  (terminal 3)
pnpm dev

  7. Configure environment variables

    main

    Create a .env file by copying .env.example. The following configuration categories are required or optional:

    Database

    • DATABASE_URL: PostgreSQL connection string. Use local Docker URL for dev/self-hosted, or Supabase Session Pooler for cloud.
    • DATABASE_SSL: Set to true for Supabase or remote DBs requiring SSL. Omit for local/Docker Postgres.

    Authentication (BetterAuth)

    • BETTER_AUTH_SECRET: A random secret for signing sessions. Generate using openssl rand -hex 32.
    • BETTER_AUTH_URL: The public URL of the app (e.g., http://localhost:5173 for dev).
    • GOOGLE_CLIENT_ID: Google OAuth client ID.
    • GOOGLE_CLIENT_SECRET: Google OAuth client secret.

    AI Features

    • GEMINI_API_KEY: Required for AI-powered video editing features.
    # Local/Docker Postgres (dev or self-hosted prod):
DATABASE_URL=postgresql://videoeditor:videoeditor@localhost:5432/videoeditor

# — OR — Supabase Session Pooler (cloud):
DATABASE_URL=postgresql://postgres.REF:password@aws-0-REGION.pooler.supabase.com:5432/postgres
DATABASE_SSL=true   # required for Supabase; omit for local/Docker Postgres

# BetterAuth
BETTER_AUTH_SECRET=   # generate with: openssl rand -hex 32
BETTER_AUTH_URL=https://yourdomain.com   # http://localhost:5173 for dev

# Google OAuth
GOOGLE_CLIENT_ID=your_google_client_id
GOOGLE_CLIENT_SECRET=your_google_client_secret

# AI Features (optional)
GEMINI_API_KEY=your_gemini_api_key

  8. Configure backend environment variables

    main
    The application uses python-dotenv to load environment variables from a .env file located two levels up from backend/main.py. Ensure your .env file is correctly placed to allow the application to load necessary configurations before the routes are imported.

  9. Configure BetterAuth environment variables

    main

    To successfully initialize the auth instance, the following environment variables must be set:

    VariableDescription
    DATABASE_URLPostgreSQL connection string
    DATABASE_SSLSet to "true" to enable SSL (with rejectUnauthorized: false)
    BETTER_AUTH_URLThe base URL for the authentication service
    BETTER_AUTH_SECRETThe secret key for BetterAuth
    GOOGLE_CLIENT_IDGoogle OAuth Client ID
    GOOGLE_CLIENT_SECRETGoogle OAuth Client Secret

  10. Configure Single Page Application (SPA) mode in react-router.config.ts

    main

    By default, the project uses Server-Side Rendering (SSR). To switch the application to Single Page Application (SPA) mode, set the ssr option to false in the react-router.config.ts file.

    import type { Config } from "@react-router/dev/config";

export default {
  // Config options...
  // Server-side render by default, to enable SPA mode set this to `false`
  ssr: false,
} satisfies Config;

  11. Configure Nginx for SSL and reverse proxying

    main

    The nginx service acts as the entry point, handling traffic on ports 80 and 443. It requires a local nginx.conf and a mounted directory for SSL certificates (e.g., from Let's Encrypt). It depends on the health of the redis, frontend, backend, and fastapi services.

    nginx:
    image: nginx:alpine
    container_name: videoeditor-nginx
    ports:
      - "80:80"
      - "443:443"
    volumes:
      - ./nginx.conf:/etc/nginx/nginx.conf
      - /etc/letsencrypt:/etc/letsencrypt:ro

  12. Configure the backend service resource limits

    main

    The backend service performs video stitching using Remotion and FFmpeg. To prevent SIGKILL errors during 1080p or 4K video processing, ensure the container has sufficient memory headroom. The current configuration sets a memory limit of 4GB and a shared memory size of 2GB.

    backend:
    # ...
    mem_limit: 4g
    memswap_limit: 4g
    shm_size: 2g