3

CCTV アプリケーション用に Google Chrome で複数 (16) のライブ webm ビデオをストリーミングする方法を探しています。これまでのところ、私が試したことはすべて 6 つのライブ ストリームで上限に達し、その後、ビデオは「停止」イベントを発生させ始めます。これを回避する方法を知っている人はいますか?

私が使用しているコードは次のとおりです。

<html>
<head>
<script src="jquery-1.9.1.min.js" type="text/javascript"></script>
</head>
<body style="border: 0px; margin: 0px; padding: 0px; background-color: #000000; overflow: hidden;">
<div id="divMain" style="display: block; position: absolute; left: 0px; top: 0px; width: 100%; height: 100%; border: 0px; margin: 0px; 

padding: 0px; overflow: hidden;"></div>
<script language="JavaScript" type="text/javascript">
<!--
var streams = new Array();
streams.Load = function (index) {
    console.log(index, 'LOAD');
    streams.push(document.createElement('video'));
    streams[index].id = 'stream' + index;
    streams[index].autoplay = 'autoplay';
    streams[index].style.display = 'block';
    streams[index].style.position = 'absolute';
    streams[index].width = this.Width;
    streams[index].height = this.Height;
    streams[index].style.left = ((index - (Math.floor(index / 4) * 4)) * this.Width) + 'px';
    streams[index].style.top = (Math.floor(index / 4) * this.Height) + 'px';
    streams[index].style.width = this.Width + 'px';
    streams[index].style.height = this.Height + 'px';
    $(streams[index]).bind('loadedmetadata', streams[index], function (event) {
        console.log(event.data.id, 'loadedmetadata');
        var actualRatio = event.data.videoWidth / event.data.videoHeight;
        var targetRatio = $(event.data).width() / $(event.data).height();
        var adjustmentRatio = (targetRatio / actualRatio);
        $(event.data).css('-webkit-transform', 'scaleX(' + adjustmentRatio + ')');
    });
    $(streams[index]).bind('loadstart', streams[index], function (event) { console.log(event.data.id, 'loadstart'); });
    $(streams[index]).bind('emptied', streams[index], function (event) { console.log(event.data.id, 'emptied'); });
    $(streams[index]).bind('canplaythrough', streams[index], function (event) { console.log(event.data.id, 'canplaythrough'); });
    $(streams[index]).bind('ended', streams[index], function (event) { console.log(event.data.id, 'ended'); });
    $(streams[index]).bind('ratechange', streams[index], function (event) { console.log(event.data.id, 'ratechange'); });
    $(streams[index]).bind('stalled', streams[index], function (event) { console.log(event.data.id, 'stalled'); streams.LoadNext(); 

});
    $(streams[index]).bind('playing', streams[index], function (event) { console.log(event.data.id, 'playing'); });
    $(streams[index]).bind('durationchange', streams[index], function (event) { console.log(event.data.id, 'durationchange'); });
    $(streams[index]).bind('volumechange', streams[index], function (event) { console.log(event.data.id, 'volumechange'); });
    $(streams[index]).bind('suspend', streams[index], function (event) { console.log(event.data.id, 'suspend'); });
    $(streams[index]).bind('waiting', streams[index], function (event) { console.log(event.data.id, 'waiting'); });
    $(streams[index]).bind('timeupdate', streams[index], function (event) { console.log(event.data.id, 'timeupdate'); });
    $(streams[index]).bind('abort', streams[index], function (event) { console.log(event.data.id, 'abort'); });
    $(streams[index]).bind('loadeddata', streams[index], function (event) { console.log(event.data.id, 'loadeddata'); });
    $(streams[index]).bind('seeking', streams[index], function (event) { console.log(event.data.id, 'seeking'); });
    $(streams[index]).bind('play', streams[index], function (event) { console.log(event.data.id, 'play'); });
    $(streams[index]).bind('error', streams[index], function (event) { console.log(event.data.id, 'error'); });
    $(streams[index]).bind('canplay', streams[index], function (event) { console.log(event.data.id, 'canplay'); });
    $(streams[index]).bind('seeked', streams[index], function (event) { console.log(event.data.id, 'seeked'); });
    $(streams[index]).bind('pause', streams[index], function (event) { console.log(event.data.id, 'pause'); });
    streams[index].source = document.createElement('source');
    streams[index].source.src = 'http://10.1.1.15:8090/' + index + '.webm';
    streams[index].source.type = 'video/webm';
    streams[index].appendChild(streams[index].source);
    divMain.appendChild(streams[index]);
    streams.LoadNext();
};
streams.LoadNext = function () { if (this.length < 16) { this.Load(this.length); } };
streams.Width = 320;
streams.Height = 240;
$(window).ready(function() {
    var divMain = document.getElementById('divMain');
    streams.Width = divMain.offsetWidth / 4;
    streams.Height = divMain.offsetHeight / 4;
    var tsource = null;
    streams.LoadNext();
});
$(window).resize(function() {
    var divMain = document.getElementById('divMain');
    streams.Width = divMain.offsetWidth / 4;
    streams.Height = divMain.offsetHeight / 4;
    for (var i = 0; i < streams.length; i++) {
        streams[i].width = streams.Width;
        streams[i].height = streams.Height;
        streams[i].style.left = ((i - (Math.floor(i / 4) * 4)) * streams.Width) + 'px';
        streams[i].style.top = (Math.floor(i / 4) * streams.Height) + 'px';
        streams[i].style.width = streams.Width + 'px';
        streams[i].style.height = streams.Height + 'px';
        var actualRatio = streams[i].videoWidth / streams[i].videoHeight;
        var targetRatio = $(streams[i]).width() / $(streams[i]).height();
        var adjustmentRatio = (targetRatio / actualRatio);
        if (adjustmentRatio >= 1) {
            $(streams[i]).css('-webkit-transform', 'scaleX(' + adjustmentRatio + ')');
        } else {
            $(streams[i]).css('-webkit-transform', 'scaleY(' + (1 / adjustmentRatio) + ')');
        }
    }
});
//-->
</script>
</body>
</html>
4

1 に答える 1

0

私は、同じ IP アドレスを指す複数のサブドメインを設定し、それぞれで 4 つのストリームを実行することでこれを回避しました (他の何かがヒットすることを決定した場合に備えて、正気を保つために 2 つのストリームを開いたままにします)。複数のブラウザー ウィンドウを許可するソリューションではありませんが、少なくともすべてのストリームを一度に実行できます。

于 2013-03-20T12:43:26.407 に答える