How To Code A Video Streaming Server in NodeJS

[@hnasr]

Man this is pretty cool, thanks Abdi!! Keep it up Since the videoSize is unlikely to change, I would move the call to obtain the statsSync outside the /video endpoint.

[@abdicodes]

I’m happy you liked it! I’m a fan of your channel 😄 And that makes a lot of sense, thanks for the feedback!

[@Epistemer]

oh wow, I'm a big fan Hussein ❤

[@Iammrunkown]

use stat method

[@sanatgawade8045]

But what if this method is fetching the video dynamically.?

[@nirajmotiani]

this feels like a PR comment from senior engineer 😂

[@gamingllama7464]

You know I have no idea who you are but just from that introduction I can already tell you'll have 100K subs within the next year

[@hikari1690]

One month later and he's 10% of the way. He's ahead of schedule xD

[@ShahriyarAlam1]

Looks like this won't happen

[@sheesh236]

@@ShahriyarAlam1 it will happen

[@sheesh236]

@@ShahriyarAlam1 he just stopped uploading videos

[@paulchaperon2207]

Bruh

[@edwardmacnab354]

I don't know why you don't do more videos like this. By just watching stuff like this people learn a lot and what might seem easy and obvious to you is pretty obscure to many of us. Thank you for this nice little presentation , It was very informative. But please, could we have more ?

[@TroenderTass]

That is because he really don't know what he's doing. he's just copy pasting a tutorial

[@midnightcigarettes8564]

I'm trying to build an audio streaming server instead, and this is helping me get the blocks I need to piece things together. Thanks Abdi!

[@karabomahlong9368]

Im on a mission to build one as well but have no clue to go about it.. Im currently debating whether or not I should set up my own server or piggyback off of something like a Soundcloud. Would you kindly please share your journey so far?

[@alejandropoirier6493]

Nice video, I'm a front end developer and I was contacted by a streaming company to have a chat, they offered my a position and I have to learn all this stuff as soon as posible :)

[@markericfairweather9722]

This is Netflix's architecture. Love to see this Abdi!

[@ArisFilms]

Extremely informative and straightforward. Thank you.

[@Epistemer]

you explained everything so clearly, loved it

[@hd3adpool]

Great explanation with the pros and cons, and especially the introduction. Keep going brother!

[@franktfrisby]

very cool and I like the way you walk through the video explaining all of the parts. Thanks

[@chadzulu4328]

Very clear and easy to understand explanation, thanks so much Abdi!

[@alexandrumarius5004]

Thank you man, very well explained, with all the details and very good English!

[@shivangchaturvedi237]

Man oh man!! Thank you! I will be waiting for more such content from you.

[@aghiadalzein3069]

that was the most clear description,thanks

[@joselito7776]

Thanks, dude, for showing me how to stream video. It also gave me the motivation to pay attention to http headers.

[@abdicodes]

They are super important! Happy to have helped :)

[@arielspalter7425]

You've earned yourself another subscriber. Awesome tutorial!

[@thomasandon2539]

Clear and straightforward! Thx.

[@elad3958]

Thank you brother. I will try this out. I look forward to more tutorials

[@karnatakastatesyllabusexpl39]

Thanks for the simple but useful video

[@abdicodes]

Glad it was helpful!

[@dhyey2316]

This was amazing for clearing basics.

[@Pikachu-oo5ro]

Great Video! Hope to see more content! Young and Talented!

[@pavithranrocky316]

Keep it up! Good Work Buddy...Very Helpful

[@abdicodes]

Thanks! 😁

[@captainanonymous7090]

Keep going bro. You’ve got good explanation

[@abdicodes]

Thanks for the support!

[@albertmends]

a very cool tutorial.. Thanks mhan

[@vaibhavpawar4535]

Amazing 🔥 content ..... This channel is so underrated

[@nadaz7333]

This is really good! Keep going!

[@maskman4821]

Thank you for this tutorial, it is very cool and practical, we can let everyone access the server to see the video; I have a request, how do we send webcam video stream to server and let everyone views like youtube live stream ? It would be awesome if you can make such a tutorial and I think everyone wants to know how to achieve it !!!

[@atalaysezen3391]

Thank you buddy, you should do more videos like this

[@bevedel]

Really helpful, Thank you so much. keep going please ...

[@candidodmv]

Congratulations for this simple but very helpful video. I got a question: when you skipt to a specific point of the video, the intermediate chunks are downloaded too or not? Thanks and hello from Brazil!

[@kuku5567]

you've earned a subscriber, thanks dude!

[@abdicodes]

Awesome, thank you!

[@arthurk7270]

Great tutorial, thanks. How would this work in practice, though? The video blobs will presumably reside on S3/GCS/whatever. When a request for a video comes in, surely the server wouldn't fetch the whole video and keep it in memory, while serving chunks of it? Would it prefetch chunks of the video from blob storage and serve that until the next chunk is required? Or would the server containers somehow connect to a huge local storage area network with all the videos?

[@abdicodes]

Good question! In practice this method should not be used ;) When I made the video it was kind of an experiment and I didn't know much about best practices.

[@softwarelivre2389]

@@abdicodes Hey man! Do you have a video with those "best practices" available anywhere? O really enjoyed the video and I'd also like to know how should I be implementing these "the correct way". Thanks!!

[@softwarelivre2389]

@@abdicodes Ohh, and I just subscribed! Thanks for the content!!

[@persianaz6389]

@@softwarelivre2389 Take a look at HLS and MPEG-DASH those 2 are the industry standard protocols for video streaming

[@softwarelivre2389]

@@persianaz6389 thanks! I'll take a look. I ended up using WebRTC for some projects and it worked quite well

[@ytlagu2010]

You deserve more subscribers buddy!!

[@CheezePie]

You are the best❤ I'll try to implement this in Next.js

[@ujwalc9226]

Awesome tutorial ,thank you soo much ♥️♥️♥️

[@karnatakastatesyllabusexpl39]

It worked perfect Sir!

[@jamespatterson1989]

Hey I really did the clear explanation of both the overview and the line-by-line code. And such a simple code to illustrate the point. From the figure you have at 1:10, the two-way arrows got me wondering: how could we send recorded video from a client to the server in the same kind of bit-by-bit stream? I've build a client-side page that records video that I can then send to a server, but am looking to speed up the process and avoid saving anything client-side. Any ideas? Cheers!

[@abdicodes]

I think that could work! You’ve got a good idea 😁

[@silugr]

Your video is really interesting . I have a challenge in this . I am downloading the file from a FTP location and the the received file is in the form of a stream . How to send that stream as chunks without storing the ftp received file in the local system ?

[@elieonokoko3782]

This is great! Exactly what I was looking for. I am curious to know how you would implement view count. Thanks so much!

[@L1CBot]

exactly what am I searching... 👍🏿👍🏿👍🏿

[@madbadseagulls1]

Amazing tutorial, Thank you

[@paragbhide1695]

awesome. have subscribed.. looking forward for more videos to learn!!!

[@mohamedyoussef8835]

Super Awesome explanation & topic ++++++++++++++++++++++ Thank You

[@io-er1ex]

Thanks this was very helpful. Keep it up

[@abdicodes]

Glad it helped! 😁

[@bodolawale5448]

Loved it. Thanks.. I will build upon this

[@danielrocha5774]

I don't know if you tested with a longer video. But in my case after 7 minutes playing. Audio starts loosing synchronization with the video

[@abdicodes]

Interesting... I'll look into this

[@danielrocha5774]

@@abdicodes in my case I have videos downloaded from the internet some of them are 23fps and those loose sync when streaming. But the other videos at 30fps are fine

[@DJFunkyNutti]

thank you. one question, how did you do the cached refresh? you had a menu under refresh button. thanks

[@andrewndotela7407]

Hey man, this is really helpful. Thanks

[@kj2w]

Great video! It helped me grasp an upcoming feature we are implementing. Question, what tests would be applicable to write for this?

[@sungjun94]

Hi, can you deep dive into how pipe works and how req.headers.range is generated with new values?

[@FPChris]

Cool but why was the video's name not include in the src = at 3:07? Usually that's where you'd put it.

[@abdicodes]

There's no video name because /video is pointing to the nodejs server that gives the same video every time.

[@dhanushkamadushan1989]

Really good explanation. keep it up.

[@sniviobraganca9899]

can you make a tutorial on the latter to save the video stream on front-end

[@pcmguru6011]

Can you please make a video which can demonstrate how to handle the pre-existing video data in frontend. As you suggested in the last part of the video. Please reply.

[@karabomahlong9368]

Hi there, thanks for the video! Im trying to build an audio streaming site but have no clue how to go about it.. Im currently debating whether or not I should set up my own server or piggyback off of something like a Soundcloud as an example. Would you kindly please share any tips for this kind of approach?

[@sem_dev]

Love you for this video!!! Instant sub

[@ignitedroads]

got a lot of info here, thanks

[@mohammadhosienartaneh]

please explain about hls and how can i use that in node js

[@thomasminoungou3779]

What a great tutorial!!! Just one question, who do I apply this but with a video store in the cloud? If you have any resource I will really appreciate it!

[@abdicodes]

I don’t think this method can work with the cloud :/

[@JenilCalcuttawala]

Great tutorial Abdi. It would be helpful if you can also highlight how do we elevate this concept to streaming cloud storage contents i.e google cloud storage, aws s3.

[@bhattakshay7816]

Are you using RTSP protocol for this?

[@juanoude]

Nice video man. Thanks a lot.

[@konandev4278]

thats great bro, thank for video.

[@danielstella2425]

very useful, is it possibile to do with any mid-level language? such as Java, C#?

[@ejazahmedj2103]

this is nice but how do i have to implement with multiple videos and getting the video URL by giving id?

[@saramshshrestha7641]

Love you man, you're great.

[@varunrajkumar2764]

Thanks, this really helped.

[@abdicodes]

Glad it helped!

[@nicetomeetugaming7024]

Thanks for this video!

[@CodeProps]

That was really helpful, thanks

[@bakamarimo7528]

Great content man Subscribing hoping for more awesome content

[@ofiresaban4510]

Thanks! very useful

[@thanasisathanasi4965]

Is it possible to start streaming from the middle of the file and skip the beginning?

[@RupamBumba]

great video, make some more in details videos like that

[@RivenbladeS]

@AbdisalanCodes Please do a tutorial about caching when user rewinds back the already streamed part of video.

[@harshavardhannakkina1843]

great content thank you so much

[@bonbonpony]

01:04 So the player is sending those Range requests on its own? We don't have to do anything fancy, it's built in? 10:17 Saving WHERE? And what about those videos that have src="blob:here_some_weird_url_with_numerical_id" ?

[@bonbonpony]

@Rajat What makes you think so?

[@abdicodes]

Correct, the built-in HTML video player sends the requests for the video and provides the range headers! The saving part was just an idea for how you could possibly preserve the buffer, it's probably a bad idea to save it in local storage now that I think about it. I've had better success giving a range of the entire video in the response. This makes sense because the video player requests "0-" range which means, give me everything from the start to the end.

[@abdicodes]

For videos with a blob source, you can't stream it from the server because the video is already on the client. It's a trade-off of making the user load the entire video when they come to the page, in exchange for a seamless watching experience.

[@abdicodes]

@Rajat I try to get to all the comments but I miss a few sometimes :/ I'll check out your question

[@bonbonpony]

@@abdicodes Hmm, how about streaming the 1MB chunks with XHR and swapping them in the player as blobs? Would that work? Still, I don't see how could I possibly save the chunks locally if the player sends those range requests itself (that is, I don't have any control over the headers it sends to the server nor the server's responses). But if I could use the blob chunks, then I think this might be possible, because those blobs could be stored locally and swapped in the player if needed without making any remote requests.

[@diegomartin6332]

Its incredible! Its possible to do the backend in python?

[@TechPuzzle_Haven]

Please make a video on mux with Nodejs for live video streaming.

[@samplerun4686]

i really like your concept, i have a question if you can answer. how do i switch between audio track if video file have multiple audio tracks? i couldnt find this solution where i can change my audio track in video controller. thank you

[@danemiller4852]

How would one set up a code to get OBS to communicate with your node?

[@sivach8667]

Hmm... How's this working? I don't see that we're sending any "range" in our request. When I tried to implement it, it went to the "if(!range)" in index.js and got that "Requires Range Header".

[@abdicodes]

The range request comes from putting the endpoint into the HTML5 video player! We don’t make the requests, the video player does :)

[@JohnWeland]

I would love to see the server-side of this... what Imean is an endpoint you could point something like OBS to and live stream so stream -> server -> client

[@hypocritical7379]

this is the server-side

[@JohnWeland]

@@hypocritical7379, right but in this example, the server is only set up to stream existing files. How does the server handle receiving an encoded stream and sending it out to connected clients. In a situation like that, you don't have the file to reference but an open file stream (would be my guess)

[@hypocritical7379]

@@JohnWeland depends, you would save chunks of incoming video, so, you could have it setup so that when you get a new video chunk you send the previous one (might save 20 sec fragments in a encryption setup like base64 for video) (there are other ways of doing this like having a array and when the array gets more than 20 base64 images it sends the images full of images out, then clears the array and starts loading it with images again) edit: I did make a live streaming service like this

[@denismbabazi8094]

is it possible to have one using the dash streaming protocol

[@djamaatul]

hi, give me reason why videoSize - 1 and end - start + 1?

[@voalcalisticTanmay]

thanks a lot for the video ...

[@1manbeats869]

Very cool video, i like your code style and explanations. Just one thing, i believe this is not good to use statSync (or any sync IO function) inside a request handler, cause this would block the JS runtime event loop.

[@ominezx9]

its lit💥, thanks bruv.

[@abdicodes]

Thank you! 🙏🏾

[@Ason_Project]

Can I contact u for a small job...

[@coffeecuppepsi]

this is awesome thank you

[@semariaissac9119]

Thanks Abdi! Its a great info, do you have any idea how to stream kinesis video stream in node js within Amazon console?

[@abdicodes]

I haven’t tried that but could be a cool video idea!

[@justfun591]

what if I want to server videos from S3 bucket using that technique?

[@ziranshuzhang6831]

is this something similar KZbin does or KZbin is somehow fundamentally different?

[@vishaljoshi6406]

really good! appreciate it

[@adithyapaib]

can you make a like time video streamer like a tv video which doesn't allow you to go forward or backward but steam at the same time for all people ?

[@miniburger9323]

thanks for the video! may i ask, why it Cannot GET /bigbuck.mp4 when i implement it on hosting (heroku)

[@karmadipdodiya4421]

I am receiving a video stream over a TCP socket. How can I stream that video in a browser? I don't know the length, i just need to transfer the data.

[@ulrichnwembe9579]

Great video i liked it i would know if you get a document which explain the Video progress bar When you leave a video without finishing it, a red bar under the video thumbnail shows you where you left off. When you play the video again, it will restart from where you were. I really need help to associate it a video streaming.Thanks

[@artificallead499]

would this mean that someone who steal the code from inspect element couldnt watch the full video if you had a membership site

[@jairam2100]

Really nice one.learned lot.Is it possible to do the same but from mongodb?

[@abdicodes]

Thanks 😊 I think so! I’ve never tried mongodb with big files but I think there’s support for it using GridFS

[@abdicodes]

I made the video! Hope its as helpful as this one!

[@jairam2100]

@@abdicodes Thanks a lot :)

[@flyancesystems8328]

Hi, I created an Android video streaming application but the videos take too long to load and play, what could be the problem?