luttje/videobrew

Create videos using any web technologies. Animate a web page with your favorite web framework and have Videobrew render it to a video.

📼 Videobrew

Create videos using any web technologies (like Svelte, Vue and React) or just plain old HTML, CSS and Javascript. Animate your web page and have Videobrew render it to a video.

---

🚧 Work in progress

This project is a work in progress. If you have any questions, please open an issue.

---

🚀 Quickstart

Start composing your videos with code!

---

Install the CLI

$ npm i -g @videobrew/cli

---

Create your video app

Let's build the webpack example Video App:

$ cd examples/webpack
$ npm run build

The webpack example video app is built to dist/

---

Preview your video

See your video app in action by letting Videobrew know where it is:

$ videobrew preview dist/

Open the editor in your browser @ http://localhost:8087

---

Render your video

$ videobrew render dist/ my-video.mp4

---

Done 🎉

Watch 📼 the video that Videobrew rendered

---

Next Steps

Check out the 🧪 Example Video Apps to see how your favorite web technologies work with Videobrew.

Read the 📖 Documentation to learn how Videobrew works and how to start coding your own video

---

🧪 Example Video Apps

Example	Description	Uses @videobrew/client
Zero Dependencies	Just plain old HTML, CSS and Javascript.
Local Installation	Shows how to install and use Videobrew with --save-dev instead of globally with -g.
Sveltekit (wip)	A Sveltekit video app example.	✔
Webpack + TypeScript	Use Webpack and TypeScript to make your video app.	✔

---

😍 Special Thanks

Videobrew wouldn't be here without these awesome projects: Playwright, FFmpeg, Chalk, Prompts, TypeScript, TailwindCSS, Vite, Svelte and more!

---

License

Videobrew - Create videos using any web technologies.

Copyright (C) 2023 Luttje

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.

A copy of the GNU Affero General Public License can be found here. The full license text can also be found on https://www.gnu.org/licenses/.

Third Party Licenses

Licenses of third parties we are directly depending on can be found here. This file was automatically generated with license-checker-rseidelsohn upon running npm run build.

videobrew's Issues

Video wont render

Following all steps in the getting started of the readme works, up until:

$ videobrew render dist/ my-video.mp4

Output/Error:

[📼 Videobrew] Video app path chosen: dist/
[📼 Videobrew] Output path chosen: my-video.mp4
[📼 Videobrew] Render quality chosen: 90% (default)

[📼 Videobrew] Step (1/2) Rendering frames:
browserType.launch: Executable doesn't exist at C:\Users\luttje\AppData\Local\ms-playwright\chromium-1105\chrome-win\chrome.exe
╔═════════════════════════════════════════════════════════════════════════╗
║ Looks like Playwright Test or Playwright was just installed or updated. ║
║ Please run the following command to download new browsers:              ║
║                                                                         ║
║     npx playwright install                                              ║
║                                                                         ║
║ <3 Playwright Team                                                      ║
╚═════════════════════════════════════════════════════════════════════════╝
    at C:\Users\luttje\AppData\Roaming\nvm\v18.15.0\node_modules\@videobrew\cli\dist\esm\rendering\record-frames.js:51:57
    at step (C:\Users\luttje\AppData\Roaming\nvm\v18.15.0\node_modules\@videobrew\cli\dist\esm\rendering\record-frames.js:32:23)
    at Object.next (C:\Users\luttje\AppData\Roaming\nvm\v18.15.0\node_modules\@videobrew\cli\dist\esm\rendering\record-frames.js:13:53)
    at C:\Users\luttje\AppData\Roaming\nvm\v18.15.0\node_modules\@videobrew\cli\dist\esm\rendering\record-frames.js:7:71
    at __awaiter (C:\Users\luttje\AppData\Roaming\nvm\v18.15.0\node_modules\@videobrew\cli\dist\esm\rendering\record-frames.js:3:12)
    at C:\Users\luttje\AppData\Roaming\nvm\v18.15.0\node_modules\@videobrew\cli\dist\esm\rendering\record-frames.js:47:64
    at C:\Users\luttje\AppData\Roaming\nvm\v18.15.0\node_modules\@videobrew\cli\dist\esm\rendering\record-frames.js:47:24
    at step (C:\Users\luttje\AppData\Roaming\nvm\v18.15.0\node_modules\@videobrew\cli\dist\esm\rendering\record-frames.js:32:23)
    at Object.next (C:\Users\luttje\AppData\Roaming\nvm\v18.15.0\node_modules\@videobrew\cli\dist\esm\rendering\record-frames.js:13:53)
    at C:\Users\luttje\AppData\Roaming\nvm\v18.15.0\node_modules\@videobrew\cli\dist\esm\rendering\record-frames.js:7:71
    at __awaiter (C:\Users\luttje\AppData\Roaming\nvm\v18.15.0\node_modules\@videobrew\cli\dist\esm\rendering\record-frames.js:3:12)
    at recordFrames (C:\Users\luttje\AppData\Roaming\nvm\v18.15.0\node_modules\@videobrew\cli\dist\esm\rendering\record-frames.js:44:12)
    at C:\Users\luttje\AppData\Roaming\nvm\v18.15.0\node_modules\@videobrew\cli\dist\esm\cli.js:162:32
    at step (C:\Users\luttje\AppData\Roaming\nvm\v18.15.0\node_modules\@videobrew\cli\dist\esm\cli.js:33:23)
    at Object.next (C:\Users\luttje\AppData\Roaming\nvm\v18.15.0\node_modules\@videobrew\cli\dist\esm\cli.js:14:53)
    at C:\Users\luttje\AppData\Roaming\nvm\v18.15.0\node_modules\@videobrew\cli\dist\esm\cli.js:8:71
    at __awaiter (C:\Users\luttje\AppData\Roaming\nvm\v18.15.0\node_modules\@videobrew\cli\dist\esm\cli.js:4:12)
    at render (C:\Users\luttje\AppData\Roaming\nvm\v18.15.0\node_modules\@videobrew\cli\dist\esm\cli.js:147:12)
    at C:\Users\luttje\AppData\Roaming\nvm\v18.15.0\node_modules\@videobrew\cli\dist\esm\cli.js:437:32
    at step (C:\Users\luttje\AppData\Roaming\nvm\v18.15.0\node_modules\@videobrew\cli\dist\esm\cli.js:33:23)
    at Object.next (C:\Users\luttje\AppData\Roaming\nvm\v18.15.0\node_modules\@videobrew\cli\dist\esm\cli.js:14:53)
    at fulfilled (C:\Users\luttje\AppData\Roaming\nvm\v18.15.0\node_modules\@videobrew\cli\dist\esm\cli.js:5:58)

Running that command doesn't seem to do anything, but in any case playwright should be included without further requirements to the user.

Add video timeline and playback controls

Right a user can only play their video. It would be nice to be able to see a timeline of the video and be able to scrub through it backwards and forwards.

These are the features I would like to see:

• Timeline of the video
• Back 1 frame button
• Forward 1 frame button
• Scrub through the video by clicking and dragging mouse/finger (wont support touch)

Choose a more creative name

It's a bit boring right now.

Some ideas:

• Motionbrew
• Videobrew
• VideoWeaver / Vidweave (web technologies to make videos)
• Vidscape

Setup tests

This project has already passed a point where it would be great to have tests. Especially since it's published on npm. I don't want to break something without knowing about it.

Allow real time recording of animations and transitions

Support users creating a webpage that animates and transitions naturally and in real time. Users can use keyframe animations, transitions or animate with Javascript, jQuery, etc.

The user would notify the renderer that they intend to have the site rendered in real time somewhat like this:

import { setupVideo, RenderMode } from '@videobrew/core'

setupVideo({
  width: 1920,
  height: 1080,
  framerate: 30,
  mode: RenderMode.RealTime
})

This is somewhat related to #8, but I want to separately implement this separately because of some downsides:

• Recording takes as long as the video takes to complete
• It might be hard to know after how many frames the video ends

One big advantage of this is that the complexity of coding a video is reduced. Which is the goal of this whole tool.

Add Svelte components to build video

Building further upon #5 I would like to supply Svelte components with which a video app can be built.

This is heavily inspired by what Remotion does, but with the goal of also supplying components for other frameworks (like Svelte, Vue, React, etc...)

This is psuedo-code. The features below are not yet implemented.

<script lang="ts">
  import { 
    Sequence, 
    Group, 
    Rectangle, 
    Text, 
    Transition, 
    TimeSpan,
    Easing
  } from 'videobrew';
</script>

<Sequence>
  <!-- Because this is the first group, it will by default start at frame 0, all it's children will start with it -->
  <Group 
    timing={{ 
      duration: TimeSpan.fromSeconds(2),
    }}
    transition={{
      in: Transition.fadeIn({ 
        duration: TimeSpan.fromMilliseconds(500),
      }),
    }}>
    <!-- A background that shifts hue based on the amount of seconds -->
    <Rectangle
      x={0}
      y={0}
      width={width}
      height={height}
      color="#FF0000"
      hue={0}
      to={{ hue: 360 }}
      easing={Easing.Linear}
    />
    <!-- A title that slides in from the right -->
    <Text
      x={width}
      y={height / 2}
      text="Hello World"
      font="Arial"
      size={50}
      to={{ x: 0 }}
      easing={Easing.Linear}
    />
  </Group>
  <!-- The next group will follow after the first has ended. The transition overlap may cause it to start slightly earlier to crossfade. All children of this group will start with it. -->
  <Group 
    timing={{ 
      duration: TimeSpan.fromSeconds(2),
    }}
    transition={{
      in: Transition.fadeIn({ 
        duration: TimeSpan.fromMilliseconds(500),
        overlap: TimeSpan.fromMilliseconds(500)
      }),
      out: Transition.fadeOut({ 
        duration: TimeSpan.fromMilliseconds(500) 
      }),
    }}>
    <!-- A background that shifts hue based on the amount of seconds -->
    <Rectangle
      x={0}
      y={0}
      width={width}
      height={height}
      color="#00FF00"
      hue={0}
      to={{ hue: 360 }}
      easing={Easing.Linear}
    />
    <!-- A title that slides in from the right, followed by another text. Sequences can be nested. -->
    <Sequence>
      <Text
        timing={{ duration: TimeSpan.fromSeconds(1) }}
        x={width}
        y={height / 2}
        text="Hello World Again"
        font="Arial"
        size={50}
        to={{ x: 0 }}
        easing={Easing.Linear}
      />
      <!-- All components have a timing, transition and animation (from/to) attributes. -->
      <Text
        timing={{ duration: TimeSpan.fromSeconds(1) }}
        x={width}
        y={height / 2 + 50}
        text="This is another text"
        font="Arial"
        size={50}
        to={{ x: 0 }}
        easing={Easing.Linear}
    </Sequence>
  </Group>
</Sequence>

Hang on 'Previewing' when downloading editor the first time

When running videobrew preview in the CLI for the first time, it will hang on [📼 Videobrew] Previewing... for a few seconds.

The CLI is downloading and installing the editor package. It should probably inform the user of what it's doing and that it may take a few seconds. In any case "Previewing" suggests the app is ready to preview, which could be confusing.

Provide client library to simplify communication with the renderer

Right now, in order to build a video app some messaging has to occur between the video app and renderer as shown in this example. This communication protocol should happen through an interface. That way consumers do not have to worry about the protocol inevitably changing.

I'm thinking a Typescript package that compiles to a ES module and exports type defintions for TS users.

-outdated psuedo code removed-

Editor Server crash on port in use

[📼 Videobrew] Editor Server Error: node:events:491
      throw er; // Unhandled 'error' event
      ^

Error: listen EADDRINUSE: address already in use ::1:8087
    at Server.setupListenHandle [as _listen2] (node:net:1717:16)
    at listenInCluster (node:net:1765:12)
    at GetAddrInfoReqWrap.doListen [as callback] (node:net:1914:7)
    at GetAddrInfoReqWrap.onlookup [as oncomplete] (node:dns:109:8)
Emitted 'error' event on Server instance at:
    at emitErrorNT (node:net:1744:8)
    at process.processTicksAndRejections (node:internal/process/task_queues:82:21) {
  code: 'EADDRINUSE',
  errno: -4091,
  syscall: 'listen',
  address: '::1',
  port: 8087
}

Node.js v19.3.0

Test packed packages before publish

I feel like the packages can break in the publishing process. Testing them manually is a hassle.

Since lerna publishes the packages, I want that to pack them before testing. Since there is no lerna pack command, and lerna does more than simply call npm pack: we run lerna publish, but with a temporary local npm registry like https://verdaccio.org/docs/what-is-verdaccio or https://github.com/local-npm/local-npm

From there we can install and test all packages, both locally and on ci

Notes

https://verdaccio.org/docs/best#override-public-packages

Add a separate entry for this package to config.yaml and remove npmjs from proxy list and restart the server.

packages:
  '@videobrew/*':
    access: $all
    # comment proxy out or leave it empty
    # proxy:

https://verdaccio.org/docs/e2e

https://github.com/juanpicado/e2e-ci-example-gh-actions/blob/master/.github/workflows/node.js.yml

Provide transition and animation tools

Right now a user needs to know exactly what a frame is to look like in order to draw it when the renderer messages videobrew.tick. They can't even use animations or transitions in CSS.

The above makes working with the renderer too complex. Furthermore since we intend to implement timeline scrubbing (#6) the frames might not even be executed linearly (already breaking this example)

We should provide tools that help the user. As seen in this example and read in these specs it is possible to set a keyframe animation to a specific frame and pause it. It would be nice if the user could make animations as simply as they normally would in css and that we only pause them and move them to the correct frame.