add screencast component.

src/component/main.vue

@@ -1,7 +1,14 @@
 <template>
   <div ref="component" class="neko-component">
     <div ref="container" class="neko-container">
-      <video ref="video" :autoplay="autoplay" :muted="autoplay" playsinline />
+      <video
+        v-show="state.connection.type == 'webrtc'"
+        ref="video"
+        :autoplay="autoplay"
+        :muted="autoplay"
+        playsinline
+      />
+      <neko-screencast v-if="state.connection.type == 'screencast'" :api="api.room" />
       <neko-overlay
         :webrtc="connection.webrtc"
         :scroll="state.control.scroll"
@@ -32,7 +39,8 @@
   .neko-container {
     position: relative;
 
-    video {
+    video,
+    img {
       position: absolute;
       top: 0;
       bottom: 0;
@@ -63,11 +71,13 @@
 
   import NekoState from './types/state'
   import Overlay from './overlay.vue'
+  import Screencast from './screencast.vue'
 
   @Component({
     name: 'neko-canvas',
     components: {
       'neko-overlay': Overlay,
+      'neko-screencast': Screencast,
     },
   })
   export default class extends Vue {

src/component/screencast.vue

@@ -0,0 +1,53 @@
+<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
+    active = false
+
+    @Prop()
+    private readonly api!: RoomApi
+
+    async loop() {
+      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 delay = lastLoad - Date.now() + REFRESH_RATE
+        if (delay > 0) {
+          await new Promise((res) => setTimeout(res, delay))
+        }
+      }
+    }
+
+    async mounted() {
+      this.active = true
+
+      setTimeout(this.loop, 0)
+    }
+
+    beforeDestroy() {
+      this.active = false
+
+      if (this._image.src) {
+        URL.revokeObjectURL(this._image.src)
+      }
+    }
+  }
+</script>