I want play video in alongside canvas. I know this task maybe stranger, but i need get access for each frame. For this im using callback function which call after rendering frame for each frame. I want manipulate this frame (add rectangle) and render him on another canvas. For now i can render only 1 frame. I know why, but i dont need to call requestAnimationFrame() in the loop and pass the arg. How i can render video in my case and call requestAnimationFrame() without arg. Please help. Im broke my head.
<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>
Try this.