diff --git a/src/components/panels/FarmPrinterPanel.vue b/src/components/panels/FarmPrinterPanel.vue index 6d5222052..377782f9e 100644 --- a/src/components/panels/FarmPrinterPanel.vue +++ b/src/components/panels/FarmPrinterPanel.vue @@ -2,10 +2,8 @@ - + {{ mdiWebcamOff }} @@ -27,9 +25,9 @@ + @click="currentCamName = webcam.name"> {{ convertWebcamIcon(webcam.icon) }} @@ -47,7 +45,7 @@
0 + if (this.printer_webcams.length == 0) return false + + return this.printer.socket.isConnected } - get printer_webcams() { + get printer_webcams(): GuiWebcamStateWebcam[] { return this.$store.getters['farm/' + this.printer._namespace + '/getPrinterWebcams'] } - get currentWebcam() { - const currentCam = this.printer_webcams.find((webcam: any) => webcam.id === this.currentCamId) + get currentWebcam(): GuiWebcamStateWebcam | null { + const currentCam = this.printer_webcams?.find( + (webcam: GuiWebcamStateWebcam) => webcam.name === this.currentCamName + ) if (currentCam) return currentCam - return false + return null + } + + get panelClass(): string[] { + let output = [] + + if (!this.printer.socket.isConnected && !this.printer.socket.isConnecting) output.push('disabledPrinter') + + return output } clickPrinter() { @@ -268,10 +279,8 @@ export default class FarmPrinterPanel extends Mixins(BaseMixin, WebcamMixin) { .v-overlay { top: 48px; } - - diff --git a/src/components/panels/WebcamPanel.vue b/src/components/panels/WebcamPanel.vue index 53155523a..9ed38b488 100644 --- a/src/components/panels/WebcamPanel.vue +++ b/src/components/panels/WebcamPanel.vue @@ -28,7 +28,7 @@ {{ $t('Panels.WebcamPanel.All') }} - + {{ convertWebcamIcon(webcam.icon) }} @@ -77,13 +77,14 @@ export default class WebcamPanel extends Mixins(BaseMixin, WebcamMixin) { return this.$store.getters['gui/webcams/getWebcams'] } + // id changed to name with the refactoring of using moonraker webcam API get currentCamId(): string { - if (this.webcams.length === 1) return this.webcams[0].id ?? 'all' + if (this.webcams.length === 1) return this.webcams[0].name ?? 'all' let currentCamId = this.$store.state.gui.view.webcam.currentCam[this.currentPage ?? ''] ?? 'all' - if (this.webcams.findIndex((webcam: GuiWebcamStateWebcam) => webcam.id === currentCamId) !== -1) + if (this.webcams.findIndex((webcam: GuiWebcamStateWebcam) => webcam.name === currentCamId) !== -1) return currentCamId - else if (currentCamId !== undefined && this.webcams.length === 1) return this.webcams[0].id ?? '' + else if (currentCamId !== undefined && this.webcams.length === 1) return this.webcams[0].name ?? '' else return 'all' } @@ -92,7 +93,7 @@ export default class WebcamPanel extends Mixins(BaseMixin, WebcamMixin) { } get currentCam(): any { - const cam = this.webcams.find((cam: GuiWebcamStateWebcam) => cam.id === this.currentCamId) + const cam = this.webcams.find((cam: GuiWebcamStateWebcam) => cam.name === this.currentCamId) return ( cam ?? { diff --git a/src/components/settings/SettingsGeneralTab.vue b/src/components/settings/SettingsGeneralTab.vue index b46e21d3d..143bd5673 100644 --- a/src/components/settings/SettingsGeneralTab.vue +++ b/src/components/settings/SettingsGeneralTab.vue @@ -129,12 +129,6 @@ hide-details class="mt-0" @change="changeNamespace('timelapse')"> - @@ -180,12 +174,6 @@ hide-details class="mt-0" @change="changeNamespace('timelapse')"> -
- +

{{ $t('Settings.WebcamsTab.Webcams') }}

-
- - - - {{ mdiPencil }} - {{ $t('Settings.Edit') }} - - - {{ mdiDelete }} - - -
+ @@ -33,161 +19,7 @@ - - - {{ - form.id === null ? $t('Settings.WebcamsTab.CreateWebcam') : $t('Settings.WebcamsTab.EditWebcam') - }} - - - - - - - - - - - - - - {{ convertWebcamIcon(icon.value) }} - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- {{ $t('Settings.WebcamsTab.FlipWebcam') }} -
- - - - - - - - - - - - - - - - - - - {{ $t('Settings.Cancel') }} - - - {{ - form.id === null - ? $t('Settings.WebcamsTab.SaveWebcam') - : $t('Settings.WebcamsTab.UpdateWebcam') - }} - - - +
@@ -196,98 +28,30 @@ import { Component, Mixins } from 'vue-property-decorator' import BaseMixin from '../mixins/base' import SettingsRow from '@/components/settings/SettingsRow.vue' -import { GuiWebcamStateWebcam } from '@/store/gui/webcams/types' -import { mdiMenuDown, mdiDelete, mdiPencil, mdiWebcam } from '@mdi/js' +import { mdiDelete, mdiPencil } from '@mdi/js' import WebcamMixin from '@/components/mixins/webcam' import { FileStateFile } from '@/store/files/types' - -interface webcamForm { - bool: boolean - id: string | null - valid: boolean - name: string - icon: string - service: string - targetFps: number - urlStream: string - urlSnapshot: string - rotate: number - flipX: boolean - flipY: boolean -} +import WebcamForm from '@/components/settings/Webcams/WebcamForm.vue' +import WebcamListEntry from '@/components/settings/Webcams/WebcamListEntry.vue' +import { GuiWebcamStateWebcam } from '@/store/gui/webcams/types' @Component({ components: { SettingsRow, + WebcamForm, + WebcamListEntry, }, }) export default class SettingsWebcamsTab extends Mixins(BaseMixin, WebcamMixin) { mdiPencil = mdiPencil mdiDelete = mdiDelete - mdiMenuDown = mdiMenuDown - - private selectIcon: boolean = false - - private form: webcamForm = { - bool: false, - id: null, - valid: false, - name: '', - icon: '', - service: '', - targetFps: 15, - urlStream: '', - urlSnapshot: '', - rotate: 0, - flipX: false, - flipY: false, - } - private rules = { - required: (value: string) => value !== '' || this.$t('Settings.WebcamsTab.Required'), - unique: (value: string) => !this.existsWebcamName(value) || this.$t('Settings.WebcamsTab.NameAlreadyExists'), - } - - private rotateItems = [ - { value: 0, text: '0°' }, - { value: 90, text: '90°' }, - { value: 180, text: '180°' }, - { value: 270, text: '270°' }, - ] - - declare $refs: { - webcamForm: any - } + private boolForm = false + private typeForm: 'create' | 'edit' = 'create' + private formWebcam: GuiWebcamStateWebcam = {} as GuiWebcamStateWebcam get webcams() { - return this.$store.getters['gui/webcams/getWebcams'] ?? [] - } - - get iconItems() { - return [ - { value: 'mdiPrinter3d', text: this.$t('Settings.WebcamsTab.IconPrinter') }, - { value: 'mdiPrinter3dNozzle', text: this.$t('Settings.WebcamsTab.IconNozzle') }, - { value: 'mdiRadiatorDisabled', text: this.$t('Settings.WebcamsTab.IconBed') }, - { value: 'mdiWebcam', text: this.$t('Settings.WebcamsTab.IconCam') }, - { value: 'mdiAlbum', text: this.$t('Settings.WebcamsTab.IconFilament') }, - { value: 'mdiDoor', text: this.$t('Settings.WebcamsTab.IconDoor') }, - { value: 'mdiRaspberryPi', text: this.$t('Settings.WebcamsTab.IconMcu') }, - { value: 'mdiCampfire', text: this.$t('Settings.WebcamsTab.IconHot') }, - ] - } - - get serviceItems() { - return [ - { value: 'mjpegstreamer', text: this.$t('Settings.WebcamsTab.Mjpegstreamer') }, - { value: 'mjpegstreamer-adaptive', text: this.$t('Settings.WebcamsTab.MjpegstreamerAdaptive') }, - { value: 'uv4l-mjpeg', text: this.$t('Settings.WebcamsTab.Uv4lMjpeg') }, - { value: 'ipstream', text: this.$t('Settings.WebcamsTab.Ipstream') }, - { value: 'webrtc-camerastreamer', text: this.$t('Settings.WebcamsTab.WebrtcCameraStreamer') }, - { value: 'webrtc-mediamtx', text: this.$t('Settings.WebcamsTab.WebrtcMediaMTX') }, - { value: 'hlsstream', text: this.$t('Settings.WebcamsTab.Hlsstream') }, - { value: 'jmuxer-stream', text: this.$t('Settings.WebcamsTab.JMuxerStream') }, - { value: 'webrtc-janus', text: this.$t('Settings.WebcamsTab.WebrtcJanus') }, - ] + return this.$store.state.gui.webcams.webcams ?? [] } get configfiles() { @@ -302,87 +66,6 @@ export default class SettingsWebcamsTab extends Mixins(BaseMixin, WebcamMixin) { return this.configfiles.findIndex((file: FileStateFile) => file.filename === 'crowsnest.conf') !== -1 } - getSubtitle(webcam: GuiWebcamStateWebcam) { - return 'URL: ' + (webcam.service === 'mjpegstreamer-adaptive' ? webcam.urlSnapshot : webcam.urlStream) - } - - existsWebcamName(name: string) { - return ( - this.webcams.findIndex( - (webcam: GuiWebcamStateWebcam) => webcam.name === name && webcam.id !== this.form.id - ) !== -1 - ) - } - - createWebcam() { - this.clearDialog() - - this.form.bool = true - } - - editWebcam(webcam: GuiWebcamStateWebcam) { - this.form.id = webcam.id ?? null - this.form.name = webcam.name - this.form.icon = webcam.icon - this.form.service = webcam.service - this.form.targetFps = webcam.targetFps - this.form.urlStream = webcam.urlStream - this.form.urlSnapshot = webcam.urlSnapshot - this.form.rotate = webcam.rotate ?? 0 - this.form.flipX = webcam.flipX - this.form.flipY = webcam.flipY - - this.form.bool = true - this.form.valid = false - - this.$nextTick(() => { - this.$refs.webcamForm?.validate() - }) - } - - saveWebcam() { - if (this.form.valid) { - const values = { - name: this.form.name, - icon: this.form.icon, - service: this.form.service, - targetFps: this.form.targetFps, - urlStream: this.form.urlStream, - urlSnapshot: this.form.urlSnapshot, - rotate: this.form.rotate, - flipX: this.form.flipX, - flipY: this.form.flipY, - } - - if (this.form.id !== null) this.$store.dispatch('gui/webcams/update', { id: this.form.id, values: values }) - else this.$store.dispatch('gui/webcams/store', { values }) - - this.clearDialog() - } - } - - deleteWebcam(id: string) { - this.$store.dispatch('gui/webcams/delete', id) - } - - clearDialog() { - this.form.bool = false - this.form.id = null - this.form.name = '' - this.form.icon = mdiWebcam - this.form.service = 'mjpegstreamer-adaptive' - this.form.targetFps = 15 - this.form.urlStream = '/webcam/?action=stream' - this.form.urlSnapshot = '/webcam/?action=snapshot' - this.form.rotate = 0 - this.form.flipX = false - this.form.flipY = false - } - - setFormIcon(icon: string) { - this.form.icon = icon - } - openCrowsnestConf() { this.$store.dispatch('editor/openFile', { root: 'config', @@ -392,36 +75,35 @@ export default class SettingsWebcamsTab extends Mixins(BaseMixin, WebcamMixin) { permissions: this.crowsnestConf?.permissions, }) } -} - - + diff --git a/src/components/settings/Webcams/WebcamForm.vue b/src/components/settings/Webcams/WebcamForm.vue new file mode 100644 index 000000000..55ae5a5e9 --- /dev/null +++ b/src/components/settings/Webcams/WebcamForm.vue @@ -0,0 +1,324 @@ + + + + + diff --git a/src/components/settings/Webcams/WebcamListEntry.vue b/src/components/settings/Webcams/WebcamListEntry.vue new file mode 100644 index 000000000..9afbb906c --- /dev/null +++ b/src/components/settings/Webcams/WebcamListEntry.vue @@ -0,0 +1,73 @@ + + + + + diff --git a/src/components/webcams/Hlsstreamer.vue b/src/components/webcams/Hlsstreamer.vue index a8c0edf16..be9adf49f 100644 --- a/src/components/webcams/Hlsstreamer.vue +++ b/src/components/webcams/Hlsstreamer.vue @@ -14,6 +14,7 @@ import { Component, Mixins, Prop } from 'vue-property-decorator' import BaseMixin from '@/components/mixins/base' import Hls from 'hls.js' +import { GuiWebcamStateWebcam } from '@/store/gui/webcams/types' @Component export default class Hlsstreamer extends Mixins(BaseMixin) { @@ -21,11 +22,8 @@ export default class Hlsstreamer extends Mixins(BaseMixin) { private isVisible = true private hls: Hls | null = null - @Prop({ required: true }) - camSettings: any - - @Prop() - printerUrl: string | undefined + @Prop({ required: true }) readonly camSettings!: GuiWebcamStateWebcam + @Prop() printerUrl: string | undefined declare $refs: { video: HTMLVideoElement @@ -34,7 +32,7 @@ export default class Hlsstreamer extends Mixins(BaseMixin) { get url() { if (!this.isVisible) return '' - return this.camSettings.urlStream || '' + return this.camSettings.stream_url || '' } get webcamStyle() { @@ -46,8 +44,8 @@ export default class Hlsstreamer extends Mixins(BaseMixin) { } let transforms = '' - if ('flipX' in this.camSettings && this.camSettings.flipX) transforms += ' scaleX(-1)' - if ('flipX' in this.camSettings && this.camSettings.flipY) transforms += ' scaleY(-1)' + 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) { diff --git a/src/components/webcams/Ipstreamer.vue b/src/components/webcams/Ipstreamer.vue index c34dba8e1..e965668a2 100644 --- a/src/components/webcams/Ipstreamer.vue +++ b/src/components/webcams/Ipstreamer.vue @@ -1,9 +1,3 @@ - - @@ -11,28 +5,26 @@ + + diff --git a/src/components/webcams/JMuxerStream.vue b/src/components/webcams/JMuxerStream.vue index 9323ae0bf..4503a0d03 100644 --- a/src/components/webcams/JMuxerStream.vue +++ b/src/components/webcams/JMuxerStream.vue @@ -14,30 +14,28 @@ import JMuxer from 'jmuxer' import { Component, Mixins, Prop, Watch } from 'vue-property-decorator' import BaseMixin from '@/components/mixins/base' +import { GuiWebcamStateWebcam } from '@/store/gui/webcams/types' @Component export default class JMuxerStreamer extends Mixins(BaseMixin) { private jmuxer: JMuxer | null = null private status: string = 'connecting' - @Prop({ required: true }) - camSettings: any - - @Prop() - printerUrl: string | undefined + @Prop({ required: true }) readonly camSettings!: GuiWebcamStateWebcam + @Prop() printerUrl: string | undefined declare $refs: { video: HTMLVideoElement } get url() { - return this.camSettings.urlStream || '' + return this.camSettings.stream_url || '' } get webcamStyle() { let transforms = '' - if ('flipX' in this.camSettings && this.camSettings.flipX) transforms += ' scaleX(-1)' - if ('flipX' in this.camSettings && this.camSettings.flipY) transforms += ' scaleY(-1)' + 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 '' @@ -59,7 +57,7 @@ export default class JMuxerStreamer extends Mixins(BaseMixin) { } const video = this.$refs.video - const targetFps = this.camSettings.targetFps || 10 + const targetFps = this.camSettings.target_fps || 10 this.jmuxer = new JMuxer({ node: video, diff --git a/src/components/webcams/JanusStreamer.vue b/src/components/webcams/JanusStreamer.vue index e7ac9a693..74e39ad04 100644 --- a/src/components/webcams/JanusStreamer.vue +++ b/src/components/webcams/JanusStreamer.vue @@ -23,6 +23,7 @@ import { Component, Mixins, Prop, Ref, Watch } from 'vue-property-decorator' 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' @Component export default class JanusStreamer extends Mixins(BaseMixin) { @@ -33,15 +34,12 @@ export default class JanusStreamer extends Mixins(BaseMixin) { private aspectRatio: null | number = null private status: string = 'connecting' - @Prop({ required: true }) - camSettings: any - + @Prop({ required: true }) readonly camSettings!: GuiWebcamStateWebcam @Prop({ default: null }) declare readonly printerUrl: string | null - @Ref() declare stream: HTMLVideoElement get url() { - const baseUrl = this.camSettings.urlStream + const baseUrl = this.camSettings.stream_url let url = new URL(baseUrl, this.printerUrl === null ? this.hostUrl.toString() : this.printerUrl) url.port = '8188' url.protocol = this.printerUrl?.startsWith('https') ? 'wss' : 'ws' @@ -56,7 +54,7 @@ export default class JanusStreamer extends Mixins(BaseMixin) { } get streamId() { - const pathnameParts = new URL(this.camSettings.urlStream).pathname.split('/') + const pathnameParts = new URL(this.camSettings.stream_url).pathname.split('/') return pathnameParts[pathnameParts.length - 1] } @@ -67,8 +65,8 @@ export default class JanusStreamer extends Mixins(BaseMixin) { } let transforms = '' - if ('flipX' in this.camSettings && this.camSettings.flipX) transforms += ' scaleX(-1)' - if ('flipX' in this.camSettings && this.camSettings.flipY) transforms += ' scaleY(-1)' + 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 @@ -132,7 +130,7 @@ export default class JanusStreamer extends Mixins(BaseMixin) { @Watch('url') async changedUrl() { await this.session?.destroy({}) - this.startStream() + await this.startStream() } } diff --git a/src/components/webcams/Mjpegstreamer.vue b/src/components/webcams/Mjpegstreamer.vue index cb389f1bb..8a079f707 100644 --- a/src/components/webcams/Mjpegstreamer.vue +++ b/src/components/webcams/Mjpegstreamer.vue @@ -14,6 +14,7 @@ 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' const CONTENT_LENGTH = 'content-length' const TYPE_JPEG = 'image/jpeg' @@ -32,11 +33,8 @@ export default class Mjpegstreamer extends Mixins(BaseMixin) { private isVisibleViewport = false private isVisibleDocument = true - @Prop({ required: true }) - camSettings: any - - @Prop() - printerUrl: string | undefined + @Prop({ required: true }) readonly camSettings!: GuiWebcamStateWebcam + @Prop() printerUrl: string | undefined @Prop({ default: true }) declare showFps: boolean @@ -46,7 +44,7 @@ export default class Mjpegstreamer extends Mixins(BaseMixin) { } get url() { - const baseUrl = this.camSettings.urlStream + const baseUrl = this.camSettings.stream_url let url = new URL(baseUrl, this.printerUrl === undefined ? this.hostUrl.toString() : this.printerUrl) if (baseUrl.startsWith('http') || baseUrl.startsWith('://')) url = new URL(baseUrl) @@ -62,8 +60,8 @@ export default class Mjpegstreamer extends Mixins(BaseMixin) { } let transforms = '' - if ('flipX' in this.camSettings && this.camSettings.flipX) transforms += ' scaleX(-1)' - if ('flipX' in this.camSettings && this.camSettings.flipY) transforms += ' scaleY(-1)' + 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) { diff --git a/src/components/webcams/MjpegstreamerAdaptive.vue b/src/components/webcams/MjpegstreamerAdaptive.vue index 2eb71ebd2..ffc4956f6 100644 --- a/src/components/webcams/MjpegstreamerAdaptive.vue +++ b/src/components/webcams/MjpegstreamerAdaptive.vue @@ -20,6 +20,7 @@ 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' @Component export default class MjpegstreamerAdaptive extends Mixins(BaseMixin) { @@ -44,7 +45,7 @@ export default class MjpegstreamerAdaptive extends Mixins(BaseMixin) { mjpegstreamerAdaptive: any } - @Prop({ required: true }) declare camSettings: any + @Prop({ required: true }) declare camSettings: GuiWebcamStateWebcam @Prop() declare printerUrl: string | undefined @Prop({ default: true }) declare showFps: boolean @@ -57,9 +58,9 @@ export default class MjpegstreamerAdaptive extends Mixins(BaseMixin) { } let transforms = '' - if (this.camSettings.flipX ?? false) transforms += ' scaleX(-1)' - if (this.camSettings.flipY ?? false) transforms += ' scaleY(-1)' - if ((this.camSettings.rotate ?? 0) === 180) transforms += ' rotate(180deg)' + 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) { @@ -75,7 +76,7 @@ export default class MjpegstreamerAdaptive extends Mixins(BaseMixin) { } get rotate() { - return [90, 270].includes(this.camSettings.rotate ?? 0) + return [90, 270].includes(this.camSettings.rotation ?? 0) } refreshFrame() { @@ -86,7 +87,7 @@ export default class MjpegstreamerAdaptive extends Mixins(BaseMixin) { } async setFrame() { - const baseUrl = this.camSettings.urlSnapshot + const baseUrl = this.camSettings.snapshot_url let url = new URL(baseUrl, this.printerUrl === undefined ? this.hostUrl.toString() : this.printerUrl) if (baseUrl.startsWith('http') || baseUrl.startsWith('://')) url = new URL(baseUrl) @@ -115,7 +116,7 @@ export default class MjpegstreamerAdaptive extends Mixins(BaseMixin) { const x = canvas.width / 2 const y = canvas.height / 2 ctx.translate(x, y) - ctx.rotate((this.camSettings.rotate * Math.PI) / 180) + ctx.rotate((this.camSettings.rotation * Math.PI) / 180) await ctx?.drawImage( frame, (-frame.width / 2) * scale, @@ -123,7 +124,7 @@ export default class MjpegstreamerAdaptive extends Mixins(BaseMixin) { frame.width * scale, frame.height * scale ) - ctx.rotate(-((this.camSettings.rotate * Math.PI) / 180)) + ctx.rotate(-((this.camSettings.rotation * Math.PI) / 180)) ctx.translate(-x, -y) } else await ctx?.drawImage(frame, 0, 0, frame.width, frame.height, 0, 0, canvas.width, canvas.height) @@ -138,7 +139,7 @@ export default class MjpegstreamerAdaptive extends Mixins(BaseMixin) { onLoad() { this.isLoaded = true - const targetFps = this.camSettings.targetFps || 10 + const targetFps = this.camSettings.target_fps || 10 const end_time = performance.now() const current_time = end_time - this.start_time this.time = this.time * this.time_smoothing + current_time * (1.0 - this.time_smoothing) diff --git a/src/components/webcams/Uv4lMjpeg.vue b/src/components/webcams/Uv4lMjpeg.vue index b342cfa8b..9fe64e4d1 100644 --- a/src/components/webcams/Uv4lMjpeg.vue +++ b/src/components/webcams/Uv4lMjpeg.vue @@ -29,7 +29,7 @@ export default class Uv4lMjpeg extends Mixins(BaseMixin) { } get url() { - const baseUrl = this.camSettings.urlStream + const baseUrl = this.camSettings.stream_url let url = new URL(baseUrl, this.printerUrl === undefined ? this.hostUrl.toString() : this.printerUrl) if (baseUrl.startsWith('http') || baseUrl.startsWith('://')) url = new URL(baseUrl) @@ -45,8 +45,8 @@ export default class Uv4lMjpeg extends Mixins(BaseMixin) { } let transforms = '' - if ('flipX' in this.camSettings && this.camSettings.flipX) transforms += ' scaleX(-1)' - if ('flipX' in this.camSettings && this.camSettings.flipY) transforms += ' scaleY(-1)' + 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) { diff --git a/src/components/webcams/WebcamWrapper.vue b/src/components/webcams/WebcamWrapper.vue index 9ad383716..ccbfac6e7 100644 --- a/src/components/webcams/WebcamWrapper.vue +++ b/src/components/webcams/WebcamWrapper.vue @@ -3,7 +3,7 @@