Skip to content

Commit

Permalink
fix: fix flip function in several webcam clients (mainsail-crew#1487)
Browse files Browse the repository at this point in the history
  • Loading branch information
meteyou authored Jul 27, 2023
1 parent e929c7c commit 5c40820
Show file tree
Hide file tree
Showing 10 changed files with 70 additions and 58 deletions.
13 changes: 13 additions & 0 deletions src/components/mixins/webcam.ts
Original file line number Diff line number Diff line change
Expand Up @@ -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'
}
}
11 changes: 5 additions & 6 deletions src/components/webcams/Hlsstreamer.vue
Original file line number Diff line number Diff line change
Expand Up @@ -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'
Expand Down
13 changes: 7 additions & 6 deletions src/components/webcams/Ipstreamer.vue
Original file line number Diff line number Diff line change
Expand Up @@ -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) {
Expand Down
13 changes: 7 additions & 6 deletions src/components/webcams/JMuxerStream.vue
Original file line number Diff line number Diff line change
Expand Up @@ -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() {
Expand Down
14 changes: 7 additions & 7 deletions src/components/webcams/JanusStreamer.vue
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand Down Expand Up @@ -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
Expand Down
11 changes: 5 additions & 6 deletions src/components/webcams/Mjpegstreamer.vue
Original file line number Diff line number Diff line change
Expand Up @@ -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'
Expand Down
15 changes: 7 additions & 8 deletions src/components/webcams/MjpegstreamerAdaptive.vue
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand Down Expand Up @@ -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'
Expand Down
11 changes: 5 additions & 6 deletions src/components/webcams/Uv4lMjpeg.vue
Original file line number Diff line number Diff line change
Expand Up @@ -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'
Expand Down
14 changes: 7 additions & 7 deletions src/components/webcams/WebrtcCameraStreamer.vue
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand All @@ -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
Expand Down
13 changes: 7 additions & 6 deletions src/components/webcams/WebrtcMediaMTX.vue
Original file line number Diff line number Diff line change
Expand Up @@ -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() {
Expand Down

0 comments on commit 5c40820

Please sign in to comment.