Video wird geladen...

Video konnte nicht geladen werden

Beim Laden dieses Videos ist ein Problem aufgetreten. Dies könnte an einem vorübergehenden Netzwerkproblem liegen oder das Video ist möglicherweise nicht verfügbar.

Mediabunny 1.42.0 is now out, adding THE most requested feature: full read/write support for HLS! 🚀 It's truly a game changer for client-side media processing. Here, I'm creating 5 renditions from a 40-second video in ~10 seconds, fully client-side, without a transcode server:

Vanilagy

4,325 subscribers

73,000 Aufrufe • vor 6 Monaten •via X (Twitter)

Wissenschaft & Technologie

Anya Rossi• Live Now

Private livecam show

19 Kommentare

Profilbild von Vanilagy

Vanilagyvor 6 Monaten

Like the rest of Mediabunny, all of it was implemented from scratch and uses zero dependencies. The above example has a total bundle size of under 100 kB. The API is also incredibly terse. Here's all that's needed to download a remote HLS playlist as an MP4 locally:

Profilbild von Vanilagy

Vanilagyvor 6 Monaten

Unlike libraries like hls.js that focus solely on playback, Mediabunny is general-purpose: you can use it to build an HLS player, but also extract thumbnails, download a clip from a live stream, stream HLS directly *from* the client, extract metadata, and much more!

Profilbild von Vanilagy

Vanilagyvor 6 Monaten

This took around three months of work to get right, and I'm super proud of where it ended up. It wouldn't have been possible without all of the generous people and companies sponsoring Mediabunny! ❤️ For more information, check out the blog post:

Profilbild von Hirbod

Hirbodvor 6 Monaten

This is nuts!!!

Profilbild von Simon Halimonov

Simon Halimonovvor 6 Monaten

is there a mediabunny for images? i think we might need that ...

Profilbild von Vanilagy

Vanilagyvor 6 Monaten

Reading and writing images is natively supported by browser APIs! No need for a library here.

Profilbild von Tequila Funk

Tequila Funkvor 6 Monaten

Ayyy congrats man!! It was great to follow your journey of building this 💪

Profilbild von Kevin Lewis

Kevin Lewisvor 6 Monaten

The Demo videos are gonna be crazy now!!!

Profilbild von Amir Mirmoeini

Amir Mirmoeinivor 6 Monaten

I was working on the same thing a long time ago... To speed things up, I wrote a shader to do quick RGB to YUV420 colour conversion on the GPU using WebGL pixel shaders; it gave me a huge boost in mp4 video encoding performance!

Profilbild von Brandon Goodyear

Brandon Goodyearvor 6 Monaten

That’s wild! it’s fascinating because I took a different approach to building an AI assisted clipping app to make the files smaller for server side processing (token cost down from like $5/video to $.25/video) The next 6 months of video tools are going to be fun to watch.

Profilbild von CodeCode.Me

CodeCode.Mevor 6 Monaten

Very good, supported m3u8

Profilbild von Varad

Varadvor 5 Monaten

Very cool i have been exploring the opposite side of the pipeline with an in browser HLS → MP4 workflow it is fascinating how much media processing is moving into the browser now from HLS generation to downloading muxing and transcoding curious how MediaBunny handles memory pressure for large files and low-RAM devices

Profilbild von Iván Olivares Rojas

Iván Olivares Rojasvor 6 Monaten

wow! this is huge! Congrats @vanilagy 👏👏 awesome release!

Profilbild von sam

samvor 6 Monaten

dash with CENC decryption capabilities next….. pleaseee

Profilbild von Vanilagy

Vanilagyvor 6 Monaten

Bro let me chill Also, 1.42.0 already ships with CENC decryption support for ISOBMFF

Profilbild von sam

samvor 6 Monaten

i’m just joking😭 but dash support would be amazing

Profilbild von Alexander von Studnitz

Alexander von Studnitzvor 6 Monaten

„Half-Life: Source“ has been finally achieved

Profilbild von Tristan Rhodes

Tristan Rhodesvor 6 Monaten

Will this be used by Remotion client side rendering? I’m using that feature.

Profilbild von fos

fosvor 6 Monaten

This is gods work

Ähnliche Videos

💥 WebVM is a server-less virtual environment running fully client-side in HTML5/WebAssembly. GitHub: Live Demo:

💥 WebVM is a server-less virtual environment running fully client-side in HTML5/WebAssembly. GitHub: Live Demo:

Dark Web Informer

20,482 Aufrufe • vor 4 Monaten

In LiveView, we keep the state in one place - the server - and it simplifies a lot. But sometimes the state on the client is preferred, or even necessary, and we can't use LiveView for that part. Unless we have a LiveView that runs on the client 👀 Using Popcorn, we managed to run LiveView fully in the browser – here's a POC 🎉 The approach is to have a fully client-side LiveView rendered by a server-side one, and they can communicate with each other. Try it out:

In LiveView, we keep the state in one place - the server - and it simplifies a lot. But sometimes the state on the client is preferred, or even necessary, and we can't use LiveView for that part. Unless we have a LiveView that runs on the client 👀 Using Popcorn, we managed to run LiveView fully in the browser – here's a POC 🎉 The approach is to have a fully client-side LiveView rendered by a server-side one, and they can communicate with each other. Try it out:

Elixir by Software Mansion

13,560 Aufrufe • vor 10 Monaten

🧵1/2 Socket Programming in C: Server-Side Basics - Set up a server using socket(), bind(), and listen(). - Accept client connections with accept(). - Send and receive data over TCP. Video 1: Server-Side in C! Video 2: Client-Side Programming will be uploaded soon—stay tuned! 🖥️

🧵1/2 Socket Programming in C: Server-Side Basics - Set up a server using socket(), bind(), and listen(). - Accept client connections with accept(). - Send and receive data over TCP. Video 1: Server-Side in C! Video 2: Client-Side Programming will be uploaded soon—stay tuned! 🖥️

trish

2,925,689 Aufrufe • vor 1 Jahr

🚀 BIG NEWS: I'm Going Indie & Launching My First Course! 🤩 After 7.5 amazing years WeTransfer, I'm leaving a truly special company and team. It's bittersweet, but going fully independent is a dream come true. Read my full story: 🌟 New Course: From Side Project to Going Indie 🌟 Are you ready to make your side project a success? Want to quit the 9-to-5 routine and endless meeting days to go independent? Perfect! This course is for you: #IndieDev

🚀 BIG NEWS: I'm Going Indie & Launching My First Course! 🤩 After 7.5 amazing years WeTransfer, I'm leaving a truly special company and team. It's bittersweet, but going fully independent is a dream come true. Read my full story: 🌟 New Course: From Side Project to Going Indie 🌟 Are you ready to make your side project a success? Want to quit the 9-to-5 routine and endless meeting days to go independent? Perfect! This course is for you: #IndieDev

Antoine v.d. SwiftLee 

35,647 Aufrufe • vor 2 Jahren

MCP tools have only ever returned text for the model to read. Now they return interactive UI. 🪄 TanStack AI's new MCP Apps support renders ui:// widgets right in the chat - static or fully interactive, with a client/server bridge.

MCP tools have only ever returned text for the model to read. Now they return interactive UI. 🪄 TanStack AI's new MCP Apps support renders ui:// widgets right in the chat - static or fully interactive, with a client/server bridge.

TANSTACK

133,087 Aufrufe • vor 4 Monaten

❌ Avoid resolving a promise in a server component and block rendering. ✅ Resolve the promise in the client side with `Reac.use()`

❌ Avoid resolving a promise in a server component and block rendering. ✅ Resolve the promise in the client side with `Reac.use()`

George Moller

47,215 Aufrufe • vor 1 Jahr

Having ChatGPT edit in Xcode is a game-changer Can edit across multiple apps and works with 4.5. It's just missing the ability to read the codebase, write multiple files and agents. For now, Alex is a great alternative.

Having ChatGPT edit in Xcode is a game-changer Can edit across multiple apps and works with 4.5. It's just missing the ability to read the codebase, write multiple files and agents. For now, Alex is a great alternative.

Meng To

40,579 Aufrufe • vor 1 Jahr

Today I'm launching my first micro SaaS 😋 MiniFolio : a simple, private tool to compress & convert images & videos directly in your browser without uploading to server Check it out - - upload your image/videos - Compress files or convert file types directly in your browser - Lightning fast, fully client-side processing - 0 files uploaded to a server, private and safe - 0 ads, minimal UI - One-time $10 payment for lifetime access to all Pro features and unlimited storage Giving 50% off to the first 10 users. Use code: MINIFOLIO50 Try it out and let me know what I should improve :)

Today I'm launching my first micro SaaS 😋 MiniFolio : a simple, private tool to compress & convert images & videos directly in your browser without uploading to server Check it out - - upload your image/videos - Compress files or convert file types directly in your browser - Lightning fast, fully client-side processing - 0 files uploaded to a server, private and safe - 0 ads, minimal UI - One-time $10 payment for lifetime access to all Pro features and unlimited storage Giving 50% off to the first 10 users. Use code: MINIFOLIO50 Try it out and let me know what I should improve :)

Sam ☕

85,450 Aufrufe • vor 2 Monaten

Just discovered Blockade Labs - what a game changer! Spent my night building a simple #WebXR client for it using #threejs and now I can spend hours exploring these marvelous worlds without taking off my headset. 🤯🚀 #VR #stablediffusion

Just discovered Blockade Labs - what a game changer! Spent my night building a simple #WebXR client for it using #threejs and now I can spend hours exploring these marvelous worlds without taking off my headset. 🤯🚀 #VR #stablediffusion

Felix Z

29,859 Aufrufe • vor 3 Jahren

The client requested a parlour wedding decoration, wait for the result..

The client requested a parlour wedding decoration, wait for the result..

CHUKS 🍥

222,712 Aufrufe • vor 10 Monaten

React tip: "use client" misconceptions (1/5) 🚫 You need to mark EVERY individual file with "use client" to ensure it is a Client Component. ✅ You only need to mark each client entry point ONCE. Modules imported into a "use client" file are already part of the client bundle. (0:05) Adding "use client" to `3.js` marks the file as a client entry point, including it in the client bundle. (0:11) Importing `d()` into `3.js` (a client entry point) also includes it in the client bundle. (0:14) Adding "use client" to `4.js` has no additional bundling effect on `d()` because it is already part of the client bundle. (0:23) All modules (and their dependencies) imported to `3.js` are included in the client bundle. (0:26) Removing "use client" from `3.js` moves it and its dependencies into the server bundle.

React tip: "use client" misconceptions (1/5) 🚫 You need to mark EVERY individual file with "use client" to ensure it is a Client Component. ✅ You only need to mark each client entry point ONCE. Modules imported into a "use client" file are already part of the client bundle. (0:05) Adding "use client" to `3.js` marks the file as a client entry point, including it in the client bundle. (0:11) Importing `d()` into `3.js` (a client entry point) also includes it in the client bundle. (0:14) Adding "use client" to `4.js` has no additional bundling effect on `d()` because it is already part of the client bundle. (0:23) All modules (and their dependencies) imported to `3.js` are included in the client bundle. (0:26) Removing "use client" from `3.js` moves it and its dependencies into the server bundle.

Delba

157,416 Aufrufe • vor 2 Jahren

Kordus Client is out now! A custom message board for the Mike Klubnika games community, to celebrate the 5 year anniversary. Developed by Rebane Thank you for the support over the years!

Kordus Client is out now! A custom message board for the Mike Klubnika games community, to celebrate the 5 year anniversary. Developed by Rebane Thank you for the support over the years!

Mike Klubnika

37,724 Aufrufe • vor 15 Tagen

Implemented this credits system with Supabase x 🍋 A credit order fires a webhook that updates the database and also sets everything client side with Next.js cookies + server actions 🍪 Here it is end to end! 🚀 No sign-in, etc. required ⭐️

Implemented this credits system with Supabase x 🍋 A credit order fires a webhook that updates the database and also sets everything client side with Next.js cookies + server actions 🍪 Here it is end to end! 🚀 No sign-in, etc. required ⭐️

jhey ʕ•ᴥ•ʔ

54,049 Aufrufe • vor 2 Jahren

Fable of Legends is a MOBA I've been working on for a few weeks... (with Fable 😜) The game is playable at 200ms+ ping thanks to the client-side prediction tools I'm about to release on Colyseus ⚔️ 0.18 💜 Game assets from Kenney and custom characters by João Baltieri 💙

Fable of Legends is a MOBA I've been working on for a few weeks... (with Fable 😜) The game is playable at 200ms+ ping thanks to the client-side prediction tools I'm about to release on Colyseus ⚔️ 0.18 💜 Game assets from Kenney and custom characters by João Baltieri 💙

Endel

29,945 Aufrufe • vor 3 Monaten

For those who didn't see the end of this game, here is the 5 second calls side-by-side: you can see how drastic the difference in cadence was

For those who didn't see the end of this game, here is the 5 second calls side-by-side: you can see how drastic the difference in cadence was

Mike Jagacki

110,391 Aufrufe • vor 8 Monaten

Server authoritative movement with client prediction and rollback/replay support. In this example, the client exploits by moving a wall out of the way. But the server owns the movement. The client has failed predictions due to the exploit, and rolls back. #RobloxDev

Server authoritative movement with client prediction and rollback/replay support. In this example, the client exploits by moving a wall out of the way. But the server owns the movement. The client has failed predictions due to the exploit, and rolls back. #RobloxDev

sleitnick

20,583 Aufrufe • vor 1 Jahr