DEV Community

Cover image for How to Code a Video Streaming Server using NodeJS
Abdisalan
Abdisalan

Posted on • Updated on

How to Code a Video Streaming Server using NodeJS

Do you want to stream video in your app without needing users to download the entire video? Here's how to do exactly that using NodeJS.

Final Result

Here's the end result of what we're gonna make.
Video player with buffering timeline

Notice that light grey bar on the video timeline? That's the HTML5 Video Element buffering the video from our NodeJS server!

If you want to git clone the code and play with it yourself, here's the link to my GitHub Repo! https://github.com/Abdisalan/blog-code-examples/tree/master/http-video-stream

Part 1: Setup npm project

You'll need to install NodeJS and run:

mkdir http-video-stream
cd http-video-stream
npm init
npm install --save express nodemon
Enter fullscreen mode Exit fullscreen mode

Part 2: index.html

We need to create a HTML5 Video element, and set the source as "/video", which is where server's endpoint is.

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>HTTP Video Stream</title>
  </head>
  <body>
    <video id="videoPlayer" width="650" controls muted="muted" autoplay>
      <source src="/video" type="video/mp4" />
    </video>
  </body>
</html>

Enter fullscreen mode Exit fullscreen mode

Part 3: index.js

Now lets setup our node server so that on "/" endpoint it serves our index.html page.

const express = require("express");
const app = express();

app.get("/", function (req, res) {
  res.sendFile(__dirname + "/index.html");
});

app.listen(8000, function () {
  console.log("Listening on port 8000!");
});

Enter fullscreen mode Exit fullscreen mode

Part 4: package.json -- Run our server

Add a start script to your package.json so that we can run our server using npm start command.
There's more in your package.json file but I just want you to copy this start script. It uses nodemon to run index.js and restarts the server every time you save the index.js file so you don't need to restart the server yourself!

{
  "scripts": {
    "start": "nodemon index.js"
  }
}
Enter fullscreen mode Exit fullscreen mode

Now you should be able to run

npm start
Enter fullscreen mode Exit fullscreen mode

and see our app running on port 8000. Open your browser and go to http://localhost:8000 to see if it worked.

Part 5: index.js (Again)

We're almost there!
For this final stage, you'll need to either find an mp4 video file, or download the one I've provided in my GitHub project link.
https://github.com/Abdisalan/blog-code-examples/tree/master/http-video-stream
Here's the "/video" endpoint for our server.

// in the imports above
const fs = require("fs");

app.get("/video", function (req, res) {
  // Ensure there is a range given for the video
  const range = req.headers.range;
  if (!range) {
    res.status(400).send("Requires Range header");
  }

  // get video stats (about 61MB)
  const videoPath = "bigbuck.mp4";
  const videoSize = fs.statSync("bigbuck.mp4").size;

  // Parse Range
  // Example: "bytes=32324-"
  const CHUNK_SIZE = 10 ** 6; // 1MB
  const start = Number(range.replace(/\D/g, ""));
  const end = Math.min(start + CHUNK_SIZE, videoSize - 1);

  // Create headers
  const contentLength = end - start + 1;
  const headers = {
    "Content-Range": `bytes ${start}-${end}/${videoSize}`,
    "Accept-Ranges": "bytes",
    "Content-Length": contentLength,
    "Content-Type": "video/mp4",
  };

  // HTTP Status 206 for Partial Content
  res.writeHead(206, headers);

  // create video read stream for this particular chunk
  const videoStream = fs.createReadStream(videoPath, { start, end });

  // Stream the video chunk to the client
  videoStream.pipe(res);
});
Enter fullscreen mode Exit fullscreen mode

The HTML5 video element makes a request to the /video endpoint, and the server returns a file stream of the video, along with headers to tell which part of the video we're sending over.

For a chunk size, I've decided 1MB but you could change that to whatever you like! Another great benefit of this is that we don't need to code the stream to continuously deliver the video data, the browser handles that gracefully for us.

For an in-depth line by line playback on how this works, consider watching my YouTube video on this topic.

Now, you've got a working video streaming server using NodeJS!

Happy Streaming! ✌

Discussion (23)

Collapse
zoedreams profile image
☮️✝️☪️🕉☸️✡️☯️

nice work! you can also use wasm to modify the video live! this is good when you want to included a lower res and high res like how netflix works

Collapse
dgiulian profile image
Diego Giuliani

wouldn't that require extra processing power? I thought what they did was generate multiple versions of the file and pick one accordingly to the required bandwidth and quality

Collapse
zoedreams profile image
☮️✝️☪️🕉☸️✡️☯️

yes, however i was refering more to the code you can use to blend a seamless transition between frames when you do that, like adding a simple gaussian blur with wasm. This would help to reduce the jankyness and jitter of switching between streams live.

Thread Thread
dgiulian profile image
Diego Giuliani

right, makes sense. That's what happens when you have a small hiccup in the network and the stream lowers the quality for a moment and resets back to a better quality when it gets better.
Thanks for your reply.

Thread Thread
zoedreams profile image
☮️✝️☪️🕉☸️✡️☯️

:) your welcome.

Collapse
abdisalan_js profile image
Abdisalan Author

Wow I never knew, that’s cool!

Collapse
ijpatricio profile image
ijpatricio

Hey Abdisalan! Great one!
I made the project from scratch from the article, and then noticed it was missing the "require fs". in the repo that's all ok, just the article misses it.
Other than that, perfect start. I'm starting my journey into video and streaming, and was an excellent start! Is this a main interest of yours?

Collapse
abdisalan_js profile image
Abdisalan Author

I love it! Glad to have helped you get started! I'll try to fix that issue!

Collapse
rizadwiandhika profile image
Riza Dwi

Great articles! Really insightful to me since i'm starting curious in streaming

I wonder that if this stream way uses http protocol, does this mean we use tcp protocol ?

I just recently learned about tcp & udp protocols
where one of the usecases of udp is to serve connectionless data transfer (which is perfect in this video streaming case)

Collapse
anandbej profile image
anandkumar

I'm not able to stream the video. I'm getting the "Requires Range header" response.
I tried doing const range = "bytes=0-1023"; but that didnt work too. The player just appears and doesnt play the video

Collapse
rmfranciacastillo profile image
Renato Francia Castillo

Nice! Love that you used Node instead of some middleware. Keep it up Abdi!

Collapse
abdisalan_js profile image
Abdisalan Author

Thanks!

Collapse
xubmuajkub profile image
xubmuajkub

Great work! Can you also do the example of play video from remote? e.g example.com/video.mp4

Collapse
bharathvajganesan profile image
Bharathvaj

Modern browser like Chrome does this video streaming by default. 🤔

Collapse
elbigans04 profile image
rhafael bijaksana

thank man. this is very helpful

Collapse
lokuedo5000 profile image
Brayan

Hi, I want to do that, but with webtorrent, how do I do that?

Collapse
son0nline profile image
Son0nline

Pls help, I'm tried with 600MB video
It ok in localhost but failed in LAN

Collapse
acagastya profile image
Agastya

Were you trying it on iOS/Safari by any chance? I faced the problem when trying to make it work on iOS, so I followed this blog.logrocket.com/streaming-video.... Safari-based browsers need a different way of handling things.

Collapse
kanhasonu21 profile image
Kanhaiya Kumar

How can we access the URL in frontend if we make this API protected by adding a middleware

Collapse
anztrax profile image
andrew ananta

wow. this is awesome... thanks for sharing bro

Collapse
prernapahwa profile image
Prerna-Pahwa • Edited on

Nice article...but I am unable to stream the video. It's showing just blank with the disabled play button. pls refer the screenshot i attached below.

Collapse
omadoyeabraham profile image
omadoyeabraham

@prernapahwa I had a similar issue and the problem for me ended up being that the options object passed to fs.createReadStream as the 2nd parameter requires the keys to be 'start' and 'end'.

So if you renamed the start and end variables from the tutorial (like i did), you'll need to explicitly pass them to the createReadStream call, e.g.

fs.createReadStream(videoPath, { start: STARTING_BYTE_POSITION, end: FINAL_BYTE_POSITION });
Enter fullscreen mode Exit fullscreen mode

NB: STARTING_BYTE_POSITION and FINAL_BYTE_POSITION are the names of my own variables, you'll need to replace them with yours.

I also noticed that typos in headers also caused the blank video player error you described. Hope this helps.