Vanilagy

Introducing Mediabunny: a complete TypeScript toolkit for reading, writing, and converting media files right in the browser. This has been in the work for months now, and completely replaces my old libraries mp4-muxer and webm-muxer. Give it a try! mediabunny.dev

@ivolivares @MuxHQ They already sponsor me!! They're cool

@vanilagy if after this @MuxHQ doesn't put theirs eye on you I will never understand the why. This is huge. Congrats!

The upcoming Mediabunny version can play live streams!! Here I'm watching German live TV.

I mostly maintain a "all bugs have infinite priority" policy for Mediabunny, which definitely feels like a double-edged sword to me. Yes, it means that the library is quite stable, but it can be annoying as it can rip me out of feature development.

@wcandillon @webgl_webgpu It uses it! But also mp4box, and also ffmpeg wasm, which makes little sense lmao

@webgl_webgpu @vanilagy mediabunny would likely help a lot here, hope you let the project owner know.

🎬 Applied Showcase: Meet MasterSelects, a full video editor that runs entirely on WebGPU. No native app, no CPU roundtrip. 37 blend modes and 3D rotation in a single 618-line WGSL shader. GPU-accelerated scopes, optical flow scene detection, SAM2 segmentation on-device, and export straight from the GPU canvas. 13 dependencies total. MIT licensed. 🔗 webgpu.com/showcase/maste… #WebGPU #VideoEdit #Film #AI #Creative

@Yhwylla Hahahahha

@vanilagy Society if Bares didn't rhyme with Rares

Here's Mediabunny capturing 5 seconds of live TV and transmuxing it into an MP4 Total bundle size to do this is around ~50 kB

@BitesDev When you porting Portal 2 coop to the web?

atlas & p-body

@wiedymi Like, in a McDonald's

The most productive setup for me, work in bed on my laptop and watch some anime on tv... I can do like this more than sitting at desk with big screen...

@wiedymi Do they allow you to bust out a laptop at Haidilao? I work at McDonald's every day 😂😂

What starts with a P and ends with epsi and we all love it?

@HugeLeters Sort does too much work here; the answer can be retrieved in O(n) time whereas doing it via sort requires O(n log n). But yeah I agree that it'd be a terse way to write it at least.

@vanilagy but for most ppl the idiomatic way to write this would be to do sort + head & tail so this is more of an argument for proper composition I think?

This is a good example of why indirection leads to worse performance; both of these functions do the exact same loop, but this fact is hidden by the function call indirection. Had these been inlined, the repeated logic would've been immediately obvious.

@wiedymi I don't

@vanilagy why you write such code i first place ? 👀

@KapadiyaVikas It's not done yet, no docs

@vanilagy Any docs for this. I want to make hls download but totally in web browser

@rasmaplasma Ish? Maybe in scope, although Mediabunny has no dependencies to be more lean

@vanilagy oh thats cool, is mediabunny like libmedia? zhaohappy.github.io/libmedia/docs/…

Mediabunny on the left playing German live TV (with WebCodecs) compared to the official stream on the right. I'm even ahead by a few seconds!! The coolest thing is that I didn't even have to change the media player code; it just thinks it's playing a normal video file.

@DougLopesReal Locally ofc!

@vanilagy Is processed in nodejs or browser?

@KapadiyaVikas That's what I'm doing here

@vanilagy can I convert m3u8 to mp4 in browser?

@tkmadeit Technically @Remotion's web renderer is such an example!

@vanilagy kinda unrelated but do you have an example of Mediabunny recording a video of an html element on a page?

@mancerrss zdf-hls-15.akamaized.net/hls/live/20164…

@vanilagy So how do you get the German Live TV broadcast thru the web tho?

@deifosv In the Mediabunny codebase (currently in the HLS PR), or just ask me!

@vanilagy Nice! Where can we see how this is done, because I'm probably doing it wrong on bsr.getbasedapps.com which is using Mediabunny for it.

@wiedymi The player obviously shouldn't display it like that, it's just for debug. I think the way I'm doing it is very elegant; the packet timestamps are simply unix timestamps! This allows to naturally map any time of the stream to a real point in time

@vanilagy Pretty cool! Though those timestamps durations...