In this article, I’ll show you a very simple Node.js application for streaming video online. This article covers only the back end; in the next section, you’ll create the front end using vue.js. Without further ado, let’s get to the point.

Source code address: github.com/QuintionTan…

Initialize the

Create the project folder vue-video-stream, go to the folder, and create the folder Express-service. Enter the express-service and run NPM init to initialize the configuration and install the related dependencies as follows:

npm install express cors --save
npm install -D nodemon
Copy the code

After installation, modify the debugging and startup scripts in package.json as follows:

"Scripts ": {"start": "node./index.js", "debug": "nodemon --trace-warnings --inspect= 0.0.0.00:9229./index.js"}Copy the code

This completes the initialization of the back-end service and completes the body part.

The main logic

The code for the body logic is mainly in the file index.js, as follows:

const express = require("express"); const cors = require("cors"); const app = express(); app.use(cors()); App.get ("/", (req, res) => {// root route}); const PORT = process.env.PORT || 8100; App. Listen (PORT, () = > {the console. The log (` service PORT: ${PORT} `); });Copy the code

Add a new index. HTML file to the express-service in the directory for streaming video. The SRC of the file must point to the server endpoint where the streaming continues.

Note: the index.html file here is intended to demonstrate the backend service and will be replaced with VUE later.

<! DOCTYPE html> <html lang="zh"> <head> <meta charset="UTF-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta name="viewport" content="width=device-width, Word-wrap: break-word! Important; "/> <title> <style type=" text-align: left; padding: 0px; background-color: #000; } video { position: absolute; width: 800px; left: 50%; top: 50%; -webkit-transform: translate(-50%, -50%); -moz-transform: translate(-50%, -50%); transform: translate(-50%, -50%); } </style> </head> <body> <video src="/video/20220315" width="800px" height="auto" controls autoplay id="videoPlayer"></video> </body> </html>Copy the code

Now you need to set up the /video route and controller logic as an indexed route and also send this HTML file for rendering. Next update the index.js file code as follows:

const express = require("express"); const cors = require("cors"); const app = express(); app.use(cors()); App. Get ("/", (the req, res) = > {/ / root directory routing res. SendFile (__dirname + "/ index. The HTML"); }); / / video routing app. Use ("/video ", the require (". / routes/index ")); const PORT = process.env.PORT || 8100; App. Listen (PORT, () = > {the console. The log (` service PORT: ${PORT} `); });Copy the code

Create a script file named index.js in the express-service folder “routes”.

const router = require("express").Router(); const videoController = require(".. /controller/videoController"); router.get("/:videoId", videoController.streamVideo); module.exports = router;Copy the code

In the express-service folder controller, create the script file videoController.js as follows:

const fs = require("fs"); module.exports.streamVideo = (req, res) => { const range = req.headers.range; const videoId = req.params.videoId; // ID or video file name if (! Range) {res.status(400).send(" invalid range "); } const processPath = process.cwd(); Const videoPath = '${processPath}/resources/${videoId}.mp4'; const videoSize = fs.statSync(videoPath).size; const chunkSize = 10 ** 6; // 1 mb 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 videoStream = fs.createReadStream(videoPath, { start, end }); videoStream.pipe(res); };Copy the code

Here’s the main logic of videoController. In requesting headers, it extracts the range (range is the part currently in the video buffer). If range does not exist, an error is thrown. Otherwise, find the file in the file system.

Then, set the block size to be sent with each concurrent request (set to 1 MB in code, math.pow (10,6) or simply 10 ** 6). Then define the start and end variables. The start variable determines the starting point of the video to be sent. For the end variable, the minimum value between (start +chunk) or the length of the video size should be determined to avoid exceeding it.

Finally, determine the actual length of content sent, which is the difference between the start value and the end value. The HEADERS object is then generated using the value just evaluated on it. In the last part of the code, send a content response (206), which is part of the Express framework, and pipe the response to the read stream using the FS (Node.js core) module.

To start the service, do the following:

npm run start
Copy the code

To debug code and avoid manual restarts, run the following command:

npm run debug
Copy the code

This will restart the service automatically after changing the JS code.

After startup, type http://127.0.0.1:8100/ in the browser and you can see the following effect:

In the next section, we will use vue.js to design the front end of Vue Creating video Streaming Applications.