javascript – Node.js / Express视频流(HTTP 206部分内容)

前端之家收集整理的这篇文章主要介绍了javascript – Node.js / Express视频流(HTTP 206部分内容)前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
我在数据库(MarkLogic)中有一个二进制文件(mp4视频文件).我正在使用数据库的Node.js API以块的形式传输文档.设置如下所示:

html文件

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

然后在Express中我设置了一个处理/ 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文件有两个请求:

1

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

第2

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,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

解决方法

on(‘data’)回调可以始终对isFirstChunk变量进行闭包,该变量初始化为true,并且如果isFirstChunk为true,则测试将发出标头并将isFirstChunk设置为false.

如果可能的话,最好管道流. npm可能会提供一个流库(甚至可能是to2()?),它在第一个数据到达时有一个事件.

从长远来看,您可以合理地在流的开头为事件提交RFE.

希望有所帮助,

原文链接:https://www.f2er.com/js/240791.html

猜你在找的JavaScript相关文章