如何将video数据stream式传输到video元素?

我有一个Node.js过程输出到我的Node.js应用程序的videostream。

在客户端,有一个<video>标签。 我想从Node.jsstreamvideo标签的src属性。 我以前的经验告诉我,我们必须使用blob对象。 但是,我不是百分之百确定如何以及为什么我会使用它。

我想到的另一个可能的解决scheme是在我的服务器上创build某种临时文件,然后将stream写入该文件,然后将该文件作为video的来源。 但是,这似乎并不直观。 那么,我想知道,如果有这样一个问题的更确定的解决scheme。

也许你可能想看看下面的选项:

  1. BinaryJS 。 它是基于websockets的双向实时二进制数据传输工具。

  2. JSMpegstream服务器(在捕获的情况下)从Phoboslab家伙。 您只需启动ffmpeg并将其指向nodejs脚本运行的域和端口即可。 更多信息你可以在这里find。

  3. 直接pipe道stream。 好的答案在这里贴出来。 简而言之,您只需指定Accept-RangesContent-RangeContent-LengthContent-Type标题,然后创build相关的Readstream(带有startend选项)并将其传递给response对象。

stream式播放通常使用m3u8格式。 videostream/转码是一个资源密集的事情。 如果你有这个select,我build议你使用第三方服务。

我实际上在两周前的一场黑客马拉松赛中尝试了这个。 我结束了几乎没有得到这个flvstream工作,我已经在下面发布。 我的目的是build立一个图书馆来实现这个过程的大部分过程。

正如你所看到的,我已经在服务器上打开了一个新的端口来处理stream向客户端的单独的数据stream。 这反映在客户端的src标签中。

你需要的三件事:

  1. 这个Linux版本的ffmpeg 。

  2. 在js边的Flowplayer 。

  3. npm fluent-ffmpeg

    // StreamServer.js

     var express = require('express'), app = express(), ffmpeg = require('fluent-ffmpeg'); module.exports = function () { app.stream(req, res) { res.contentType('flv'); // make sure you set the correct path to your video file storage var pathToMovie = '/path/to/storage/' + req.params.filename; var proc = ffmpeg(pathToMovie) // use the 'flashvideo' preset (located in /lib/presets/flashvideo.js) .preset('flashvideo') // setup event handlers .on('end', function () { console.log('file has been converted succesfully'); }) .on('error', function (err) { console.log('an error happened: ' + err.message); }) // save to stream .pipe(res, { end: true }); }; } 

    //routes.js

     'use strict'; var stream = require('../controllers/streaming.server.controller'), streamServer = require('../controllers/StreamServer.js'), express = require('express'); 

    //streaming.server.controller.js

     module.exports = function (app) { app.get('/api/stream', function (req, res) { streamServer.stream(req, res); }); }; var path = require('path'), express = require('express'), app = express(), routes = require('../routes/routes.js')(app), ffmpeg = require('fluent-ffmpeg'); app.listen(4000); 

编辑:客户端部分:

https://github.com/fluent-ffmpeg/node-fluent-ffmpeg/tree/master/examples/flowplayer

 <html> <head> <meta http-equiv="content-type" content="text/html; charset=UTF-8"> <script type="text/javascript" src="/flowplayer.min.js"></script> <title>node-fluent-ffmpeg</title> </head> <body> <!-- this A tag is where your Flowplayer will be placed. it can be anywhere --> <a href="http://localhost:4000/api/stream" style="display:block;width:520px;height:330px" id="player"> </a> <!-- this will install flowplayer inside previous A- tag. --> <script> flowplayer("player", "/flowplayer.swf"); </script> </body> </html> 

(只需更改href属性)