創(chuàng)建項目文件夾 vue-video-stream ，進(jìn)入文件夾，再創(chuàng)建文件夾 express-service ，用戶存放后端服務(wù)相關(guān)代碼，進(jìn)入express-service ，運行 npm init 初始化配置并安裝相關(guān)依賴項，如下：

npm install express cors --save
npm install -D nodemon

安裝完成后修改 package.json 中的調(diào)試及啟動腳本，如下：

"scripts": {
    "start": "node ./index.js",
    "debug": "nodemon --trace-warnings --inspect=0.0.0.0:9229 ./index.js"
}

至此完成了后端服務(wù)的初始化，接下來完成主體部分。

主體邏輯

主體邏輯的代碼主要在文件 index.js 文件中，如下：

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

const app = express();
app.use(cors());

app.get("/", (req, res) => {
    // 根目錄路由
});

const PORT = process.env.PORT || 8100;

app.listen(PORT, () => {
    console.log(`服務(wù)運行端口：${PORT}`);
});

在流媒體傳輸視頻的目錄中 express-service 添加一個新的 index.html 文件。文件的 src 必須指向要繼續(xù)進(jìn)行流媒體傳輸?shù)姆?wù)器端點。

注意：這里的 index.html 文件主要用于演示后臺服務(wù)，后續(xù)將會使用 VUE 來替換。

<!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, initial-scale=1.0" />
        <title>流媒體傳輸 Express 服務(wù)</title>
        <style type="text/css">
            body {
                margin: 0px;
                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>

現(xiàn)在需要設(shè)置 /video 路由和控制器邏輯，作為索引路由，還需要發(fā)送這個 HTML 文件進(jìn)行渲染。接下來更新 index.js 文件代碼，如下：

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

const app = express();
app.use(cors());

app.get("/", (req, res) => {
    // 根目錄路由
    res.sendFile(__dirname + "/index.html");
});
// 視頻路由
app.use("/video", require("./routes/index"));

const PORT = process.env.PORT || 8100;

app.listen(PORT, () => {
    console.log(`服務(wù)運行端口：${PORT}`);
});

接下來在目錄 express-service 創(chuàng)建文件夾 routes ，在文件夾中創(chuàng)建腳本文件 index.js ，代碼如下：

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

在目錄 express-service 創(chuàng)建文件夾 controller ，在文件夾中創(chuàng)建腳本文件 videoController.js ，代碼如下：

const fs = require("fs");
module.exports.streamVideo = (req, res) => {
    const range = req.headers.range;
    const videoId = req.params.videoId; // ID或者視頻文件名稱
    if (!range) {
        res.status(400).send("無效Range");
    }
    const processPath = process.cwd(); // 獲取服務(wù)運行路徑
    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);
};

下面就來介紹 videoController 的主要邏輯，在請求 headers 中，提取了 range（ range 是當(dāng)前在視頻緩沖區(qū)中的部分）。如果range不存在，拋出一個錯誤。否則，在文件系統(tǒng)中找到該文件。

然后，設(shè)置要隨每個并發(fā)請求發(fā)送的塊大?。ùa中設(shè)置為 1 MB ， Math.pow(10,6) 或簡單的 10 ** 6）。然后定義開始和結(jié)束變量，start 變量決定了發(fā)送的視頻的起點，對于 end 變量，需要確定 (start +chunk) 或視頻大小長度之間的最小值，避免超出。

最后，確定實際發(fā)送的內(nèi)容長度，內(nèi)容長度是開始值和結(jié)束值之間的差異。然后使用剛剛在它上面計算的值生成的 headers 對象。在代碼的最后一部分，發(fā)送一個內(nèi)容響應(yīng) (206)，它是 express 框架的一部分，并使用 fs（Node.js 核心）模塊將該響應(yīng)與讀取流進(jìn)行管道傳輸。

現(xiàn)在來啟動服務(wù)，執(zhí)行如下：