如何将video数据stream式传输到video元素?
我有一个Node.js过程输出到我的Node.js应用程序的videostream。
在客户端,有一个<video>
标签。 我想从Node.jsstreamvideo标签的src
属性。 我以前的经验告诉我,我们必须使用blob
对象。 但是,我不是百分之百确定如何以及为什么我会使用它。
我想到的另一个可能的解决scheme是在我的服务器上创build某种临时文件,然后将stream写入该文件,然后将该文件作为video的来源。 但是,这似乎并不直观。 那么,我想知道,如果有这样一个问题的更确定的解决scheme。
也许你可能想看看下面的选项:
-
BinaryJS 。 它是基于websockets的双向实时二进制数据传输工具。
-
JSMpegstream服务器(在捕获的情况下)从Phoboslab家伙。 您只需启动
ffmpeg
并将其指向nodejs脚本运行的域和端口即可。 更多信息你可以在这里find。 -
直接pipe道stream。 好的答案在这里贴出来。 简而言之,您只需指定
Accept-Ranges
,Content-Range
,Content-Length
和Content-Type
标题,然后创build相关的Readstream(带有start
和end
选项)并将其传递给response
对象。
stream式播放通常使用m3u8格式。 videostream/转码是一个资源密集的事情。 如果你有这个select,我build议你使用第三方服务。
我实际上在两周前的一场黑客马拉松赛中尝试了这个。 我结束了几乎没有得到这个flvstream工作,我已经在下面发布。 我的目的是build立一个图书馆来实现这个过程的大部分过程。
正如你所看到的,我已经在服务器上打开了一个新的端口来处理stream向客户端的单独的数据stream。 这反映在客户端的src标签中。
你需要的三件事:
-
这个Linux版本的ffmpeg 。
-
在js边的Flowplayer 。
-
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属性)