使用 Webtorrent 流式传输 MP4 的问题答案

【问题标题】：Issues Streaming MP4s with Webtorrent使用 Webtorrent 流式传输 MP4 的问题
【发布时间】：2016-07-22 16:12:43
【问题描述】：

我正在运行一个节点服务器，我想从使用 WebTorrent(https://webtorrent.io/docs) 的磁力链接流式传输视频。当我运行它时，即使我已将变量设置为 .mp4 文件，似乎也没有正确引用该文件。

为了清楚起见，我在此示例中添加了给定的 torrentID（磁力链接），以消除我在 express 和 URL 方面可能遇到的任何问题。此磁力链接可下载 MP4 格式的音乐视频。

视频播放器正在显示，但没有播放视频。我假设这意味着我没有尝试访问正确的文件。如果您需要了解更多关于 WebTorrent 的信息来帮助我，您可以在 https://webtorrent.io/docs 阅读有关它的信息

var fs = require("fs"),
    http = require("http"),
    url = require("url"),
    path = require("path"),
    request = require('request'),
    host = '127.0.0.1',
    port = 3000,
    express = require("express"),
    app = express(),
    server = http.createServer(app),
    WebTorrent = require('webtorrent'),
    client = new WebTorrent();

app.get('/streamvid/:magLink', function(req, res){
    //var torrentID = req.params.magLink;
    var torrentID = 'magnet:?xt=urn:btih:84123E8B4E850A796403736E0CF02E409F0EF00B';


    client.add(torrentID, function (torrent) {  
        var file = torrent.files[0]
        file.name = 'movie.mp4';
        if (req.url != "/movie.mp4") {
            res.writeHead(200, { "Content-Type": "text/html" });
            res.end('<video width="1024" height="768" controls> <source src="movie.mp4" type="video/mp4"> <source src="movie.ogg" type="video/ogg"> Your browser does not support the video tag. </video>');
        } else {
            var range = req.headers.range;
            var positions = range.replace(/bytes=/, "").split("-");
            var start = parseInt(positions[0], 10);

        fs.stat(file, function(err, stats) {
            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);
            });
        });
     }
     })
});

var server = http.createServer(app);

var server = app.listen(port, host);

server.on('error', function(err) {
    console.log('error:' + err);
});

server.on('listening', function(){
    console.log('Server is Up and Running');
});

【问题讨论】：

控制台说什么？代码在很多方面都是错误的。 app.get('/streamvid/:magLink... 不匹配 streamvid/movie.mp4 你应该使用 WebTorrent 的 torrent.createServer api
您的响应存在一些问题： 1. createServer API 不会流式传输文件，而是使其可供下载。就我而言，我正在尝试流式传输视频。 2. 你不需要去 streamvid/movie.mp4 因为当你去 /streamvid/:magLink 时，它的响应是带有 MP4 文件的视频标签。我不只是查看托管文件的页面。 3.没有控制台错误
1.确实如此，http 服务器将提供带有 GET 和 GET 范围支持的文件。 2. 你这样做了，因为
您有指向实际页面和/或客户端代码的链接吗？此外，流式传输 MP4 经常会出现问题……您是否使用 faststart 对视频进行了编码？

标签： node.js video-streaming mp4 webtorrent

【解决方案1】：

您需要通过读取文件数据来传输文件数据。

var readFile = fs.createReadStream("path/to/movie.mp4");
readFile.pipe(res);

或者将文件放在公共路径中。 app.use(express.static('public')) 并将movie.mp4 放在public/ 文件夹中。然后在你的 src 中，做一个完整的 url 链接。 http://localhost:3000/movie.mp4.

【讨论】：