neko/src/component/screencast.vue
2022-02-07 13:31:11 +00:00

95 lines
1.9 KiB
Vue

<template>
<img ref="image" @load="onImageLoad" />
</template>
<script lang="ts">
import { Vue, Component, Ref, Watch, Prop } from 'vue-property-decorator'
import { RoomApi } from './api'
const REFRESH_RATE = 1e3
const ERROR_DELAY_MS = 2500
@Component({
name: 'neko-screencast',
})
export default class extends Vue {
@Ref('image') readonly _image!: HTMLImageElement
private running = false
private continue = false
@Prop()
private readonly enabled!: boolean
@Prop()
private readonly api!: RoomApi
async loop() {
if (this.running) return
this.running = true
while (this.continue) {
const lastLoad = Date.now()
try {
const res = await this.api.screenCastImage({ responseType: 'blob' })
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)
} catch {
await new Promise((res) => setTimeout(res, ERROR_DELAY_MS))
}
}
this.running = false
this.$emit('imageReady', false)
if (this._image) {
this._image.src = ''
}
}
mounted() {
if (this.enabled) {
this.start()
}
}
beforeDestroy() {
this.stop()
}
start() {
if (!this.running) {
this.continue = true
setTimeout(this.loop, 0)
}
}
stop() {
this.continue = false
}
@Watch('enabled')
onEnabledChanged(enabled: boolean) {
if (enabled) {
this.start()
} else {
this.stop()
}
}
onImageLoad() {
this.$emit('imageReady', this.running)
}
}
</script>