JavaScriptのビデオのような一連の画像をレンダリングする

JavaScriptで画像のストリームを使用してビデオを合成しようとしています。問題は、「ビデオ」がジャーキーであることです。これは、ソートのバッファを使用して解決されました。しかし、今問題は、画像が実際にレンダリングされるよりもはるかに高速にダウンロードされるということです。JavaScriptのビデオのような一連の画像をレンダリングする

IPカメラのように、画像のソースが変更されている場合は、以下の例を試してみてください。私が気づいたのは、 "ビデオ"はまだ非常にゆっくり更新されていますが、パケットスニファを見て、イメージがレンダリングされているよりはるかに速く完全に取得されていることがわかります。ここで

は一例です：

<HTML> 
    <HEAD> 
    <SCRIPT SRC="http://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"> 
    </SCRIPT> 
    <SCRIPT> 
     function startVideo() 
     { 
     //when the buffer image is loaded, put it in the display 
     $('#image-buffer').load(function() 
     { 
      var loadedImage = $(this).attr('src'); 

      $('#image-displayed').attr('src', loadedImage); 

      $(this).attr('src', 
      'http://path.to/image.jpg?nocache=' + Math.random()); 
     }); 

     $('#image-buffer').attr('src', 
      'http://path.to/image.jpg?nocache=' + Math.random()); 
     } 

     function stopVideo() 
     { 
     $('#image-buffer').unbind('load'); 
     $('#image-buffer').attr('src', ''); 
     $('#image-displayed').attr('src', ''); 
     } 
    </SCRIPT> 
    </HEAD> 
    <BODY> 
    <BUTTON ONCLICK="startVideo();">Start Video</BUTTON><BR/> 
    <BUTTON ONCLICK="stopVideo();">Stop Video</BUTTON><BR/> 
    <IMG ID="image-displayed"/> 
    <IMG ID="image-buffer" STYLE="visibility: hidden;"/> 
    </BODY> 
</HTML>

出典

2010-12-15 ArturPhilibin

+1興味深い質問 –

自分で解決策を探しています。ここでは、IPカメラのケースに驚くほど便利な何かをすることについて素敵な小さな記事です。

http://techslides.com/convert-images-to-video-with-javascript

もオーバーフローを有する第1の（大量の画像が存在しないと仮定して）画像ストリップ（CSSのSTUF）内のすべての画像をロードしようとする全てを隠すしかし：隠されました。次に、setInterval（基本的にはトランジションアニメーションなしの非常に速いスライダ）を使用して、イメージの幅のイメージストリップの位置を変更します。その場合、すべての画像が既にロードされてレンダリングされ、各「フレーム」間のタイミングを制御できます。

出典

2014-11-23 23:06:26 Gawran

代わりにロードする画像の多くの場合、可能な限り、あなたが例えば10回秒、設定された間隔で実行する機能を作るためにwindow.setIntervalメソッドを使用することができますよう。

イメージを表示するとすぐに次のイメージのロードを開始できますが、ロードイベントを表示する代わりに、ある間隔で実行されている関数にそのようにすることができます。

出典

2010-12-15 10:04:05 Guffa

イメージのサイズが何らかの形で一貫していることが保証されていない限り、あなたのビデオはほとんど確実にジャーキーになります。それでも、画像のロードはネットワークの状況に依存します。スクリプトが表示されるよりも速くイメージをロードするという問題については、ソースに実際にアクセスしない限り、そのソースを特定する方法はありません。

Stack Exchange APIをイメージソースとして使用してコードを書き換え、Firebugを使用してアクティビティを監視すると、ネットワークアクティビティが画面に表示されているものとほぼ一致することがわかります。

alt text

使用されるコードは次のとおりです。

$('#buffer').load(function(){ 
    $('#video').attr('src', this.src); 
    this.src = sites[Math.floor(Math.random() * sites.length)].logo_url + '?cache=' + new Date().getTime(); 
}).trigger('load');

は、ここでは、このコードは、ライブの作業を参照してください：http://www.jsfiddle.net/yijiang/r957s/

出典

2010-12-15 10:15:57

私が質問に持っているソースコードは、画像がレンダリングされるよりも速く検索されるという問題を引き起こします。私のカメラで使用するときのコード。すべての画像は常に約60kBでLAN上にあるので、ブラウザが画像をダウンロードできるほど速くレンダリングできないことが考えられます。 – ArturPhilibin

@DaSilva_Irelandその場合、おそらく問題のために適切なツールを使用していないでしょう。おそらく、これを扱うのにさらに特化したもの –

を私は（他のブラウザでのfirefox-ない問題で。）同様の問題がありました最後に、私は映画をリテラルとしてフィルムストリップとしてダウンロードし、それをオーバーフロー隠れたdivに入れ、フレームの高さで画像をオフセットしました。起動するために合計ファイルサイズに数kを保存します！私はgdlibで映画を作った

出典

2012-03-31 01:04:33

JavaScriptのビデオのような一連の画像をレンダリングする

答えて

関連する問題