Как создать видеокомпонент с помощью vue-konva?

Question

С konva.js вы можете создавать видеокомпоненты на холсте. Здесь вы можете увидеть пример в документации (https://konvajs.org/docs/sandbox/Video_On_Canvas.html).

Сейчас я использую vue-konva и нет компонента для создания видео на холсте. Вам нужно сделать это с помощью компонента v-image, но я не могу заставить его работать. Можно ли с vue-konva?

Answer 1

Вот скрипка видео, работающего с v-image.

Я нашел рабочую версию этого кода и ящика.

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>