简体   繁体   中英

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>

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 ArrayBuffer s representing chunks of one or more media resources which can be rendered at <video> element, see HTML5 audio streaming: precisely measure latency? .

The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM