How To Code A Video Streaming Server in NodeJS

If you need help ask on discord! / discord
How to code a simple server that streams video instead of downloading the whole video.
Coding Begins: 1:53
Download Code: github.com/Abd...

[@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.

[@chadzulu4328]

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

[@aghiadalzein3069]

that was the most clear description,thanks

[@alexandrumarius5004]

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

[@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

[@arielspalter7425]

You've earned yourself another subscriber. Awesome tutorial!

[@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 :)

[@shivangchaturvedi237]

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

[@vaibhavpawar4535]

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

[@Pikachu-oo5ro]

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

[@elad3958]

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

[@pavithranrocky316]

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

[@abdicodes]

Thanks! 😁

[@ytlagu2010]

You deserve more subscribers buddy!!

[@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!

[@thomasandon2539]

Clear and straightforward! Thx.

[@karnatakastatesyllabusexpl39]

Thanks for the simple but useful video

[@abdicodes]

Glad it was helpful!

[@nadaz7333]

This is really good! Keep going!

[@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

[@captainanonymous7090]

Keep going bro. You’ve got good explanation

[@abdicodes]

Thanks for the support!

[@dhyey2316]

This was amazing for clearing basics.

[@albertmends]

a very cool tutorial.. Thanks mhan

[@kj2w]

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

[@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 !!!

[@kuku5567]

you've earned a subscriber, thanks dude!

[@abdicodes]

Awesome, thank you!

[@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

[@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?

[@evans8245]

if you wanna optmize for performance, make your web server and streaming server communicate with http2

[@abdicodes]

Haven't looked much into http2 but that could be cool!

[@MechanicusOfficial]

What i did notice, after a while the audio is not sync with the video. The audio will have a delay bigger and bigger. If you pause and replay the audio will be resync.

[@elieonokoko3782]

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

[@DJFunkyNutti]

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

[@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

[@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 😁

[@paragbhide1695]

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

[@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.

[@bevedel]

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

[@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 :/

[@atalaysezen3391]

Thank you buddy, you should do more videos like this

[@dayronalfaro9461]

I think that pipe(res) maybe cause a memory leak if the peer close the connection, there is no code to close the stream if this happens, maybe you could use pipeline instead, this way it automatically close the stream. But good video

[@sungjun94]

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

[@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 ?

[@dhanushkamadushan1989]

Really good explanation. keep it up.

[@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.

[@andrewndotela7407]

Hey man, this is really helpful. Thanks

[@io-er1ex]

Thanks this was very helpful. Keep it up

[@abdicodes]

Glad it helped! 😁

[@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 :)

[@karnatakastatesyllabusexpl39]

It worked perfect Sir!

[@ujwalc9226]

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

[@jordanski5421]

Great explanations but I'm still not clear on one thing, when we're setting the size of the chunk we're working in bytes right (10 ** 6 = 1MB)? Why are we only subtracting 1 from the end chunk as if we're working in megabytes? Shouldn't we subtract 10 ** 6 from the end chunk to get 1MB instead? Or is the size we get back from fs.stat() measured in megabytes?

[@abdicodes]

I subtract 1 from the videosize in the end chunk because that's the last byte. Example: If there are 100 bytes in a video then the 99th byte is the last one since we count starting from 0. I can explain more in discord :)

[@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.

[@CheezePie]

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

[@sem_dev]

Love you for this video!!! Instant sub

[@RivenbladeS]

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

[@sonsimp3468]

Hey I wanted ask but in containerized environments the video will not be on localhost, so what would be the ideal place to story them would s3 make sense ?.

[@danielstella2425]

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

[@david-tracy]

please create a video of you uploading the chunks of a large video to a remote service such as GCP Storage & then retrieving them from there. You'll be the only video online that does so. All the videos already show how to store the video locally in the project.

[@bakamarimo7528]

Great content man Subscribing hoping for more awesome content

[@mohamedyoussef8835]

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

[@bhattakshay7816]

Are you using RTSP protocol for this?

[@y031962]

Abdi, thank you so much for your video. For some reason regular expression /D/g wasn't working for me. I replace it with /[^0-9]/ and it workde.

[@abdicodes]

Yea that’s weird, glad you were able to figure something else out!

[@henryjiang4407]

Hey, I am trying to deploy it on Heroku, but I couldn't see the video on another device. Any idea how to fix this?

[@flyancesystems8328]

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

[@bodolawale5448]

Loved it. Thanks.. I will build upon this

[@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

[@madbadseagulls1]

Amazing tutorial, Thank you

[@codeflow5521]

Zindabad Brother

[@mahendranath2504]

This is cool man, as soon as I saw your post, I immediately jumped into implementing it, I feel so great about this after implementing it, thanks for sharing, can you do more tutorial about streaming and pipes, buffering, I see the network tab is having media ping with every time streaming is done, is that normal ? or can we hide that 206

[@abdicodes]

There's no hiding

[@sniviobraganca9899]

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

[@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

[@saramshshrestha7641]

Love you man, you're great.

[@sumitranjan7005]

This really excellent work. but can we do same thing with pure javascript

[@manavdixit3355]

Why do we set end=(start+chunkSize,vediosize-1) instead of end=(start+chunkSize,vediosize)

[@facts-no2kp]

Copy and paste? But please explain why you are using those methods, and which documentation? explain what exactly you are seeing in the inspect dev tool including the headers etc...

[@ejazahmedj2103]

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

[@Gorboduc]

Very good video! One question: would you say that Node.js - or Javascript in general - is the preferred language for a video streaming site? Is there a way to do it using Python or PHP or something else? Thnx.

[@abdicodes]

Node js isn’t really special! It’s all about knowing the protocol you want to use; in this case, HTTP. But I also use RTMP in my recent videos

[@sadekhossain9566]

Hi this works, but getting error sometime saying The value of "start" is out of range. It must be an integer. Received NaN How to solve this?

[@L1CBot]

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

[@shubhamlahoti8152]

Really appreciate your work ...Can you make more detail full stack live streaming project....

[@asmr_nanna]

Hey man, Thanks a lot for this video. Though I'm looking for a tutorial to convert rtsp to hls or http, it helped me a lot to understand the basic logic of streaming. I'm just wondering 1 thing... I've got an error that 'Cannot read property 'replace' of undefined'... whenever I run your project. I'm... I'm new at coding so .. do you have any idea why it sends me an error?

[@abdicodes]

That error happens when the request doesn’t have the range header. This happens when you try to make a request to the api not from the html video element in the src. I’ll also be announcing my discord soon that should help a lot of people!

[@asmr_nanna]

@@abdicodes Many thanks for the reply! :) I will wait for that one! :)

[@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 ?

[@justfun591]

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

[@thanasisathanasi4965]

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

[@TechPuzzle_Haven]

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

[@ziranshuzhang6831]

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

[@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!

[@danemiller4852]

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

[@miniburger9323]

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

[@juanoude]

Nice video man. Thanks a lot.

[@bopon4090]

the problem with this is it is only streamable for .mp4 types. I wanted something that can play any video format. If you know about these then pls reply.

[@amalbabu6607]

If I use fetch get request to get the video then where should I include ranges. When I include in header the subsequent requests shows 401 because of authentication middleware

[@mathewkurian4322]

dear bro, how to customize youtube using code. need is , use the same url (youtube link) after a live stream ends, (reuse).??

[@djamaatul]

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

[@RupamBumba]

great video, make some more in details videos like that