fix: fix aspectRatio in MjpegstreamerAdaptive (#1707)

* fix: fix aspectRatio in MjpegstreamerAdaptive Signed-off-by: Stefan Dej <[email protected]> * refactor: calc aspectRatio Signed-off-by: Stefan Dej <[email protected]> --------- Signed-off-by: Stefan Dej <[email protected]>
mainsail-crew · Dec 26, 2023 · 5b02b12 · 5b02b12
1 parent 4743eff
commit 5b02b12
Show file tree

Hide file tree

Showing 2 changed files with 20 additions and 28 deletions.
diff --git a/src/components/webcams/streamers/Mjpegstreamer.vue b/src/components/webcams/streamers/Mjpegstreamer.vue
@@ -133,7 +133,6 @@ export default class Mjpegstreamer extends Mixins(BaseMixin, WebcamMixin) {
                             return reader?.read().then(({ done, value }) => {
                                 // If there is no more data to read
                                 if (done) {
-                                    window.console.log('done')
                                     controller.close()
                                     return
                                 }
@@ -205,8 +204,8 @@ export default class Mjpegstreamer extends Mixins(BaseMixin, WebcamMixin) {
         this.startStream()
     }
 
-    @Watch('url')
-    urlChanged() {
+    @Watch('camSettings', { immediate: true, deep: true })
+    camSettingsChanged() {
         this.aspectRatio = null
         this.restartStream()
     }
@@ -236,9 +235,9 @@ export default class Mjpegstreamer extends Mixins(BaseMixin, WebcamMixin) {
     }
 
     onload() {
-        if (this.aspectRatio === null && this.$refs.image) {
-            this.aspectRatio = this.$refs.image.naturalWidth / this.$refs.image.naturalHeight
-        }
+        if (this.aspectRatio !== null || !this.$refs.image) return
+
+        this.aspectRatio = this.$refs.image.naturalWidth / this.$refs.image.naturalHeight
     }
 }
 </script>

diff --git a/src/components/webcams/streamers/MjpegstreamerAdaptive.vue b/src/components/webcams/streamers/MjpegstreamerAdaptive.vue
@@ -1,15 +1,15 @@
 <template>
     <div style="position: relative" class="d-flex justify-center">
         <div v-if="!isLoaded" class="text-center py-5">
-            <v-progress-circular indeterminate color="primary"></v-progress-circular>
+            <v-progress-circular indeterminate color="primary" />
         </div>
         <canvas
-            ref="mjpegstreamerAdaptive"
+            ref="image"
             v-observe-visibility="viewportVisibilityChanged"
             width="600"
             height="400"
             :style="webcamStyle"
-            :class="'webcamImage ' + (isLoaded ? '' : 'hiddenWebcam')"></canvas>
+            :class="'webcamImage ' + (isLoaded ? '' : 'hiddenWebcam')" />
         <span v-if="isLoaded && showFpsCounter" class="webcamFpsOutput">
             {{ $t('Panels.WebcamPanel.FPS') }}: {{ fpsOutput }}
         </span>
@@ -18,7 +18,7 @@
 
 <script lang="ts">
 import Component from 'vue-class-component'
-import { Mixins, Prop, Watch } from 'vue-property-decorator'
+import { Mixins, Prop } from 'vue-property-decorator'
 import BaseMixin from '@/components/mixins/base'
 import { GuiWebcamStateWebcam } from '@/store/gui/webcams/types'
 import WebcamMixin from '@/components/mixins/webcam'
@@ -43,7 +43,7 @@ export default class MjpegstreamerAdaptive extends Mixins(BaseMixin, WebcamMixin
     private aspectRatio: null | number = null
 
     declare $refs: {
-        mjpegstreamerAdaptive: any
+        image: any
     }
 
     @Prop({ required: true }) declare camSettings: GuiWebcamStateWebcam
@@ -89,10 +89,10 @@ export default class MjpegstreamerAdaptive extends Mixins(BaseMixin, WebcamMixin
     }
 
     refreshFrame() {
-        if (this.isVisible) {
-            this.refresh = new Date().getTime()
-            this.setFrame()
-        }
+        if (!this.isVisible) return
+
+        this.refresh = new Date().getTime()
+        this.setFrame()
     }
 
     async setFrame() {
@@ -102,19 +102,17 @@ export default class MjpegstreamerAdaptive extends Mixins(BaseMixin, WebcamMixin
         this.request_start_time = performance.now()
         this.currentFPS = this.time > 0 ? Math.round(1000 / this.time) : 0
 
-        let canvas = this.$refs.mjpegstreamerAdaptive
+        let canvas = this.$refs.image
         if (canvas) {
             const ctx = canvas.getContext('2d')
             const frame: any = await this.loadImage(url.toString())
 
+            this.aspectRatio = frame.naturalWidth / frame.naturalHeight
+            if (this.rotate) this.aspectRatio = 1 / this.aspectRatio
+
+            // set canvas sizes
             canvas.width = canvas.clientWidth
-            if (this.rotate) {
-                if (this.aspectRatio === null) this.aspectRatio = frame.height / frame.width
-                canvas.height = canvas.clientWidth / this.aspectRatio
-            } else {
-                if (this.aspectRatio === null) this.aspectRatio = frame.width / frame.height
-                canvas.height = canvas.clientWidth * this.aspectRatio
-            }
+            canvas.height = canvas.clientWidth / this.aspectRatio
 
             if (this.rotate) {
                 const scale = canvas.height / frame.width
@@ -212,11 +210,6 @@ export default class MjpegstreamerAdaptive extends Mixins(BaseMixin, WebcamMixin
         clearTimeout(this.timer)
         this.timer = undefined
     }
-
-    @Watch('camSettings', { immediate: true, deep: true })
-    camSettingsChanged() {
-        this.aspectRatio = null
-    }
 }
 </script>