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

2025-06-08

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

你想创建一个视频流应用，并将视频存储在 MongoDB 中吗？如果你只是想了解流式传输部分，我之前用纯 NodeJS 写了另一篇（还算成功）的文章。

但！

如果您还想知道如何将视频存储在 MongoDB 中并通过 NodeJS 从那里进行流式传输，那么这篇文章适合您！

最终结果

一只鸟的抛光视频

就像纯 NodeJS 解决方案一样，我们的最终结果将是一个从服务器流式传输的 HTML5 视频。看看时间轴上的灰色条！那是缓冲！😃

如果您想 git clone 该项目，这里是 repo 的链接https://github.com/Abdisalan/blog-code-examples/tree/master/mongo-http-video

简易模式

如果您已安装 Docker，则可以使用我的 Docker Compose 文件来运行项目，而无需安装任何软件包。您只需运行这些 Docker Compose 命令并将文件bigbuck.mp4从http-video-stream文件夹复制到mongo-http-video文件夹即可。



docker-compose up -d
# When you're done with it, you can tear it down using
docker-compose down -v
Enter fullscreen mode Exit fullscreen mode

该项目将在localhost:8000

本文剩余部分将指导您如何从头开始构建它。尽情享受吧！

第一部分：MongoDB

MongoDB 不支持 Windows 的 Linux 子系统 (WSL)，因此如果您想使用 WSL，最好使用 docker。否则，这在 Windows 上应该可以正常工作。

安装 MongoDB，如果你使用的是 Windows，则以下命令（exe 文件）应该位于C:\Program Files\MongoDB\Server\4.4\bin

在该文件夹中打开一个终端或将其添加到您的 PATH 并启动该mongod进程。



mongod
Enter fullscreen mode Exit fullscreen mode

第 2 部分：设置 Node 项目

在另一个终端中，这些命令将创建一个项目文件夹并启动您的节点项目。



mkdir mongo-video-stream
cd mongo-video-stream
npm init
npm install --save express nodemon mongodb
Enter fullscreen mode Exit fullscreen mode

第 3 部分：index.html

我们需要创建一个带有 HTML5 视频元素的页面，并将源设置为"/mongo-video"我们的服务器从 mongoDB 流式传输视频的位置。



<!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 From MongoDB</title>
  </head>
  <body>
    <video id="videoPlayer" width="650" controls muted="muted" autoplay>
      <source src="/mongo-video" type="video/mp4" />
    </video>
  </body>
</html>
Enter fullscreen mode Exit fullscreen mode

第四部分：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!");
});
Enter fullscreen mode Exit fullscreen mode

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

添加一个start脚本，以便我们可以使用命令package.json运行我们的服务器。npm start



{
  "scripts": {
    "start": "nodemon index.js"
  }
}
Enter fullscreen mode Exit fullscreen mode

现在你应该可以运行了npm start。打开浏览器，然后访问http://localhost:8000看看是否成功！

缺少视频

中途办理登机手续

你还好吗？喝点水，调整一下姿势，放松一下肩膀😁

您即将进入精彩部分！

第六部分：index.js（上传）

我们添加了一个端点，用于将本地视频上传到 MongoDB。我使用的视频文件bigbuck.mp4可以在我的 GitHub 上找到：https://github.com/Abdisalan/blog-code-examples/tree/master/http-video-stream

但是您可以使用自己的视频文件！



const express = require("express");
const app = express();
const fs = require("fs");
const mongodb = require('mongodb');
const url = 'mongodb://localhost:27017';

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

// Sorry about this monstrosity -- just for demo purposes
app.get('/init-video', function (req, res) {
  mongodb.MongoClient.connect(url, function (error, client) {
    if (error) {
      res.json(error);
      return;
    }
    // connect to the videos database
    const db = client.db('videos');

    // Create GridFS bucket to upload a large file
    const bucket = new mongodb.GridFSBucket(db);

    // create upload stream using GridFS bucket
    const videoUploadStream = bucket.openUploadStream('bigbuck');

    // You can put your file instead of bigbuck.mp4
    const videoReadStream = fs.createReadStream('./bigbuck.mp4');

    // Finally Upload!
    videoReadStream.pipe(videoUploadStream);

    // All done!
    res.status(200).send("Done...");
  });
});

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

保存 index.js 文件后，服​​务器应该会重启（因为我们使用的是 nodemon）。视频准备好后，你可以localhost:8000/init-video在浏览器中访问，它应该已经将本地文件上传到 mongodb 了！

快到了！

如果您想再次检查文件是否已上传，请打开另一个终端并连接到 mongodb。



mongo
Enter fullscreen mode Exit fullscreen mode

然后转到视频数据库并通过 GridFS 统计集合中的文档数量fs.files。



use videos
db.fs.files.count()
Enter fullscreen mode Exit fullscreen mode

计数应该是您访问过的次数，localhost:8000/init-video因为每次加载时它都会上传我们的视频文件/init-video。

第七部分：index.js（流式传输）

最后，我们将添加/mongo-video端点来传输我们的视频！



app.get("/mongo-video", function (req, res) {
  mongodb.MongoClient.connect(url, function (error, client) {
    if (error) {
      res.status(500).json(error);
      return;
    }

    // Check for range headers to find our start time
    const range = req.headers.range;
    if (!range) {
      res.status(400).send("Requires Range header");
    }

    const db = client.db('videos');
    // GridFS Collection
    db.collection('fs.files').findOne({}, (err, video) => {
      if (!video) {
        res.status(404).send("No video uploaded!");
        return;
      }

      // Create response headers
      const videoSize = video.length;
      const start = Number(range.replace(/\D/g, ""));
      const end = 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",
      };

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

      // Get the bucket and download stream from GridFS
      const bucket = new mongodb.GridFSBucket(db);
      const downloadStream = bucket.openDownloadStreamByName('bigbuck', {
        start
      });

      // Finally pipe video to response
      downloadStream.pipe(res);
    });
  });
});
Enter fullscreen mode Exit fullscreen mode

保存文件并localhost:8000再次播放，视频就可以播放了！

结论

有了它，您可以制作自己的基本 YouTube 或 Netflix 应用程序！

想要了解其工作原理的深入逐行解释，请观看我的 YouTube 视频。

这是关于如何实现这一点的基本概述，如果您想要了解有关这些主题（mongodb、流理论）的深入博客文章，请随时在下面发表评论！

祝您直播愉快！✌

免责声明

你可能不应该在生产中使用它，因为它不是最优化的架构😋

鏂囩珷鏉ユ簮锛�https://dev.to/abdisalan_js/how-to-stream-video-from-mongodb-using-nodejs-4ibi
Devto 翻译
PREV
学习 Web3/区块链开发的最佳免费资源
NEXT
在 Vercel Serverless 上部署 FastAPI 应用演示应用程序源代码