From 97d2050a9973545b0db9d3bd94d975108821e062 Mon Sep 17 00:00:00 2001
From: Devon Doyle <devonrd@umich.edu>
Date: Wed, 20 Mar 2024 22:53:15 -0400
Subject: [PATCH] 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
---
 .../src/components/app/photon-camera-stream.vue        | 10 ++++++++--
 1 file changed, 8 insertions(+), 2 deletions(-)

diff --git a/photon-client/src/components/app/photon-camera-stream.vue b/photon-client/src/components/app/photon-camera-stream.vue
index a836e4b362..34465e9389 100644
--- a/photon-client/src/components/app/photon-camera-stream.vue
+++ b/photon-client/src/components/app/photon-camera-stream.vue
@@ -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"