JSMpeg 在 canvas 旁邊播放視頻

Question

我想在 canvas 旁邊播放視頻。 我知道這個任務可能很陌生，但我需要訪問每一幀。 為此我使用回調 function ，它在每幀渲染幀后調用。 我想操縱這個框架（添加矩形）並將他渲染到另一個 canvas 上。 現在我只能渲染 1 幀。 我知道為什么，但我不需要在循環中調用 requestAnimationFrame() 並傳遞參數。 我如何在我的情況下渲染視頻並在沒有 arg 的情況下調用 requestAnimationFrame()。 請幫忙。 我打破了我的頭。

<template>
  <div>
    <canvas id="video-canvas" ></canvas>
    <canvas id="myCanvas"></canvas>
  </div>
</template>
<script>

import JSMpeg from 'jsmpeg-player'
export default {
  props: {

  },
  data: () => ({
    myCanvas: null,
    video: null,
    ctx: null,
  }),
  mounted() {
    this.initPlayer()
    this.myCanvas = document.getElementById("canvas")
    this.ctx = this.myCanvas.getContext("2d")
  }, 
  methods: {
    initPlayer() {
      var canvas = document.getElementById('video-canvas');
      var url = 'ws://localhost:8082/';
      var player = new JSMpeg.Player(url, {
        canvas: canvas, 
        videoBufferSize: 1024*1024*4, 
        onVideoDecode: () => {
          var image = new Image()
          var currentFrameData = player.options.canvas.toDataURL('image/webp', 0.7);
          image.src = currentFrameData
          this.ctx.drawImage(image, 0, 0, this.myCanvas.width, this.myCanvas.height)
          requestAnimationFrame()

        }
        });
    },  
  }
}
</script>

Answer 1

嘗試這個。

onVideoDecode: (decoder, time) => {
  var image = new Image()
  var currentFrameData = player.options.canvas.toDataURL('image/webp', 0.7)
  image.src = currentFrameData
  image.onload = () => {
    ctx.drawImage(image, 0, 0, canvas.width, canvas.height)
  }
}