Can I render videos in the browser?

Rendering videos in the browser is currently not supported.
In order to render videos, you need to hook up server-side rendering, Remotion Lambda, or render videos locally.

Our future plans

The biggest limitation is that there is no way to capture the browser viewport.

How about?

a Chrome extension?

Chrome extensions do get the privilege of capturing the viewport. However, asking the user to install an extension is a big barrier and therefore we are not believing in this approach.

canvas.getImageData()?

It allows to capture the pixels from a canvas, however Remotion videos can be written with any web technology including HTML and SVG. Canvas elements are just a subset of what's supported in Remotion.

html2canvas?

It implements it's own rendering engine which only supports a subset of CSS properties.
You would only have access to a very limited feature set.

SVG <foreignElement>?

You can render HTML markup inside an SVG <foreignElement> and then render that SVG to a canvas and then call getImageData() to turn that into an image.

This is the closest thing to browser rendering, however there are problems with <img> tags and potentially other technologies as well. It's not yet fully out of the questions, but seems hacky so far.

The Element Capture API

Returns an already compressed video stream of the DOM instead of just a bitmap.
Also will display a permission prompt to the user. After discussion with the authors of the specification, capturing images is not a usecase they are considering.

However, certain elements can be captured, such as <canvas>, <video> and <img>. Also, <audio> can be processed.
We are intending to introduce a render mode of Remotion which is limited to those tags, but allows for rendering in the browser.

The encoding of the video would work with WebCodecs.
We hope to launch this mode in late 2025.

See also

• <Player>: Displaying a Remotion video in the browser without encoding it