mjpeg をストリーミングする IP カメラがあります。私はもともと次のようにストリーミングしていました:
//JQUERY
setInterval(function(){
$("#overView").attr("src", "http://74.105.102.4:9999/cgi-bin/view/image?pro_3?"+new Date().getTime());
},1000);
//HTML
<img id="overView" class="overView" width="710" height="400" style="" src="http://74.105.102.4:9999/cgi-bin/view/image?pro_3">
これは問題なく動作しますが、1 秒あたり 1 フレームしか得られません。これ以上絞ろうとすると、バッファを作成する必要があるため停止します。カメラ設定は最大 30fps です。SO より多くの FPS を達成するために、次のように jQuery を使用してバッファーを作成しようとしました。
//JQUERY
var mjpegImg = 'http://74.105.102.4:9999/cgi-bin/view/image?pro_3';
$('#start').attr('disabled', false).toggle(function() {
$(this).text('Stop');
$('#buffer').load(function() {
$('#video').attr('src', this.src);
this.src = mjpegImg + '?cache=' + new Date().getTime();
}).trigger('load');
}, function() {
$(this).text('Start');
$('#buffer').unbind();
});
//HTML
<img id="buffer" alt="" />
<img id="video" alt="" />
<button id="start" disabled="disabled">Start</button>
この種の作品は、まだグリッチがあります。上記のスクリプトのフィドルは 次のとおりですhttp://jsfiddle.net/XgAWJ/2/ストリームの右上にタイムスタンプがカウントアップされているため、ストリームがどのように動いているかがわかります。
Is there anyway I can squeeze out more FPS using this method? 15-20fps would be ideal. The camera is hosted from a 15mbs upload line, that should suffice for mjpeg. I am not afraid of using PHP either if theres a way to utilize the ob_start()
, I saw a solution using that here http://ben-collins.blogspot.com/2010/06/php-sending-motion-jpeg.html Not sure if that would work right, I don't see anywhere to set a time interval.
Thanks a bunch guys!