859

December 11th, 2024 × #streaming#video#encoding

Streaming Video in 2025

In this episode Wes and Scott discuss video streaming in 2025 - how HLS streaming works, transcoding and hosting video files, CDNs, player libraries like MediaChrome, and various video platform options.

or
Topic 0 00:00

Transcript

Wes Bos

Welcome to Syntax. Today, I got an episode for you on streaming video in 2025, both rolling your own streaming video, how how that works, as well as talking about a bunch of services that will help you out with it. My name is Wes Bos. I'm a developer from Node, streams a lot of video. With the as always JS also someone who streams a lot of video, Scott Tolinski. How are you doing today, Scott? Hey, man.

Scott Tolinski

Doing great. You know what? I it is definitely a deep well that I have traveled many times before, but the landscape definitely has changed. So I'm really stoked to talk about this in general, just beyond the tech and, practically, what can you do in in 2024

Wes Bos

and beyond Wes let's just say 2025. 2025. Yeah. Let's face it. We're there already, which that's crazy. Right? So if you are gonna be rolling your own, you're gonna need Sentry because you're gonna be hitting your fair share of bugs. I know we run FFmpeg in a WASM worker in serverless functions, and we've hit our fair share of oddities that have have popped up there. And and Sentry has been pivotal in figuring out why those things don't work. So check it out. Sanity Scott I o forward slash syntax.

Scott Tolinski

Yes. Absolutely pivotal.

Scott Tolinski

So let's get into it. 1st and foremost, streaming video.

Scott Tolinski

You know, in the past, in olden days of web, you couldn't use anything other than Flash to play video.

Scott Tolinski

Then we got the video element for HTML.

Scott Tolinski

And the way people were primarily doing it at the time on a non, like, large scale, like, if you were just having video on your site, what you would do is you would encode a few different versions of your video.

Scott Tolinski

1 JS like, man, I even forgot o g v o g g format. Awful. Yeah. O g v and whatever. Firefox. So all the different browsers had their own different formats. You had to ship all those different formats to everyone.

Scott Tolinski

Then, you know, YouTube revolution, all that stuff, video streaming just kind of became the norm. And, really, you wonder, like, well, why can't every website including mine do video streaming? And the the answer is really that you can. So here's how video streaming works. It's a a format called HLS, which stands for HTTP live streaming.

Topic 1 02:18

HLS video streaming explained

Scott Tolinski

If you've ever seen a dotm3u8 extension, then you have seen what could be considered a playlist for chunks of video.

Scott Tolinski

So if you've ever I I Node, I I don't wanna put myself out here too much, but if I was streaming hockey games that were not in my my area, and I'm not gonna say legally, but I was just streaming them, there was actually a website that would just post all of the NHL apps m three eight u's, and you would just copy those and paste it into VLC.

Scott Tolinski

Because the m three eight u is not a media file. I think that is something that is often misconstrued by people who don't do video streaming. They see, oh, wait. I'm I'm loading a video. It's an m three eight u. I'm gonna grab that m three eight u. I'm gonna convert it.

Scott Tolinski

M three u eight. Yes. Oh, dyslexia.

Scott Tolinski

Me u eight. Yes. M three u eight. I'm just gonna I'm just gonna grab that and convert it. You can't. It's a it's a playlist with chunks inside of it. And, again, other players such as VLC or anything can read this just like an HTTP address.

Wes Bos

It's just text. Right? It's just point it's like an RSS feed. It's just pointing to where the pieces are and describing the pieces inside of it. It's Winamp.

Topic 2 03:25

M3U8 files explained

Scott Tolinski

You load up Winamp, you got a playlist. Do you remember that?

Wes Bos

Yes. Oh, yeah. For sure. Winamp was, actually, the we're gonna be talking about MediaChrome, which is the web component for playing stuff that you can skin any way you want. And there is a Winamp skin for MediaChrome, which is, full circle.

Scott Tolinski

That's wonderful.

Wes Bos

So if you want to build your own m three u eight file, you need to transcode your video into multiple versions, meaning that you have to first chunk up the video into 2 to 4, sometimes longer second chunks.

Wes Bos

And, usually, they those are dotts files, which drives me nuts because dotts is also TypeScript. And if you search for video files on your on Mac Finder, it shows you TypeScript files.

Topic 3 04:12

Transcoding video with FFmpeg

Wes Bos

And those chunks are you generally will take like, let's say you take a 4 k video that's a minute long. Right? Mhmm. It will convert it into 2 to 4 second long chunks, and each of those chunks will often it's not always the case, but often those chunks will have multiple resolutions and multiple bit rates. So you'll probably have a 4 k one with a specific bit rate, and you'll have an, 10 80 p one with a specific bit rate and and so on for however many versions you wanna be able to offer the people that are are visiting. And resolution and bit rate is kind of a funky thing because resolution doesn't entirely define the quality of the video, the the bit rate of the video also, and and and the the codec and all that stuff does as well. But, generally, with my, with, like, coding videos, you wanna you don't necessarily care about the resolution so much, but you care a lot about the bit rate because when you start to go down in bit rate, things start to get fuzzy, and and the thing that goes fuzzy first is text. Yeah. You know, you might you definitely might notice this.

Scott Tolinski

Around, like, details and edges, things get kind of, like, blocky and digital looking. And it isn't, like you said, that the resolution is bad. It's just that there's not enough bits in in the video itself.

Wes Bos

You know, I guess this is more of a compression thing, but I remember when I used to download, like, Family Guy in the Simpsons, I was always, like, marveling how much smaller the file sizes

Scott Tolinski

were Yeah. Than, like like, regular TV shows. And it's because, like, the colors in them were were much simpler, and they compress a lot more. Yeah. Totally. Yeah. Stuff's not moving. Just big blocks of color. And you'll see it too. Especially, you'll see that if you dial down the compression or or or you dial down the bit rate with compression or otherwise.

Scott Tolinski

And you'll see colors that should be solid potentially waver a little bit and be, like, 1 or 2 colors that are kind of blocky, if not the same, especially around, like, shadows and stuff like that.

Wes Bos

So to create these m three u eight files JS as well as the chunks themselves, you can the tool that everybody uses is called FFmpeg.

Wes Bos

FFmpeg is this just wild open source project that, like, many $1,000,000,000 companies are built on top of. But there is a flag for it that is HLS play playlist type, VOD, which means video on demand. Mhmm. And that will chunk it into into many ones because you can also have a m three u eight for live streaming, which is Scott's hockey games, and that will output all of the sizes for you, as well. Sorry. That will only output 1 size. You have to run it multiple times and then concatenate them all into a single m three u eight file. I wrote a 120 line transcode TypeScript script just because scripting in bash is painful.

Wes Bos

I much rather I'm not doing the transcoding in JavaScript, but I'm using JavaScript just to sorta script it, which is good.

Topic 4 07:34

Orchestrating FFmpeg with JavaScript

Wes Bos

Orchestrate. There you go. Yeah.

Scott Tolinski

Yeah. And you'll frequently see this. If you're paying a service to do this, there's there's companies like Bitmoven that, like, primarily ingest or AWS SMVOD flows we'll talk about. But the way that this typically works is that these are being done in just kind of like a queue. I'm gonna upload this thing, and now here's, like, a queue of all of the different, different resolutions and versions that my Mhmm. Transcoding

Topic 5 08:07

Video encoding queues

Wes Bos

process needs to take care of.

Wes Bos

That's why you upload a video to YouTube. It takes so much longer to, like, process than if you're uploading them to, like like, I upload a TikTok and a YouTube short at the same time, and the TikTok is ready in, like, 2 seconds. Mhmm. And the the YouTube takes forever, and it's because they're making I don't know, how many how many possible copies. Do you wanna know how many?

Scott Tolinski

Yes. I would love to know. Well, it's different for, like, every video, really. Maybe not every video. There's definitely a rhyme and a reason to it. But if you use YouTube DL, YouTube DL, a great project for, downloading videos off of YouTube. If you've used YouTube DL, there is a command, and I'm trying to see what it is for options, that just simply lists all of the available versions.

Scott Tolinski

And there is a lot in there. There's a lot of versions, more than you might expect.

Wes Bos

That's interesting. By the way, are you not using YTDLP yet?

Topic 6 09:04

YouTube video encoding

Scott Tolinski

I am not using YTDLP

Wes Bos

yet. Project got kicked off of YouTube, YouTube DL, and then they came back.

Wes Bos

I forget why, but now it's it's under YTDLP.

Scott Tolinski

Oh, looks like it is still maintained. I used to use YouTube DL or YouTube, essentially, as my video compression software to save me time for level up tutorials. It's like It it so what I would do is, yeah, you can drop a whole folder into YouTube. So I would finish my course. I would export it as 4 k. I would drop it into YouTube. I would put it into a playlist. And then once it was done processing, I would tell YouTube DL, download that whole playlist at the highest resolution possible. And next thing you know, I have super nicely compressed files that I can zip up and then give those to people to download. Worked really well. They're so good at it. Like, YouTube has its own They're the best. Yeah. Algorithms for doing this type of thing. But, also,

Wes Bos

you could probably use this just to transcode and then download the chunks yourself. You know? Yeah. I bet. And then some some transcoding services as Wes, like Mux, they'll just do it on demand as Wes, where you can upload a file and you can immediately start streaming it. They must have some special logic around, like, doing it in parallel, because if you have I have, like, a m one Mac. It's pretty fast. I kinda want the m four now that for for some of this. But, like, an 8 minute video will take 5 minutes to to chop up into

Scott Tolinski

6 or 7 different resolutions. Right? Yeah. So The m 4, Node, I don't know if you saw this on the m 4 distraction tip. The screens are not glossy, shiny anymore. Yeah. That's I want that.

Wes Bos

Yeah. I want that as well. That that seems pretty sweet. I can't justify I just can't fathom No. Unless you're doing, like, FFmpeg. And and even then, I'm I'm sure it's not that big of a jump. But, like, what else are you doing that you need it that fast? You know? I'll tell you what.

Scott Tolinski

Masking in DaVinci Resolve, especially, like, automated masking Yeah.

Scott Tolinski

Yeah. It, like, really, the the slowest I've ever seen my computer run. And this computer, like, does not struggle. I tried to do some magic masking of just a little bit, and my computer was just like, hold up here. I I think I'm about to crash. And it's too it was just, like, way too much for it. And I've never really had that experience on this computer. And Yeah. It's a bummer because the magic masking stuff is so cool. I wish I could, actually use it in a regular capacity.

Wes Bos

But do you you saw that somebody got a m four, and it's it's much better on there? Because, like, the No. I'm not. Show that. It's, like, twice as fast. No. Oh, yeah. See it. Yeah. I'm waiting for the m five.

Scott Tolinski

Yeah. Yeah. I think I'm gonna gonna hold out too. That's I've decided to wait till the m five. I I've made that because I did see that they might be making the little notch camera thing much, much smaller.

Scott Tolinski

And so that's a a motivation for me to wait.

Wes Bos

Alright. That's good. Alright. So back to to video.

Wes Bos

Wes talked about using FFmpeg to transcode your video.

Wes Bos

It's it's making what are called variants. Right? The the different versions. And many players will be able to adjust the bandwidth that is needed. So that's sometimes sometimes when you start watching a video, you'll see that it's it's, like, a little bit blurry for the 1st 2 seconds, and then it it gets much better. And what's happening there is it's it's testing your, it gave you, like, a Wes for the 1st 2 seconds, and it goes, oh, you downloaded that pretty fast. You got some fast Internet there. So then it goes, okay. We're gonna bump you up to four k, and then and then you get the the better version of that.

Scott Tolinski

Yes. And then, again, if it's struggling, bump you back down. I think just about everyone has experienced this, especially Wes, faster Internet wasn't as available as it is today.

Scott Tolinski

Definitely was like a major thing to have video all of a sudden go super blocky all the time. And and maybe that, you know, a lot of people are still experiencing that.

Scott Tolinski

There's also another really cool thing that you you because, right, you have a playlist, you have chunks.

Scott Tolinski

And this is cool from a technical perspective for me because I I hate this in real life. But dynamic ad insertion, that's how it works. It's essentially, they're splicing a message, and there's a specific format for this type of message. We're not getting in the technicals here. But they splice in a message into that stream that then chooses to load the ad before going back to the m m three u eight playlist. So I thought that was super interesting JS because we're dealing in chunks here, it makes it really easy to insert and add in between chunks. Yeah. You can simply just swap out one of those chunks with a a different one. Because if you look at the m

Wes Bos

three u eight file, what it does is it lists the resolutions and bitrates, and then those point to additional m three u eight files that have the chunks in them for each of the resolution bitrate combinations.

Wes Bos

And and then they will then point towards a actual file that lives somewhere, which is a dot t s file. So you simply are just just swapping that sucker out with something that is dynamic on request.

Scott Tolinski

Yeah. Totally.

Wes Bos

So let's talk about bandwidth and and hosting. So once you actually have these dotts chunks, like like, where do they go? Right? And this actually came upon a a question that we had from from well, it it kinda came 2 ways. Right? Like, first of all, I figured out that you can host video files on Cloudflare r two, and the bandwidth on Cloudflare r two is free.

Wes Bos

There's no bandwidth cost. You simply just hold. You pay to hold them. So the conversation, I was like, I was like, can you just use this for streaming video? I know Cloudflare has a stream product. I know that Yeah. There's mux and whatever. And I'm not saying I'm gonna do this because this is is kinda hard. Although, Aaron Francis and and Steve, Tenuto, they actually are doing this. They're doing exactly what I was asking, whether they're just hosting it on Cloudflare themselves, and they're processing it and whatnot.

Wes Bos

So what needs to happen is you need to host these chunks somewhere.

Topic 7 15:27

Hosting video chunks

Wes Bos

Right? And you you need to be able to download them and stream them in as as they are needed.

Wes Bos

And where do you put big files? Well, you can put them on Amazon Wes three. You can put them on Cloudflare r two. Right? Like, all of the big, infrastructure giants out there have products that will allow you to simply store files or store,

Scott Tolinski

they call it, blob storage. Right? Just store data, raw data. I will say that if you are choosing to go down this route of storing these blobs yourself or the these you have to be very organized with your with your folder structure because it can get out of hand. You have all these different versions. You have all these different chunks of videos. You have different videos individually.

Scott Tolinski

You should look up exactly, like, a good structure to do that before you just choose to use it. Database for these types of things because

Wes Bos

JS as much as you can download like, as much as you can, like, save a m three u eight file, you you really have to be able to generate those things dynamically, especially if you're trying to limit access control.

Scott Tolinski

Let me tell you the workflow. So this is the Amazon suggested workflow if you were doing this by hand. You have 1 bucket for your source.

Scott Tolinski

So you have a source bucket, then you have a Lambda function that looks into that bucket, and then it sends it to media convert.

Scott Tolinski

That converts it and then puts it into another bucket.

Scott Tolinski

After it puts it into the other bucket, it writes to a database where the locations for those files are, and then it puts it all behind a CDN. So, yeah, you in this case, you need a bucket for the source. You need a bucket for the destination. You need Mhmm. A process to convert them. You need a CDN, and then you need a database to actually store where they're at. Unless if yeah. It's, of course, if you're doing a whole upload, kind of process.

Wes Bos

Yeah. If your user so that FFmpeg Node is kinda interesting because if you're just doing something like I'm doing, which is you have courses.

Wes Bos

And every time you have a a course or update a video, just run the script on your computer and then and then upload the output to it. But if you're having users upload it, like, for example, Blue Sky, they use Bunny, CDN. They don't use Bunny Stream. That's a product.

Wes Bos

But they they do this. You have to upload the user's thing, and then you gotta ingest it, and you gotta convert it, and then you gotta put the all the pieces somewhere.

Wes Bos

Let's talk about specifically Cloudflare, because I think that this is what got me going down this whole rabbit hole, which is Bandwidth on Cloudflare is free.

Wes Bos

According to their terms of service, they even updated it to say this, as long as you are using another product on Cloudflare to store these, so Cloudflare r two is a place to store them, It is allowed. Even though they have a competing stream product, you may put them in a Cloudflare r two product, and then you may put the Cloudflare CDN in front of that because that's the 2nd step to this is Mhmm. You can put your files in a bucket somewhere, but that's not going to be fast across the world. You put them in in in Virginia, and your users in Germany or Australia are gonna have a little bit of slow they're gonna have slow streaming. Right? So what you can do is you need you need to put those files on servers around the world.

Wes Bos

And Cloudflare's CDN sits in front of your r two bucket, and that, again, that is allowed via the terms of service.

Topic 8 18:57

CDNs for video delivery

Wes Bos

I looked into it, and and then that will be available around the globe in their different data centers.

Wes Bos

Yeah.

Wes Bos

Man.

Wes Bos

Let's talk about the actual cost behind these types of things because, first of all, I'll point to a Twitter thread where, Steve, Steve and Aaron, they have a bunch of courses as well. They did 15 terabytes of 4 k video for $2.18.

Wes Bos

You might be thinking, how is that possible? So let's let's break it down into to how how these things work. And we did do a whole show on hosting big zips and whatnot, but this is just specifically video. So on Cloudflare, let's say you have a course with 30 15 minute videos. Right? That's 7 and a half hours of content, that needs to be uploaded.

Wes Bos

That 7 and a half hours of content is probably going to be about 16 gigs of files once you have, chopped it up into all those multiple pieces and for multiple resolutions. It probably Wes if you only do, like, 4 k, 10 80, 7 Wes. But if you wanna go all the way down to, like, 3 60, it's gonna be around that. Yeah. Now you have so you have 16 gigs of video.

Wes Bos

R 2, which is Cloudflare's storage product, charges you 1.5¢ per gig per month, meaning that just to simply hold those files, it's gonna cost about 25¢ a month, or, about $3 a year to just hold those. And and that's not a lot if you have a single course. It is a lot if you have, like, your your blue sky or Twitter, and people are uploading

Scott Tolinski

that much every minute to you. I I wonder how that compares to Mux, which for storage is Well 0.003¢ or $0.003, so 0.3¢ per minute.

Wes Bos

Yes.

Wes Bos

That's I really like this about Mux because they I I did the math on Mux as well because Mux takes the hard part, which is trying to do all this, like, crazy math. I don't know how many gigs I'm gonna be using. You know? I don't know how many people are gonna be watching.

Wes Bos

So if you take that 30, 15 minute videos, 7 and a half hours of content, Mux does it per minute, so that's gonna cost you about a buck 35 a month to store, or 16 year $16 a year to hold it. So, really, it's it's significantly more, but really not that much if you're thinking about seven and a half hours of content.

Scott Tolinski

I can give you some real data here.

Scott Tolinski

LevelUp tutorials has 6,000, minutes uploaded to Mux. So let me do that math here.

Scott Tolinski

Yeah. It is for 6000 minutes of video, which let me tell you JS a lot of courses of video. A 100 hours.

Scott Tolinski

A 100 hours of video.

Scott Tolinski

It cost me $18 to store that.

Scott Tolinski

And then a month. And then because all of these videos have been up for a long time, they're not being encoded very much. So it only cost me a dollar this last month to encode all of my videos because they've already been encoded and stored and encodes as you go, and then $13 for minutes streamed. So $33 for the entire course base for Vercel up tutorials

Wes Bos

for whatever your for my database. Yeah.

Scott Tolinski

I know. It's it's it's really super reasonable. And let me tell you why it's so good. You don't gotta worry about storage or ingest. You don't have to worry about saving things, database. You upload it, and then you just get the m three u eight file, and you just plop that in your player. To go. Yeah. Yeah. So,

Wes Bos

the other thing, when people watch it, it costs you 5¢ per hour of video watched. So if somebody watches that entire 7 and a half hour course and this is kinda how I how I look at it. Right? My courses are anywhere from 7 hours to 40 hours.

Wes Bos

And you'll look at it, and it that's if it's a 7 and a half hour course, it's gonna cost you 43¢ if they watch every single minute of it and and don't skip ahead or whatever.

Wes Bos

So 43¢ for somebody to watch 7 and a half hours of video.

Wes Bos

But then, like, if you think about, like like like, Netflix, you know, people watch 3 hours a day. Mhmm.

Wes Bos

That's 90 hours a month, and it costs you, what, 5 5¢ per hour, $4.50 just in bandwidth.

Wes Bos

So it's still still less, but but not nothing. Yeah. But that's just a kind of an idea of of that. And the the other thing that we're not talking about here is that if you are not running the FFmpeg on your own computer, you have to now pay for a server to to to run that compute, And and that server would be easy. It depends on, obviously, how much video you have, but 10, 15, up to 100 and 100 of dollars a month for these really GPU heavy servers that can can do it very quickly. So, again, that's another thing. It doesn't matter. It doesn't need to be much faster or not. Yeah. And Amazon,

Scott Tolinski

AWS has, like, a service specifically for this, elemental media convert. Right? So, like, they have a service that's completely designed just to handle media conversion at this at this scale. I and I did the math on it. It's much more expensive than Mux is. Is it? Yeah. Plus, I tried to do the whole Amazon thing, but it it felt very rickety. And it's mostly because I'm an AWS total noob, in terms of all the services. So when you start to connect, like, 8 different services together, I'm like, oh, boy. Too much for me. Yeah. Well, you should look at the, the graphic of

Wes Bos

how Amazon suggests you do video on demand. Oh, yeah. And it's like, yeah. Upload it to s 3, put it in a Lambda, then throw it to the BDA convert, then put that on CloudWatch, then that goes to EventBridge, then that goes in front of CloudFront as a CSS, and then, like, whoo. And then you have you have costs for all of those things as well, which probably at a mega like, you're a you are a CBS.

Wes Bos

You could pay people to figure that out, but Totally.

Scott Tolinski

Not for for regular folk. Totally. Yeah. That's where I landed on. It's like, this is not for me.

Scott Tolinski

The the solo video guy trying to get his website Mhmm. Working nice.

Wes Bos

So let's talk about actual players. So you cannot take a m three u eight and just pipe it into a video element, because that like, HTTP live streaming is not a web spec, So there's nothing in the browser that can do it. You need, a library to be able to, to parse it. And I I believe that's HLS JS is the the big one. That's the big one. That's the one everybody uses. HLS is actually, built into Safari,

Scott Tolinski

but it has been since version 6. So this is HLS is an Apple technology. So that makes sense that they would have it in there. But, yeah, you have to use HLS and you've always had to use HLS, JS. So that that is the one. And in the past, there's been, like, a 100 different playing player libraries. In fact, man, I I could I could spend a whole episode on different Yeah. Remember JW Player or JW Player Plyr, p l y r, player Scott JS, I think.

Topic 9 26:38

Video player libraries

Scott Tolinski

Yeah. There there has I could do a whole episode on video players I have used, loved and lost. How about that? Video players I've loved and lost.

Wes Bos

They're all so painful. So the the one that the one that I've been using for the last couple of projects is Mediacrome, and that's from Mux.

Wes Bos

And it's a web component, and it just freaking works. And it like, you just it's it's like HTML.

Wes Bos

You import the library. That's it. And you run no more JavaScript past that. You simply just use the tags that you need, and it will it will do things like you can have switchers. You can do AirPlay.

Wes Bos

You can do thumbnail preview, like, pretty much anything you can think of. There's either a plug in for it or it's built in, and you simply just use the, web component tags. And it's smart enough to, like, look up for the parent media source and and communicate with it. And it's such a great experience. Yes. It is. And it honestly, MediaChrome

Scott Tolinski

is not only my favorite player by a long shot.

Topic 10 27:41

MediaChrome video player

Scott Tolinski

It's probably my favorite web component by a long shot. You know, one of the big things that I have noticed with playing a video player library specifically, like I said, I've used so many of them, is that so many of them are maintained by a single person somewhere.

Scott Tolinski

And there are endless edge cases with a video player, and you get into a situation where you want, let's say, Chromecast.

Scott Tolinski

And they're like, oh, yeah. Chromecast is broken in these browsers. I'll get around to it at some point. And and, like, then you're you're that's that's what you have to deal with. What am I gonna get in there? I'm gonna submit PRs to this complex video player, project. And I've never had that with, MediaChrome.

Scott Tolinski

It just works. It works super well. It does everything that it's supposed to do, and I I don't have any bugs with it. You have, like, full control over all the CSS

Wes Bos

over everything. You Node, it's not like a

Scott Tolinski

and it's not like a iframe embed or anything like that. It just it works. And it work we use it on syntax websites. It's not just video as well. Right? It works for audio. We use it just for audio. Yeah. I didn't know this. You can load YouTube up in it now. You can load Wistia or Vimeo up in it. So I didn't know Node. Or Spotify audio. There's a Spotify audio element.

Wes Bos

That's interesting. You can embed a Spotify right in the page. Yeah. It's pretty cool. It's it's I I have a talk coming up. I'm like, you don't have to like writing web components, but you certainly are going to love using them.

Wes Bos

And it just somebody has done the work of building such a flexible player. Huge project.

Wes Bos

And it works in React and Svelte and, vanilla JavaScript. It works in HTML.

Wes Bos

You know? You don't even need a framework for it. So, yeah, it's just a a really nice, nice experience.

Scott Tolinski

Yeah. It takes care of all the little things. And so, definitely, if I were saying anything, Wes, MediaChrome.

Scott Tolinski

Next 1, CDN. Like, what do you do about a CDN? I've I've done the Amazon route putting CloudFront in front of video before.

Scott Tolinski

Obviously, if you're hosting it on CloudFlare, that's not something you need to worry about. So you had mentioned that there is a, like, specific video streaming service that Cloudflare has. And you know what? It used to be iffy. It's called Cloudflare Stream. And it was only iffy because it was like you you drag things into the UI, you copied and paste or whatever. The API was, like, nonexistent.

Topic 11 30:15

Cloudflare Stream

Scott Tolinski

But now I see that there is, like, a full API.

Scott Tolinski

The pricing seems pretty decent, and you can do things like control access by location.

Scott Tolinski

You can have user generated.

Wes Bos

So It still doesn't do 4 k, though. So it's Node do 4 k. Not worth your your time. Doesn't do 4 k, really. And I I think part of that is because they, again, they bill based on, minutes of video streamed. So if everyone starts using 4 k, I don't even know what the the whole but, like, we talked about this probably 4 years ago on the podcast. You Node? Now it doesn't support 4 k, and like, oh, maybe soon, but I don't I don't know what the the plan is there. They do have WebRTC support. Okay. I do wanna say really quickly about the Cloudflare r two.

Wes Bos

Cloudflare r two by itself is still in a bucket in 1 place in the world, and it is not CDNized.

Wes Bos

Even if you have Cloudflare orange cloud in front of it, it's still not going to, be CDNized. You have to set up either rules in a worker, or you have to set up some rules based on bucket names to explicitly turn on CDN caching around the world for those your video hunks. For your hunks. Yeah. For your hunks. I did just find the FAQ.

Scott Tolinski

Cloudflare, we use different adaptive streaming levels from 3 60 p to 10 80 p. Yes.

Scott Tolinski

They don't even say anything about 4 k. Seems wild that

Wes Bos

it's still not a thing. Like, I could understand 4 years ago when their initial product, but

Scott Tolinski

nothing.

Scott Tolinski

To me, if YouTube supports it, you gotta support it in your in your product. I agree. And, like, I watch YouTube in 4 k just sitting on my computer. I watch my YouTube in 4 k in VR.

Scott Tolinski

And

Wes Bos

there you go. Yeah. Just trying to win here. Yeah. Access control. Basically, when you want to provide a link to something that is in a bucket, whether it's s 3 or r 2 or any of these things, they all they all follow the same Amazon spec. It's it's actually kinda funny. If you if you create an access link on Cloudflare r two, it has, like, dash a m zed. Like, it it uses Amazon in the URL because Amazon made the spec. So you either have to do that, or you can just leave the files open and then lock down access to the m three u eight. It really depends on if you think people are going to be, stealing your video or not. In a lot of cases, even in, like, big TV stations, it's not worth the the hassle and the extra compute to to check for access that they just say. Like, if you can't access our m three u eight, then it's not a big

Scott Tolinski

deal. Yeah. I will tell you that, people streaming hockey games, they they do protect those m three u eights. They don't want anybody just grabbing their stream that they've gotten and putting it on an iframe, because that's what people were doing. Like, they you know, the sites have, like, these big old like, filled with 10,000 ads on them, and that's how they make their their money e Oh, yeah. Illegally thing. So that what they do is they people were copying the m three u eights, putting them on a single page with an iframe and sharing that so there'd be no ads. And then, of course, they've gotten smarter than that. Yes. Oh, man. They gotta lock it down. That's crazy.

Wes Bos

Yeah. Well, it's it's kinda funny because when I posted about this being able to use Cloudflare r two, a lot of people are like, they're gonna shut you down, or they're gonna they're gonna try to they're gonna try to get enterprise sales on you. Does my concern too. Yeah. And it certainly is still a concern because it could happen. But, like, they had they have a blog post that says, we explicitly declare that you're allowed to do this. I think the only caginess they have around it is that people abuse it. People put copyrighted material on here. People use it to stream hockey games or whatever, and you have to be able to lock those things down, or or people simply are just like like theoretically, YouTube could run on Cloudflare r two for free. You know? And they're not gonna let that happen because it's there's a much bigger company. So, like, at at a certain point, they say, there's gotta be somewhere for them to say, hey. You can't do this.

Wes Bos

But I think that you're a you're a ways away from being an enterprise customer, I think.

Wes Bos

Yeah. Although, here I am on on Vimeo. I'm just looking at moving mine off of Vimeo because I was using the $200 month pro plan from Vimeo, and they came knocking at my door saying, you're not following terms of service. Mhmm. And now it Scott me, like, $10 to to stream all my video.

Scott Tolinski

Yeah. $10 to stream your video. You could be streaming on Mux for, quite a bit less.

Wes Bos

I I they have they have offered me, like like, tons of credits and whatnot.

Wes Bos

Most of that $10 is because I my free courses are also streaming on there. So another option I could do is simply just stream the free ones from YouTube.

Wes Bos

Mhmm. So that's that's an option as well. But I need to Yeah. I'm probably gonna move it to Mux fairly soon. And I was talking to Dave Kiss, from Mux, and they said they are working on a new program where if you stream developer content, they'll give you $1,000 a month towards your credit, which is a lot. You can you could probably host all of Vercel up tutorials on that many times over. Right? Man. That's cool. In exchange for a logo on the page.

Wes Bos

So I would put a powered by Mux or whatever, and then you could get things. So it's that's it seems like a pretty cool program.

Scott Tolinski

He said the announcement's coming soon, but there's already a page for it. Oh, well, shout out to Mux. They've always been, good good friends of us, good friends at LevelUp.

Scott Tolinski

And, honestly, Dave's a really cool guy too. We got to hang out at

Wes Bos

render last year. Oh, yeah. Lot of fun. Yeah. Yeah. They're they're a good company, and and, like, as much as this stuff costs and, like, it's fun to go down the route of, go down the route of doing it yourself, the Mux is not fleecing you, like a lot of these other platforms as the services Yarn, so I would feel pretty comfortable going there.

Wes Bos

But let's rattle through a couple other options.

Wes Bos

Scott the Mux Love Fest. Cloudflare Stream, we said Node four k.

Wes Bos

Bunny JS the I keep hearing about Bunny. Bunny started as, like, a CDN company. Now they have one called Bunny Stream, and their prices are extremely good.

Scott Tolinski

I've been hearing about Bunny from my daughter.

Scott Tolinski

She's always telling me about Bunny.

Wes Bos

So Bunny also rolled out Deno, like, edge functions Nice. But not, like, time limited. I don't know. I gotta dip into it a little bit more, but it seems seems pretty good, to be able to run JavaScript on Bunny. It's kinda I think it's their kinda their jab at Cloudflare Workers.

Wes Bos

So, you know, like, Cloudflare is kinda taking over the whole AWS space as, like, more affordable and more approachable. I think

Scott Tolinski

I think Bunny is gunning for that that whole space as well. They're coming for the number Node spot. Do you remember that song, Ludacris? Man. No. I don't. Oh, yeah. That was kinda late stage Ludacris. Not really like Ludacris rollout prime or anything like that. Rollout is That was a good one. Yep. A big fan of, Ludacris.

Scott Tolinski

There's also AWS, like we mentioned many times. There's the whole VOD workflow, the video on demand workflow that you can it's essentially like a one click to start up this this workflow. But, again, I probably wouldn't recommend it unless you are interested in building out click to start, pnpm engineer per year to $300 to maintain. I wouldn't use this one unless you are serious serious.

Topic 12 38:17

Cloudinary for video

Scott Tolinski

Also, we mentioned, we have not actually mentioned them throughout this episode. Cloudinary.

Scott Tolinski

Yeah. That's an option. Cloudinary also has a a video solution, which it was one of the ones I tried out, but it was a little immature when I tried it out several years ago. So I would be interested in knowing what it's like now.

Scott Tolinski

They talk about having programmable media so you can automate video life cycles, whatever that means. Automation for video with video flow, they have a full video API now. So, that looks nice and interesting. So I have not used Cloudinary for video specifically.

Scott Tolinski

But given how nice the product is to work in on Yeah. On photos, I kept imagine that would look pretty nice. $224

Wes Bos

a month gives you 600 gigs of bandwidth. I these companies gotta start giving free bandwidth because now the the fact that Backblaze and Cloudflare offer free bandwidth, It's it's really hard to to justify

Scott Tolinski

some of these other ones. I have, something interesting here. There's there's, like, you get a lot of the cool transforms and stuff. They have an example with a 16 by 9 video, like your normal video of a surfer.

Scott Tolinski

And then with just the URL, it transform in smart crop to stay locked on to a subject of which is the surfer for vertical video. So they have the 16 by 9, and then the vertical video is just kinda panning around. And they're just serving that AI vertical video.

Wes Bos

That is really pretty fancy. That's cool. I think that's how a lot of these these, like, TikToks that like, they do programmatic video. Yeah. This is a huge thing on TikTok. They'll take, like, a Reddit story, and they'll take some video of some guy in Pakistan, like, repairing a a car's axle or something like that. Player just jumping through Minecraft. Yeah. Yeah. They'll give you 2 videos in 1 story that are totally unrelated, but you're like, this is hitting all the receptors in my brain right now. I think that's how a lot of these guys make this this stuff. I don't know if it's specifically with Cloudinary, but it's this programmatic a Remotion is another one that we we didn't talk about. They're not really in this space, but you can programmatically make videos with React, which is we've had them on the show as well. Yeah. There's also Bitmoven,

Scott Tolinski

which Bitmoven is I found to be a bit technical.

Topic 13 40:45

Bitmovin video platform

Scott Tolinski

I I didn't really like using it when I tried it. It could be different. It's many years later.

Wes Bos

Warp, I think. Like, you got HGTV or something.

Scott Tolinski

I'm sure it's very solid, but in my experience, it didn't feel like it didn't feel like Mux Easy, and it didn't feel Cloudflare Stream Easy.

Scott Tolinski

And so, therefore, it's like, well, if those ones are cheaper for me, then I'm probably not going to bother. Yeah. Yeah. That's it's probably worth looking at if you've got a bigger

Wes Bos

bigger operation and you're pinching them because even, like, half a cent per minute viewed is is massive gains. Totally. So I'm sure people are always looking. And, also, like like, being able to move from one to another is like like, I'm on Vimeo, and that's not very movable.

Wes Bos

Mhmm. Because now I have to, like, reupload everything to another platform. But if I had these if I had all my source files in, like, a bucket somewhere, I could pretty easily move to some of these other services that just slurp up from a bucket and then transcode from for you. Yeah. That's a good point.

Scott Tolinski

Moving moving those buckets would be easier.

Scott Tolinski

Yeah. Before we get out of here, there's some other features that we didn't talk about, like live streaming. And, like, live streaming is is kind of like, Wes you're live streaming from a computer to an ingest server that is then on the fly encoding the video to the different formats and then serving that.

Scott Tolinski

That's crazy. Technically, I I can't imagine writing something like that, so I'd be interested in learning a little bit more explicitly about that process.

Topic 14 42:13

Live video streaming

Scott Tolinski

I know it's FFmpeg because you can just stream info in. I was actually doing that when I was writing my own screen recorder with FFmpeg.

Scott Tolinski

It was very difficult,

Wes Bos

to I was writing massive file sizes. All the way down. I was trying to take raw video,

Scott Tolinski

and convert it into movie via, like, streaming it into FFmpeg, and it would be, like, 10 gigabytes for 10 seconds of video. And I was like, I'm doing something wrong here. There's there's a there's a problem.

Wes Bos

Yeah. It's the the bit rate is extremely high. I've been been playing with this other recorder.

Wes Bos

It's the one I sent you. Polycapture.

Wes Bos

Yeah.

Wes Bos

And they record multiple inputs at once. And, yeah, the files that come out of that thing are huge, but I I kinda don't want it any other way because then you lose you lose some of the quality.

Wes Bos

Yeah. Word. Clip stitching is another one if you wanna stitch clips together. This is actually something we do on the Syntax website for audio, to be able to detect Scott and I's voices.

Wes Bos

We did we clip on a, like, a 10 second clip on the end that says I'm not gonna say what it is, but it's a it's a set of decipherable words that we use to detect who is which speaker.

Wes Bos

And every time that we we do that before we send it out for transcript, that runs through FFmpeg and stitches them together.

Wes Bos

View stats is another another really interesting one as well if you wanna know how many people are are watching it or, like, where in the video are they are they watching? Like, we can go into our Spotify stats and see exactly visually where the ad reads are because the it goes

Scott Tolinski

down. People skip 30 seconds, and it goes right back up. Yep. And and, you know, YouTube obviously has, like, Wes in class for these types of analytics. You can see so much with that stuff.

Scott Tolinski

But if you wanna do this on your own, another and this sounds like a Mux ad for how much I'm pushing them. But another Mux feature is Mux data that has really super good video analytic data, smoothness, playback, success, viewer experience.

Scott Tolinski

So there's a lot of, like, really nice things where you can track how how your video JS being consumed. Now, obviously, that's not gonna be like YouTube Wes you get all of the information on, you know, individual users and geographic data and stuff like that, but it's still Mhmm. Pretty decent.

Wes Bos

And then, subtitles is another one. It's traditionally, I've always done my subtitles as a track in the video player. So there's a track element in HTML that you can use to point towards a Wes VTT file, and that will provide captions for you. You have to get the captions made somewhere. Right? You you either have them done by AI or you can, use a service to sort of generate them for you or they generally, the way they work is they run them through AI, and then they have people that that go through them.

Wes Bos

But that's also part of the HLS spec, which is the different caption tracks. So you could do them in different languages and whatnot. And I think I wanna move my stuff over to that because then it's all altogether. Right?

Scott Tolinski

Yeah. Altogether. For sure. Sick.

Wes Bos

Wes. I think that's it. Yeah. Let us know if you have any other tips on video streaming. I would love to hear what you have run into and how you've done it.

Wes Bos

Let's get into some sick picks and shameless plugs. Yeah. My, sick pick is gonna be PolyCapture app. So, for the longest time, when I'm recording, I have wanted the ability to capture multiple sources at once. And a source can be a microphone, can be a entire monitor, can be a specific application on your computer, and I wanna be able to just record them all at once, especially the windows. You wanna record a window, and if you tap over top of that window, you don't lose it because it's it's always just recording the window and not what shows up on your your display.

Wes Bos

And Scott put me onto this app that was launching soon called PolyCapture.

Wes Bos

It's just by a a dev, Bos, or or Mac dev out of Germany, and it does exactly this. And it's been pretty good. There's a couple bugs I found here here and there, but I've I've logged them in the in the GitHub, and the the author has been really responsive in fixing them. So it's just something I've wanted for a long time. OBS has one called source record, and it's just like a bad UI. It works it works great, but it's just not the UI you want for being able to select multiple inputs at once. It's sir it's certainly not, like, super

Scott Tolinski

super easy and reliable.

Scott Tolinski

Like, I feel like I have to do a test record every single time before I actually record.

Scott Tolinski

That said, I have been using source record as the primary means of recording nowadays only because I finally got it dialed in. I know exactly I have it all set up. I basically just open OBS and click button,

Wes Bos

and I'm good to go. So that's what I've been doing. But, yeah, the, But then you gotta have multiple profiles because, like, what happens if you don't wanna record them? Yeah. Wes, no. Switch profiles and then push the new profiles recording. Yeah. Is different. Yeah. Totally. Definitely

Scott Tolinski

will use this PolyCapture. It's the app I wanted to build and, what I was working warp, so I'm I'm stoked to see this, especially the interface is nice. It's, like, $5 or something like that. Like, I I think the guys should charge more. It's not like a a monthly thing or anything. Yeah. So pretty sure. I'm going to sick pick the Anker MagGo, which is a, in fact, folks on video will get to see. I have a it's like a pretty Yeah. Decently Let's see how well this works. Same thickness as my phone. Yeah.

Scott Tolinski

Pop on there.

Wes Bos

Shake it more.

Scott Tolinski

Wow. Okay. Yeah. Don't go vertical with it. I was I I just lost it going vertical. That's, yeah, sheer sheer strength. Sheer strength. Yes. Either way, it's got 10 milli 10,000 milliamps batteries. It's very Node.

Scott Tolinski

Works super Wes. And you just stick it on the back of your phone, and it MagSafe charges your phone all day of the week anytime you want. And I've actually found this to be nice even being around the house sometimes. Like, I'm in the gym, and I don't want to bring a thing. And my phone's about to die, and I'm listening to music on my phone. So I'll just grab the power bank and snap it on there, and then I don't have to go look for a charger or whatever. So, yeah, I found this to be a nice little Sanity, battery. Make sure I didn't break it. Sometimes I even bring the power bank to my desk just because I don't wanna

Wes Bos

figure out where to plug the cord in. You know? I got one of these bad boys sitting on my desk too. Was that Jackery? Oh, no. Anker? Yeah. What's that for?

Scott Tolinski

It's just a big battery, and you can have it as a light too. We use it outside with our projector.

Scott Tolinski

So or, like, we're playing cards outside. Right? We're playing cards outside. We're playing some Euchre, some Midwest Euchre. We put that on there. We turn the little lamp on. People can plug their phones into it, whatever.

Wes Bos

Oh, that's nice. It's nice. Yeah. Yeah. Yeah. Not having to run an extension cord is so good. I recently, I got a hedge trimmer that's battery. And I was like, I hate running an extension cord. It's such a pain in the butt. I only ever had gas of those before,

Scott Tolinski

so I I wasn't used to ever having, that would that seems like that would be awful to have an extension cord for that.

Scott Tolinski

But, yeah, battery, hedge trimmer, way to go. Yes. Yeah. Weed leader, all that stuff.

Wes Bos

Awesome. Alright.

Scott Tolinski

Shameless plugs. What do you got for us, Scott? Shameless plugs. Head on over to youtube forward slash at syntax f m.

Scott Tolinski

Smash that subscribe button. We're doing so much on YouTube these days. It's more than just a video podcast. It's more than just us sitting here, jabbering into mics. We're we got really deep in-depth videos from CJ, who's been just really crushing it. He he made a video on Deno 2 that came out today at the time of recording this, which JS, does Deno 2 deliver, which is a a pretty cool video. He goes pretty in-depth on some edge casey stuff and and gets really, like, into what did Deno two promise and did it, hit those. I also just did a video on where I put Copilot workspace to the test with 5 GitHub issues. And the whole thing is that you convert a GitHub issue with natural language into a PR.

Scott Tolinski

Scott like, you have an issue, you tell it what to do, natural language, and it writes the code for you and submits a PR. And I put it to the test through 5 different PRs, and, you'll have to see how that test went. Awesome. Alright. Thanks, everyone, for tuning in. We'll catch you later.

Share