From f3a70001a0c89cee7795c3191f64c93efa31445d Mon Sep 17 00:00:00 2001 From: Stefan Dej Date: Sat, 24 Jun 2023 22:57:25 +0200 Subject: [PATCH 01/25] refactor: use moonraker webcam api instead of direct database access Signed-off-by: Stefan Dej --- src/store/farm/printer/getters.ts | 4 ++-- src/store/gui/webcams/actions.ts | 13 +++++++----- src/store/gui/webcams/getters.ts | 8 ++++---- src/store/gui/webcams/index.ts | 2 +- src/store/gui/webcams/types.ts | 34 +++++++++++++++++++++---------- 5 files changed, 38 insertions(+), 23 deletions(-) diff --git a/src/store/farm/printer/getters.ts b/src/store/farm/printer/getters.ts index 41406c149..29c7ce651 100644 --- a/src/store/farm/printer/getters.ts +++ b/src/store/farm/printer/getters.ts @@ -310,11 +310,11 @@ export const getters: GetterTree = { getPrinterWebcams: (state) => { const webcams: GuiWebcamStateWebcam[] = [] - if (state.data.webcams) { + /*if (state.data.webcams) { Object.keys(state.data.webcams).forEach((id: string) => { webcams.push({ ...state.data?.webcams[id], id }) }) - } + }*/ return webcams }, diff --git a/src/store/gui/webcams/actions.ts b/src/store/gui/webcams/actions.ts index 49278044b..7f1449299 100644 --- a/src/store/gui/webcams/actions.ts +++ b/src/store/gui/webcams/actions.ts @@ -11,16 +11,19 @@ export const actions: ActionTree = { init() { window.console.debug('init gui/webcams') - Vue.$socket.emit('server.database.get_item', { namespace: 'webcams' }, { action: 'gui/webcams/initStore' }) + //Vue.$socket.emit('server.database.get_item', { namespace: 'webcams' }, { action: 'gui/webcams/initStore' }) + Vue.$socket.emit('server.webcams.list', {}, { action: 'gui/webcams/initStore' }) }, async initStore({ commit, dispatch }, payload) { - await commit('reset') - await commit('initStore', payload) + window.console.log('initStore', payload) + + //await commit('reset') + //await commit('initStore', payload) await dispatch('socket/removeInitModule', 'gui/webcam/init', { root: true }) }, - upload(_, payload) { + /*upload(_, payload) { Vue.$socket.emit('server.database.post_item', { namespace: 'webcams', key: payload.id, value: payload.value }) }, @@ -52,5 +55,5 @@ export const actions: ActionTree = { delete({ commit }, payload) { commit('delete', payload) Vue.$socket.emit('server.database.delete_item', { namespace: 'webcams', key: payload }) - }, + },*/ } diff --git a/src/store/gui/webcams/getters.ts b/src/store/gui/webcams/getters.ts index 77720e1f6..a6a7b74f6 100644 --- a/src/store/gui/webcams/getters.ts +++ b/src/store/gui/webcams/getters.ts @@ -6,16 +6,16 @@ export const getters: GetterTree = { getWebcams: (state) => { const webcams: GuiWebcamStateWebcam[] = [] - Object.keys(state.webcams).forEach((id: string) => { + /*Object.keys(state.webcams).forEach((id: string) => { webcams.push({ ...state.webcams[id], id }) - }) + })*/ return webcams }, getWebcam: (state, getters) => (camId: string) => { - const webcams = getters['getWebcams'] ?? [] + /*const webcams = getters['getWebcams'] ?? [] - return webcams.find((webcam: GuiWebcamStateWebcam) => webcam.id === camId) + return webcams.find((webcam: GuiWebcamStateWebcam) => webcam.id === camId)*/ }, } diff --git a/src/store/gui/webcams/index.ts b/src/store/gui/webcams/index.ts index 4fa4b81d6..67e98bd1d 100644 --- a/src/store/gui/webcams/index.ts +++ b/src/store/gui/webcams/index.ts @@ -6,7 +6,7 @@ import { GuiWebcamState } from '@/store/gui/webcams/types' export const getDefaultState = (): GuiWebcamState => { return { - webcams: {}, + webcams: [], } } diff --git a/src/store/gui/webcams/types.ts b/src/store/gui/webcams/types.ts index 16e55b13d..24c6f0625 100644 --- a/src/store/gui/webcams/types.ts +++ b/src/store/gui/webcams/types.ts @@ -1,18 +1,30 @@ export interface GuiWebcamState { - webcams: { - [key: string]: GuiWebcamStateWebcam - } + webcams: GuiWebcamStateWebcam[] } export interface GuiWebcamStateWebcam { - id?: string name: string + location: string + service: + | 'hlsstream' + | 'ipstream' + | 'jmuxer-stream' + | 'mjpegstreamer' + | 'mjpegstreamer-adaptive' + | 'uv4l-mjpeg' + | 'webrtc-camerastreamer' + | 'webrtc-janus' + | 'webrtc-mediamtx' + enabled: boolean icon: string - service: 'mjpegstreamer' | 'mjpegstreamer-adaptive' | 'uv4l-mjpeg' | 'ipstream' - targetFps: number - urlStream: string - urlSnapshot: string - rotate?: number - flipX: boolean - flipY: boolean + target_fps: number + target_fps_idle: number + stream_url: string + snapshot_url: string + flip_horizontal: boolean + flip_vertical: boolean + rotation: number + aspect_ratio: string + extra_data: {} + source: 'config' | 'database' } From e69b34b05d363bd0da3182496ecc748dfe472f79 Mon Sep 17 00:00:00 2001 From: Stefan Dej Date: Sun, 25 Jun 2023 10:52:02 +0200 Subject: [PATCH 02/25] refactor: initStore of gui/webcams Signed-off-by: Stefan Dej --- src/store/gui/webcams/actions.ts | 7 ++----- src/store/gui/webcams/mutations.ts | 2 +- 2 files changed, 3 insertions(+), 6 deletions(-) diff --git a/src/store/gui/webcams/actions.ts b/src/store/gui/webcams/actions.ts index 7f1449299..40b69d036 100644 --- a/src/store/gui/webcams/actions.ts +++ b/src/store/gui/webcams/actions.ts @@ -1,7 +1,6 @@ import { ActionTree } from 'vuex' import { RootState } from '@/store/types' import { GuiWebcamState } from '@/store/gui/webcams/types' -import { v4 as uuidv4 } from 'uuid' import Vue from 'vue' export const actions: ActionTree = { @@ -16,10 +15,8 @@ export const actions: ActionTree = { }, async initStore({ commit, dispatch }, payload) { - window.console.log('initStore', payload) - - //await commit('reset') - //await commit('initStore', payload) + await commit('reset') + await commit('initStore', payload.webcams) await dispatch('socket/removeInitModule', 'gui/webcam/init', { root: true }) }, diff --git a/src/store/gui/webcams/mutations.ts b/src/store/gui/webcams/mutations.ts index 2c5062626..4e5694dc0 100644 --- a/src/store/gui/webcams/mutations.ts +++ b/src/store/gui/webcams/mutations.ts @@ -9,7 +9,7 @@ export const mutations: MutationTree = { }, initStore(state, payload) { - Vue.set(state, 'webcams', payload.value) + Vue.set(state, 'webcams', payload) }, store(state, payload) { From bdd1518549d96918df85691b8692b7dac1c84738 Mon Sep 17 00:00:00 2001 From: Stefan Dej Date: Mon, 26 Jun 2023 01:01:40 +0200 Subject: [PATCH 03/25] chore: update moonraker min version Signed-off-by: Stefan Dej --- src/store/variables.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/store/variables.ts b/src/store/variables.ts index a99119bca..d2a847be4 100644 --- a/src/store/variables.ts +++ b/src/store/variables.ts @@ -2,7 +2,7 @@ export const defaultLogoColor = '#D41216' export const defaultPrimaryColor = '#2196f3' export const minKlipperVersion = 'v0.11.0-97' -export const minMoonrakerVersion = 'v0.7.1-797' +export const minMoonrakerVersion = 'v0.8.0-38' export const colorArray = ['#F44336', '#8e379d', '#03DAC5', '#3F51B5', '#ffde03', '#009688', '#E91E63'] From fc94ba01647ddb00b0004f5209d65ba2c441a749 Mon Sep 17 00:00:00 2001 From: Stefan Dej Date: Mon, 26 Jun 2023 01:02:05 +0200 Subject: [PATCH 04/25] refactor: add notify_webcams_changed Signed-off-by: Stefan Dej --- src/store/socket/actions.ts | 4 ++++ 1 file changed, 4 insertions(+) diff --git a/src/store/socket/actions.ts b/src/store/socket/actions.ts index c2f399682..4268e8bfd 100644 --- a/src/store/socket/actions.ts +++ b/src/store/socket/actions.ts @@ -124,6 +124,10 @@ export const actions: ActionTree = { dispatch('server/announcements/getWaked', payload.params[0], { root: true }) break + case 'notify_webcams_changed': + dispatch('gui/webcams/initStore', payload.params[0], { root: true }) + break + default: window.console.debug(payload) } From 7326a9ff54faac202ff607fc61d5fee770dd5490 Mon Sep 17 00:00:00 2001 From: Stefan Dej Date: Mon, 26 Jun 2023 01:02:32 +0200 Subject: [PATCH 05/25] refactor: update GuiWebcamStateWebcam type Signed-off-by: Stefan Dej --- src/store/gui/webcams/types.ts | 10 +++++----- 1 file changed, 5 insertions(+), 5 deletions(-) diff --git a/src/store/gui/webcams/types.ts b/src/store/gui/webcams/types.ts index 24c6f0625..1fa1385bb 100644 --- a/src/store/gui/webcams/types.ts +++ b/src/store/gui/webcams/types.ts @@ -4,7 +4,7 @@ export interface GuiWebcamState { export interface GuiWebcamStateWebcam { name: string - location: string + location?: string service: | 'hlsstream' | 'ipstream' @@ -18,13 +18,13 @@ export interface GuiWebcamStateWebcam { enabled: boolean icon: string target_fps: number - target_fps_idle: number + target_fps_idle?: number stream_url: string snapshot_url: string flip_horizontal: boolean flip_vertical: boolean rotation: number - aspect_ratio: string - extra_data: {} - source: 'config' | 'database' + aspect_ratio?: string + extra_data?: {} + source?: 'config' | 'database' } From 2098ae3ee283c6cf3fbd537efe45ea774c2febdf Mon Sep 17 00:00:00 2001 From: Stefan Dej Date: Mon, 26 Jun 2023 01:03:58 +0200 Subject: [PATCH 06/25] refactor: update webcam settings to moonraker API Signed-off-by: Stefan Dej --- .../settings/SettingsWebcamsTab.vue | 406 ++---------------- .../settings/Webcams/WebcamForm.vue | 324 ++++++++++++++ .../settings/Webcams/WebcamListEntry.vue | 71 +++ src/store/gui/webcams/actions.ts | 38 +- src/store/gui/webcams/getters.ts | 14 +- src/store/gui/webcams/mutations.ts | 21 +- 6 files changed, 452 insertions(+), 422 deletions(-) create mode 100644 src/components/settings/Webcams/WebcamForm.vue create mode 100644 src/components/settings/Webcams/WebcamListEntry.vue diff --git a/src/components/settings/SettingsWebcamsTab.vue b/src/components/settings/SettingsWebcamsTab.vue index 9e01983f6..274805afe 100644 --- a/src/components/settings/SettingsWebcamsTab.vue +++ b/src/components/settings/SettingsWebcamsTab.vue @@ -1,28 +1,14 @@ @@ -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..0e16e9e21 --- /dev/null +++ b/src/components/settings/Webcams/WebcamListEntry.vue @@ -0,0 +1,71 @@ + + + + + diff --git a/src/store/gui/webcams/actions.ts b/src/store/gui/webcams/actions.ts index 40b69d036..62d1abe07 100644 --- a/src/store/gui/webcams/actions.ts +++ b/src/store/gui/webcams/actions.ts @@ -1,6 +1,6 @@ import { ActionTree } from 'vuex' import { RootState } from '@/store/types' -import { GuiWebcamState } from '@/store/gui/webcams/types' +import { GuiWebcamState, GuiWebcamStateWebcam } from '@/store/gui/webcams/types' import Vue from 'vue' export const actions: ActionTree = { @@ -10,7 +10,6 @@ export const actions: ActionTree = { init() { window.console.debug('init gui/webcams') - //Vue.$socket.emit('server.database.get_item', { namespace: 'webcams' }, { action: 'gui/webcams/initStore' }) Vue.$socket.emit('server.webcams.list', {}, { action: 'gui/webcams/initStore' }) }, @@ -20,37 +19,16 @@ export const actions: ActionTree = { await dispatch('socket/removeInitModule', 'gui/webcam/init', { root: true }) }, - /*upload(_, payload) { - Vue.$socket.emit('server.database.post_item', { namespace: 'webcams', key: payload.id, value: payload.value }) + store(_, payload) { + Vue.$socket.emit('server.webcams.post_item', payload) }, - store({ commit, dispatch, state }, payload) { - const id = uuidv4() - - commit('store', { id, values: payload.values }) - dispatch('upload', { - id, - value: state.webcams[id], - }) + update({ dispatch }, payload: { webcam: GuiWebcamStateWebcam; oldWebcamName: string }) { + Vue.$socket.emit('server.webcams.post_item', payload.webcam) + if (payload.webcam.name !== payload.oldWebcamName) dispatch('delete', payload.oldWebcamName) }, - update({ commit, dispatch, state, rootState }, payload) { - commit('update', payload) - dispatch('upload', { - id: payload.id, - value: state.webcams[payload.id], - }) - - if ( - rootState.server?.components.includes('timelapse') && - rootState.server?.timelapse?.settings.camera === payload.id - ) { - dispatch('server/timelapse/saveSetting', { camera: payload.id }, { root: true }) - } + delete(_, payload: string) { + Vue.$socket.emit('server.webcams.delete_item', { name: payload }) }, - - delete({ commit }, payload) { - commit('delete', payload) - Vue.$socket.emit('server.database.delete_item', { namespace: 'webcams', key: payload }) - },*/ } diff --git a/src/store/gui/webcams/getters.ts b/src/store/gui/webcams/getters.ts index a6a7b74f6..c90305228 100644 --- a/src/store/gui/webcams/getters.ts +++ b/src/store/gui/webcams/getters.ts @@ -4,18 +4,12 @@ import { GuiWebcamState, GuiWebcamStateWebcam } from '@/store/gui/webcams/types' // eslint-disable-next-line export const getters: GetterTree = { getWebcams: (state) => { - const webcams: GuiWebcamStateWebcam[] = [] - - /*Object.keys(state.webcams).forEach((id: string) => { - webcams.push({ ...state.webcams[id], id }) - })*/ - - return webcams + return state.webcams.filter((webcam: GuiWebcamStateWebcam) => webcam.enabled) }, - getWebcam: (state, getters) => (camId: string) => { - /*const webcams = getters['getWebcams'] ?? [] + getWebcam: (state, getters) => (name: string) => { + const webcams = getters['getWebcams'] ?? [] - return webcams.find((webcam: GuiWebcamStateWebcam) => webcam.id === camId)*/ + return webcams.find((webcam: GuiWebcamStateWebcam) => webcam.name === name) }, } diff --git a/src/store/gui/webcams/mutations.ts b/src/store/gui/webcams/mutations.ts index 4e5694dc0..be4867f3f 100644 --- a/src/store/gui/webcams/mutations.ts +++ b/src/store/gui/webcams/mutations.ts @@ -1,6 +1,6 @@ import { getDefaultState } from './index' import { MutationTree } from 'vuex' -import { GuiWebcamState } from '@/store/gui/webcams/types' +import { GuiWebcamState, GuiWebcamStateWebcam } from '@/store/gui/webcams/types' import Vue from 'vue' export const mutations: MutationTree = { @@ -11,23 +11,4 @@ export const mutations: MutationTree = { initStore(state, payload) { Vue.set(state, 'webcams', payload) }, - - store(state, payload) { - Vue.set(state.webcams, payload.id, payload.values) - }, - - update(state, payload) { - if (payload.id in state.webcams) { - const webcam = { ...state.webcams[payload.id] } - Object.assign(webcam, payload.values) - - Vue.set(state.webcams, payload.id, webcam) - } - }, - - delete(state, payload) { - if (payload in state.webcams) { - Vue.delete(state.webcams, payload) - } - }, } From edb34d97d979b026f6f1123e2a6f4cd32c0d0f9c Mon Sep 17 00:00:00 2001 From: Stefan Dej Date: Mon, 26 Jun 2023 01:04:53 +0200 Subject: [PATCH 07/25] refactor: update MjpegstreamerAdaptive.vue to moonraker webcam API Signed-off-by: Stefan Dej --- .../webcams/MjpegstreamerAdaptive.vue | 19 ++++++++++--------- 1 file changed, 10 insertions(+), 9 deletions(-) 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) From 10650b2b6e0550fd1754b11f9c484f2df0f1520a Mon Sep 17 00:00:00 2001 From: Stefan Dej Date: Mon, 26 Jun 2023 01:06:05 +0200 Subject: [PATCH 08/25] refactor: update Hlsstreamer.vue to moonraker webcam API Signed-off-by: Stefan Dej --- src/components/webcams/Hlsstreamer.vue | 14 ++++++-------- 1 file changed, 6 insertions(+), 8 deletions(-) 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) { From f389c5b5a82adf30603b247c841d604ed6709df7 Mon Sep 17 00:00:00 2001 From: Stefan Dej Date: Mon, 26 Jun 2023 01:07:19 +0200 Subject: [PATCH 09/25] refactor: update Ipstreamer.vue to moonraker webcam API Signed-off-by: Stefan Dej --- src/components/webcams/Ipstreamer.vue | 28 +++++++++++++-------------- 1 file changed, 13 insertions(+), 15 deletions(-) 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 @@ + + From 720136efb9d488d76d959aa00a415c0360bc6338 Mon Sep 17 00:00:00 2001 From: Stefan Dej Date: Mon, 26 Jun 2023 01:10:28 +0200 Subject: [PATCH 10/25] refactor: update JanusStreamer.vue to moonraker webcam API Signed-off-by: Stefan Dej --- src/components/webcams/JanusStreamer.vue | 16 +++++++--------- 1 file changed, 7 insertions(+), 9 deletions(-) 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() } } From 3bf1e4baee15eab7da4f0291256ecdd9b2c101e8 Mon Sep 17 00:00:00 2001 From: Stefan Dej Date: Mon, 26 Jun 2023 01:11:39 +0200 Subject: [PATCH 11/25] refactor: update JMuxerStream.vue to moonraker webcam API Signed-off-by: Stefan Dej --- src/components/webcams/JMuxerStream.vue | 16 +++++++--------- 1 file changed, 7 insertions(+), 9 deletions(-) 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, From f4217a983aac7769ba880f327d9edb922ff533e3 Mon Sep 17 00:00:00 2001 From: Stefan Dej Date: Mon, 26 Jun 2023 01:12:29 +0200 Subject: [PATCH 12/25] refactor: update Mjpegstreamer.vue to moonraker webcam API Signed-off-by: Stefan Dej --- src/components/webcams/Mjpegstreamer.vue | 14 ++++++-------- 1 file changed, 6 insertions(+), 8 deletions(-) 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) { From 844fedf442e6a04bb189a9ec3f20d2d45441f867 Mon Sep 17 00:00:00 2001 From: Stefan Dej Date: Mon, 26 Jun 2023 01:13:00 +0200 Subject: [PATCH 13/25] refactor: update Uv4lMjpeg.vue to moonraker webcam API Signed-off-by: Stefan Dej --- src/components/webcams/Uv4lMjpeg.vue | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) 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) { From 419999ab3800f66c34608f0132c6bd65a1022b55 Mon Sep 17 00:00:00 2001 From: Stefan Dej Date: Mon, 26 Jun 2023 01:13:19 +0200 Subject: [PATCH 14/25] refactor: update WebcamWrapper.vue to moonraker webcam API Signed-off-by: Stefan Dej --- src/components/webcams/WebcamWrapper.vue | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) 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 @@