Node.js / Express 视频流（HTTP 206 部分内容）

Posted 2023-02-16

【中文标题】Node.js / Express 视频流（HTTP 206 部分内容）

【英文标题】：Node.js / Express video streaming (HTTP 206 Partial Content)

【发布时间】：2016-09-17 06:41:16

【问题描述】：

我在数据库 (MarkLogic) 中有一个二进制文档（mp4 视频文件）。我正在使用数据库的 Node.js API 以块的形式流式传输文档。设置如下所示：

html 文件

<video controls="controls" >
  <source src="/video/myvideo.mp4" type="video/mp4">
</video>

然后我设置了一个处理 /video/:param 路由的路由（在数据库中，视频具有唯一标识符，即字符串'/video/myvideo.mp4'）

node.js

// I'm only showing the relevant things in here

const serveVideo = (req, res) => 
  var stream = db.documents.read('/gopro/malta.mp4').stream('chunked');

  var chunks = [];
  var chunkBytes = 0;
  var start = 0;
  stream.on('data', (chunk) => 
    var headers;
    var range = req.headers.range;
    var total = 214335483; //total length of vid in bytes

    if (range) 
      var chunkSize = chunk.length;
      // (start === 0) ? start = 0 : start += chunkBytes;
      if (chunkBytes === 0) 
        start = 0
       else 
        start = chunkBytes + 1
      
      chunkBytes += chunkSize;

      headers = 
        'Content-Range': 'bytes ' + start + '-' + chunkBytes + '/' + total,
        'Accept-Ranges': 'bytes',
        'Content-Length': chunkSize,
        'Content-Type': 'video/mp4'
      ;
      res.writeHead(206, headers);
      chunks.push(chunk);
    
  );
  stream.on('end', () => 
    var allChunks = Buffer.concat(chunks);
    res.end(allChunks);
  );
);


router.route('/video/:uri').get(serveVideo);

当然，上面的操作会失败，并显示“错误：发送后无法设置标头。”这是公平公正的。但我无法理解这一点 - .stream('chunked') 调用强制数据库以块的形式检索文档，我确实看到这些块很好，但是如何为浏览器返回 206？我不能在 .on('data') 中执行此操作，因为正在流式传输数据，因此标头将被多次发送。我猜我使用的数据库并不相关——我想了解这个概念，或者至少看看我做错了什么。

感谢任何帮助。我看到的所有使用 Node.js 流式视频的示例和其他讨论都是从磁盘读取视频文件。

更新

更改代码现在允许 FF 播放视频但不能播放 Chrome：

let stream = db.documents.read(uris:'/gopro/malta.mp4').stream('chunked');
stream.pipe(res);

Chrome 的控制台中没有错误。以下是标头详细信息 - 请注意，对 mp4 文件有两个请求：

第一个

Response Headers
Connection:keep-alive
Date:Sat, 21 May 2016 17:05:30 GMT
Transfer-Encoding:chunked
X-Powered-By:Express

Request Headers
view source
Accept:*/*
Accept-Encoding:identity;q=1, *;q=0
Accept-Language:en-US,en;q=0.8,hu;q=0.6,ro;q=0.4,it;q=0.2
Cache-Control:no-cache
Connection:keep-alive
Cookie:__distillery=v20150227_a8e22306-65b3-4c2e-9a8a-159e308156ad; __smToken=7nYU8NYQY15mPowjjCZsS5D3
DNT:1
Host:localhost:8080
Pragma:no-cache
Range:bytes=0-
Referer:http://localhost:8080/
User-Agent:Mozilla/5.0 (Macintosh; Intel Mac OS X 10_11_4) AppleWebKit/537.36 (Khtml, like Gecko) Chrome/50.0.2661.102 Safari/537.36

第二次

Response Headers
Connection:keep-alive
Date:Sat, 21 May 2016 17:05:31 GMT
Transfer-Encoding:chunked
X-Powered-By:Express

Request Headers
view source
Accept:*/*
Accept-Encoding:identity;q=1, *;q=0
Accept-Language:en-US,en;q=0.8,hu;q=0.6,ro;q=0.4,it;q=0.2
Cache-Control:no-cache
Connection:keep-alive
Cookie:__distillery=v20150227_a8e22306-65b3-4c2e-9a8a-159e308156ad; __smToken=7nYU8NYQY15mPowjjCZsS5D3
DNT:1
Host:localhost:8080
Pragma:no-cache
Range:bytes=28-
Referer:http://localhost:8080/
User-Agent:Mozilla/5.0 (Macintosh; Intel Mac OS X 10_11_4) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/50.0.2661.102 Safari/537.36

【问题讨论】：

您是否证明您的上述代码可以通过从磁盘读取来工作？我建议将其作为故障排除的第一步。一旦你打破常规代码是合理的，然后添加数据库步骤。

好问题！我会说你不应该调用 writeHead，但你需要深入研究 express 来直接写 header。您还可以查看此code，我知道它可以流式传输具有 206 个响应的视频，它在 peerflix 中使用。另见gist.github.com/paolorossi/1993068

你很可能不需要所有的块的东西。手动设置标题：res.status(206);。然后只需通过管道发送响应：let stream = db.yourChunkStuff(); stream.pipe(res);。在手机上，所以无法测试，所以现在只能将其放在评论中。

还有一个旁注：你使用了 const 和箭头，然后使用了很多 vars 而不是 let，这在 Es2015 代码库中很常见，我想知道为什么？

@Zlatko - 谢谢。所以以下内容：let stream = db.documents.read(uris:'/gopro/malta.mp4').stream('chunked'); stream.pipe(res); 适用于 FF，但不适用于 Chrome/Safari。如果我也添加res.status(206)，它在这两种浏览器中都不起作用。

【参考方案1】：

on('data') 回调始终可以对初始化为 true 的 isFirstChunk 变量进行闭包，并进行测试，如果 isFirstChunk 为 true，则发出标头并将 isFirstChunk 设置为 false。

如果可能，最好通过管道传输流。 npm 可能会提供一个流库（甚至可能是 through2()？），它在第一个数据到达时有一个事件。

从长远来看，您可以合理地在直播开始时为活动提交 RFE。

希望对您有所帮助，

【参考方案2】：

你很可能不需要所有的大块的东西。手动设置标题：

res.status(206);

然后简单地管道响应：

let stream = db.yourChunkStuff();
stream.pipe(res);

最简单的方法是管道流。