Реализация обхода ограничений видео-потоков MJPG
Добавлено: Ср фев 13, 2019 4:22 pm
Браузеры имеют ограничение на вывод MJPG на одну страницу. В среднем это 5 потоков. Из за этого появляется проблема с выводом, допустим, большого количества камер. Они просто не отображаются. Можно воспользоваться и табами, но все фреймы на странице ограничены тем же количеством потоков, что и основная вкладка, поэтому это не решает проблем. Обход проблемы за счет сабдоменов не всегда представляется возможной. Но за счет хранения сцен в фреймах, можно обойти это ограничение с наименьшими затратами. Я решил не использовать существующие функции по отображению новых вкладок, дабы не нарушать изначальную логику работы и наложил свою реализацию отдельно.
Код решает проблему и легко встраивается, но из-за разной структуры HTML в логике табов, например в ../templates/application.html и ../templates/pages.html, нельзя его назвать однозначно универсальным.
Собственно код для ../templates/application.html:
И для для ../templates/pages.html:
Как видно выше, отличие лишь в селекторах и формате поиска идентификатора. В тоже время проблема данной реализации в том, что оно очищает все табы, поэтому данные введенные между вкладками не будут сохранены. Если данную логику реализовать более полноценно в пределах связки с CMS, то как вариант это реализовать флаг при создании сцены, по которому можно определить, необходимо ли удалять сцену при переключении вкладки. Но в то же время я полноценно не работаю с этой системой и оказался здесь пролетом, и углубленно изучить структуру кода проекта не представляется возможным.
Потому выкладываю саму идею на случай, если кому-то подойдет моя реализация, либо кто-то захочет сделать полноценный плагин.
Конфигурация на котором тестировалась данная реализация:
ПО линия и Majordomo
Стандартная установка
Ubuntu 18.04.1 LTS bionic
PHP 7.2.10
Mysql 14.14 Distrib 5.7.25
Apache/2.4.29 (Ubuntu)
Код решает проблему и легко встраивается, но из-за разной структуры HTML в логике табов, например в ../templates/application.html и ../templates/pages.html, нельзя его назвать однозначно универсальным.
Собственно код для ../templates/application.html:
Код: Выделить всё
var tab_array = {};
$(document).ready(function() {
$('.ui-tabs-anchor').click(function(){
var dataControl = $(this).parent().attr('aria-controls');
var targetWrapper = $('#'+dataControl).first();
var frameChanged = targetWrapper.hasClass('is-changed');
var lastFrame = $('#tabs iframe').first();
var lastFrameWrapper = lastFrame.parent();
var lastId = lastFrameWrapper.attr('id');
var lastSrc = lastFrame.attr('src');
tab_array[lastId] = lastSrc;
lastFrame.remove();
lastFrameWrapper.addClass('is-changed');
if(frameChanged) {
targetWrapper.html('<iframe src="'+ tab_array[dataControl]
+ '" width=100% height="'
+ iFrameHeight
+ '" border="0" frameborder="0"></iframe>');
}
});
});
И для для ../templates/pages.html:
Код: Выделить всё
var tab_array = {};
$(document).ready(function() {
$('.tab_table_cell').click(function(){
var dataControl = 'tab-' + $(this).attr('id').substr(4);
var targetWrapper = $('#'+dataControl).first();
var frameChanged = targetWrapper.hasClass('is-changed');
var lastFrame = $('#container iframe').first();
var lastFrameWrapper = lastFrame.parent();
var lastId = lastFrameWrapper.attr('id');
var lastSrc = lastFrame.attr('src');
lastFrame.remove();
lastFrameWrapper.addClass('is-changed');
tab_array[lastId] = lastSrc;
console.log(tab_array);
if(frameChanged) {
targetWrapper.html('<iframe src="'+ tab_array[dataControl]
+ '" width=100% height="'
+ iFrameHeight
+ '" border="0" frameborder="0"></iframe>');
}
});
});
Потому выкладываю саму идею на случай, если кому-то подойдет моя реализация, либо кто-то захочет сделать полноценный плагин.
Конфигурация на котором тестировалась данная реализация:
ПО линия и Majordomo
Стандартная установка
Ubuntu 18.04.1 LTS bionic
PHP 7.2.10
Mysql 14.14 Distrib 5.7.25
Apache/2.4.29 (Ubuntu)