Efficient Streaming and Chat through HTTP and WebSockets - Devtooling Twitch

[@hnasr]

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

[@olddepressedgamer]

Bit late to the video (missed it the first time for some reason). Just wanted to say that the .ts request is for a transport stream (something I think you might find interesting). These are the most common method of delivering video + stuff. The ts is more than a video file, it could also contain subtitles, program data (ie program guide on TV), encrytpion data (Conditional Access stuff that works with your viewing card on satellite to enable you to watch pay per view/subscription channels) etc . It is basically a packet system very much like network packets. You can see the structure on the MPEG poster (search for 'MPEG2 transport stream diagram' on google and click the first link, or third for the Tektronix one as they created it, for a PDF of the packet structure. You used to be able to get the poster for free at one point and it was all over the place when I worked in satellite software (they didn't even charge postage :D). It would be interesting to what twitch's one contains.

[@ab-oc5ho]

Twitch is the best open source project!

[@dev_among_men]

If you know you know

[@subhasishmandal2023]

LOL

[@nikolas8741]

Agree

[@prenomnom5637]

lol

[@nikolas8741]

I've download the full 129GB or so. But idk anything about web apps😅 I guess I'm gonna keep it here on my 1tb ssd drive

[@syz3981]

I would be sick if you went through twitch's leaked codebase

[@Kid420]

Pretty sure he wouldn't risk it xD

[@unitedmarcus8731]

why what's wrong? (genuine q)

[@manuyel4845]

@@unitedmarcus8731 copyrighted code you know, not sure how well youtube will see it.

[@q1joe]

@@unitedmarcus8731 Technically possessing it is a grey area... might be kind of Illegal... its definitely got a copyright on it and could be taken down.

[@AKASH-sw9bs]

At the very first of my career of backend engineer i didn’t find any interest in your contents,but as with my growth of career your chanel seems to be as a "GOLD MINE" 🖤. Thanks for your beautiful contribution to the community. Hearties respect.

[@ZeeshanAli-nk3xk]

This is GOLD! jazakAllah u khair ya Ustadh!

[@4nkitpatel]

Dev tooling is one of the best thing in this channel keep doing it we are enjoying so so so so much and learning as well thank you for this 🙏

[@Stoney_Eagle]

The wasm connects to their stream server. The stream server tells the script to fetch file x, the browser fetches it and then HLS stitches it onto the video.

[@hnasr]

Dev Tool them ALL! Playlist kzbin.info/aero/PLQnljOFTspQX9U79P6eD_V9USIUTE9yAD

[@viveksai9353]

Such raw and grassroot level content is rare on youtube. Thank you.

[@VivekYadav-ds8oz]

There seems to be a lot of protocol overhead. For CORS, TCP -> SSL -> close. For each 2 second clip, TCP -> SSL -> download -> close.

[@rab_x6958]

hello Hussein Nasser, I'm a new viewer of your channel , Back-end crazyed person I'm getting a big fan of you. the away you teardown every little thing is impressive, solve all the hidden things under the hood. You just draw the conclusion to-the point. Thank you Man,

[@hnasr]

appreciate you, glad you enjoy the content dear

[@unitedmarcus8731]

my favourite series: devtool them all !

[@gamer-gw9iy]

Have you seen the twitch source code yet? There was a leak recently

[@snehasishroy39]

Thank you for this awesome series. Loving the deep dive.

[@SaadHassan43]

Can you do the same Devtool analysis of the Netflix platform?

[@mohammadsalehdehghanpour9856]

I think as the wasm web worker sits in the browser, the protocol we see in devtools is the one between our machine and server (which is http 1.1 for streams). Anyway a packet capture will prove whether this is correct

[@barnabuswizardspook]

Really high-quality stuff

[@anarelle]

I was just watching some live streaming on Facebook and it had multiple glitches, not just skipped frames but even music getting faster and then slowed down. I understand maybe the person who was streaming had a poor connection, but I was surprised Facebook doesn't have anything in place to prevent this and make live videos run smoothly, since other platforms seem to handle it much better. So it kept me wondering what exactly could be done from the technical point of view? Are there any known "techniques" that can be applied to avoid these glitches in live video? Thanks for the amazing content!!

[@VivekYadav-ds8oz]

Atleast on Firefox, you can allow CORS if the main domain is the same.

[@antonyinjila7152]

always a blessing Hussein

[@thetechnoob12]

ok if I understand correctly when someone streams on the backend twitch divides the steam to a two second video. Then it created a list of urls that contains the 2 second videos and sends the lists to the client and the client fetch each url.

[@abdulazizs2931]

This is the HLS protocol for playing live streaming on Apple products. Twitch is following their standard. With HLS the parent manifest is divided into sub manifests which contain chunks corresponding to certain video stream properties like resolution/bit rate/etc. For Android devices(DASH) the video chunks for 4 seconds long which has the manifest file in a totally different format.

[@obaid5761]

Ayy I'm first. Keep up the good work brother :)

[@raiyansarker3809]

Do Google once! And please make more of these videos!!!!

[@stanislavpetkov7408]

TS is Mpeg transport stream. Same type of data that goes over satelite, terestrial, hls and etc…

[@shuluspa]

Were you using Russian VPN? Because your recommended channels on Twitch were primarily Russian :D

[@kailashyogeshwar8492]

Would like to see you digging gmail network request someday 👏

[@weathercontrol0]

Are you going to make a video going through their backend?

[@kushalkamra3803]

Thank you 🙏

[@hiruthicsha]

Thanks!

[@hichamlotfi4277]

great video please keep doing this type of videos

[@rishiagrawal812]

Hi sir, can you please make a tutorial on how file uploading works? when we make a connection to server to upload file , how it gets large file data to the server

[@hnasr]

kzbin.info/www/bejne/f6mQlGWObMmfodU

[@rishiagrawal812]

@@hnasr Thanks for pointing out the video. Sir, can you give some idea: When we select image/video on the web page. What exactly happens is complete file transferred/copy to browser memory or we get some reference to disk storage so later we can load. ? Hope to hear from you soon

[@rishabhanand4270]

So they're running a web assembly module to just decode the video segments (probably a emscriptten compiled ffmpeg?) and "stitch" it all together? They might be using a SharedArrayBuffer to share the video memory between the wasm and their main thread. Lot of optimizations around here, beautiful architecture gotta say.

[@ThePapanoob]

The thing is theyre using standard hls with ts playlists. They dont have to stitch anything because of that. My bet is theyre doing it because of ads.

[@CODFactory]

so some worker tells the client which url to go to for fetching the next 2s segment? and is that the web assembly worker? Is it possible that a websocket connection be opened and server keeps sending a stream of continuous bytes and client just start streaming those bytes as video? If its possible, then these 2 seconds segments are not needed and so many requests won't happen right?

[@mockingbird3809]

Can you make a video on HLS streaming? It'd be nice to see a detailed HLS streaming video from you!

[@hnasr]

I discussed KZbin streaming which uses HLS kzbin.info/www/bejne/Z16unn-ZZchlqc0 enjoy

[@jayshah5695]

Is there a standard websocket subprotocol one should use ?

[@rainthstrive]

Great explanation, thank you!

[@FilthySnob]

What a great video

[@bhumit070]

Hussein please make a video on how to disable options request

[@abhisheknarwal4437]

How do the handle these many connections to sockets on their servers??

[@puntirock717]

Can we actually make the websocket connection given there is a nonce being used

[@pajeetsingh]

Thanks bro.

[@Mutlaq777]

Good job!

[@sapn1s16]

Do you have any ideas why are they using HTTP/Websockets instead of WebRTC?

[@shashankshekhar8970]

My guess would be primarily because webrtc doesnt scale too well. In a live video call you will at max be in a meeting with 250-300 people. Thats fine for WebRTC, its a whole different ball game when the content has to be streamed to hundered thousand users. Also TCP helps them with analytics and gives a better control

[@sapn1s16]

@@shashankshekhar8970 Thank you

[@AnimatedHooman]

This is a fucking goldmine

[@sheriffola]

Cool stuff 👍🏽

[@davidagyakwa288]

how do you group metadata from actual data

[@saeed99977]

Hi hussein make video about how clubhouse voice chat work

[@xdxdhehe]

You inspire me to be a better engineer! Keep it up!

[@prenomnom5637]

good video

[@khld413]

did you see the leaked source of Twitch ?

[@DrDoctopus]

Why devtool it when you can see the source code for yourself! 😅

[@nikolas8741]

Come to me bots

[@ShubhamSpawN]

Thanks!

[@saeed99977]

Hi hussein make video about how clubhouse voice chat work