CODEWITHSUNDEEP
javascriptnode.jsvideostream
Tijl Declerck
Tijl Declerck

Reputation: 105

Display video stream chunks on page (node.js)

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>

Upvotes: 1

Views: 2625

Answers (1)

guest271314
guest271314

Reputation: 1

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?.

Upvotes: 2

Related Questions