2016-03-29 5 views
9

Node.jsアプリケーションにビデオストリームを出力するNode.jsプロセスがあります。ビデオデータをビデオ要素にストリームする方法は?

クライアント側では、<video>というタグがあります。ビデオをNode.jsからビデオタグのsrc属性にストリームしたいと思います。以前の私の経験から、blobオブジェクトを使用する必要があることがわかりました。しかし、私はそれをどのように、なぜ使用するのかを100%確信しているわけではありません。

私が考えているもう1つの解決策は、サーバーに一時的なファイルを作成し、そのファイルにストリームを書き込んだ後、そのファイルをビデオのソースとして提供することです。しかし、それは直感的ではないようです。このような問題のためのより確立された解決策があるなら、私は疑問に思っていました。

+0

ファイルを作成しても、それは解決策の悪さではなく、 'Range'ヘッダーをサポートするapacheのようなあらかじめ書かれたものに完全なhttp頭痛を加えることができます。ビデオ配信の手動HTTP実装は難しいかもしれません... – dandavis

+0

@dandavis、それはすぐに(完全に書かれていなくても)提供され、クライアント側で再生できるような方法でファイルを書くことは可能ですか? –

+0

可能ですが、ほとんどのハイレベルな「ファイルサーバー」(およびそのようなツール)は通常、ビデオタグに将来のフレームのロードを停止するよう指示するContent-Lengthヘッダーにファイルのサイズを送信します。基本的に小さなビデオクリップを作成し、クリップのインデックスをストリーミングし、クリップをシームレスにつなぎ合わせるという、Http Live Streamを見てください。他の多くのターンキーアプローチや独自のソリューションがありますが、HLSは「簡単」な無料のソリューションです。 – dandavis

答えて

2

おそらくあなたは、以下のオプションを見たいかもしれません:

  1. BinaryJS。これは、WebSocketをベースとした双方向リアルタイムバイナリデータ転送ツールです。

  2. JSMpeg(キャプチャの場合)Phoboslabの人からです。あなたがする必要があるのは、ffmpegを起動し、nodejsスクリプトが実行されているドメインとポートを指すだけです。 詳細情報はhereです。

  3. ストリームを直接パイプします。良い答えはhereです。いくつかの単語では、ちょうどそのresponseオブジェクトに関連するReadstartendオプション付き)ストリームとパイプを作成し、Accept-RangesContent-RangeContent-LengthContent-Typeヘッダを指定する必要があります。

+0

BinaryJSは働きました、spasibo Oleg! –

4

m3u8の形式が一般的にストリーミングに使用されます。 ビデオストリーミング/トランスコーディングは、リソースを大量に消費するものです。私は、あなたがそのオプションを持っている場合、そうするためにサードパーティのサービスを利用することをお勧めします。

+0

このリンクは質問に答えるかもしれませんが、ここでの答えの本質的な部分を含めると、参照のためのリンクを提供する方が良いです。リンクされたページが変更された場合、リンクのみの回答は無効になります。 - [レビューから](レビュー/低品質の投稿/ 12541655) – ankitr

+1

はかなりstackoverflowに精通しているので、私はリンクのみの回答が良くないことを知っています。 まずはほとんど変化のないウィキペディアへのリンクです。 2番目私はリンクから離れて私に知られていたものを書いた。 あなたがそれについてもっと知っていれば、あなたのコメントに詳細を追加することを考慮してください。 – atinder

2

私は実際に2週間前にハカソトンでこれを試しました。私はこのFLVストリームをうまく動かすことになりました。私の意図は、これが必然的に伴うプロセスの多くを自動化するライブラリを作ることでした。

ご覧のとおり、サーバーに新しいポートを開いて、クライアントに流れる別のデータストリームを処理しました。これはクライアントのsrcタグに反映されます。あなたが必要

三つのこと:

  1. ffmpegのこのLinuxバージョン。

  2. Flowplayer js側。

  3. NPM流暢-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 }); 
    
        }; 
    
    } 
    

    //ルート。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:クライアントサイド部: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を変更属性)

+0

これは本当にいいよね。あなたはちょうどクライアント側の部分を追加できますか? –

+0

追加、ありがとうございました。 –

関連する問題