fix: fix flip function in several webcam clients (#1487)

mainsail-crew · Jul 27, 2023 · 5c40820 · 5c40820
1 parent e929c7c
commit 5c40820
Show file tree

Hide file tree

Showing 10 changed files with 70 additions and 58 deletions.
diff --git a/src/components/mixins/webcam.ts b/src/components/mixins/webcam.ts
@@ -47,4 +47,17 @@ export default class WebcamMixin extends Mixins(BaseMixin) {
                 return mdiWebcam
         }
     }
+
+    generateTransform(flip_horizontal: boolean, flip_vertical: boolean, rotation: number) {
+        let transforms = ''
+        if (flip_horizontal) transforms += ' scaleX(-1)'
+        if (flip_vertical) transforms += ' scaleY(-1)'
+        if (rotation === 180) transforms += ' rotate(180deg)'
+
+        // return transform when exist
+        if (transforms.trimStart().length) return transforms.trimStart()
+
+        // return none as fallback
+        return 'none'
+    }
 }
diff --git a/src/components/webcams/Hlsstreamer.vue b/src/components/webcams/Hlsstreamer.vue
@@ -36,17 +36,16 @@ export default class Hlsstreamer extends Mixins(BaseMixin, WebcamMixin) {
 
     get webcamStyle() {
         const output = {
-            transform: 'none',
+            transform: this.generateTransform(
+                this.camSettings.flip_horizontal ?? false,
+                this.camSettings.flip_vertical ?? false,
+                this.camSettings.rotation ?? 0
+            ),
             aspectRatio: 16 / 9,
             maxHeight: window.innerHeight - 155 + 'px',
             maxWidth: 'auto',
         }
 
-        let transforms = ''
-        if ('flipX' in this.camSettings && this.camSettings.flip_horizontal) transforms += ' scaleX(-1)'
-        if ('flipX' in this.camSettings && this.camSettings.flip_vertical) transforms += ' scaleY(-1)'
-        if (transforms.trimStart().length) return { transform: transforms.trimStart() }
-
         if (this.aspectRatio) {
             output.aspectRatio = this.aspectRatio
             output.maxWidth = (window.innerHeight - 155) * this.aspectRatio + 'px'

diff --git a/src/components/webcams/Ipstreamer.vue b/src/components/webcams/Ipstreamer.vue
@@ -20,12 +20,13 @@ export default class Ipstreamer extends Mixins(BaseMixin, WebcamMixin) {
     }
 
     get webcamStyle() {
-        let transforms = ''
-        if ('flipX' in this.camSettings && this.camSettings.flip_horizontal) transforms += ' scaleX(-1)'
-        if ('flipX' in this.camSettings && this.camSettings.flip_vertical) transforms += ' scaleY(-1)'
-        if (transforms.trimStart().length) return { transform: transforms.trimStart() }
-
-        return ''
+        return {
+            transform: this.generateTransform(
+                this.camSettings.flip_horizontal ?? false,
+                this.camSettings.flip_vertical ?? false,
+                this.camSettings.rotation ?? 0
+            ),
+        }
     }
 
     visibilityChanged(isVisible: boolean) {

diff --git a/src/components/webcams/JMuxerStream.vue b/src/components/webcams/JMuxerStream.vue
@@ -34,12 +34,13 @@ export default class JMuxerStreamer extends Mixins(BaseMixin, WebcamMixin) {
     }
 
     get webcamStyle() {
-        let transforms = ''
-        if ('flipX' in this.camSettings && this.camSettings.flip_horizontal) transforms += ' scaleX(-1)'
-        if ('flipX' in this.camSettings && this.camSettings.flip_vertical) transforms += ' scaleY(-1)'
-        if (transforms.trimStart().length) return { transform: transforms.trimStart() }
-
-        return ''
+        return {
+            transform: this.generateTransform(
+                this.camSettings.flip_horizontal ?? false,
+                this.camSettings.flip_vertical ?? false,
+                this.camSettings.rotation ?? 0
+            ),
+        }
     }
 
     mounted() {

diff --git a/src/components/webcams/JanusStreamer.vue b/src/components/webcams/JanusStreamer.vue
@@ -24,9 +24,10 @@ import { JanusJs, JanusSession, JanusStreamingPlugin } from 'typed_janus_js'
 import BaseMixin from '@/components/mixins/base'
 import { ConstructorOptions } from 'typed_janus_js/src/interfaces/janus'
 import { GuiWebcamStateWebcam } from '@/store/gui/webcams/types'
+import WebcamMixin from '@/components/mixins/webcam'
 
 @Component
-export default class JanusStreamer extends Mixins(BaseMixin) {
+export default class JanusStreamer extends Mixins(BaseMixin, WebcamMixin) {
     private janusClient: JanusJs | null = null
     private session: JanusSession | null = null
     private handle: JanusStreamingPlugin | null = null
@@ -60,15 +61,14 @@ export default class JanusStreamer extends Mixins(BaseMixin) {
 
     get webcamStyle() {
         const output = {
-            transform: 'none',
+            transform: this.generateTransform(
+                this.camSettings.flip_horizontal ?? false,
+                this.camSettings.flip_vertical ?? false,
+                this.camSettings.rotation ?? 0
+            ),
             aspectRatio: 16 / 9,
         }
 
-        let transforms = ''
-        if ('flipX' in this.camSettings && this.camSettings.flip_horizontal) transforms += ' scaleX(-1)'
-        if ('flipX' in this.camSettings && this.camSettings.flip_vertical) transforms += ' scaleY(-1)'
-        if (transforms.trimStart().length) output.transform = transforms.trimStart()
-
         if (this.aspectRatio) output.aspectRatio = this.aspectRatio
 
         return output

diff --git a/src/components/webcams/Mjpegstreamer.vue b/src/components/webcams/Mjpegstreamer.vue
@@ -50,17 +50,16 @@ export default class Mjpegstreamer extends Mixins(BaseMixin, WebcamMixin) {
 
     get webcamStyle() {
         const output = {
-            transform: 'none',
+            transform: this.generateTransform(
+                this.camSettings.flip_horizontal ?? false,
+                this.camSettings.flip_vertical ?? false,
+                this.camSettings.rotation ?? 0
+            ),
             aspectRatio: 16 / 9,
             maxHeight: window.innerHeight - 155 + 'px',
             maxWidth: 'auto',
         }
 
-        let transforms = ''
-        if ('flipX' in this.camSettings && this.camSettings.flip_horizontal) transforms += ' scaleX(-1)'
-        if ('flipX' in this.camSettings && this.camSettings.flip_vertical) transforms += ' scaleY(-1)'
-        if (transforms.trimStart().length) output.transform = transforms.trimStart()
-
         if (this.aspectRatio) {
             output.aspectRatio = this.aspectRatio
             output.maxWidth = (window.innerHeight - 155) * this.aspectRatio + 'px'

diff --git a/src/components/webcams/MjpegstreamerAdaptive.vue b/src/components/webcams/MjpegstreamerAdaptive.vue
@@ -21,9 +21,10 @@ import Component from 'vue-class-component'
 import { Mixins, Prop, Watch } from 'vue-property-decorator'
 import BaseMixin from '@/components/mixins/base'
 import { GuiWebcamStateWebcam } from '@/store/gui/webcams/types'
+import WebcamMixin from '@/components/mixins/webcam'
 
 @Component
-export default class MjpegstreamerAdaptive extends Mixins(BaseMixin) {
+export default class MjpegstreamerAdaptive extends Mixins(BaseMixin, WebcamMixin) {
     private refresh = Math.ceil(Math.random() * Math.pow(10, 12))
     private isVisible = true
     private isVisibleDocument = true
@@ -51,18 +52,16 @@ export default class MjpegstreamerAdaptive extends Mixins(BaseMixin) {
 
     get webcamStyle() {
         const output = {
-            transform: 'none',
+            transform: this.generateTransform(
+                this.camSettings.flip_horizontal ?? false,
+                this.camSettings.flip_vertical ?? false,
+                this.camSettings.rotation ?? 0
+            ),
             aspectRatio: 16 / 9,
             maxHeight: window.innerHeight - 155 + 'px',
             maxWidth: 'auto',
         }
 
-        let transforms = ''
-        if (this.camSettings.flip_horizontal ?? false) transforms += ' scaleX(-1)'
-        if (this.camSettings.flip_vertical ?? false) transforms += ' scaleY(-1)'
-        if ((this.camSettings.rotation ?? 0) === 180) transforms += ' rotate(180deg)'
-        if (transforms.trimStart().length) output.transform = transforms.trimStart()
-
         if (this.aspectRatio) {
             output.aspectRatio = this.aspectRatio
             output.maxWidth = (window.innerHeight - 155) * this.aspectRatio + 'px'

diff --git a/src/components/webcams/Uv4lMjpeg.vue b/src/components/webcams/Uv4lMjpeg.vue
@@ -35,17 +35,16 @@ export default class Uv4lMjpeg extends Mixins(BaseMixin, WebcamMixin) {
 
     get webcamStyle() {
         const output = {
-            transform: 'none',
+            transform: this.generateTransform(
+                this.camSettings.flip_horizontal ?? false,
+                this.camSettings.flip_vertical ?? false,
+                this.camSettings.rotation ?? 0
+            ),
             aspectRatio: 16 / 9,
             maxHeight: window.innerHeight - 155 + 'px',
             maxWidth: 'auto',
         }
 
-        let transforms = ''
-        if ('flipX' in this.camSettings && this.camSettings.flip_horizontal) transforms += ' scaleX(-1)'
-        if ('flipX' in this.camSettings && this.camSettings.flip_vertical) transforms += ' scaleY(-1)'
-        if (transforms.trimStart().length) output.transform = transforms.trimStart()
-
         if (this.aspectRatio) {
             output.aspectRatio = this.aspectRatio
             output.maxWidth = (window.innerHeight - 155) * this.aspectRatio + 'px'

diff --git a/src/components/webcams/WebrtcCameraStreamer.vue b/src/components/webcams/WebrtcCameraStreamer.vue
@@ -21,9 +21,10 @@
 import { Component, Mixins, Prop, Ref, Watch } from 'vue-property-decorator'
 import BaseMixin from '@/components/mixins/base'
 import { GuiWebcamStateWebcam } from '@/store/gui/webcams/types'
+import WebcamMixin from '@/components/mixins/webcam'
 
 @Component
-export default class WebrtcCameraStreamer extends Mixins(BaseMixin) {
+export default class WebrtcCameraStreamer extends Mixins(BaseMixin, WebcamMixin) {
     private pc: RTCPeerConnection | null = null
     private useStun = false
     private remote_pc_id: string | null = null
@@ -46,15 +47,14 @@ export default class WebrtcCameraStreamer extends Mixins(BaseMixin) {
 
     get webcamStyle() {
         const output = {
-            transform: 'none',
+            transform: this.generateTransform(
+                this.camSettings.flip_horizontal ?? false,
+                this.camSettings.flip_vertical ?? false,
+                this.camSettings.rotation ?? 0
+            ),
             aspectRatio: 16 / 9,
         }
 
-        let transforms = ''
-        if ('flipX' in this.camSettings && this.camSettings.flip_horizontal) transforms += ' scaleX(-1)'
-        if ('flipX' in this.camSettings && this.camSettings.flip_vertical) transforms += ' scaleY(-1)'
-        if (transforms.trimStart().length) output.transform = transforms.trimStart()
-
         if (this.aspectRatio) output.aspectRatio = this.aspectRatio
 
         return output

diff --git a/src/components/webcams/WebrtcMediaMTX.vue b/src/components/webcams/WebrtcMediaMTX.vue
@@ -47,12 +47,13 @@ export default class WebrtcRTSPSimpleServer extends Mixins(BaseMixin, WebcamMixi
     }
 
     get webcamStyle() {
-        let transforms = ''
-        if ('flipX' in this.camSettings && this.camSettings.flip_horizontal) transforms += ' scaleX(-1)'
-        if ('flipX' in this.camSettings && this.camSettings.flip_vertical) transforms += ' scaleY(-1)'
-        if (transforms.trimStart().length) return { transform: transforms.trimStart() }
-
-        return ''
+        return {
+            transform: this.generateTransform(
+                this.camSettings.flip_horizontal ?? false,
+                this.camSettings.flip_vertical ?? false,
+                this.camSettings.rotation ?? 0
+            ),
+        }
     }
 
     get url() {