web-dev-qa-db-ja.com

MJpegストリームをhtml5でレンダリングする

Imgタグを使用してHTML5でMJpegストリームをレンダリングしようとしています。以下を実行すると、すべてが正常に機能します。つまり、ビデオが終了するまでビデオの再生が開始されます。

<img src="http://[some ip]:[port]/mjpg">

私の質問は、どうすればフレームごとにストリームを取得できるかということです。フレームごとに、それを取得し、何かを実行して（サーバーへのajax呼び出し）、フレームを画像として表示します。

ありがとう。

javascripthtml5mjpeg
7
Lior Ohana

これは、Httpリクエストを繰り返し行うことなく実行できます。 1つだけで十分です。 fetch api を使用して ReadableStream を作成し、それにアクセスして Reader にし、ストリームから読み取りを続けることができます。

リーダーがストリームからチャンクを再帰的に読み続けるようになったら。ヘッダーの終わりとJPEGフレームの始まりを示すバイトストリームでSOI（0xFF 0xD8））を探します。ヘッダーには、読み取るバイト単位のJPEGの長さが含まれます。 。チャンクとそれに続くチャンクからそのバイト数を読み取り、それを int8Array に格納します。フレームを正常に読み取ったら、それをblobに変換し、そこからUrlObjectを作成して、に割り当てます。 imgオブジェクトのsrcプロパティ。

接続が閉じられるまでこれを続けます。

恥知らずなプラグ。 github 。の作業サンプルへのリンクは次のとおりです。

3
arun tom

カメラが生のJPEG画像（.MJPEG拡張子ではない）を公開する場合は、手動で再読み込みする必要があります（拡張子が.MJPEGの場合、ブラウザーがすべてを実行します。正しいsrcを入力するだけです）。 .MJPEGがあり、生の.JPEGを使用する場合は、カメラのドキュメントを確認してください。ほとんどのカメラは、.MJPEGストリームと生の.JPEGストリームの両方を公開します（異なるURLでのみ）。

残念ながら、ajaxを介して画像を簡単に取得することはできませんが、画像のsrcを定期的に変更することはできます。

Date.getTime()を使用してクエリ文字列に追加すると、ブラウザに画像を再読み込みさせ、画像が読み込まれるたびに繰り返すことができます。

JQueryを使用する場合、コードは次のようになります。

camera.html

<!DOCTYPE html>
<html>

<head>
    <title>ipCam</title>
</head>

<body>
    <h1>ipCam</h1>
    <img id="motionjpeg" src="http://user:[email protected]:8080/" />
    <script src="motionjpeg.js"></script>
    <script>
        //Using jQuery for simplicity

        $(document).ready(function() {
            motionjpeg("#motionjpeg"); // Use the function on the image
        });
    </script>
</body>

</html>

motionjpeg.js

function motionjpeg(id) {
    var image = $(id), src;

    if (!image.length) return;

    src = image.attr("src");
    if (src.indexOf("?") < 0) {
        image.attr("src", src + "?"); // must have querystring
    }

    image.on("load", function() {
        // this cause the load event to be called "recursively"
        this.src = this.src.replace(/\?[^\n]*$/, "?") +
            (new Date()).getTime(); // 'this' refers to the image
    });
}

注私の例ではページの読み込み時にMotionJPEGを再生しますが、再生/一時停止/停止機能は許可しません

3
Zorgatone

ストリームソースが別のアドレス（http：// [some ip]：[port]/frame/XXX）でフレームを返すことができない場合は、サーバーでMJPEGストリームパーサーを使用できます。たとえば、 Paparazzo.js ストリームを解析し、単一のjpegを返します。実際には、前のフレームを保存せずに最後のフレームのみを返しますが、変更することができます。

一部のプラグインとサーバーがないjsを使用するブラウザーでのみ問題を解決することはできません。

2
Alex