How YouTube Efficiently Streams Videos through HTTP? - DevTooling YouTube
ฝัง
- เผยแพร่เมื่อ 26 ก.ค. 2024
- This is a new series where I pick a popular website and break down and reverse engineer it through devtools.
In this video we will look in how TH-cam streams videos efficiently through the HTTP protocol to the client using both Mobile and Desktop versions of the web. There are lots of lessons we can learn from this.
0:00 Web Mobile TH-cam Watch Page
4:50 Desktop Web TH-cam Watch Page
🎙️Listen to the Backend Engineering Podcast
husseinnasser.com/podcast
🏭 Backend Engineering Videos
• Backend Engineering (B...
💾 Database Engineering Videos
• Database Engineering
🏰 Load Balancing and Proxies Videos
• Proxies
🏛️ Software Archtiecture Videos
• Software Architecture
📩 Messaging Systems
• Message Queues & PubSu...
Become a Member
/ @hnasr
Support me on PayPal
bit.ly/33ENps4
Stay Awesome,
Hussein - วิทยาศาสตร์และเทคโนโลยี
Learn the fundamentals of the backend, scaling and load balancing with my Introduction to NGINX udemy course
Grab a discount coupon here
nginx.husseinnasser.com
That explains why I can listen to a video on the app with the screen off, but when I open it again it has to rebuffer the video. In hindsight makes perfect sense.
Exactly
Welcome to the world of HTTP video-streaming. Google isn't doing anything innovative here other than using QUIC / HTTP/3. HTTP video-streaming is a flood of new terms if you're familiar with HTTP but not with video-streaming, so I'll very briefly summarise what I've learned in the past few months (having recently deployed a caching service for video-streaming).
The first lesson I learned is that you need to consider both video-on-domand (VOD) and live-video. Video-on-domand is obviously the most common use-case for TH-cam, but TH-cam Live would be an example of live-video.
Second lesson I learned: there are many streaming protocols. Thankfully, now that HTML5 can be relied upon many of these can be ignored and the world is moving to HTTP chunk-based streaming protocols for live video. Legacy protocols such as RTMP and others often require browser plugins such as Flash or Silverlight. RTMP remains relevant because that is commonly used to stream the originating content from the encoder (eg. OBS studio) into a video CDN provider such as TH-cam Live. The other legacy protocols you can gratefully ignore. The two HTTP chunk-based streaming protocols typically used today for HTML5 and live-video are MPEG-DASH and Apple HLS; the two are very similar, and MPEG-DASH is a standard that (IIRC) came out of Apple HLS. This is very likely what you will be seeing with your desktop demonstration (but more on that in later)
Third lesson I learned: particularly for video-on-demand files (that aren't terribly large), is that Progressive streaming is very common. This is based on Range requests that get back partial content (the 206 response code). You see 206 responses frequently with things like PDFs too (eg. Adobe Reader will request different ranges based on which pages you skip to). This is the kind of traffic that you need to be careful about from a web architecture perspective, particularly if your website isn't engineered to serve such content.
Fourth lesson I learned: don't forget the player. The player is not the browser, but rather a Javascript library that runs in the browser. (That said, browsers do provide their own for progressive video; its typically for live-video where a different player implementation is used). There are a few common players (eg. VideoJS) and some are commercial. Big tip: if you want to study this, make sure you use Incognito mode in Chrome, otherwise you may find that you don't actually see the requests being made in the developer tools (not sure if that's a bug, but it feels like it). It is up to the player (not the browser) what decides what kind of content it wants to get. You'll likely see different types of requests in different browser engines.... which brings us to:
Fifth lesson: adaptive streaming. In HTTP live-streaming, content is typically transcoded into different resolutions and bitrates, different audio channels (eg. different languages, audio rates), maybe has subtitles etc. The way that the available content sources are described is using an XML-based format called SMIL that describes the various 'representations' that a player can use (and switch to; for example when packet loss is too high to sustain a higher bit rate). I don't believe SMIL is be used in your example, but presumably TH-cam has other smarts built into their player. Oh, and its the player that coordinates the mixing of the video and audio; though I'm no expert on how it does that and manages the synchronisation.
Sixth lesson: caching is really important, and that's what make HTTP live-streaming scalable. It takes more memory on the server to buffer small segments of video and audio into little chunks of video and little chunks of audio. Compared to streaming RTMP live video much more memory is used. To give you a real-life data-point, I had a Wowza server that would top out at about 110 concurrent MPEG-DASH or HLS streams; with a proxy-cache in front, I could turn that into something much more powerful, at least 2,500 per proxy.
Stuff I haven't learned yet: authenticating content to authorised persons / subscribers. This bit gets tricky....
Keep up the great work, I don't know how you manage to publish so often, wow!
Cheers,
Cameron
Very useful tips Cameron!!
I believe TH-cam doesn't need SMIL, it's just puts an argument in the URL for the different versions. The player knows what URL to request.
Wow, thank you for taking your time to write this up!
This is really insightful. Thanks.
This is insightful, I have been searching for a better explanation of how these protocols work. This breaks the ice for me.
What you actually learnt: Switch to mobile mode and get the video URL from the network tools to download any video from the web
how can we access network tool on android?
@@ressimayouz3620 did you watch the video? he literally showed you how to turn on mobile mode using desktop browser
@@leduyminh48 He was not talking about desktop browser.
@@leduyminh48 he said from a phone, not from a computer browser pretending to be a mobile browser
Haha, true that! But, I am wondering why Google doesn't just disallow accessing the URL directly? Maybe by just looking for some header that indicates the request has indeed made from the YT site/app?
206 is just partial content. The browser asked for a byte range, and then the server answers with 206 because it returns only a part of the file. This has been automatically handled by apache and nginx from "the beginning of time". If you host a .mp4 file, the browser will automatically issue partial file requests. So "we should use this more"? It is used all the time. It is up to the browser to request what it wants, if server has accept-ranges header.
I think he was referring to application developers ?
Thank you Hussein, you deserve all the best man. You're doing great things for the dev community
Front-end tip: you can enable the desktop mode in a simpler way: just disable Dev Tools "device toolbar" (top left corner, 2nd icon).
You can enable it when you actually need to change the user agent, and simulate a different device.
Love all your content btw 💟
THANK YOU! I did not know that option exists, and didn't know how to turn off that option, appreciate it dear
The exposure I'm getting from your context is Mars level mind blowing 🤯. I started watching you yesterday and I cant stop. Great work man 💯
Edited...
Actually, your voice sounded familiar and the type of content felt like something I've seen somewhere else, I looked at the next video title,"backend engineer portfolio" and I immediately recognised you, the guy from the podcast 💯😹, Hussein
Also, separating the audio enables easier and more seamless video quality switch
So glad I found this channel. This is gold
I was just thinking about this exact design! I have started to watch many of your videos. You make learning fun! Keep up the great work
Your content is so easy to watch, you're producing top tier content for the platform! Great job!
Glad you enjoy it Tom! thanks for the support
Today I chose to try youtube music instead of spotify in the gym and YT music has an option of either selecting video or just song and I was wondering how they were doing just audio,
And you just read my mind, I have my curiosity satisfied, Thanks a lot man, keep up the good work!!!!
Your content is the best in terms of backend. Keep doing this amazing job!
Finally a guy who tries out things 😀 love your vids bro 😎
Really great video. Love to see the entire series. 👍👍
Thank you Hussein! Great idea with devtooling series. 🤘
Great content Hussein. Loved it.
Every day I am learning something new. Thanks a lot for this high-quality content.
My pleasure!
Brilliantly explained - I always wanted to know this but too lazy to do the research on my own. Thanks a lot for sharing.
Fantastic video. Looking forward to more Devtooling videos!
Thanks, Hussein that was informative.
Awesome, I never knew that few days ago I built a project using youtube-dl in my express server and then sending back the video in audio format to client over HTTP 206. I just used res.send() and the express set the status code 206 my file was coming over http the same way like you shown in this video.
Whoa, my new fav "reality tv" channel. I didnt know this existed.
wow man, you are killing!
this guy is a true engineer
Wow. This is really cool and i got to know about these hidden stuffs. Thanks for sharing sir.
Using Devtools efficiently is such a nice topic and i am hoping to see a long playlist on this topic. thank you hussein, keep up with these great videos.
Will keep them coming ! any suggestion on what to devtool next?
@@hnasr performance monitoring and monitoring how much resources is loaded by your app
Best content on back end engineering here on yt. I think I lack a lot of content that goes beyond the basic building of a restful api
another great video: keep them coming - thx!
Amazing insightful video!
MashaaAllah brother Amazing content ❤️
Very exciting idea, Please keep going ...
Nice video, Hussein!
Nice catch.. Hussein
thanks for making such interesting software engineering videos!
This is really good.. for videos with a longer time, just remove the range parameter at the end and it'll work
TH-cam starts splitting audio and video from 1080p onwards, the mobile website (unlike the app) always downloads a lower quality by default, that's why the desktop mode looks different
Wow!! Very informative.
Great video! It's very rare to find such kind of education online, I am very interested to explore more on TH-cam such as how it registers views, how watch time gets updated, even real-time view tracking. Please if possible kindly make a video on this.
4:04 i laughed so hard.... rip ssyoutube
i too
can't believe I haven't tried it before
Is this black magic?
Hussein You are Indian gem
Please keep making these vids.
THIS IS GENIOUS.
Please make this type of video , more and more and more and more and more and more... :), It's awesome 🙏
Very informative!
You are Legen-wait-for-it-dary.. Legendary
Awesome bro great video!
This is really great content.
Mad genius!
I like that series
Great video
Thank you 🙏
i love your videos keep the good work
That's really cool. Thanks man🤟
😍
Waiting for the next video in series...
Great video !
I think the video audio streams being separated probably has to do with youtube music as well. great video thanks for this video
I would also suggest to make video on adaptive bitrate streaming using mpeg dash or hls files, that would be pretty interesting . Thanks
peak content!
Interesting !
Cool!!! This separation by audio and video can be on desktop in browser two, if someone folded the browser
please, More videos like this ! Thank you
🙏👍
A few weeks ago I was in the Caribbean and quite often the internet would seem to be down. I wasn't able to access any website... except for TH-cam! After looking at the net traffic I realized that out of every request youtube.com was the only one using QUIC. It was very interesting to me I wasn't able to access other sites during these "outages".
Very informative now I know how to download a youtube video without using the other online tools. ; )
this is dope, do these series more. do netflix next
Nice 👍
Awesome format
Glad you think so!
so good
Reddit also does something similar. It also gets the video and audio from separate requests.
I'm subscribing your channel.
I have downloaded this video just to try
Nice
Man this video is getting some views Hussein. Looks like your time with the TH-cam algorithm has come!
Awsome
3:55 thanks now i don't need to use third party apps for downloading any youtube video 😂😂
The video is sliced into several requests, I'm guessing the 3rd party app stitches it back up (?)
@@fahmir7429 i guess switch to mobile mode, to get the unlsliced version
@@marcuschiu8615 didnt he state that mobile version splices the files into audio and video requests? I'm guessing that requires stitching too? Havent tried though
@@fahmir7429 i pretty sure the mobile version is not spliced. it uses some HTTP 206 thing
@@fahmir7429 oh nvm, I thought you meant the video itself is spliced
Good stuff! Can you do this detailed breakdown with Browser based Google Stadia? Would be really interesting to see how they get such low latency.
Websockets, and very powerful servers. Websockets allow for near instantaneous connections, it's what they use for messaging apps, and any realtime things. Lots of games use websockets as well, as it's too expensive to send a REST API call everytime you want to move.
I can understand why youtube algo didn't recommand this video to alot of people 🤣
Please discuss about youtube adaptive video streaming. How they alow us to switch video quality on the fly?
Oh, so that's why when my video buffers on desktop the audio plays a little longer!
Interesting.
Does Hussein has a video of how to do what we saw in this Video?
How does the video data stored in the server then?
Is it webm and mp3 or mp4?
What about new pipe? Or vanced youtube app. We can minimize the app. And they claim to not download video in background
Great Video! I am still a little confused as to where all the different streaming protocols like HLS, RTSP, DASH, etc. fit into this. I have seen an couple of nodeJS example of using Partial Content Header to stream video but not sure if that is the best way to do video streaming. As I am trying to build a streaming service using Rust, could someone point me in the right direction. Thanks.
I think TH-cam have separated Audio and Video streams a long time ago, not just when they started using QUIC. I think it started when they started using DASH but I'm not sure.
I love how the CDN-video even has a download button. Also reminds me of youtube-dl being taken down not too long ago. Seems like all of this is just "security through obscurity" or something like that. I mean, TH-cam only makes money when people watch ads I guess.
Interesting. So on mobile, the server returns a 206 status code and sends the video as a continuous stream ?
While on desktop, the server returns a 200 status and then sends only the requested chunks of audio and video?
Then as the user watches the video the app can request for more chunks in the background. Once the chunks arrive, they are appended to the previously downloaded chunks in order to make the viewing experience smooth. Is this correct? Or am I missing something?
It’s basically what we do paginating our endpoints. This one is paginating chunks of videos in bytes
Opening directly the video playback url sadly doesn't work anymore. I tried it with chrome. Insted a "videoplayback" file will be downloaded. I'm trying to convert it to mp4
I wonder if Weibo works in a similar way, when you acess Weibo the default video is 1080p , and it runs very smoothly.
But how to determine real tab focus to play only audio track if user just separates windows on the screen?
Uploaded video is encoded to different format by streaming processing platform and then place at CDN. TH-cam will return partital file with 206 to app, web format with 200 to web browser.
I have managed to stream videos from s3 by converting them into hls format ie. m3u8 format using ffmpeg library and I can play them in frontend using videojs.
It does not work properly when open "videoplayback" in new tab. It saves only fragment. What I am doing wrong?
You can disable the mobile viewer by clicking the 2nd icon on the top left of the dev tools
Cool video! But....how can they separate the audio and the video and show you together later??
How can we find the link to 1080p from youtuebe?
4:05 How can you download a video in a different resolution?
I find it out youtube doesn't send the video playback in this manner when the device isnt a mobile device. When I follow the video playback url in desktop mode the resource is empty.