I created wide.video - a free, browser-based video editor

[judu18]

Hey everyone,

I'm excited to share my project with you: https://wide.video

wide.video, a free online video editor, offers seamless creativity in your browser. Experience absolute privacy, with all processing conducted locally. No uploads, no installations. Enjoy effortless HD or 4K editing with support for modern formats including H.264, H.265, AV1, Rive, or Lottie.

No Installs Or Uploads ★ Modern Codecs & Acceleration ★ One-Click Video Composition ★ Cross-Platform ★ Unlimited Compositions ★ Unlimited Setup ★ No Logins, Fees Or Watermarks ★ Free Stock Media

https://preview.redd.it/xovktl9rtm7...bp&s=d385a16ca7b63a3e33c7ca1427ac695de69ad5a6

I can't wait to hear what you think. Feel free to ask questions, provide feedback, or share your video editing experiences.

 

[wviolet]

@judu18 What’s your front end built on?

 

[judu18]

@wviolet HTML / CSS / Typescript / WASM.

I avoid 3rd party frameworks and dependencies when possible, to maintain full control, keep it lightweight and fast.

Anything specific you wanted to know about FE?

 

[john420]

@judu18 Hello! Not comment OP but I'm interested also. I'm working in a video editor too. However, I have a lot of problem with video/gif exporting. Let me know if you're able to chat (maybe discord )

 

[judu18]

@john420 Sure, happy to have a chat either here or https://discord.gg/Q54kW97yj5 .

 

[cloudlessulfer]

@judu18 Great work. You're very talented

 

[judu18]

@cloudlessulfer Thanks @cloudlessulfer , hope the app will serve you well

 

[fritzc]

@judu18 Very cool, this looks just as good as paid editing video apps. I'm a bit overwhelmed by all the features so a beginner guide/video would be great. Keep up the good work!

 

[judu18]

@fritzc Hi @fritzc , thanks for your feedback.

I have created a few video guides on WV youtube channel https://www.youtube.com/channel/UCbVm99aIcBULnIqczmkyOsw which willl get you started.

If you can think of something specific that should be covered, please let me know. It is kind of a inception work to make video guides about the video editor in the very exact video editor

 

[dv_1096]

@judu18 Having used this for about a month now, you did well, thank you!

 

[lighthouse4031]

@judu18 no firefox support. bruh. If youre going to limit to specific browsers then it may as well be an app

 

[chainsaw1]

@lighthouse4031 Probably Firefox limiting itself by not keeping up

 

[judu18]

@chainsaw1 You are partially correct. showDirectoryPicker() API is afaik missing for security politics on FF side, while VideoEncoder API is most likely shortage on staff and delivery pace.

 

[judu18]

@lighthouse4031 Hi @lighthouse4031 , do you observe any specific issue on firefox that makes you think it is not supported?

There are a few checks WV does on startup:

- One is, checking access for FS api. FF does not provide full FS api (via showDirectoryPicker , see how https://vscode.dev/ deals with it) but the fallback to open temporary project (OPFS) is available for you. Once FF rolls out FS support, a standard FS project will be available in WV

- The other vital API missing is VideoEncoder, which WV handles and provide ffmpeg fallback. I hope they can roll it out soon

 

[cloudlight93]

@judu18 supports mkv files?

 

[judu18]

@cloudlight93 Supports mkv (and many other formats) on demux/mux

 

[esther90]

@judu18 I'm trying to make a tool that uses Webcodec's VideoEncoder API to compress/convert a submitted video file locally. The problem is that the outputted video after the encoding comes out with a fraction of a second and full of noise (no image). I've used Vanilagy's MP4 Muxer for Multiplexing. Here's my code:

  import { Muxer, ArrayBufferTarget } from "mp4-muxer";

  let files;

  function readFileAsArrayBuffer(file) {
    return new Promise((resolve, reject) => {
      const reader = new FileReader();

      reader.onload = () => {
        resolve(reader.result);
      };

      reader.onerror = () => {
        reject(reader.error);
      };

      reader.readAsArrayBuffer(file);
    });
  }

  const downloadBlob = (blob) => {
    let url = window.URL.createObjectURL(blob);
    let a = document.createElement("a");
    a.style.display = "none";
    a.href = url;
     = "video.mp4";
    document.body.appendChild(a);
    a.click();
    window.URL.revokeObjectURL(url);
  };

  async function main() {
    const videoFile = files[0];
    const arrayBuffer = await readFileAsArrayBuffer(videoFile);

    let muxer = new Muxer({
      target: new ArrayBufferTarget(),
      video: {
        codec: "avc",
        width: 1280,
        height: 720,
      },
      fastStart: "in-memory",
      firstTimestampBehavior: "offset",
    });

    const frame = new VideoFrame(arrayBuffer, {
      format: "I420",
      codedWidth: 1280,
      codedHeight: 720,
      timestamp: 0,
      duration: 0,
    });

    let encoder = new VideoEncoder({
      output: (chunk, meta) => muxer.addVideoChunk(chunk, meta),
      error: (e) => console.error(e),
    });

    encoder.configure({
      codec: "avc1.64001f",
      width: 1280,
      height: 720,
      bitrate: 2_000_000, // 2 Mbps
      framerate: 25,
    });

    encoder.encode(frame, { keyFrame: true });

    frame.close();

    await encoder.flush();
    muxer.finalize();

    let { buffer } = ;

    downloadBlob(new Blob([buffer]));
  }
a.downloadmuxer.target

Link to REPL so you can test it

I've tried different video codecs and even importing the video from a HTML Video element, but then I only got some frames of the video, not the full length.

I've already seen this thread but can't find a solution either.

 

[judu18]

@esther90 In your code you seem to miss a lot of important steps. You also seem to create

VideoFrame

from a byteArray of an original mp4 file which is missing demuxing step. Also your created frame has duration=0...

Here are the full process to handle:

1. demuxing soruce video - Consume bytes of .mp4 to produce chunked bytes of individual frames. I have no experience with

   Vanilagy's MP4 Muxer

   , but used mp4box or ffmpeg to stream frames.
2. decoding - Consume chunked frames bytes to create

   VideoFrame

3. draw/modify/process

   VideoFrames

   as desired (via
   )
4. encoding - Create

   VideoFrame

   from

5. muxing - Consume created

   VideoFrame

   and mux it into new .mp4

There are many things to handle and can go wrong. If you are not tight to

Vanilagy's MP4 Muxer

and can use

ffmpeg

, you can have ffmpeg configured to stream .mp4 frames as rgba and eventually have step 1+2 resolved by one tool, b/c rgba can be drawn to

.

I do not have a code for the full process but here are some good links which will guide you through the process. (Some of them are submitted as bugs/issues for particular tool, but works in general).

demos and links:

• demux code
• decode code
• demux+decode demo
• encode

 

[hope]

@judu18 How is yours different than existing ones?

 

[judu18]

@hope Hi @hope , very good question. To start with, there are two types of online video editors. Most are running on server side, which means your media gets uploaded to cloud and when being exported, the server does the heavy lifting. The other option is running locally, which is the case of WV.

The other difference is, most of the editors are user-friendly to the level which I see limiting for doing some (rather atomic) editing. I try to keep UI/UX balanced, sometimes for the price of reduced simplicity, so even such operations can be provided.

I keep improving and adding more features and hope to provide the most advanced online video editor available. Some advanced features currently in place: text to speech, speech synthesis, silence remover, one click composer... Looking for feedback and ideas on what is popular and will be used.