neko/src/component/screencast.vue

81 lines
1.5 KiB
Vue
Raw Normal View History

2021-07-15 01:37:23 +12:00
<template>
<img ref="image" />
</template>
<script lang="ts">
import { Vue, Component, Ref, Watch, Prop } from 'vue-property-decorator'
import { RoomApi } from './api'
const REFRESH_RATE = 1e3
@Component({
name: 'neko-screencast',
})
export default class extends Vue {
@Ref('image') readonly _image!: HTMLImageElement
2021-07-28 10:07:20 +12:00
private running = false
private continue = false
2021-07-15 01:37:23 +12:00
2021-07-18 02:36:56 +12:00
@Prop()
private readonly enabled!: boolean
2021-07-15 01:37:23 +12:00
@Prop()
private readonly api!: RoomApi
async loop() {
2021-07-28 10:07:20 +12:00
if (this.running) return
this.running = true
while (this.continue) {
2021-07-15 01:37:23 +12:00
const lastLoad = Date.now()
const res = await this.api.screenCastImage({ responseType: 'blob' })
const image = URL.createObjectURL(res.data)
if (this._image) {
this._image.src = image
}
2021-07-15 01:37:23 +12:00
const delay = lastLoad - Date.now() + REFRESH_RATE
if (delay > 0) {
await new Promise((res) => setTimeout(res, delay))
}
URL.revokeObjectURL(image)
2021-07-15 01:37:23 +12:00
}
2021-07-28 10:07:20 +12:00
this.running = false
2021-07-15 01:37:23 +12:00
}
2021-07-18 02:36:56 +12:00
mounted() {
if (this.enabled) {
this.start()
}
}
beforeDestroy() {
this.stop()
}
start() {
2021-07-28 10:07:20 +12:00
if (!this.running) {
this.continue = true
setTimeout(this.loop, 0)
}
2021-07-15 01:37:23 +12:00
}
2021-07-18 02:36:56 +12:00
stop() {
2021-07-28 10:07:20 +12:00
this.continue = false
2021-07-15 01:37:23 +12:00
}
2021-07-18 02:36:56 +12:00
@Watch('enabled')
onEnabledChanged(enabled: boolean) {
if (enabled) {
this.start()
} else {
this.stop()
}
}
2021-07-15 01:37:23 +12:00
}
</script>