在页面上显示视频流块（node.js）答案

【问题标题】：Display video stream chunks on page (node.js)在页面上显示视频流块（node.js）
【发布时间】：2018-03-19 22:28:11
【问题描述】：

我还是 Node.js 的新手，正在尝试找出问题，如果我听起来语无伦次，请见谅。

所以我已经阅读了一些关于流的初学者笔记，目前我正在对其进行测试。我在我想在页面上显示的项目文件 (public/images/videos/Seinfeld.S09E07.720p.WebRip.ReEnc-DeeJayAhmed.mkv) 中获得了这些 Seinfeld 剧集（.mkv 文件）。现在，最简单的选择是将它放在我的 ejs 文件中视频标签的“src”中。

但是，我想流式传输视频部分，这样它就不必等待整个文件准备好显示剧集。我想我可以为此使用 .createReadStream 。但是，我不知道如何将准备好的视频数据小块传输到我的网页中，以便在我的视频播放器中显示它们。

index.js 服务器端

var express = require('express');
var router = express.Router();
var fs = require('fs');

    /* GET home page. */
router.get('/', function(req, res, next) {
    var myReadStream = fs.createReadStream(__dirname + '/../images/videos/Seinfeld.S09E07.720p.WebRip.ReEnc-DeeJayAhmed.mkv');

    myReadStream.on('data', function (chunk) {
        // no idea what to do from here
    })
    res.render('index', {
        title: 'Express'
        });
});

module.exports = router;

EJS 文件

<!DOCTYPE html>
<html>
  <head>
    <title><%= title %></title>
    <link rel='stylesheet' href='/stylesheets/style.css' />
  </head>
  <body>
    <h1><%= title %></h1>
    <video src="" type="video/mkv" autoplay controls></video>
    <p>Welcome to <%= title %></p>
  </body>
</html>

【问题讨论】：

您可能需要将流通过管道传输给用户：例如myReadStream.pipe(res)
那么我如何访问这些块？
通过使用下面的答案建议...
好的，我研究一下。感谢您的回复！

标签： javascript node.js video stream

【解决方案1】：

您可以使用fetch()、Response.getReader() 在客户端返回ReadableStream 和MediaSource 从服务器读取响应流并附加一个或多个ArrayBuffers 代表一个或多个媒体资源的块可以在<video> 元素处呈现，请参阅HTML5 audio streaming: precisely measure latency?。

【讨论】：

好的，现在我不明白这意味着什么，但我有一个研究你提到的东西的起点。感谢您的回复！
@TijlDeclerck 见Media Source Extensions™