[SOLVED] How to create a video component with vue-konva?

How to create a video component with vue-konva?

With konva.js you can create video components on your canvas. Here you can see the example in the docs (https://konvajs.org/docs/sandbox/Video_On_Canvas.html).

Now I'm using vue-konva and there is no component to create a video on the canvas. You need to do it with the v-image component but I am not able to make it work. Is it possible with vue-konva?

Solution

Here's a fiddle of a video working with v-image.

It's a working version of this codesandbox I found.

const width = window.innerWidth;
const height = window.innerHeight;

new Vue({
  el: "#app",
  data() {
    return {
      stageSize: {
        width: width,
        height: height
      },
      video: null,
      animation: null
    };
  },
  computed: {
    imageConfig() {
      return {
        image: this.video,
        x: 0,
        y: 0,
        width: 320,
        height: 180
      };
    }
  },
  methods: {
    play() {
      this.video.play();
      this.animation.start();
    },
    pause() {
      this.video.pause();
      this.animation.stop();
    }
  },
  mounted() {
    this.video = document.createElement("video");
    this.video.src =
 "https://upload.wikimedia.org/wikipedia/commons/transcoded/c/c4/Physicsworks.ogv/Physicsworks.ogv.240p.vp9.webm";

    this.layer = this.$refs.image.getStage().getLayer();
    this.animation = new Konva.Animation(() => {
      // do nothing, animation just need to update the layer
    }, this.layer);

    this.video.addEventListener("canplay", () => {
      this.play();
    });
  }

});

<script src="https://cdnjs.cloudflare.com/ajax/libs/konva/4.2.2/konva.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vue-konva@2.1.1/umd/vue-konva.min.js"></script>

<div id="app">
  <button @click="play">Play</button>
  <button @click="pause">Pause</button>

  <v-stage ref="stage" :config="stageSize">
    <v-layer ref="layer">
      <v-image ref="image" :config="imageConfig" />
    </v-layer>
  </v-stage>
</div>