Feature request: supporting alpha channel

[juliendargelos]

Thanks for this excellent demo. Could it also work with codecs that support alpha channel such as ProRes or vp9 ?

[luruke]

It probably could, but i'd advice to use a separate video for the alpha – Better browser support
One of the benefit of ActiveFrame is that you can keep 2 video in sync easily

It probably could, but i'd advice to use a separate video for the alpha – Better browser support
One of the benefit of ActiveFrame is that you can keep 2 video in sync easily

[juliendargelos]

I wrote a similar encoding/decoding pipeline, but based on webcodecs-node instead of mp4box to be able to demux both mp4 and webm.

webm/vp9 is generally to slow to decode, so it doesn't look good anyway.

But I also implemented a way to store two hevc tracks in the binary (color + alpha), and a decoder that reads both tracks simultaneously and outputs two separate frames in sync. The two frames can then be composited in the canvas to achieve transparency.

Having two separate tracks means it is not compressed as well as a single vp9 track with alpha. But having them in the same binary file means the http server can still compress it better than two separates files with gzip. It also makes the loading logic simpler.

We will probably publish it as a package if anyone is interested.

I wrote a similar encoding/decoding pipeline, but based on webcodecs-node instead of mp4box to be able to demux both mp4 and webm.

webm/vp9 is generally to slow to decode, so it doesn't look good anyway.

But I also implemented a way to store two hevc tracks in the binary (color + alpha), and a decoder that reads both tracks simultaneously and outputs two separate frames in sync. The two frames can then be composited in the canvas to achieve transparency.

Having two separate tracks means it is not compressed as well as a single vp9 track with alpha. But having them in the same binary file means the http server can still compress it better than two separates files with gzip. It also makes the loading logic simpler.

We will probably publish it as a package if anyone is interested.

@Flor

[juliendargelos]

Here is our repository: https://github.com/plutotcool/fsv
And the demo with transparency: https://fsv-plutotcool.vercel.app

[luruke]

@juliendargelos

nice!

claude take this repo https://github.com/activetheory/activeframe , add transparency and write it in typescript 😂

jokes aside, that's the beauty of the open source 🤗

means the http server can still compress it better than two separates files with gzip
i think gzip is not going to do much

but yes, you do save 1 http request

[juliendargelos]

claude take this repo https://github.com/activetheory/activeframe , add transparency and write it in typescript 😂

I rarely use AI and I don't have a Claude subscription, all the code have been written by a human this weekend!

Edit:

For transparency, I should mention that some subsequent reworks have been assisted by AI, and future ones may be as well.

It probably could, but i'd advice to use a separate video for the alpha – Better browser support
One of the benefit of ActiveFrame is that you can keep 2 video in sync easily

Puta

It probably could, but i'd advice to use a separate video for the alpha – Better browser support
One of the benefit of ActiveFrame is that you can keep 2 video in sync easily