Javascript 如何将视频数据流到视频元素？_Javascript_Node.js_Blob

Javascript 如何将视频数据流到视频元素？

javascript node.js

Javascript 如何将视频数据流到视频元素？,javascript,node.js,blob,Javascript,Node.js,Blob,我有一个Node.js进程，它将视频流输出到我的Node.js应用程序中在客户端，有一个标记。我想将视频从Node.js流式传输到视频标签的src属性中。我以前的经验告诉我，我们必须为此使用blob对象。然而，我不能百分之百确定我将如何使用它以及为什么使用它我正在考虑的另一个可能的解决方案是在我的服务器上创建某种临时文件，然后将流写入该文件，然后将该文件用作视频源。然而，这似乎并不直观。我想知道，对于这样的问题，是否有一个更成熟的解决方案。格式通常用于流媒体。视频流/转码是一项资源密集型工

我有一个Node.js进程，它将视频流输出到我的Node.js应用程序中

在客户端，有一个

标记。我想将视频从Node.js流式传输到视频标签的

src

属性中。我以前的经验告诉我，我们必须为此使用

blob

对象。然而，我不能百分之百确定我将如何使用它以及为什么使用它

我正在考虑的另一个可能的解决方案是在我的服务器上创建某种临时文件，然后将流写入该文件，然后将该文件用作视频源。然而，这似乎并不直观。我想知道，对于这样的问题，是否有一个更成熟的解决方案。

格式通常用于流媒体。

视频流/转码是一项资源密集型工作。如果您有此选项，我建议您使用第三方服务进行此操作。

您可能需要查看以下选项：

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

来自Phoboslab的流服务器（在捕获的情况下）。您只需启动

ffmpeg

，并将其指向运行nodejs脚本的域和端口。您可以找到更多信息

直接用管道输送一条小溪。好答案贴出来了。简而言之，您只需指定

接受范围

、

内容范围

、

内容长度

和

内容类型

标题，然后创建相关流（使用

开始

和

结束

选项）并将其传输到

响应

对象

事实上，我两周前在一个hackathon上试过这个。我最后几乎没能让这个flv流工作，我已经在下面发布了。我的目的是建立一个库，使这将需要的许多过程自动化

如您所见，我在服务器上打开了一个新端口，用于处理流向客户端的独立数据流。这反映在客户机的src标记中

你需要三件事：

这是的Linux版本

在js方面

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);

编辑：客户端部分：


节点流ffmpeg
flowplayer（“player”，“/flowplayer.swf”）；

（只需更改href属性）

创建一个文件，即使是临时文件，也不是一个糟糕的解决方案，它可以让您将整个http头痛的问题还原为支持

Range

头的apache之类的预先编写的东西；手动http实现视频服务可能很棘手…@dandavis，是否有可能以这样的方式写入文件，即可以立即提供服务（即使未完全写入）并在客户端播放？我一直很好奇node是否是这种解决方案的可行组件；由于它本质上是单线程的，我一直质疑它是否可以处理多个流，或者您是否提供了一个带有H264/AAC的MP4容器？这应该有助于您理解可读流：--如果您仍在挣扎，请告诉我，我会给出一个正确的答案。虽然此链接可能会回答这个问题，最好在这里包括答案的基本部分，并提供链接供参考。如果链接页面发生更改，仅链接的答案可能无效。-由于非常熟悉stackoverflow，所以我知道仅链接的答案并不好。第一件事是链接到维基百科，它几乎没有变化。第二，除了链接，我还写了我所知道的东西。第三件事是在你的评论中添加更多细节，如果你对它有更多的了解。你能添加客户端部分吗？

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