Launch HN: Tella (YC S20) – Collaborative video editing in the browser

Sharing screen and camera recordings is a rapidly growing way for people to communicate at work, especially in technology where the subject matter is often on screens (new features, code, designs). But while people are creating more video for work, it's usually for the convenience of the creator and not the viewer. One-take screen recordings can be long, boring, and difficult to watch. We're trying to change this by letting people produce and edit their recordings so that it's a better experience for viewers.

Michiel and I used to work at a large remote company and this was where we saw the potential of edited video content in the workplace. One of the biggest challenges was keeping business teams up-to-date with product teams. The most effective solution was product teams sharing videos about their work over Slack, which the rest of the organisation watched in their own time. Product teams made videos about new projects, progress updates, launches, user research, and so on.

The most interesting aspect of the approach was that the videos weren't just screen recordings, they were edited and often well-produced videos. The better the production, the better the engagement was. Teams approached the production of these videos in the same way as preparing a slide deck for a presentation.

We loved the format and saw its potential, especially in a remote workplace, but it had some problems. Video editing is time consuming, and working on a video with a teammate takes even longer. Video editing also has a high barrier to entry. Purchasing Screenflow or Final Cut (or other long-format editors) and then learning how to use it prohibits people from trying video as a form of sharing information.

So we set out to build a video editor that focuses on screen and camera recording (where most of the subject matter comes from at work), allows for collaboration (many people work in teams and expect the tools they use to support this), and makes editing straightforward (putting together a video should be as simple as putting together a slide deck).

Our implementation takes a different approach to most editors. We wanted something that was fast, lightweight, and could run in a web browser—appealing to people completely new to video editing. We also wanted to support real-time collaboration. Instead of transcoding all content to a video format, we created our own video player that controls the timing and display of HTML elements. Let's say your video consists of a couple recordings, some text, and some images. Tella plots these different bits of content on a timeline and then plays them back in sequence on a webpage.

The benefit of this is that we can use anything that you can do with HTML, CSS and JS to create a video. We're not bound to ffmpeg or other transcoders to generate our video for us. We take the document the user created and display that in the same way to the viewer (no converting step in between). This means we can stay lightweight and let you update the video whenever you like. There are no “snapshots” stored and the link always shows the source of truth.

The challenge with this is keeping all the content in sync. Using our earlier example: the first recording should play after the text and then the second recording exactly after the first ends. A more complex scenario would be where two videos need to play back at the same time: a screen recording and a camera recording—these need to start and stop at the same moments. This is called “Media Synchronization”, or MediaSync for short (https://www.springer.com/gp/book/9783319658391). At the moment browsers don’t have a lot of stable APIs that can help us, but they are in the works! One notable example is the Timing Object (https://webtiming.github.io/timingobject/) which outlines how you can sync multiple media elements to the same clock. Right now Tella mostly works by manually syncing all video elements on actions like “play” or “seek”. Eventually we want to implement more of the techniques outlined in MediaSync, like slightly changing the speed of out of sync videos to let them catch up.

So far, people have been using Tella to create product demos, team updates, company announcements, sales pitches, investor pitches, and tutorial videos, as well as making video content for blogs and newsletters.

We'd love to hear what you think and answer any questions you might have. Thanks!