javascript - 如何动态加载大型视频文件并将其流式传输到不发送范围 header 的 IE？

Question

前一段时间我在一些流媒体视频教程中发现了这个功能，这样整个文件就不需要加载到 RAM 中来提供文件(这样你就可以提供大视频文件而不会因为超过Node.js 的内存上限 - 电影长度的视频文件不难超过，增加内存分配只是一个创可贴解决方案。

var fs = require("fs"), 
    http = require("http"), 
    url = require("url"), 
    path = require("path");
var dirPath = process.cwd();
var videoReqHandler = function(req, res, pathname) {
    var file = dirPath + "/client" + pathname;
    var range = req.headers.range;
    var positions = range.replace(/bytes=/, "").split("-");
    var start = parseInt(positions[0], 10);
    fs.stat(file, function(err, stats) {
        if (err) {
            throw err;
        } else {
            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);
            });
        }
    });
};
module.exports.handle = videoReqHandler;

它在 Chrome 和 FF 中运行良好，但是，当 Internet Explorer 或 Edge(如果您愿意)(新名称，同样可悲的功能支持)请求 mp4 时，它会使服务器崩溃。

var positions = range.replace(/bytes=/, "").split("-");
                     ^
TypeError: Cannot read property 'replace' of undefined

我怀疑这是因为 the fact that range headers aren't mandatory, and this function requires them .

我的问题是，如果未发送 range header ，我该如何修改此函数以避免崩溃？我不太了解标题或视频流，而且我对分块读取文件的理解很不确定，所以我真的可以在这个涉及所有三个的函数上使用一些帮助。

---

我根据评论尝试过的内容

到目前为止，基于the answer @AndréDion linked :

Figured it out. IE11 does support pseudo streaming but it wants the "Accept-Ranges: bytes" header before it will bother requesting a range, so the server needs to respond with that regardless of whether it is actually sending a byte range. I had to modify my vid-streamer module to do that.

我尝试将处理程序代码包装在:

if (req.headers.range) {
    console.log('Video request sent WITH range header!');
    // ... handler code ...
} else {
    console.log('Video request sent without range header!');
    res.writeHead(206, {
        "Accept-Ranges": "bytes"
    });
    res.end();
}

但似乎什么也没有发生——服务器停止崩溃，并继续在其他浏览器上工作，但 IE 似乎没有加载视频。我期待 IE 等待该响应然后发送另一个请求，这次包括一个范围 header ，但这似乎没有发生。

在向 IE 发送 accept-ranges header 时，也许我需要发送不同于 206 的响应代码？我不知道它会是什么，但是当我用 accept-rages header 响应时，IE 似乎重复了两次请求(但没有包含范围 header ，这正是我需要的)。

就目前而言，如果我使用如上所示的条件运行服务器，然后尝试在 IE 中加载一次视频，然后尝试在 Chrome 中加载它，我会得到这些日志:

Video request sent without range header!
Video request sent without range header!
Video request sent without range header!
Video request sent WITH range header!

IE 发送三个没有范围 header 的请求，Chrome 当然总是按预期发送范围 header ，发送一个请求并成功加载视频。我只是不确定从这里去哪里。

Answer 1

看起来 Internet Explorer 期望的不仅仅是 Accept-Ranges header 。 This MSDN forum post表示您还需要回复 If-Range header返回 ETag .像这样:

console.log('Video request sent without range header!');
res.writeHead(206, {
    "Accept-Ranges": "bytes",
    "If-Range": "\"<ETag#>\""
});

很遗憾，自那以后我现在无法进行任何测试，所以让我知道进展如何，当我有机会时，我会进一步调查并编辑我的帖子。

---

更新:

我开始进一步调查，发现 If-Range 不是必需的。事实上，似乎这个请求处理程序对于 Internet Explorer 来说还不够健壮。这是我的有效代码:

var videoReqHandler = function(req, res, pathname) {
    var file = path.resolve(__dirname, pathname);

    fs.stat(file, function(err, stats) {
        if (err) {
            if (err.code === 'ENOENT'){
                //404 Error if file not found
                res.writeHead(404, {
                    "Accept-Ranges" : "bytes",
                    "Content-Range" : "bytes " + start + "-" + end + "/" + total,
                    "Content-Length" : chunksize,
                    "Content-Type" : "video/mp4"
                });
            }
            res.end(err);
        }

        var start;
        var end;
        var chunksize;
        var total = stats.size;

        var range = req.headers.range;
        if (range) {

            var positions = range.replace(/bytes=/, "").split("-");
            end = positions[1] ? parseInt(positions[1], 10) : total - 1;
            start = parseInt(positions[0], 10);
        }else{
            start = 0;
            end = total - 1;
        }


        if (start > end || start < 0 || end > total - 1){
            //error 416 is "Range Not Satisfiable"
            res.writeHead(416, {
                "Accept-Ranges" : "bytes",
                "Content-Range" : "*/" + stats.size,
                "Content-Type" : "video/mp4"
            });
            res.end();
            return;
        }

        if (start == 0 && end == total -1){
            res.writeHead(200, {
                "Accept-Ranges" : "bytes",
                "Content-Range" : "bytes " + start + "-" + end + "/" + total,
                "Content-Length" : total,
                "Content-Type" : "video/mp4"
            });
        }else{
            res.writeHead(206, {
                "Accept-Ranges" : "bytes",
                "Content-Range" : "bytes " + start + "-" + end + "/" + total,
                "Content-Length" : end - start + 1,
                "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);
        });
    });
};

这增加了一些缺失的错误检查，例如确保请求的范围是有效范围，如果请求没有范围 header ，则返回整个文件和代码 200。不过，要使其成为生产服务器的坚如磐石，还应该做更多的事情:

• 更多研究表明 If-Range header 的意图是为了处理有人请求文件的一部分，它在服务器上发生更改，然后他们请求文件的另一部分的情况。 If-Range 允许检测到这种情况，并且服务器可以发送整个新文件，而不是破坏所有内容并将可怜的请求者与这个新文件的一部分混淆。
• 此代码不检查以确保请求的范围以字节为单位。如果请求指定任何其他度量单位，此代码可能会使服务器崩溃。应该检查一下。
• 范围 header 允许一次指定多个范围。请求多个范围时的响应由 header 和由可指定的拆分字符串分隔的请求数据组成。 More info on MDN .这一点是有争议的，你可以说你可以只处理生产服务器上的第一部分，只要有更多的东西不会崩溃，但我认为它是规范的一部分。要完全符合规范，您需要实现它，而我厌倦了运行不完全符合规范的服务。

最后一点:这段代码可以在 IE 和 Edge 中运行，但我确实注意到，出于某种原因，他们最终请求了两次完整文件!这些请求与我的设置类似:

1. 使用“Range bytes=0-”请求部分文件，即完整文件
2. 使用普通 Range 语句请求文件的一小部分
3. 请求的完整文件没有 Range header

最后一点，在我添加以完整文件和 200 状态响应的能力之前，当没有 Range header 时，IE 会显示视频的黑框，上面印有“解码错误”。如果有人能告诉我原因，那就太棒了!