Как программно удалять из кеша браузера уже проигранный видеоматериал?

176
03 июня 2018, 02:10

Имеется прямая трансляция WebM видео с веб-камер в браузер:

Веб-приложение подключается по WebSocket к видео-серверу, запрашивая определённый источник трансляции. Сервер ретранслирует пакеты клиента в браузер. В браузере средствами MSE поток декодируется и воспроизводится, забивая браузерный кеш отработанным материалом на время воспроизведения. Всё бы ничего, но некоторые клиенты могут оставить просмотр трансляции на целый день и потом удивляются почему у них браузер забирает до 2,5 Гб опративки.

Поскольку трансляция прямая, хранить ранее полученные пакеты в памяти не требуется - их надо как-то удалять. КАК? Можно конечно делать buffer.abort() через определённые промежутки времени, но это будет видно при просмотре периодическими фризами.

Код JS стрим-плеера:

class Streamer{
    constructor(video_object, host, port, init_message){
        if( typeof(video_object)==="object" ) this.video = video_object;
        else this.video = document.getElementById(video_object);
        this.host     = "ws://"+host+':'+port;
        this.request  = init_message;
        this.buffer   = null;
        this.socket   = null;
        this.source   = null;
        this.frames   = [];
        this.timecode = 0;
    }
    Start(){
        var instance = this;
        instance.source = new MediaSource();
        instance.source.onsourceopen = function(){
            instance.buffer = instance.source.addSourceBuffer('video/webm; codecs="vp8"');
            instance.buffer.appendBuffer(EBML_Document(640,480));
            instance.buffer.onerror = function(){console.log("SourceBuffer error");};
            instance.buffer.onupdateend = function(){
                if( instance.frames.length ) instance.buffer.appendBuffer(instance.frames.shift());
                if(!instance.video.playing ) instance.video.play();
            };
        };
        instance.video.src = window.URL.createObjectURL(instance.source);
        instance.socket = new WebSocket(instance.host);
        instance.socket.binaryType = "arraybuffer";
        instance.socket.onopen = function(){this.send(instance.request);};
        instance.socket.onerror = function(){
            setTimeout(instance.Start, 3000);
            console.log("Error! Reconnecting...");
        };
        instance.socket.onclose = function(){instance.buffer.abort();};
        instance.socket.onmessage = function(event){
            var buffer = new Uint8Array(event.data);
            if( buffer[2] === 0x1F && buffer[5] === 0x75){
                var duration = (parseInt(buffer[0]) << 8) + parseInt(buffer[1]);
                buffer = buffer.slice(2);
                set_cluster_pts(buffer, instance.timecode);
                try{instance.buffer.appendBuffer(buffer);}
                catch(e){instance.frames.push(buffer);}
                instance.timecode+= duration;
            }
            else console.log("Corrupted data signature! Skipping packet...");
        };
    }
    Stop(){
        this.socket.close();
        this.timecode = 0;
    }
}
READ ALSO
Проблема работы setInterval

Проблема работы setInterval

Есть слайдер, который прокручивается в заданный промежуток и при нажатии на негоЧтобы сдвиг при нажатии не совпадал со сдвигом через интервал,...

223
VK.api js методы getHighScores и setUserScore

VK.api js методы getHighScores и setUserScore

Хочу узнать работают ли эти методы до сих пор, и как их использовать

148
В чем разница между if else и switch? [дубликат]

В чем разница между if else и switch? [дубликат]

На данный вопрос уже ответили:

218
Как сделать создание таблиц по клику на button? при этом пользователь сам вводит шырину и высоту таблицы, количество рядов и столбцов

Как сделать создание таблиц по клику на button? при этом пользователь сам вводит шырину и высоту таблицы, количество рядов и столбцов

нужно чтобы после нажатия на кнопку "создать таблицу", создавалась таблица со всеми настройками которые ввел пользователь

180