web-dev-qa-db-ja.com

IPカメラからWebブラウザーにRTSPストリーミングを取得する最良の方法は?

RTSPストリーミングデータをWebブラウザーに取り込むことは可能ですか?

以下は私の調査結果の一部です。間違っている場合は親切に訂正してください

  1. Mac OSとSafariのみがRTSPライブストリーミングをサポートしています。

  2. HTML 5ビデオはRTSPをサポートしていません。

  3. VLCプラグインを使用できますが、使用したくありません。

ffmpegとwebsocketを混在させる可能性?

IPカメラがイーサネットで接続されていると仮定します。

クライアントマシンで:

  1. Ffmpegを実行してサーバーからデータを取得します(IP :)
  2. クライアントマシンはwebsocketを実行します。
  3. Ffmpegは、RTSPサーバーからデータを取得すると、デコードし、任意の形式(たとえば、yuv)の生のイメージを生成します。
  4. 今、この画像をwebsocket経由でブラウザに送信する必要があります。

質問:

  1. それは正しいアプローチですか?
  2. Ffmpegからブラウザにデコードされた画像を取得するにはどうすればよいですか?

私は別の場所で間違っているかもしれません。入力してください。

17
Whoami

ここ はブログエントリ、またはあなたがそうする場合はチュートリアルであり、非常によく似たものを実現します。

セットアップは少し異なりますが、これは要約です:

ffmegを使用して、入力をmpeg1videoに変換します。

ffmpeg  -i rtsp://whatever -f mpeg1video -b 800k -r 30 http://localhost:8082/yourpassword/640/480/

jsmpeg からnode.jsスクリプトを使用してstream-server.jsをインストールし、ws ws WebSocketパッケージをインストールします。

ストリームを表示するには、 jsmpegstream-example.htmlおよびjsmpg.jsを使用します。 stream-example.htmlのWebSocket URLをlocalhostに変更し、お気に入りのブラウザーで開きます。

Updateおよび SOトピック は、<video>タグを使用した他の2つの有効なソリューションを提案します:with stream-m Java serverまたはffserverを使用。

18
Alex Cohn

さまざまなプラットフォームとブラウザでストリーミングを表示する必要があります。プラグインを使用せずに(スマートフォンやタブレットで動作するかどうかはわかりません)、それを作成するには、あなたと非常によく似たアプローチを使用しました。 ffmpeg crontabタスクは、1秒間に3つのイメージを作成し、ディレクトリに保存します。 Jqueryを使用して、phpへのajax呼び出しはディレクトリを読み取り、ファイルの名前を取得して、330msごとに画像を変更します(<img>の 'src'属性のみを変更します)。ストレージの問題を解決するには、1分以上でファイルを削除する他のcrontabタスクを使用しました。それは本当のストリーミングではありませんが、クロスブラウザであり、問​​題をかなりうまく解決します。

Ffmpegタスク

ffmpeg -i "rtsp://path/to/cam" -s 320x240 -f image2 -vf fps=fps=3 cache/%04d.jpg

Ajax呼び出しの例

$.ajax({
        url: '_read_dir.php',
        type: 'POST',
        dataType: 'json'
    })
    .done(function(result) {        
        $("#img_cam").prop('src',"cache/" + result.img);            
    });

ストレージ管理タスク

find /var/www/path/to/dir -mmin +1 -exec rm -f {} \;

希望が助けられる! :)

0
Rafael Basso