Published on November 26, 2024 (26 days ago)

Mastering Video Uploads and Streaming: Insights from Theo Browne (t3.gg)

Dave Kiss
By Dave Kiss17 min readCustomers

Theo Browne: If you upload a five gigabyte video file, most people shouldn't be watching a five gigabyte video. They should be watching a 50 to 100 megabyte chunk of the video that is where they stop playing at. And this is why I want to chat with you all, because Mux is probably the best way right now to turn a video asset in some bucket, like Uploadthing or S3 into a good quality streaming experience for all of your users.

Dave Kiss: Meet Theo Brown. You might already recognize him, but if you don't...

Theo: For those who don't know me, I'm Theo. I used to work at Twitch. I quit to join a startup and make my own. I'm deep in the world of tech, software engineering, content creation, video, audio - my degrees audio engineering, funny enough - mostly known nowadays for the YouTube channel, but I tend to put my heart in open source and full stack software development. I largely lean in the TypeScript direction. I'm I'm proud to say that I'm the second best TypeScript YouTuber. So yeah, if you're interested in those types of things, you should check out my YouTube channel T3.gg

Dave: Who's a who's the first best?

Theo: Matt Pocock, of course.

Dave: Okay, I'm gonna give a shout out to where credit's due there.

After his time at Twitch, Theo went on to create tools like Ping for collaborative streaming and the increasingly popular Uploadthing, which simplifies file uploading. We'll talk about that career transition along with the nitty gritty stuff: like the engineering complexity of file uploads, how he leverages the Mux API, and a lot more. Let's get into it.

Did you have a video angle going into Twitch before you even joined the company? Or what was your intro to video?

Theo: I was always a bit nerdy about video cause I come from the skateboarding world, so I would record and edit stuff there. I even had an English class, I think, my sophomore year of high school where I was doing a lot of video recording, I owe that teacher, a call because of how much that definitely impacted me. But from like that point forward, I didn't really do much with video. I was still pretty deep in the music world, but video just kind of eluded me.

I was at Twitch, and my favorite thing about working at a company like Twitch especially, was the lunches and dinners, because I could sit with a bunch of more experienced engineers talking about things I didn't understand at all, and just slowly, through osmosis, learn more and more, ask stupid questions, and level myself up. Eventually, I started learning about fun new tools and technologies, solving my own problems, and got to bring that to the conversation. And it was so rewarding to get to sit down and have those talks.

And then Covid hit and I lost that very, very quickly. So I quit and joined a startup, and I was the most technical person at that startup. Nobody wanted to nerd out about tech with me, so I quit and made my own startup. And I got into Y Combinator, and I was like, “oh my God, I'm going to be surrounded with like, the top crop, like the ultimate nerds. This is going to be great. I can finally nerd out again.” Nobody wanted to. That's when I realized two things. First, since we're building tools for video creators, which we'll get to in a bit, I wanted to better understand their needs. And also, I missed having these deep technical convos so much that I had to do something about that.

So I ended up starting YouTube primarily to learn about our users and to fill that deep hole in my heart of, “wow, I just want to nerd out about tech and nobody else wants to.” There was already so much content for learning how to code. I know how to code. I'd been coding for ten years at that point. I didn't want to learn how. I want to talk about the crazy things I experienced, and I quickly went from just a new guy on YouTube to 4 million views a month, with a million and a half viewers every month now.

Dave: Was there something from Twitch like the switch that was like, like most people still don't think, like, okay, I'm going to go start my own business as a result of this.

Theo: When I was at Twitch I always had a bit of the, like, startup energy where I was trying to to rethink how we were doing things - that energy just kept me motivated - I loved doing that. Like showing, “this doesn't have to be so complicated. You guys are making things way more difficult than they need to be.” Around this time, Twitch was trying to turn their infrastructure into a product on AWS called IVS. I personally was disappointed that both Twitch the like creator company and like viewer experience. Plus the AWS side weren't really giving WebRTC a fair shake, and I felt like WebRTC had a ton of benefits that weren't being explored properly.

The quality that I had been seeing for my experimentation was nuts, and I wanted to play with that more. So I built a small demo app just to put myself and others inside of like one window together with a specific goal that I'd gotten after watching other creators doing like live collaborations - where it was so hard to just manage all of the people in the call at once to do something like a game show live on Twitch. So I built a quick demo app using WebRTC to showcase what this could look like. And I showed that to my best friend Gunrun. as soon as I showed him this project, he just looked at me in the eyes and said, “Theo how much do I have to pay you to work on this full time because we need this at Vshojo. At which point I put my two weeks into my job. I went all in on that. And within the first week that I had that product, like even existing, we had some of the biggest streamers like Sykkuno and Ironmouse streaming to over 20,000 people live in the video - I ultimately got over a million plays from the first ever stream done with this hacky tool I had just built. And I was hooked.

I wanted to see how much we could impact the idea of collaborative content on Twitch and other platforms. All the products that existed kind of felt like scratch and your options were scratch or assembly. There was nothing in the middle at all. And that's what I wanted to build, something that integrated with existing professional tools like OBS, but also lets you have high quality interactive, like embedded video from our platform, Ping. And I really feel like we captured the best of both worlds there. And the market agreed. We still to this day, I think four of the top ten streamers on Twitch still use Ping for a bunch of stuff. We have a ton of podcasts. We have big companies like Xbox using us for all their stuff too - really proud of what we built with Ping, but the market was admittedly quite small and we learned so much from building it that we leaned more into the developer tools direction afterwards.

Dave: So does some of these developer tools do they come out, of, basically like concepts or abstracts that were built within Ping when you were, when you were working on that?

Theo: Yes, every tool we've built for developers is a direct result of a problem that we were experiencing. The big product that we have now, Uploadthing - it's blowing up like mad. We get 700 new users a day right now. I still can't believe the success we've been finding with that. I've been asking for that product for three years before we shipped it. I'd been begging on Twitter. You can find tweets as early as 2020, 2021 of me saying, “why is S3 still the most complex thing to set up?” “Why is it easier to make a globally distributed database with like fault, sick like fault tolerance and all these other crazy features than it is to upload a single profile picture safely to your service?”

It just deeply irked me and I wanted someone to fix it. Nobody did. I started building a product. I can actually show it super quick. Imgthing is a tool I built for just managing my funny faces for my thumbnails. It will automatically remove the background and give me a one click to copy it to my clipboard. So I'd go drop it in something like Affinity, which is what I use for my thumbnails. The hardest part of building this ended up being S3 and I was so frustrated with that. So frustrated that I was complaining to my CTO. We sat down, we evaluated other options. We looked at all of the existing S3 alternatives, and all of them were trying too hard to be S3 compatible and not hard enough to be actually different.

So we built our own custom thing. We wrote a little like TypeScript sample function of what it could look like to do this safely. Quickly hacked it out and as soon as I started showing it to other people, the feedback felt very different. So many people started hitting me up like way more than I ever would have expected. Like, “where's uploadthing, where's uploadthing? Where's uploadthing? I need this right now.” And I realized, like, this has been a hole for a while. What is it that most people don't realize about the complexity of file uploads that actually makes it harder than it seems on the surface? It seems simple, and the things that seem simple tend to be the most dangerous. There is no one big thing that's like, “here's the big thing you're doing wrong with file uploads in S3,” but there's a ton of medium sized ones that when they add up, result in tons of things like vulnerability, security issues, and just fundamentally bad experiences for the users and the developers.

There's two ways to do file uploads, generally speaking. You can have a file go to your server and then your server sends it to S3., but then you're eating ingress and egress. Or you can do a presigned post URL, which is when your server creates a URL that allows the user to upload straight to S3, except how do you now know when the upload is completed? On top of all of this, there's tons of unexpected cost issues too. Like, the way that S3 is priced isn't just based on how many files you have uploaded, or how much storage you're using, it's based on the egress costs of how much are these files being accessed, which is incredibly hard to predict, especially if your website's like getting scraped by bots all of a sudden. Those costs can get astronomical.

Dave: I want to, reference really what initiated this call in the first place, which was a tweet that you sent out that was like, “Uploadthing plus Mux is an underrated combo. Maybe you could share a little bit more about what you were thinking with that?

Theo: Uploadthing’s goal is to be the best experience for a user uploading content to your service. So files of any sort, of course, work great with Uploadthing. The most common use case we've seen is actually PDFs of all things. But video is an incredibly underrated use case because the upload experience for video kind of sucks because the files are so big. If your internet connection isn't good and you have like a single blip, the recovery for that is obnoxious to get right. In the way we have presigned PUTS implemented with retries and things on the client gives both the user a good experience and makes the file more likely to get to you in the first place.

And I'll be really honest with this... just streaming a file from S3 sucks. It's not a good experience. If you just have an MP4 in S3 and you just embed that in your web service, it's not going to be a good time. It just doesn't work great. Services like Mux handle this stuff incredibly well. That's why they exist. Mux is probably the most effectively priced, especially when you consider like the quality of service that you're getting there, both for live video and for like traditional VOD based video. It's what I've used on all my services hosting video for five years now, roughly. I've been hyped on what Mux is doing since back in 2019, and it just plugs in really nicely. You give Mux a URL to a file, it can be from anywhere, as long as it's on the internet, and Mux will turn that into a streamable asset.

So as long as you have things set up with Uploadthing and you're letting users upload those files, it's effectively three lines of code right now to add Mux as the next step for that. We want to simplify it even further and build a plugin so that your service, our service and Mux can all be intertwined even more seamlessly so you know when the uploads complete in a non-blocking way. But that's one more small step in the crazy process that we're engaged in and I'm really excited to see where it goes.

Dave: What is the next step for Uploadthing in terms of, like, the evolution of where it is now and where you hope to take it? Maybe there's more that you you want to express there.

Theo: There are so many fun things we want to do with Uploadthing. The big arc we're focused on right now is mobile support, because mobile in file uploads is a rough experience to say the least. We have found so many fun things through this process, like, did you know that React Native doesn't have any way to handle like chunk progress in presign PUT or post? Which is just insane. You can't know how much progress you have on your upload on React Native. You just might know when it's done. We're working with the core React native devs as well as Expo to fix those types of things. So it's not just Uploadthing that will be better, it's theoretically the entire ecosystem will have better experiences as a result of this, but we're just digging into the weeds of every place where uploads aren't quite ideal, and we're trying to fix that.

Dave: One of the things that that we face sometimes at Mux is the engineer that knows everything, that knows they can set up the video infrastructure pipeline. It's not that big of a deal. Is there something similar that you feel from the upload side of things? What do you have to say to somebody like that to help them understand the problem space or help them to, like, see that there's more to it than than meets the eye.

Theo: I had the same reservations. I see really against service providers for things like auth, because like, is it really that hard to roll your own auth? And then I started having outages because of random weird changes that auth providers were doing with their OAuth. And around the same time I was trying to build a mobile app, which setting up auth for was miserable and around that same time I discovered Clerk. So I gave it an honest try and was blown away with how much easier it was and over time, how much easier to maintain it was. And I realized, like, yes, I could have rolled auth myself, but then I would be rolling auth myself for a couple hours every month just to make sure everything was still working. Or I could use the service and not worry about it anymore. And that realization was huge for me. We've accepted that the way we used to do things works, but it's more complex than it needs to be for the majority of people. That's what you guys are doing with Mux and that's what we're doing with Uploadthing.

Dave: Is there anything in parallel there to the reason why Uploadthing is open source or why you prioritize your work to be open source?

Theo: Open source is super important to me for a bunch of reasons. The big one here is that this is code you're running on your service and I didn't want to give you a bundle of code that you can't read, understand, make changes to, etc. On top of that, I have an incredible community of developers who are just so kind and thoughtful with not just how they interact in my community, but the contributions they make, the questions they ask, all these types of things, and those types of people are much easier to find when you're open source. And on top of all of that, like, I'm just proud of the project and the quality that we built.

Dave: Well truly Theo, thanks. Thanks for taking some time out to share this. I feel like uploading is sort of this just, like, overlooked space where it's like, “how, well, there's native elements in the browser, how hard could it be?” And you don't know until you find out the hard way. And so to me, this is a really interesting project to see how we can sort of make uploading easier, across services and across applications. So thanks for taking some time to share with us today. Anything else closing comments or thoughts from your side?

Theo: Uploading is only half the story, and I really want to emphasize that point. We've handled that incredibly well, but people have been memeing about when's Downloadthing going to happen for a while. And while, yes, you can just go to the URL and download the thing, it's a lot of stuff where that's not ideal, especially with video. And my call to action to the chat here in the comments is to ask ya’ll, what do you want in order to make Uploadthing plus Mux a better experience? We've been planning on this plugin architecture for a while, but I want to know, what are you guys doing with Uploadthing? What are you guys doing with Mux? What are the pain points you're currently experiencing so we can make sure if and when we build this, it's the best possible experience for people trying to make great interactive video and audio and uploading experiences.

Written By

Dave Kiss

Was: solo-developreneur. Now: developer community person. Happy to ride a bike, hike a hike, high-five a hand, and listen to spa music.

Leave your wallet where it is

No credit card required to get started.