How to stream video data to a video element?

前端未结

关注

 3  1550

盖世英雄少女心

I have a Node.js process which outputs a video stream into my Node.js app.

On the client end, there is a tag. I would like to stream the video

相关标签:

3条回答

悲哀的现实

2021-02-06 03:00

m3u8 format is commonly used for streaming. Video streaming/transcoding is a resource intensive thing. I would suggest you to use third party service to do so, if you have that option.

0 讨论(0)
发布评论:

提交评论
- 加载中...
天涯浪人

2021-02-06 03:11
Probably you might want to look at the following options:
1. BinaryJS. It's bidrectional realtime binary data transfer tool based on websockets.
2. JSMpeg stream-server (in case of capturing) from Phoboslab guys. All you need to do is start ffmpeg and point it to the domain and port where the nodejs script is running. More info you can find here.
3. Pipe a stream directly. Good answer is posted here. In few words you just need to specify Accept-Ranges, Content-Range, Content-Length and Content-Type headers, then create relevant Read stream (with start and end options) and pipe it to the response object.
0 讨论(0)
发布评论:

提交评论
- 加载中...

抹茶落季

2021-02-06 03:12

I've actually tried this at a hackathon two weeks ago. I ended up barely getting this flv stream to work, which I've posted below. My intent was to make a library to automate much of the processes this would entail.

As you can see, I've opened a new port on the server to handle the separate stream of data flowing to the client. This is reflected in the client's src tag.

THREE THINGS YOU NEED:

This Linux version of ffmpeg.
Flowplayer on the js side.

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

EDIT: Client side part:

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>

(Just change the href attribute)

0 讨论(0)