fix(MediaMTX): fix webcam state when panel is closed on dashboard

Signed-off-by: Stefan Dej <[email protected]>
mainsail-crew · Aug 21, 2024 · f4aa3a5 · f4aa3a5
1 parent fb21211
commit f4aa3a5
Show file tree

Hide file tree

Showing 5 changed files with 17 additions and 19 deletions.
diff --git a/src/components/panels/WebcamPanel.vue b/src/components/panels/WebcamPanel.vue
@@ -42,7 +42,7 @@
         <v-card-text v-if="webcams.length" class="px-0 py-0 content d-inline-block">
             <v-row>
                 <v-col class="pb-0" style="position: relative">
-                    <webcam-wrapper :webcam="currentCam" />
+                    <webcam-wrapper :webcam="currentCam" :page="currentPage" />
                 </v-col>
             </v-row>
         </v-card-text>

diff --git a/src/components/webcams/WebcamWrapper.vue b/src/components/webcams/WebcamWrapper.vue
@@ -4,13 +4,17 @@
             <v-container v-if="webcams" fluid class="pb-4">
                 <v-row dense>
                     <v-col v-for="gridWebcam in webcams" :key="gridWebcam.name" cols="6">
-                        <webcam-wrapper-item :webcam="gridWebcam" :printer-url="printerUrl" :show-fps="showFps" />
+                        <webcam-wrapper-item
+                            :webcam="gridWebcam"
+                            :printer-url="printerUrl"
+                            :show-fps="showFps"
+                            :page="page" />
                     </v-col>
                 </v-row>
             </v-container>
         </template>
         <template v-else>
-            <webcam-wrapper-item :webcam="webcam" :printer-url="printerUrl" :show-fps="showFps" />
+            <webcam-wrapper-item :webcam="webcam" :printer-url="printerUrl" :show-fps="showFps" :page="page" />
         </template>
     </div>
 </template>
@@ -31,6 +35,7 @@ export default class WebcamWrapper extends Mixins(BaseMixin) {
     @Prop({ type: Object, required: true }) webcam!: GuiWebcamStateWebcam
     @Prop({ type: Boolean, default: true }) showFps!: Boolean
     @Prop({ type: String, default: null }) printerUrl!: string | null
+    @Prop({ type: String, default: null }) page!: string | null
 
     get webcams(): GuiWebcamStateWebcam[] {
         return this.$store.getters['gui/webcams/getWebcams']

diff --git a/src/components/webcams/WebcamWrapperItem.vue b/src/components/webcams/WebcamWrapperItem.vue
@@ -25,7 +25,7 @@
             <janus-streamer-async :cam-settings="webcam" :printer-url="printerUrl" />
         </template>
         <template v-else-if="service === 'webrtc-mediamtx'">
-            <webrtc-media-m-t-x-async :cam-settings="webcam" :printer-url="printerUrl" />
+            <webrtc-media-m-t-x-async :cam-settings="webcam" :printer-url="printerUrl" :page="page" />
         </template>
         <template v-else-if="service === 'webrtc-go2rtc'">
             <webrtc-go2rtc-async :cam-settings="webcam" :printer-url="printerUrl" />
@@ -61,6 +61,7 @@ export default class WebcamWrapperItem extends Mixins(BaseMixin) {
     @Prop({ type: Object, required: true }) webcam!: GuiWebcamStateWebcam
     @Prop({ type: Boolean, default: true }) showFps!: Boolean
     @Prop({ default: null }) printerUrl!: string | null
+    @Prop({ type: String, default: null }) page!: string | null
 
     get service() {
         return this.webcam?.service ?? 'unknown'

diff --git a/src/components/webcams/streamers/WebrtcMediaMTX.vue b/src/components/webcams/streamers/WebrtcMediaMTX.vue
@@ -33,6 +33,7 @@ interface OfferData {
 export default class WebrtcMediaMTX extends Mixins(BaseMixin, WebcamMixin) {
     @Prop({ required: true }) readonly camSettings!: GuiWebcamStateWebcam
     @Prop({ default: null }) readonly printerUrl!: string | null
+    @Prop({ type: String, default: null }) readonly page!: string | null
     @Ref() declare video: HTMLVideoElement
 
     pc: RTCPeerConnection | null = null
@@ -48,10 +49,6 @@ export default class WebrtcMediaMTX extends Mixins(BaseMixin, WebcamMixin) {
     }
     RESTART_PAUSE = 2000
 
-    mounted() {
-        this.start()
-    }
-
     // stop the video and close the streams if the component is going to be destroyed so we don't leave hanging streams
     beforeDestroy() {
         this.terminate()
@@ -73,16 +70,9 @@ export default class WebrtcMediaMTX extends Mixins(BaseMixin, WebcamMixin) {
     get url() {
         let baseUrl = this.camSettings.stream_url
         if (!baseUrl.endsWith('/')) baseUrl += '/'
+        baseUrl += 'whep'
 
-        try {
-            baseUrl = new URL('whep', baseUrl).toString()
-
-            return this.convertUrl(baseUrl, this.printerUrl)
-        } catch (e) {
-            this.log('invalid baseURL', baseUrl)
-
-            return null
-        }
+        return this.convertUrl(baseUrl, this.printerUrl)
     }
 
     // stop and restart the video if the url changes
@@ -93,11 +83,13 @@ export default class WebrtcMediaMTX extends Mixins(BaseMixin, WebcamMixin) {
     }
 
     get expanded(): boolean {
+        if (this.page === 'page') return true
+
         return this.$store.getters['gui/getPanelExpand']('webcam-panel', this.viewport) ?? false
     }
 
     // start or stop the video when the expanded state changes
-    @Watch('expanded')
+    @Watch('expanded', { immediate: true })
     expandChanged(newExpanded: boolean): void {
         if (!newExpanded) {
             this.terminate()

diff --git a/src/pages/Webcam.vue b/src/pages/Webcam.vue
@@ -4,7 +4,7 @@
     <div>
         <v-row>
             <v-col col-12>
-                <webcam-panel current-page="page"></webcam-panel>
+                <webcam-panel current-page="page" />
             </v-col>
         </v-row>
     </div>