How to create a video editor that works in your browser.

This page summarizes the projects mentioned and recommended in the original post on dev.to

Our great sponsors
  • Appwrite - The Open Source Firebase alternative introduces iOS support
  • InfluxDB - Build time-series-based applications quickly and at scale.
  • Sonar - Write Clean JavaScript Code. Always.
  • ffmpeg.js

    Port of FFmpeg with Emscripten

    Recently, browser features such as SharedArrayBuffer and WebAssembly are increasing. Video and video converter ffmpeg also works in browsers.

  • Vega

    Browser-based video editing software. (by toshusai)

    You can try the demo from here. https://vega.toshusai.net/ source https://github.com/toshusai/vega

  • Appwrite

    Appwrite - The Open Source Firebase alternative introduces iOS support . Appwrite is an open source backend server that helps you build native iOS applications much faster with realtime APIs for authentication, databases, files storage, cloud functions and much more!

  • three.js

    JavaScript 3D Library.

    So, convert all the images/videos to image sequence once and pass them to ffmpeg. used three.js for the renderer. Three.js can handle image as Texture, also video as VideoTexture.

  • ccapture.js

    A library to capture canvas-based animations at a fixed framerate

    The image capture step uses ccapture to ensure that the playback frame is converted to an image. All frame images to webm video.

  • Nuxt.js

    Nuxt is an intuitive and extendable way to create type-safe, performant and production-grade full-stack web apps and websites with Vue 3. [Moved to: https://github.com/nuxt/nuxt]

    Nuxt.js

  • Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

    Vue.js

  • ffmpeg.wasm

    FFmpeg for browser and node, powered by WebAssembly

  • InfluxDB

    Build time-series-based applications quickly and at scale.. InfluxDB is the Time Series Platform where developers build real-time applications for analytics, IoT and cloud-native services. Easy to start, it is available in the cloud or on-premises.

  • webm-writer-js

    JavaScript-based WebM video encoder for Google Chrome

    WebM video encoder

  • wavesurfer.js

    Navigable waveform built on Web Audio and Canvas

    wavesufer.js

  • RictyDiminished

    Ricty Diminished --- fonts for programming

    RictyDimished

  • spectrum-css-workflow-icons

    Spectrum CSS Workflow Icons

  • spectrum-vue

    Adobe Spectrum UI Components for Vue.

    I also created a UI components to use for this. If you like / are interested, check this out too. https://github.com/toshusai/spectrum-vue

  • spectrum-css

    The standard CSS implementation of the Spectrum design language.

    Spectrum CSS

  • docsify

    🃏 A magical documentation site generator.

    Docsify

  • Sonar

    Write Clean JavaScript Code. Always.. Sonar helps you commit clean code every time. With over 300 unique rules to find JavaScript bugs, code smells & vulnerabilities, Sonar finds the issues while you focus on the work.

NOTE: The number of mentions on this list indicates mentions on common posts plus user suggested alternatives. Hence, a higher number means a more popular project.

Suggest a related project

Related posts