Display video stream chunks on page (node.js)

Question

I'm still new in Node.js and trying to figure out things so excuse me if I sound incoherent.

So I've read some beginner notes on streams and I'm testing it out at the moment. I got these Seinfeld episodes (.mkv files) in my project files (public/images/videos/Seinfeld.S09E07.720p.WebRip.ReEnc-DeeJayAhmed.mkv) that I would like to show on a page. Now, the easy choice would be to just put it in the 'src' of the video tag in my ejs file.

However, I would like to stream the video parts so that it doesn't have to wait for the whole file to be ready to display the episode. I thought I could use .createReadStream for this. However, I don't know how I can transfer those little chunks of video data that are ready into my webpage to display them in my video player.

index.js server-side

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 file

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

You probably need to pipe the stream to the user: e.g. `myReadStream.pipe(res)` — Jonas Wilms, Oct 08 '17 at 17:57

score 2 · Accepted Answer · answered Oct 08 '17 at 17:49

2

You can use fetch(), Response.getReader() which returns a ReadableStream and MediaSource at client to read the stream of response from server and append one or more ArrayBuffers representing chunks of one or more media resources which can be rendered at <video> element, see HTML5 audio streaming: precisely measure latency?.

answered Oct 08 '17 at 17:49

guest271314

1
15
104
177

1

Ok, for now I don't understand what all that means, but I have a starting point for research with the things you mentioned. Thanks for the response! – Tijl Declerck Oct 08 '17 at 18:09
1

@TijlDeclerck See [Media Source Extensions™](https://w3c.github.io/media-source/) – guest271314 Oct 08 '17 at 18:31

Display video stream chunks on page (node.js)

1 Answers1