如何将视频数据流式传输到视频元素

How to stream video data to a video element?

本文关键字：视频 传输 元素 数据流      更新时间：2023-09-26

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

在客户端，有一个<video>标签。我想将Node.js中的视频流式传输到视频标签的src属性中。我以前的经验告诉我，我们必须为此使用blob对象。然而，我不能百分之百地确定我将如何以及为什么使用它

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

m3u8格式通常用于流式传输。视频流/转码是一项资源密集型的工作。如果你有选择的话，我建议你使用第三方服务。

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

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

  2. 来自火卫一实验室的JSMpeg流服务器（以防捕获）。您所需要做的就是启动ffmpeg，并将其指向nodejs脚本正在运行的域和端口。你可以在这里找到更多信息。

  3. 直接用管道输送溪流。好的答案张贴在这里。简而言之，您只需要指定Accept-Ranges、Content-Range、Content-Length和Content-Type标头，然后创建相关的Read流（使用start和end选项）并将其通过管道发送到response对象。

实际上我两周前在一次黑客马拉松上尝试过这个。我最终几乎没有让这个flv流工作，我在下面发布了它。我的意图是建立一个图书馆，使这将需要的大部分流程自动化。

正如您所看到的，我在服务器上打开了一个新端口来处理流向客户端的单独数据流。这反映在客户端的src标记中。

你需要三样东西：

  1. 这是ffmpeg的Linux版本。

  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属性）

相关文章：