2017-10-08 3 views
1

Je suis encore nouveau dans Node.js et j'essaie de comprendre les choses, alors excusez-moi si je semble incohérent. J'ai donc lu quelques notes de débutants sur les streams et je les teste en ce moment. J'ai eu ces épisodes Seinfeld (fichiers .mkv) dans mes fichiers de projet (public/images/videos/Seinfeld.S09E07.720p.WebRip.ReEnc-DeeJayAhmed.mkv) que je voudrais montrer sur une page. Maintenant, le choix facile serait de simplement le mettre dans le 'src' de la balise vidéo dans mon fichier ejs.Afficher les morceaux de flux vidéo sur la page (node.js)

Cependant, je voudrais streamer les parties de la vidéo pour ne pas avoir à attendre que le fichier entier soit prêt à afficher l'épisode. Je pensais pouvoir utiliser .createReadStream pour ça. Cependant, je ne sais pas comment je peux transférer ces petites portions de données vidéo qui sont prêtes dans ma page Web pour les afficher dans mon lecteur vidéo.

index.js côté serveur

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; 

fichier 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> 
+0

Vous devez probablement diriger le flux vers l'utilisateur: par ex. 'myReadStream.pipe (res)' –

+0

Et puis comment puis-je accéder aux morceaux? –

+0

en utilisant ce que la réponse ci-dessous suggère ... –

Répondre

2

Vous pouvez utiliser fetch(), Response.getReader() qui retourne un ReadableStream et MediaSource au client de lire le flux de réponse du serveur et ajouter un ou plusieurs ArrayBuffer s représentant des blocs d'une ou de plusieurs ressources multimédias pouvant être affichées au <video> elem ent, voir HTML5 audio streaming: precisely measure latency?.

+1

Ok, pour l'instant je ne comprends pas ce que tout cela signifie, mais j'ai un point de départ pour la recherche avec les choses que vous avez mentionnées. Merci pour la réponse! –

+1

@TijlDeclerck Voir [Media Source Extensions ™] (https://w3c.github.io/media-source/) – guest271314