Stream Audio Video via Node.js ( Express )

3 min readAug 29, 2022

Streaming service should be quick and dependable as possible. so we need a robust server to stream media, and for that, we use Express which is a lightweight HTTP server based on Node.js run time.

In this article, we are going to learn and implement by creating a simple E API endpoint, that streams mp3 and video files back to the client

lets Start

Create a node project

2. Create index.js , index.html and add video file as main.mp4

3. Add following code in index.js

const express = require("express");
const app = express();
const fs = require("fs");
const PORT = process.env.PORT || 3000;app.get("/video", (req, res) => {
  const range = req.headers.range || "0";
  const videoPath = "./main.mp4";
  const videoSize = fs.statSync(videoPath).size;
  const chunkSize = 1 * 1e6; //  1MB
  const start = Number(range.replace(/\D/g, ""));
  const end = Math.min(start + chunkSize, videoSize - 1);const contentLength = end - start + 1;const headers = {
    "Content-Range": `bytes ${start}-${end}/${videoSize}`,
    "Accept-Ranges": "bytes",
    "Content-Length": contentLength,
    "Content-Type": "video/mp4",
  };
  res.writeHead(206, headers);const stream = fs.createReadStream(videoPath, { start, end });
  stream.pipe(res);
});app.listen(PORT, console.log("Started on port 3000"));

In the above code, the range is provided by the client it is the point where the video is playing at. The fs.statSync() gives us the statistics of the file, like file size, creation time, etc. The chunkSize given above is 1MB. We will send 1MB of data from the given range. Meaning for each response back to the client we send back 1MB of data. start and end are the beginning and end of the chunk of data. contentLength is the size of the data that is being sent back to the client.

The header contains information about Content-Range that gives the start point end point and size of the file to the user. Accept-Ranges tells the client what kind of data type the provided response is. Content-Length tells the length of content provided. Content-Type tells the type of file that is being sent, it may be text, audio, video, application, multipart, VND, etc. The status code is 206 because we are sending back partial content to the user and tells the client not to close the connection, as the data is still being sent.

Now the actual part that helps us stream media is stream, which is created from fs.createReadStream(), It takes in the videoPath, start and end. Which lets it pull the actual part of the content, meaning it gets the data from the defined start point to the endpoint. The stream.pipe() sends data back to the client in the form of a stream of data.

4. Add the code in index.html


<!DOCTYPE html>
<html lang="en">
   <head>
      <title>Streaming Demo</title>
   </head>
   <body>
      <video src="http://localhost:3000/video" controls></video>
   </body>
</html>

5. Running the node express application and run index.html in browser

node index.js

Here we have successfully made a stream where file size is in chunk of 1MB

Conclusion

Here we have successfully implemented streaming service

Stream Audio Video via Node.js ( Express )

Conclusion

Written by Indepthcoder