diff --git a/public/blog/cars2/backfill.png b/public/blog/cars2/backfill.png new file mode 100644 index 0000000..007d457 Binary files /dev/null and b/public/blog/cars2/backfill.png differ diff --git a/public/blog/cars2/backfill2.png b/public/blog/cars2/backfill2.png new file mode 100644 index 0000000..7ed2ff2 Binary files /dev/null and b/public/blog/cars2/backfill2.png differ diff --git a/public/blog/cars2/f1.png b/public/blog/cars2/f1.png new file mode 100644 index 0000000..2b0ab30 Binary files /dev/null and b/public/blog/cars2/f1.png differ diff --git a/public/blog/cars2/fanout.png b/public/blog/cars2/fanout.png new file mode 100644 index 0000000..02ee19a Binary files /dev/null and b/public/blog/cars2/fanout.png differ diff --git a/public/blog/cars2/fanout2.png b/public/blog/cars2/fanout2.png new file mode 100644 index 0000000..96d700a Binary files /dev/null and b/public/blog/cars2/fanout2.png differ diff --git a/public/blog/cars2/kixel.png b/public/blog/cars2/kixel.png new file mode 100644 index 0000000..d2e4043 Binary files /dev/null and b/public/blog/cars2/kixel.png differ diff --git a/public/blog/cars2/latency.png b/public/blog/cars2/latency.png new file mode 100644 index 0000000..b1c0e81 Binary files /dev/null and b/public/blog/cars2/latency.png differ diff --git a/public/blog/cars2/ll.png b/public/blog/cars2/ll.png new file mode 100644 index 0000000..7233868 Binary files /dev/null and b/public/blog/cars2/ll.png differ diff --git a/public/blog/cars2/mom.png b/public/blog/cars2/mom.png new file mode 100644 index 0000000..0bd1399 Binary files /dev/null and b/public/blog/cars2/mom.png differ diff --git a/public/blog/cars2/queen.png b/public/blog/cars2/queen.png new file mode 100644 index 0000000..e5174ce Binary files /dev/null and b/public/blog/cars2/queen.png differ diff --git a/public/blog/cars2/speed.png b/public/blog/cars2/speed.png new file mode 100644 index 0000000..01d93ec Binary files /dev/null and b/public/blog/cars2/speed.png differ diff --git a/public/blog/cars2/speed2.png b/public/blog/cars2/speed2.png new file mode 100644 index 0000000..0a66b2a Binary files /dev/null and b/public/blog/cars2/speed2.png differ diff --git a/public/blog/cars2/toilet.png b/public/blog/cars2/toilet.png new file mode 100644 index 0000000..403052f Binary files /dev/null and b/public/blog/cars2/toilet.png differ diff --git a/src/pages/blog/cars2.mdx b/src/pages/blog/cars2.mdx new file mode 100644 index 0000000..227d363 --- /dev/null +++ b/src/pages/blog/cars2.mdx @@ -0,0 +1,230 @@ +--- +layout: "@/layouts/global.astro" +title: "MoQ is for the Cars" +author: kixelated +description: MoQ is like Lightning McQueen. But it's a live networking protocol, not an animatronic sports car in a fictional movie produced by Pixar Animation Studios for Walt Disney Pictures. +cover: "/blog/cars2/queen.png" +date: 2026-06-08 +--- + +# MoQ for the Cars +sup + +This is an unexpected collaboration with Fastly. +They liked the MoQ blog posts and actually sponsored me to make a [hinged version](https://www.fastly.com/blog/moq-in-the-fast-lane), cross-posted to their **OFFICIAL BLOG**. +Go read that one instead if my usual cringe is too much. + +Roses are red. 🌹 +Sports cars be too. 🚗 +MoQ be fast. 🚀 +Cars 2™ is a 2011 American animated comedy film produced by Pixar Animation Studios for Walt Disney Pictures. + +
+ ![A hand-drawn doodle of a race car resembling Lightning McQueen, dark with green accents and a "69", labeled "it me"](/blog/cars2/queen.png) +
starring Lightning McQueen, the devilishly handsome race car
+
+ +## Cars 2: Electric Boogaloo +Lightning McQueen is racing around the track. +The spectators in the stands are honking wild. +**HONK HONK** + +But we don't care about the stans in the stands. +We care about the cars in their garage? +The ones willing to pay big bucks if we can transmit the **LOUD CARS DO CIRCLES** race over the internet. +Or whatever currency cars use, IDK I'm not a lore expert. + +The answer for the last decade has been HLS/DASH. +Split the media into fragments, anywhere from 0.5s to 4s long, and serve them over HTTP. +It's boring but it works. + +But just like the Mini Cooper, [there are a few short-comings](https://moq.dev/blog/replacing-hls-dash). +- Flushing media in batches **adds latency** (0.5s to 4s). +- Network congestion causes head-of-line blocking and **the spinny boye**. +- Every second of the spinny boye means **even more latency**. + +This is why I created MoQ while at Twitch. +The goal was to make live streams more interactive (and less boring). +**Stream frames, and occasionally drop instead of blocking.** + +High latency is for losers. +I always finish first, just like Lightning McQueen. + + + +## MoQ for the Fans +First, I wanted to address the SUV in the room. +My previous blog post, [You Don't Need It](https://moq.dev/blog/you-dont-need-it/), mentioned that you don't need MoQ for high-quality content. +It's true, but *as always*, there are exceptions to my shitty opinions. + +But before we disprove one shitty opinion, we need to prove another. +**Racing is boring**. + +The video footage is **so boring** that the only thing separating two laps is a counter. +Like yes, sometimes the car goes boom, but there's so much dead air. +I postulate that you're watching to be part of the story **LIVE**, not to see every millisecond of lap 392 in the Toilet Bowl 500. + +And it might actually be a good use-case for MoQ. +Because instead of buffering/pausing to load boring content, we can instead skip it to keep latency low. +It keeps you in the action with **sub-second latency**. +And milliseconds might be the difference between winning and losing. + +**FUN FACT**: Sports ~betting~ prediction markets are a thing. Degenerate users love lower latency. + +
+ ![A hand-drawn speedometer with "Losing" and "Winning" at each end, the needle pushed past a marked "HLS/DASH limit"](/blog/cars2/speed2.png) +
crank that dial
+
+ +And before you get your suspension in a twist, MoQ can still provide the same quality/latency you expect from HLS/DASH. +We just lower the latency floor for the Lightning McQueens out there who want to **WIN**. + + +## MoQ for the Cars +I originally made MoQ [for the fans](/blog/distribution-at-twitch). +But people keep running my code on the cars. +[Or the boats](/blog/on-a-boat). + +TBH, this is the better use-case for MoQ. + +You might have pieced together that I don't watch racing (**boring**) outside of critically acclaimed movies for children. +Starring Lightning McQueen and his goofy comrades, the cars go fast vroom vroom. +But when I do see snippets of F1, the camera feeds from the cars are **awful**. + +Me, the uninformed dumbass, has a hunch that it's due to networking. +There's going to be deadzones or interference or whatever around the track. +We are bound by the laws of physics, even in the Cars 2 Cinematic Universe. + +> We no can send all bytes. +\- Lightning McQueen (2011) + +**Boring protocols** like RTP drop packets/frames based on SLAs. +The publisher gives up (re)transmitting a frame after ~100 milliseconds; then it's gone forever. +This often shows up as artifacting or tearing or frozen video. + +But **the chad protocol** doesn't give up. + +MoQ publishers **prioritize transmitting the newer stuff** (in dependency order). +The old stuff gets **queued in RAM** (up to a TTL). +When bandwidth recovers, we can **backfill old footage** instead of losing it forever. + +Each MoQ subscriber independently decides how long to wait for each frame: +- The **live stream** might wait for up to 1 second +- The **instant relay** might wait for up to 10 seconds +- The **VOD recording** might wait for up to 1 minute. + +So your real-time feed might be lossy af, but the VOD is pristine. + +
+ ![A doodle contrasting a glitchy, crossed-out "Realtime" race car frame with a clean "Backfill" version of the same car](/blog/cars2/backfill.png) +
If I ever own a racing team, it's going to be called The Backfill Boyes
+
+ +The packets may have given up. But Lightning McQueen never gives up. +He always finishes first and the crowd goes **HONK HONK**. + + +## MoQ for the Robots +We're closer to the Cars Cinematic Universe than we want to admit. +Humans are a dying breed. +Like a pug on a hot day. +**RIP us.** + +Enter the robots. +They byte. +And they need networking for their bleeps and bloops. +It turns out that MoQ works for more than just media: +- The speedometer? **A live stream**. +- The steering wheel? **A live stream**. +- The G force sensor as Lightning McQueen heroically crashes into a wall to save the day? **A live stream**. + +Seriously, there's nothing special about media. +It's just delta encoded data. +You can delta encode a lot of things, [even JSON](https://datatracker.ietf.org/doc/html/rfc7386). +Just like I delta encoded your mom last night. + +
+ ![A doodle equation: a round stick figure plus the green MoQ cat logo equals a Lightning McQueen-style race car](/blog/cars2/mom.png) +
yes, a ur mom joke in ``
+
+ +Networks aren't infinite. +So we split up media into tracks/groups/frames/packets so pieces can be dropped when needed. +The reality is that some bytes are just less valuable than others. +We can't all be Lightning McQueen. + +The hard part is putting humpty back together. +That's why we use timestamps baybee, they tell us when stuff happened relative to other stuff. +So do the same thing for metadata. +Stamp that fellow, using the same clock as media, and send it over the same pipe. + +You can, and should, take the red pill and use MoQ for **EVERYTHING**. +A single **cooperative** QUIC connection with: `controls > audio > metadata > video` + +**FUN FACT**: MoQ is already being used remotely to pilot drones over Starlink. +One day we'll be able to remotely drive Lightning McQueen. + +And yes, this sounds simple but it's something WebRTC completely botches. +You have to use a separate connection for metadata and timestamps aren't exposed in the browser. + + +## MoQ for the Track +We're not done yet. +Sit back in your seat. +Fasten that seatbelt. +It's the law, and I'm the sheriff from the critically acclaimed movie Cars 2. + +Yeah I know the joke is overdone. +Give me a pitty chuckle, we're almost done. + +If more than one broadcast studio wants footage of Lightning McQueen's tailpipe, we don't want to transmit multiple copies. +Our satellite truck is expensive and has a limited bandwidth budget. + +And what if none of the broadcast studios actually want that hot, smokey, tailpipe footage? +Do we even want to transmit it, or is it just a waste of bandwidth? +With all of this data swirling around the track, there has to be some way to organize it. + +Enter stage right: **moq-relay** + +It's a simple proxy that connects **1 publisher** with **N subscribers** (per broadcast/track). +When **moq-relay** instances connect to each other, they automatically form a cluster. +It handles discovery, routing, and proxying. + +You can host it yourself [and/or pay me](https://pro.moq.dev). For example: +- **Lightning McQueen** connects to a self-hosted moq-relay at `192.168.420.69`. +- **moq-relay** is run with `--cluster-connect https://cdn.moq.dev/cars2`. +- **Studio clients** (or a relay!) connects to `https://cdn.moq.dev/cars2`. + +Just like a tinder hookup, there's a match and now you're the sub. +Any broadcasts published by Lightning McQueen are automatically available to all relays, potentially proxied through multiple hops. + +And only one copy is ever transmitted between each **moq-relay** instance, regardless of the number of downstream subscribers. +This is known colloquially as "big deal" when flakey venue internet and expensive satellite trucks are involved. +Run a self-hosted relay at each track, aggregate all of the feeds automatically, and publish them to a CDN. + +
+ ![A diagram of one car publishing to a relay that fans out across a CDN of interconnected relays to many subscribers](/blog/cars2/fanout.png) +
literally infinite viewers from a single, semi-reliable feed
+
+ +And there's no limit to the number of connections you can establish. +[moq-lite](https://doc.moq.dev/concept/layer/moq-lite.html) routes each subscription over the shortest path. +Go ahead, connect to `cdn.moq.dev` and `cloudflare.mediaoverquic.com` at the same time; they sit idle until someone subscribes. + +It's like swiping right on Lightning McQueen multiple times on alt accounts. +Don't judge. + + +## Disclaimer +I hope you've realized by now that I haven't seen the critically acclaimed movie Cars 2. +That poster of Lightning McQueen on my wall is just part of the gag. +I stare at it quite often to keep up the ruse. + +Thanks again to Fastly for sponsoring this post. +They just told me to write something about MoQ, so I did. +No refunds. + +If you're interested in more Cars 2 lore, join the [fan club](https://discord.gg/FCYF3p99mr) or email me at `me@kixel.me`. + +Written by [@kixelated](mailto:meself@kixel.me). +![@kixelated](/blog/avatar.png) diff --git a/src/pages/blog/moq-cars-fastly.mdx b/src/pages/blog/moq-cars-fastly.mdx new file mode 100644 index 0000000..46ba994 --- /dev/null +++ b/src/pages/blog/moq-cars-fastly.mdx @@ -0,0 +1,217 @@ +--- +layout: "@/layouts/global.astro" +title: "MoQ in the Fast Lane" +author: kixelated +description: MoQ is fast. Like, really fast. +cover: "/blog/cars2/f1.png" +date: 2026-06-08 +--- + +# MoQ in the Fast Lane +Hello Fastly fans. + +I'm Luke aka [@kixelated](https://github.com/kixelated) aka one of the creators of [Media over QUIC](https://www.fastly.com/blog/media-over-quic-can-streaming-finally-have-both-scale-and-low-latency/). +Fastly likes my [MoQ blog posts](https://moq.dev/blog) and sponsored me to write some more. +For some reason. + +The twist is that there are two copies of this blog post: + +1. This normal post about MoQ and Formula 1. +2. An unhinged post about [Lightning McQueen](https://moq.dev/blog/cars2). + +Pick your poison. +We're going to learn about the numerous ways you can use MoQ **in the fast lane**. + +
+ ![A hand-traced drawing of a black and red Formula 1 car labeled "Zoom Zoom" and "MoQ"](/blog/cars2/f1.png) +
Either way, you're getting a badly traced picture of a car. At least it's not AI generated.
+
+ + +## The State of Race +Let's say you're a big fan of F1. +A **MASSIVE fan**, but this little thing called disposable income prevents you from going to every race. + +Sooner or later, you're going to want to watch the race from your living room. +We need some way to live stream the race over the internet to your eyeballs. + +The answer for the last decade has been HLS/DASH. +Take a media stream, split it into 0.5s to 4s long chunks, and serve them over HTTP. +**It's boring but it works**, and Fastly does it well (sponsored shilling btw). + +The problem is that we hit a latency wall: +- Flushing media in batches **adds latency** (0.5s to 4s). +- Network congestion causes head-of-line blocking and **buffering**. +- Every second of buffering means **even more latency**. + + +This latency wall is why I created MoQ, while at Twitch. +The goal was to make live streams more interactive (and less boring). +**Stream frames, and occasionally drop instead of blocking.** + +No amount of `LL-` prefixes or **ULTRA LOW LATENCY** marketing can fix this. +We need a new protocol to avoid head-of-line blocking, stat. + +## MoQ for the Fans +First, I want to address the elephant in the room. +I've [stated in the past](https://moq.dev/blog/you-dont-need-it) that you don't *need* MoQ for high-quality content. + +And it's true. +If you want to see **every frame** of a live stream, there's not much to gain from MoQ. +You're much better off using HLS/DASH with a large buffer to smooth out network hiccups. +Similar to how YouTube downloads minutes of video in advance. + +Like yeah duh, waiting is always going to result in better picture quality. +But the hypothesis is that some users **prefer lower latency** at the **expense of quality**. + +
+ ![A hand-drawn speedometer with "quality" and "latency" at each end, the needle pushed past a marked "HLS/DASH limit"](/blog/cars2/speed.png) +
The ability to crank that dial is what makes MoQ, MoQ
+
+ +Often the thrill of watching a live stream is to be part of the story **LIVE**, not to see every millisecond of lap 392. +It's why Twitch exists in the first place, the interactivity is more important than the quality. +That place is a cesspool of low quality content, and I mean that with full admiration. + +Maybe the user is betting on the race, or posting on social media, or just want to be the first to know. +**It feels bad being in last place.** +Knowing that you're *still* on lap 392 while your neighbor is on lap 393. + +Anyway, this wouldn't be much of a technical blog post if I didn't explain how it works. +MoQ *can* prioritize newer content over older content (in dependency order). +So each viewer gets to pick if there's a gap in the middle, or a gap at the end. + +There's absolutely a tradeoff here. +But that's also the beauty of MoQ, it's a configurable latency dial you can crank up or down. + +
+ ![A diagram comparing MoQ, which drops 2 seconds of content in the middle of the stream, with HLS/DASH, which adds 2 seconds of latency at the end](/blog/cars2/latency.png) +
**THE DECISION**: You either miss 2 seconds of the action, or spend 2 seconds buffering
+
+ +**NOTE**: MoQ can match the quality/latency you expect from HLS/DASH. +We just allow a lower latency floor. + + +## MoQ for the Cars +While I originally made MoQ for the fans, companies insist on running it on the cars. +Or the drones. +[Or the boats](https://moq.dev/blog/on-a-boat). + +One of the challenges of live streaming is getting the content **off of the vehicle**. +Cellular and satellite networks are a mess. +I don't actually watch F1, but when I do see snippets of it, the camera feeds from the cars are **awful**. + +I'm a video star, not a radio star, but I'm guessing it's probably due to networking. +There's going to be deadzones or interference or whatever around the track. +A reality of signal transmission is that you're going to have to deal with periods of high, low, and zero bandwidth. + +The feed coming from an F1 car is going to use something like RTP over UDP. +There are many, many different approaches, but typically an RTP publisher gives a frame a ~100ms deadline before it's **dropped forever**. +So a small blip of signal interference results in artifacting, tearing, or frozen video. + +But MoQ doesn't give up. + +Like I said earlier, MoQ instead **prioritizes transmitting the newer stuff** (in dependency order). +The old stuff doesn't get dropped, **it gets queued in RAM** (up to a TTL). +When bandwidth recovers, we can **backfill old footage** instead of losing it forever. + +
+ ![A drawing contrasting a broken-up, crossed-out "Realtime" F1 car feed with a complete "Backfill" version](/blog/cars2/backfill2.png) +
If I ever own a racing team, it's going to be called The Backfill Boys
+
+ +Each MoQ subscriber independently decides how long to wait for each frame: +- The **live stream** might wait for up to 1 second +- The **instant relay** might wait for up to 10 seconds +- The **VOD recording** might wait for up to 1 minute. + +All that extra time means more time for old frames to arrive. +The real-time feed might be lossy af, but the VOD is pristine. + + +## MoQ for the Robots +Humans aren't the only ones who need live streams. +Enter the robots. +They byte. + +It turns out that MoQ works for more than just media: +- The speedometer? **A live stream** +- The steering wheel? **A live stream** +- The G-force sensor? Believe it or not, **a live stream** + +Seriously, there's nothing special about media. +It's just delta encoded data. +You can delta encode a lot of things, [even JSON](https://datatracker.ietf.org/doc/html/rfc7386). + +Networks are finite, so we split up media into pieces. +Each individual track, group, frame, packet, *could* be dropped without terminating the media stream. +The reality is that some bytes are just less valuable than others. + +The hard part is putting humpty back together. +That's why we use timestamps; they tell us when stuff happened relative to other stuff. +Even metadata gets stamped so it can be associated with audio/video frames. + +You can, and should, take the red pill and use MoQ for **EVERYTHING**. +A single **cooperative** QUIC connection with: `controls > audio > metadata > video` + +**FUN FACT**: MoQ is being used remotely to pilot drones over Starlink. +Not just for the camera feed, but for the controls too! + +And yes, this sounds simple but it's something WebRTC completely botches. +You have to use a separate connection for metadata and timestamps aren't exposed in the browser. + + +## MoQ for the Track +It turns out there's a LOT of video cameras around a race track. +And there's a LOT of eyeballs that want to see them. + +We don't want viewers directly connecting to each camera, of course. +There's no way that poor video camera could push 100k copies of the same feed. +We want broadcast studios to take those input feeds and combine them into a syndicated feed for distribution. + +But what if there are multiple broadcast studios that want the same footage? +Satellite trucks are expensive and have a limited bandwidth budget. +We don't want to transmit multiple copies of the same footage, nor do we want to transmit footage that no one wants. + +Here's where MoQ shines. + +**moq-relay** is a simple proxy that connects **1 publisher** with **N subscribers** (per broadcast/track). +When **moq-relay** instances connect to each other, they automatically form a cluster. +You can host them yourselves (it's all [open source](https://github.com/moq-dev/moq)) or pay a CDN to host them for you. + +moq-relay handles discovery, routing, and proxying. For example: +- **Each camera** connects to a self-hosted moq-relay at `192.168.420.69`. +- **moq-relay** is run with `--cluster-connect https://cdn.moq.dev/f1`. +- **Studio clients** (or a relay!) connects to `https://cdn.moq.dev/f1`. + +Magically, all camera feeds are automatically available at every relay, automatically proxied if needed. +And only one copy is ever transmitted between each **moq-relay** instance regardless of the number of downstream subscribers. + +This is a huge deal when there's a flakey venue internet and expensive satellite trucks are involved. +Run a few moq-relay instances at each race track, aggregating all of the feeds automatically, and publish them to a CDN. +ez pz + +
+ ![A diagram of an F1 car publishing to a relay that fans out across interconnected relays to many subscribers](/blog/cars2/fanout2.png) +
literally infinite viewers from a single, semi-reliable feed
+
+ +And there's no limit to the number of connections you can establish. +[moq-lite](https://doc.moq.dev/concept/layer/moq-lite.html) will use the connection with the shortest path if there's a tie. +Maybe one connection is over ethernet while the other is over satellite; **go wild**. + + +## Conclusion + +Media over QUIC has a ton of interesting use-cases, even beyond media. +It's the future of live streaming and you should join the ride. +vroom vroom. + +Thanks again to Fastly for sponsoring this post. +They just told me to write something about MoQ, so I did. +**DISCLAIMER**: I don't even watch F1 lul. + + +Written by [@kixelated](https://github.com/kixelated). Feel free to send me [an email](mailto:meself@kixel.me) or check out [moq.dev](https://moq.dev) for more MoQ yum yums. +![@kixelated](/blog/cars2/kixel.png)