I'm trying to make new loader for hls.js fragments, but it does not work.
Made everything by their doc (https://github.com/video-dev/hls.js/blob/master/docs/API.md#loader).
Why it's not working?
const Loader = class {
start = Date.now();
stats: LoadStats = {
aborted: false,
loaded: 0,
retry: 0,
total: 0,
chunkCount: 0,
bwEstimate: 0,
loading: { start: this.start, first: 0, end: 0 },
parsing: { start: this.start, end: 0 },
buffering: { start: this.start, first: 0, end: 0 },
};
// @ts-ignore
load = async (context, config, callbacks) => {
const request = new XMLHttpRequest();
request.open('GET', context.url, true);
request.responseType = context.responseType;
request.onprogress = (event: ProgressEvent) => {
const now = Date.now();
this.stats.loaded = event.loaded;
this.stats.total = event.total;
this.stats.chunkCount += 1;
this.stats.bwEstimate = this.stats.loaded / (now - this.start);
if (this.stats.loading.first === 0) {
this.stats.loading.first = now;
this.stats.buffering.first = now;
}
// There is no ArrayBuffer in response, XHR does not support that
callbacks.onProgress(this.stats, context, new ArrayBuffer(0));
};
request.onabort = () => {
this.stats.aborted = true;
callbacks.onError(
{
code: 0,
text: 'Error while loading of the fragment',
},
context,
request
);
};
request.onreadystatechange = () => {
if (request.readyState !== 4) {
return;
}
const now = Date.now();
this.stats.loaded = request.response.byteLength;
this.stats.total = request.response.byteLength;
this.stats.loading.end = now;
this.stats.parsing.end = now;
this.stats.buffering.end = now;
callbacks.onSuccess(
{
url: request.responseURL,
data: request.response,
},
this.stats,
context,
request
);
};
request.send();
};
/** Abort any loading in progress. */
abort = function (): void {};
/** Destroy loading context. */
destroy = function (): void {};
};
Log has a weird thing – hls.js loading all segments, one by one, from 1st to 21st, but do not buffer them, i.e. I can't play video, there is an infinite loader.