Fix mjpg stream accumulation (#1293)

Fixes bug where switching tabs/etc causes buildup of connected mjpg streams in network, eventually slowing down streams and causing stream failure until refresh. Accomplishes this by directly setting the source of stream elements to null before unmount, allowing chrome/edge to close the connection.

Fixes #1106
This commit is contained in:
Devon Doyle
2024-03-20 22:53:15 -04:00
committed by GitHub
parent c89acea5a6
commit 97d2050a99

View File

@@ -1,5 +1,5 @@
<script setup lang="ts">
import { computed, inject } from "vue";
import { computed, inject, ref, onBeforeUnmount } from "vue";
import { useCameraSettingsStore } from "@/stores/settings/CameraSettingsStore";
import { useStateStore } from "@/stores/StateStore";
import loadingImage from "@/assets/images/loading.svg";
@@ -53,11 +53,17 @@ const handleFullscreenRequest = () => {
if (!stream) return;
stream.requestFullscreen();
};
const mjpgStream: any = ref(null);
onBeforeUnmount(() => {
if (!mjpgStream.value) return;
mjpgStream.value["src"] = null;
});
</script>
<template>
<div class="stream-container">
<img :id="id" crossorigin="anonymous" :src="streamSrc" :alt="streamDesc" :style="streamStyle" />
<img :id="id" crossorigin="anonymous" :src="streamSrc" :alt="streamDesc" :style="streamStyle" ref="mjpgStream" />
<div class="stream-overlay" :style="overlayStyle">
<pv-icon
icon-name="mdi-camera-image"