fix webcam url in printer farm

Signed-off-by: Stefan Dej <meteyou@gmail.com>
This commit is contained in:
Stefan Dej 2021-04-13 22:10:43 +02:00
parent 6825f6c39e
commit e814ea5169
9 changed files with 52 additions and 16 deletions

View File

@ -71,7 +71,7 @@
<webcam-mjpegstreamer :cam-settings="currentWebcam"></webcam-mjpegstreamer>
</template>
<template v-if="'service' in currentWebcam && currentWebcam.service === 'mjpegstreamer-adaptive'">
<webcam-mjpegstreamer-adaptive :cam-settings="currentWebcam"></webcam-mjpegstreamer-adaptive>
<webcam-mjpegstreamer-adaptive :cam-settings="currentWebcam" :printer-url="printerUrl"></webcam-mjpegstreamer-adaptive>
</template>
</div>
<v-card-title class="white--text py-2" style="background-color: rgba(0,0,0,0.3); backdrop-filter: blur(3px);">
@ -124,6 +124,15 @@
...mapState({
remoteMode: state => state.socket.remoteMode
}),
printerUrl() {
const thisUrl = window.location.href.split("/")
const protocol = thisUrl[0]
let url = protocol+"//"+this.printer.socket.hostname
if (80 !== parseInt(this.printer.socket.webPort)) url += ":"+this.printer.socket.webPort
return url
},
isCurrentPrinter: {
get() {
return this.$store.getters["farm/"+this.printer._namespace+"/isCurrentPrinter"]
@ -185,7 +194,7 @@
},
changePrinter() {
if (this.remoteMode) this.$store.dispatch('changePrinter', { printer: this.printer._namespace })
else window.location.href = "//"+this.printer.socket.hostname+(parseInt(this.printer.socket.webPort) !== 80 ? ':'+this.printer.socket.webPort : '')
else window.location.href = this.printerUrl
},
reconnectPrinter() {
this.$store.dispatch("farm/"+this.printer._namespace+"/reconnect")

View File

@ -305,8 +305,8 @@ export default {
},
saveWebcam() {
if (this.dialog.valid) {
if (this.dialog.index) this.$store.dispatch("gui/updateWebcam", this.dialog)
else this.$store.dispatch("gui/addWebcam", this.dialog)
if (this.dialog.index) this.$store.dispatch("gui/updateWebcam", {...this.dialog})
else this.$store.dispatch("gui/addWebcam", {...this.dialog})
this.clearDialog()
}

View File

@ -27,20 +27,28 @@
data: function() {
return {
isVisible: true,
refresh: Math.ceil(Math.random() * Math.pow(10, 12))
}
},
props: {
camSettings: Object,
printerUrl: {
type: String,
default: null
}
},
created: function () {
},
computed: {
url() {
let basicUrl = this.camSettings.url
const params = new URLSearchParams(basicUrl)
params.set('bypassCache', ""+this.refresh)
return decodeURIComponent(params.toString())
const baseUrl = this.camSettings.url
const hostUrl = new URL(this.printerUrl === null ? document.URL : this.printerUrl)
const url = new URL(baseUrl, hostUrl.origin)
url.searchParams.append('bypassCache', this.refresh.toString())
return decodeURIComponent(url.toString())
},
webcamStyle() {
let transforms = ""

View File

@ -51,6 +51,10 @@
},
props: {
camSettings: Object,
printerUrl: {
type: String,
default: null
}
},
created: function () {
@ -101,7 +105,8 @@
},
setUrl() {
const baseUrl = this.camSettings.url
const hostUrl = new URL(document.URL)
const hostUrl = new URL(this.printerUrl === null ? document.URL : this.printerUrl)
const url = new URL(baseUrl, hostUrl.origin)
url.searchParams.append('bypassCache', this.refresh.toString())

View File

@ -252,7 +252,11 @@ export default {
if (
'gui' in state.data &&
'webcam' in state.data.gui &&
'configs' in state.data.gui.webcam
'bool' in state.data.gui.webcam &&
'configs' in state.data.gui.webcam &&
'dashboard' in state.data.gui &&
'boolWebcam' in state.data.gui.dashboard &&
(state.data.gui.dashboard.boolWebcam || state.data.gui.webcam.bool)
) return state.data.gui.webcam.configs
return []

View File

@ -1,6 +1,7 @@
import actions from './actions'
import mutations from './mutations'
import getters from './getters'
import { getDefaultState as getGuiDefaultState } from '../../gui/index'
export function getDefaultState() {
return {
@ -19,7 +20,7 @@ export function getDefaultState() {
wsData: [],
},
data: {
gui: getGuiDefaultState()
},
databases: [],
current_file: {},

View File

@ -69,6 +69,16 @@ export default {
},
setMainsailData(state, payload) {
Vue.set(state.data, 'gui', payload)
const setDataDeep = function(currentState, payload) {
Object.entries(payload).forEach(([key, value]) => {
if (typeof value === 'object' && !Array.isArray(value) && key in currentState) {
setDataDeep(currentState[key], value)
} else if (key in currentState) {
Vue.set(currentState, key, value)
}
})
}
setDataDeep(state.data.gui, payload)
},
}

View File

@ -18,7 +18,6 @@ export default {
'flipY' in payload.value.webcam
)
) {
window.console.log("convert to multi webcam")
dispatch('upgradeWebcamConfig', payload.value.webcam)
delete payload.value.webcam
}

View File

@ -84,8 +84,8 @@ export default {
updateWebcam(state, payload) {
if (state.webcam.configs[payload.index]) {
const configs = {...state.webcam.configs}
configs[payload.index] = {
const webcam = {...state.webcam}
webcam.configs[payload.index] = {
name: payload.name,
icon: payload.icon,
service: payload.service,
@ -95,7 +95,7 @@ export default {
flipY: payload.flipY,
}
Vue.set(state.webcam, 'configs', configs)
Vue.set(state, 'webcam', webcam)
}
},