From 5c4082010890e0b341754f42673affe7d1ca9d99 Mon Sep 17 00:00:00 2001 From: Stefan Dej Date: Thu, 27 Jul 2023 23:02:51 +0200 Subject: [PATCH] fix: fix flip function in several webcam clients (#1487) --- src/components/mixins/webcam.ts | 13 +++++++++++++ src/components/webcams/Hlsstreamer.vue | 11 +++++------ src/components/webcams/Ipstreamer.vue | 13 +++++++------ src/components/webcams/JMuxerStream.vue | 13 +++++++------ src/components/webcams/JanusStreamer.vue | 14 +++++++------- src/components/webcams/Mjpegstreamer.vue | 11 +++++------ src/components/webcams/MjpegstreamerAdaptive.vue | 15 +++++++-------- src/components/webcams/Uv4lMjpeg.vue | 11 +++++------ src/components/webcams/WebrtcCameraStreamer.vue | 14 +++++++------- src/components/webcams/WebrtcMediaMTX.vue | 13 +++++++------ 10 files changed, 70 insertions(+), 58 deletions(-) diff --git a/src/components/mixins/webcam.ts b/src/components/mixins/webcam.ts index 0508a3b8d..784b3dce0 100644 --- 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 index 1a45c8193..894aef4ec 100644 --- 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 index b4514acdd..9adc7ed13 100644 --- 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 index 58f38f9b7..8326a523f 100644 --- 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 index 74e39ad04..7fd0831e0 100644 --- 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 index 1e64a04d4..7d9cc1671 100644 --- 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 index 40d2c77f8..0966770d7 100644 --- 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 index c1795e41f..7b7912007 100644 --- 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 index 7c4795c07..91e8d49c7 100644 --- 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 index 65abd7892..8d2ce39fc 100644 --- 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() {