← Back to Blog

How I Built Dockra: AI Video Production in the Browser

Ihioha Bright•Jan 16, 2024•8 min read

Building Dockra has been one of the most challenging and rewarding experiences of my tech journey. What started as a side project to solve my own video editing pain points has evolved into a full-featured AI video production platform. In this post, I'll share the technical decisions, challenges, and lessons learned.

The Problem

Professional video editing requires significant expertise and expensive software. Even simple tasks like scene detection, color correction, and transitions require hours of manual work. I wanted to democratize this process using AI.

The Solution: Dockra

Dockra is an AI director that automates video editing. It uses machine learning to:

  • Detect scenes with 95% accuracy using computer vision
  • Extract semantic DNA - understanding the content of your video
  • Suggest edits - automatically recommending transitions, cuts, and effects
  • Apply changes - all processed in the browser with zero-latency inference

Technical Stack

The frontend is built with React for UI, Next.js for performance, and Tailwind CSS for styling. The real magic happens with:

  • TensorFlow.js - Running ML models in the browser
  • Canvas API - Manipulating video frames
  • WebGL - GPU acceleration for processing
  • Web Workers - Off-main-thread processing to keep the UI responsive

Building the CloneEngine

The core innovation is our CloneEngine, which detects similar scenes across a video. This is crucial for creating consistent edits. We trained it on thousands of video clips and achieved 95% accuracy in detecting when scenes repeat or transition.

The challenge: Processing video frames efficiently in the browser without blocking the UI. Solution: Web Workers and batching frames for parallel processing.

Key Learnings

  • Start with the user - I built this because I needed it, not because I thought it would be cool
  • Browser tech is powerful - You don't always need a backend. TensorFlow.js + Canvas + WebGL can do amazing things
  • Performance matters - Users will abandon your app if it's slow. Profile early, optimize often
  • Iterate quickly - MVP in 3 months, iterate based on feedback

What's Next?

We're working on v2 which includes support for audio processing, advanced color grading, and collaborative editing. The goal is to make professional video production accessible to everyone.

Try Dockra: dockra.cloud

← Back to Blog