In this article I would be showing you how I used Nodejs to stream a video. Lets Dive right into it:
All you need to carry out this task Is EXPRESS and NODEMON to (restart your server).
To begin Do:
npm init-y
npm i express nodemon -D
Now we'll create our Root directory
touch index.js
OR create a javascript file called index.js
Now we'll Import our Dependencies
const express = require("express");
const app = express();
const fs = require("fs");
Now we'll create a Simple HTML page to stream the video
But first we need to create an html file so
touch index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Video Streaming With Node</title>
<style>
body {
margin: 5% auto;
max-width: 100%;
background-color: rgb(14, 14, 14);
padding-top: 10%;
padding-left: 35%;
}
</style>
</head>
<body>
<video id="videoPlayer" width="50%" controls muted="muted" autoplay>
<source src="/video" type="video/mp4" />
</video>
</body>
</html>
Now we'll route the html page and listen to our Port
const express = require("express");
const app = express();
const fs = require("fs");
app.get("/", function (req, res) {
res.sendFile(__dirname + "/index.html");
});
app.listen(8000, function () {
console.log("Listening on port 8000!");
});
Now You Should have this
To the main part of this Project😉😉😉
You'll create a route '/video' and set the request object headers It'll look like this:
app.get("/video", function (req, res) {
const range = req.headers.range;
if (!range) {
res.status(400).send("Requires Range header");
}
res.writeHead(206, headers);
const videoStream = fs.createReadStream(videoPath, { start, end });
videoStream.pipe(res);
});
Now we'll set our videoPath, videoSize and headers
The route now looks like this;
app.get("/video", function (req, res) {
const range = req.headers.range;
if (!range) {
res.status(400).send("Requires Range header");
}
const videoPath = "file_example_MP4_480_1_5MG.mp4";
const videoSize = fs.statSync("file_example_MP4_480_1_5MG.mp4").size;
const CHUNK_SIZE = 10 ** 6;
const start = Number(range.replace(/\D/g, ""));
const end = Math.min(start + CHUNK_SIZE, 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 videoStream = fs.createReadStream(videoPath, { start, end });
videoStream.pipe(res);
});
And that's basically IT. All you need is your video in the same folder directory as your project and re-editing the name of the video in the code.
Your Working directory should be like this
const express = require("express");
const app = express();
const fs = require("fs");
app.get("/", function (req, res) {
res.sendFile(__dirname + "/index.html");
});
app.get("/video", function (req, res) {
const range = req.headers.range;
if (!range) {
res.status(400).send("Requires Range header");
}
const videoPath = "file_example_MP4_480_1_5MG.mp4";
const videoSize = fs.statSync("file_example_MP4_480_1_5MG.mp4").size;
const CHUNK_SIZE = 10 ** 6;
const start = Number(range.replace(/\D/g, ""));
const end = Math.min(start + CHUNK_SIZE, 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 videoStream = fs.createReadStream(videoPath, { start, end });
videoStream.pipe(res);
});
app.listen(8000, function () {
console.log("Listening on port 8000!");
});
Here Is the Link To the Code base
Github Link
Top comments (0)