1
Я ищу способ передать несколько видеороликов в реальном времени (16) в Google Chrome для приложения CCTV. До сих пор все, что я пробовал, пропускает в 6 потоках в прямом эфире, после чего видео начинают стрелять «застопорившимися» событиями - кто-нибудь знает об этом?Поток более чем 6 HTML-ориентированных видео в Интернете одновременно в Chrome
Вот код, я использую:
<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>
Все эти видеоролики 320x240? –
Все они размером 320x240, да (ограничение слов сделало меня более подробным). – CoryG
Я думаю, что вы столкнетесь с сбоем из-за ограничений по размеру. Я попытался загрузить видео размером более GB, Chrome не смог отобразить его даже один раз. –