Обновление изображения Angular html в FireFox работает иначе, чем в других браузерах, таких как Edge и Chrome. ⇐ Javascript

[Anonymous]

Итак, на моем сайте Angular есть видеопоток, но это не настоящий видеопоток, а просто статическое изображение, которое обновляется каждую секунду. Обратите внимание, что это задумано, поскольку источник канала на самом деле не поддерживает настоящие видеоканалы, и это нельзя изменить. В любом случае оно не предназначено для высокого качества.
Чтобы получить изображение, я запускаю эти функции каждую секунду:

Код: Выделить всё

imageBlob!: Blob;
imageUrl: string = '/assets/no-image-placeholder.jpeg';
imageOffline: boolean = false;

updateImage = async (ip: string) => {
this.getImage(ip)
.then((response: any) => {
// Start blob processing asynchronously
response.blob().then((blob: Blob) => {
if (blob) {
this.imageBlob = blob;
}

if (this.imageUrl) {
URL.revokeObjectURL(this.imageUrl);
}

const objectUrl = URL.createObjectURL(blob);
this.imageUrl = objectUrl;
this.imageOffline = false;
});
})
.catch(() => {
this.imageOffline = true;
});
};

async getCameraImage(ip: string) {
const url = `${ip}/image`;
return await fetch(url, {
method: 'GET',
mode: 'cors',
headers: {
Accept: 'application/json',
'Access-Control-Allow-Origin': '*',
},
});
}

В html у меня есть следующее:

Код: Выделить всё

В Edge и Chrome это работает отлично и без каких-либо проблем. Я понимаю, что это не самый эффективный способ сделать что-то, но систему, из которой я получаю изображения, невозможно изменить, поэтому мне приходится работать с тем, что у меня есть. Однако в FireFox он действует так, как будто автоматическое кэширование изображений отсутствует: то есть между вызовами API для получения изображения изображение в html становится пустым, вызывая припадок, поскольку оно постоянно мигает между отсутствием изображения и изображением.
При отладке код в FireFox ведет себя идентично. URL-адрес изображения всегда правильный, и HTML-код никогда не теряет данные. Из-за этого я искренне не понимаю, что не так и как это исправить. У меня уже есть способ определения браузера, поэтому я могу добавить специальный код для FireFox, но, очевидно, сначала мне нужно знать, почему это происходит. Любая помощь очень ценится.
РЕДАКТИРОВАТЬ: Похоже, что изображение становится пустым, как только начинается вызов API для получения нового изображения, хотя URL-адрес изображения не перезаписывается до тех пор, пока данные не будут полностью получены. Это означает, что изменение интервала вызовов (например, увеличение его с 1 секунды до 3 секунд) не решает проблему.
ПРИМЕЧАНИЕ. Я просто хочу понять, почему он отличается и как это можно исправить, а не альтернативные способы написания кода (т. е. переключение на какой-либо прямой видеопоток).

Подробнее здесь: https://stackoverflow.com/questions/798 ... other-brow