如何使用 NodeJS 编写视频流服务器

你想在你的应用中播放流媒体视频，而不需要用户下载整个视频吗？下面教你如何使用 NodeJS 来实现。

最终结果

这就是我们要制作的最终结果。

注意到视频时间线上的浅灰色条了吗？那是 HTML5 视频元素，它正在从我们的 NodeJS 服务器缓冲视频！

如果你想用 git clone 代码自己玩玩，这里是我的 GitHub Repo 的链接！https://github.com/Abdisalan/blog-code-examples/tree/master/http-video-stream

第 1 部分：设置 npm 项目

您需要安装 NodeJS 并运行：

mkdir http-video-stream
cd http-video-stream
npm init
npm install --save express nodemon

第 2 部分：index.html

我们需要创建一个 HTML5 视频元素，并将源设置为"/video"，即服务器的端点所在的位置。

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>HTTP Video Stream</title>
  </head>
  <body>
    <video id="videoPlayer" width="650" controls muted="muted" autoplay>
      <source src="/video" type="video/mp4" />
    </video>
  </body>
</html>

第 3 部分：index.js

现在让我们设置我们的节点服务器，以便在"/"端点上为我们的 index.html 页面提供服务。

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

app.get("/", function (req, res) {
  res.sendFile(__dirname + "/index.html");
});

app.listen(8000, function () {
  console.log("Listening on port 8000!");
});

第 4 部分：package.json——运行我们的服务器

在你的文件中添加一个start脚本，package.json这样我们就可以使用npm start命令运行服务器了。
你的文件中还有更多内容package.json，但我只想让你复制这个启动脚本。它会在你每次保存文件时nodemon运行index.js并重启服务器，index.js这样你就不需要自己重启服务器了！

{
  "scripts": {
    "start": "nodemon index.js"
  }
}

现在你应该可以运行

npm start

并看到我们的应用程序在端口 8000 上运行。打开浏览器并查看http://localhost:8000它是否有效。

第五部分：index.js（再次）

快完成了！
在这个最后阶段，你需要找到一个 mp4 视频文件，或者下载我在 GitHub 项目链接中提供的那个。https
://github.com/Abdisalan/blog-code-examples/tree/master/http-video-stream
这是"/video"我们服务器的端点。

// in the imports above
const fs = require("fs");

app.get("/video", function (req, res) {
  // Ensure there is a range given for the video
  const range = req.headers.range;
  if (!range) {
    res.status(400).send("Requires Range header");
  }

  // get video stats (about 61MB)
  const videoPath = "bigbuck.mp4";
  const videoSize = fs.statSync("bigbuck.mp4").size;

  // Parse Range
  // Example: "bytes=32324-"
  const CHUNK_SIZE = 10 ** 6; // 1MB
  const start = Number(range.replace(/\D/g, ""));
  const end = Math.min(start + CHUNK_SIZE, videoSize - 1);

  // Create headers
  const contentLength = end - start + 1;
  const headers = {
    "Content-Range": `bytes ${start}-${end}/${videoSize}`,
    "Accept-Ranges": "bytes",
    "Content-Length": contentLength,
    "Content-Type": "video/mp4",
  };

  // HTTP Status 206 for Partial Content
  res.writeHead(206, headers);

  // create video read stream for this particular chunk
  const videoStream = fs.createReadStream(videoPath, { start, end });

  // Stream the video chunk to the client
  videoStream.pipe(res);
});

HTML5 视频元素向端点发出请求/video，服务器返回视频的文件流以及标头以告知我们发送的是视频的哪一部分。

对于块大小，我决定使用 1MB，但您可以将其更改为任何您喜欢的大小！这样做的另一个好处是，我们不需要编写代码来持续传输视频数据，浏览器会优雅地为我们处理。

要深入了解其工作原理，请观看我关于此主题的 YouTube 视频。

现在，您已经拥有一个使用 NodeJS 运行的视频流服务器！

祝您直播愉快！✌

文章来源：https://dev.to/abdisalan_js/how-to-code-a-video-streaming-server-using-nodejs-2o0