使用 Node.js 将视频文件流式传输到 html5 视频播放器,以便视频控件继续工作?

IT技术 javascript html node.js video
2021-02-10 16:44:39

Tl;Dr - 问题:

使用 Node.js 将视频文件流式传输到 html5 视频播放器以便视频控件继续工作的正确方法是什么

认为这与处理标题的方式有关。无论如何,这是背景信息。代码有点长,但是,它非常简单。

使用 Node 将小视频文件流式传输到 HTML5 视频很容易

我学会了如何轻松地将小视频文件流式传输到 HTML5 视频播放器。使用此设置,控件无需我的任何操作即可工作,并且视频流完美无瑕。带有示例视频的完整代码的工作副本在此处,可在 Google Docs 上下载

客户:

<html>
  <title>Welcome</title>
    <body>
      <video controls>
        <source src="movie.mp4" type="video/mp4"/>
        <source src="movie.webm" type="video/webm"/>
        <source src="movie.ogg" type="video/ogg"/>
        <!-- fallback -->
        Your browser does not support the <code>video</code> element.
    </video>
  </body>
</html>

服务器:

// Declare Vars & Read Files

var fs = require('fs'),
    http = require('http'),
    url = require('url'),
    path = require('path');
var movie_webm, movie_mp4, movie_ogg;
// ... [snip] ... (Read index page)
fs.readFile(path.resolve(__dirname,"movie.mp4"), function (err, data) {
    if (err) {
        throw err;
    }
    movie_mp4 = data;
});
// ... [snip] ... (Read two other formats for the video)

// Serve & Stream Video

http.createServer(function (req, res) {
    // ... [snip] ... (Serve client files)
    var total;
    if (reqResource == "/movie.mp4") {
        total = movie_mp4.length;
    }
    // ... [snip] ... handle two other formats for the video
    var range = req.headers.range;
    var positions = range.replace(/bytes=/, "").split("-");
    var start = parseInt(positions[0], 10);
    var end = positions[1] ? parseInt(positions[1], 10) : total - 1;
    var chunksize = (end - start) + 1;
    if (reqResource == "/movie.mp4") {
        res.writeHead(206, {
            "Content-Range": "bytes " + start + "-" + end + "/" + total,
                "Accept-Ranges": "bytes",
                "Content-Length": chunksize,
                "Content-Type": "video/mp4"
        });
        res.end(movie_mp4.slice(start, end + 1), "binary");
    }
    // ... [snip] ... handle two other formats for the video
}).listen(8888);

但是这种方法仅限于小于 1GB 的文件。

流式传输(任何大小)视频文件 fs.createReadStream

通过使用fs.createReadStream(),服务器可以读取流中的文件,而不是一次将其全部读入内存。这听起来是正确的做事方式,而且语法非常简单:

服务器片段:

movieStream = fs.createReadStream(pathToFile);
movieStream.on('open', function () {
    res.writeHead(206, {
        "Content-Range": "bytes " + start + "-" + end + "/" + total,
            "Accept-Ranges": "bytes",
            "Content-Length": chunksize,
            "Content-Type": "video/mp4"
    });
    // This just pipes the read stream to the response object (which goes 
    //to the client)
    movieStream.pipe(res);
});

movieStream.on('error', function (err) {
    res.end(err);
});

这流视频就好了!但视频控件不再起作用。

3个回答

Accept Ranges报头(在该位writeHead())所需的HTML5视频控制来工作。

我认为不是盲目地发送完整文件,您应该首先检查Accept RangesREQUEST 中标头,然后读入并发送该位。fs.createReadStream支持start,并end为此选择。

所以我尝试了一个例子并且它有效。代码并不漂亮,但很容易理解。首先我们处理范围标题以获得开始/结束位置。然后我们使用fs.stat获取文件的大小,而无需将整个文件读入内存。最后,用于fs.createReadStream将请求的部分发送给客户端。

var fs = require("fs"),
    http = require("http"),
    url = require("url"),
    path = require("path");

http.createServer(function (req, res) {
  if (req.url != "/movie.mp4") {
    res.writeHead(200, { "Content-Type": "text/html" });
    res.end('<video src="http://localhost:8888/movie.mp4" controls></video>');
  } else {
    var file = path.resolve(__dirname,"movie.mp4");
    fs.stat(file, function(err, stats) {
      if (err) {
        if (err.code === 'ENOENT') {
          // 404 Error if file not found
          return res.sendStatus(404);
        }
      res.end(err);
      }
      var range = req.headers.range;
      if (!range) {
       // 416 Wrong range
       return res.sendStatus(416);
      }
      var positions = range.replace(/bytes=/, "").split("-");
      var start = parseInt(positions[0], 10);
      var total = stats.size;
      var end = positions[1] ? parseInt(positions[1], 10) : total - 1;
      var chunksize = (end - start) + 1;

      res.writeHead(206, {
        "Content-Range": "bytes " + start + "-" + end + "/" + total,
        "Accept-Ranges": "bytes",
        "Content-Length": chunksize,
        "Content-Type": "video/mp4"
      });

      var stream = fs.createReadStream(file, { start: start, end: end })
        .on("open", function() {
          stream.pipe(res);
        }).on("error", function(err) {
          res.end(err);
        });
    });
  }
}).listen(8888);
@saraf:这取决于用于加密的算法。它适用于流还是仅适用于整个文件加密?是否有可能您只是将视频解密到临时位置并照常提供?一般来说,我有可能,但它可能会变得棘手。这里没有通用的解决方案。
2021-03-14 16:44:39
嗨,通格,感谢您的回复!该用例是一个基于树莓派的设备,它将充当教育内容开发人员的媒体分发平台。我们可以自由选择加密算法,密钥将在固件中 - 但内存限制为 1GB RAM,内容大小约为 200GB(将在可移动媒体上 - 连接 USB。)甚至像 Clear Key 算法这样的东西EME 没问题——除了铬在 ARM 上没有内置 EME 的问题。只是可移动媒体本身不足以实现播放/复制。
2021-03-14 16:44:39
我们可以使用这种策略只发送电影的一部分,即第 5 秒和第 7 秒之间吗?有没有办法通过 ffmpeg 之类的库找到该间隔对应于什么字节间隔?谢谢。
2021-03-16 16:44:39
别介意我的问题。我找到了神奇的词来找到如何实现我的要求:pseudo-streaming
2021-03-30 16:44:39
如果出于某种原因,movie.mp4 是加密格式并且我们需要在流式传输到浏览器之前对其进行解密,那么如何使其工作?
2021-03-31 16:44:39

这个问题的公认答案很棒,应该仍然是公认的答案。但是,我遇到了读取流并不总是结束/关闭的代码问题。该解决方案的一部分是发送autoClose: true随着start:start, end:end第二createReadStreamARG。

解决方案的另一部分是限制chunksize响应中发送的最大值另一个答案end是这样设置的

var end = positions[1] ? parseInt(positions[1], 10) : total - 1;

...它的作用是从请求的起始位置到最后一个字节发送文件的其余部分,无论可能有多少字节。然而,客户端浏览器可以选择只读取该流的一部分,如果它不需要所有字节,也会这样做。这将导致读取的流被阻止,直到浏览器决定是时候获取更多数据(例如,诸如搜索/清理之类的用户操作,或仅通过播放流)。

我需要关闭此流,因为我在<video>允许用户删除视频文件的页面上显示该元素。但是,在客户端(或服务器)关闭连接之前,文件不会从文件系统中删除,因为这是流结束/关闭的唯一方式。

我的解决方案只是设置一个maxChunk配置变量,将其设置为 1MB,并且永远不要将一次超过 1MB 的读取流传输到响应。

// same code as accepted answer
var end = positions[1] ? parseInt(positions[1], 10) : total - 1;
var chunksize = (end - start) + 1;

// poor hack to send smaller chunks to the browser
var maxChunk = 1024 * 1024; // 1MB at a time
if (chunksize > maxChunk) {
  end = start + maxChunk - 1;
  chunksize = (end - start) + 1;
}

这具有确保读取流在每次请求后结束/关闭的效果,并且不会被浏览器保持活动状态。

我也写了一个单独的StackOverflow问题答案涉及这个问题。

这对 Chrome 很有用,但在 Safari 中似乎不起作用。在 safari 中,它似乎只有在可以请求整个范围时才有效。你对 Safari 做了什么不同的事情吗?
2021-03-24 16:44:39
进一步挖掘:Safari 在 2 字节响应中看到“/${total}”,然后说......“嘿,你把整个文件发给我怎么样?”。然后当它被告知,“不,你只得到了第一个 1Mb!”,Safari 感到不安“试图引导资源时发生错误”。
2021-04-02 16:44:39

首先app.js在要发布的目录中创建文件。

var http = require('http');
var fs = require('fs');
var mime = require('mime');
http.createServer(function(req,res){
    if (req.url != '/app.js') {
    var url = __dirname + req.url;
        fs.stat(url,function(err,stat){
            if (err) {
            res.writeHead(404,{'Content-Type':'text/html'});
            res.end('Your requested URI('+req.url+') wasn\'t found on our server');
            } else {
            var type = mime.getType(url);
            var fileSize = stat.size;
            var range = req.headers.range;
                if (range) {
                    var parts = range.replace(/bytes=/, "").split("-");
                var start = parseInt(parts[0], 10);
                    var end = parts[1] ? parseInt(parts[1], 10) : fileSize-1;
                    var chunksize = (end-start)+1;
                    var file = fs.createReadStream(url, {start, end});
                    var head = {
                'Content-Range': `bytes ${start}-${end}/${fileSize}`,
                'Accept-Ranges': 'bytes',
                'Content-Length': chunksize,
                'Content-Type': type
                }
                    res.writeHead(206, head);
                    file.pipe(res);
                    } else {    
                    var head = {
                'Content-Length': fileSize,
                'Content-Type': type
                    }
                res.writeHead(200, head);
                fs.createReadStream(url).pipe(res);
                    }
            }
        });
    } else {
    res.writeHead(403,{'Content-Type':'text/html'});
    res.end('Sorry, access to that file is Forbidden');
    }
}).listen(8080);

只需运行node app.js,您的服务器将运行在端口 8080 上。除了视频之外,它还可以流式传输各种文件。