How To Code A Video Streaming Server in NodeJS

do you want to learn how to make a video streaming app well in this video i'm going to do exactly that using node.js and for those who are new my name is abdi and i'm a software engineer and on this channel i make tech tutorials now onto the video okay so here's where we're going to be making it's just one video streaming from our server just to keep things simple in the network tab you can see all the different requests being made for the video each one about one megabyte and then if i click on random parts of the video here you'll see that more requests are being made and the video is streaming or sorry buffering those next few seconds so first i'm going to go through how does this actually work at a high level and then i'll go through how to how to code this step by step if you just want to skip to the code part i'll put a link in the description and of course i'll also put a link to the github so you can download my code and try this out for yourself here's our browser and here's our node.js server in our site we've got an html5 video element where the source points the slash video endpoint first the video element makes a request to our server and in the headers gives us a range of bytes it wants from the video since it's the beginning of the video it wants the zeroth byte onward that's why you see the zero dash right there our server will in response send part of the video and use the 206 http status because it's returning partial content in the response headers we tell what type of data we're returning which is bytes it also tells how many bytes in the content linked header what's the range of bytes and the total number of bytes in the video and lastly we set the content type header to video mp4 format video element will recognize this as an incomplete video because of the headers and we'll start playing the video with what it's downloaded so far as the video continues to play it'll request the next chunk and the next until the entire video is buffered into the player all right so now we're in the code portion of the tutorial so i've made a folder and i opened up vs code so first thing you do is npm in it and then you can just go through all the defaults so just press enter now we're going to need two different libraries first is express and the other one is nodemon cool so now the first file we're going to make is the index.html and then i'll go through this at a high level all right so for the index.html file i'm going to make a shelf of the page and then we're going to name it http video streaming and then we're gonna add a little bit of style and lastly for the important part uh i'm gonna create the html5 video element and it's got a id for video player a width of 200 or 650 and the source is slash video which is going to come from our server and the type of video slash mp4 okay so here's how that looks so far i'm just referencing the file there's no server running and of course the slash video endpoint is not working but we're going to connect all those in the index.js all right so now we're going to write the slash video endpoint so first off i downloaded this video a big buck and that's in the top level of my project so in the code what we're going to do is we're going to import fs which stands for file system and that's going to help us actually stream our video by making a a file stream and then returning that back to our client the slash video endpoint so when we go to slash video it's going to run this function we need to make sure there's there's a range header because otherwise we can't tell client what part of the video we want to send back so if there's no range then we send back a 400 status to our client and say it requires the range header here's the video path it's just bigbuck.mp4 and then we find the size of the video and we're going to use this to tell the client how big the file actually is and also find out if our starting and end points make sense so we're going to parse this range variable that we just got it's going to look something like this it's going to have bytes equals and then this is our starting byte number and then there's this dash and then there's supposed to be a usually this is supposed to be a ending by its study requests but it's saying just give me the rest but we're gonna be giving it just one megabyte instead so i set the chunk size to one megabyte which is about 10 to the sixth and then we parse the starting byte from the range header which is originally a string so first we replace all the non-digit characters with this empty string so that removes pretty much everything here that dash and we're just left with the number and with that i convert it into a number and then we calculate what is the ending byte that we're going to send back so i first add the chunk size which is one megabyte to the starting but then that could go past the end of the video size so in that case um if this number is greater than the actual video size i actually end up returning the video size and i do that by using this math.min function here so it takes the minimum of these two next we're going to start returning we're going to create the headers that we're going to return so first i calculate the content length and that's just n minus start plus 1. here's the headers object so in the content range first we say what type the starting byte dash the end byte slash the actual number of bytes in the video and then that way the video player knows like how far along is it based off of the um the video size itself this is also another way to say what type of data we're sending back so i just write accept ranges bytes and then i put the content linked header so how many bytes we're going to send back and lastly i send back the content type which is video mp4 because it's bigbuck.mp4 now we're writing the response back so first we write the http status i'm doing 206 because that tells the browser that we're sending back partial content this isn't the entire video this is just the video from this starting point to the endpoint and then we also set the headers and then this is where all the big magic is so we use the file system library to create a read stream with the um the big buck file and put that there and then next we can also tell it what's the setting and end bytes we want to send over so i just put those as an option uh in this options object here and for the very last part we take the speedo stream and then it's got a this variable by itself doesn't really do anything so we've got to pipe this stream somewhere and we pipe it through this response object which is what we were given back at the start of the function so now i'm going to save this open up our terminal run npm start okay now we're back in prom uh so i've refreshed this now we're actually playing the video and it's streaming um i think it's not showing the video request here because it's been cached so from what i was testing before uh so let's do that and then it should show up after if not there then right there um so yeah you can see all the other you can see all the requests here 206 for partial content we're sending back one megabyte and it's only buffered uh and we've only downloaded this small part of the video but we're actually watching it without having to download the entire video so it's streaming alright so what are the pros and cons of using this approach well for the pros so first one is that was super simple to implement all you do is create a file stream and then return it back to the client it lets you select throughout the video and you can decide pretty much how big of a payload you can send back i chose one megabyte but you might choose send the rest of the video or just send like 100 kilobytes it's really up to you but the con is it's because it's so simple server and like the video player aren't working together very well so it'll just request the whatever part of the video you're on and doesn't really think about or take into account what you've already requested so yeah if i actually just go through you'll see that more and more resources are being requested and if i go backwards and those same resources are being requested so i actually ended up requesting about 180 or 204 megabytes when this is actually a 100 megabyte file so it's a little ironic that he wanted to stream something but you ended up requesting more data than there actually is so another step you could take is saving the data on the front end so the video player doesn't request more from the server yeah so that pretty much wraps up the video thank you so much for watching until the very end i really hope this helped you learn something it was a lot of fun making this project don't forget to make sure to like the video and if you want to see more videos subscribe to the channel my name is abdi and i will see you in the next one [Music] you

Channel: AbdisalanCodes

Views: 59,920

Keywords: Nodejs, Video stream, Stream

Id: ZjBLbXUuyWg

Length: 10min 51sec (651 seconds)

Published: Sat Oct 24 2020