Node.js視頻流應用創(chuàng)建之后端的全過程

更新時間：2022年03月17日 15:52:04 作者：天行無忌

這篇文章主要給大家介紹了關于創(chuàng)建Node.js視頻流應用之后端的相關資料,文中通過實例代碼介紹的非常詳細,對大家的學習或者工作具有一定的參考學習價值,需要的朋友可以參考下

前言

在本文中，將展示一個非常簡單的 Node.js 應用程序，用于在線流媒體視頻傳輸。本文僅涵蓋后端，在下一部分中，將使用 Vue.js 創(chuàng)建前端。話不多說，下面開始進入主題。

源碼地址：github.com/QuintionTan…

初始化

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

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

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

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

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

主體邏輯

主體邏輯的代碼主要在文件 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(`服務運行端口：${PORT}`);
});

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

注意：這里的 index.html 文件主要用于演示后臺服務，后續(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 服務</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>

現在需要設置 /video 路由和控制器邏輯，作為索引路由，還需要發(fā)送這個 HTML 文件進行渲染。接下來更新 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(`服務運行端口：${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(); // 獲取服務運行路徑
    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 是當前在視頻緩沖區(qū)中的部分）。如果range不存在，拋出一個錯誤。否則，在文件系統中找到該文件。

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

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

現在來啟動服務，執(zhí)行如下：