diff --git a/src/component/screencast.vue b/src/component/screencast.vue index f1c5b147..427f6e69 100644 --- a/src/component/screencast.vue +++ b/src/component/screencast.vue @@ -13,7 +13,7 @@ }) export default class extends Vue { @Ref('image') readonly _image!: HTMLImageElement - active = false + private active = false @Prop() private readonly enabled!: boolean @@ -25,17 +25,19 @@ while (this.active) { const lastLoad = Date.now() - if (this._image.src) { - URL.revokeObjectURL(this._image.src) - } - const res = await this.api.screenCastImage({ responseType: 'blob' }) - this._image.src = URL.createObjectURL(res.data) + const image = URL.createObjectURL(res.data) + + if (this._image) { + this._image.src = image + } const delay = lastLoad - Date.now() + REFRESH_RATE if (delay > 0) { await new Promise((res) => setTimeout(res, delay)) } + + URL.revokeObjectURL(image) } } @@ -50,17 +52,14 @@ } start() { - this.active = true - - setTimeout(this.loop, 0) + if (!this.active) { + this.active = true + setTimeout(this.loop, 0) + } } stop() { this.active = false - - if (this._image && this._image.src) { - URL.revokeObjectURL(this._image.src) - } } @Watch('enabled')