Video hangs and lags behind reality

[kobrynovych]

When adding a video effect, the video hangs and lags behind reality and I get the following message in the console in the browser:

'Canvas2D: Multiple readback operations using getImageData are faster with the willReadFrequently attribute set to true. See: https://html.spec.whatwg.org/multipage/canvas.html#concept-canvas-will-read-frequently'

I will be very grateful for your help.

I use: "vue": "^2.7.14", "@vonage/video-effects": "^1.0.0",

My code:

<template>
      <video
          ref="videoRef"
          :controls="false"
          playsinline
          autoplay
          muted
          crossOrigin="anonymous"
      />  
</template>

<script>
    import { isSupported, BackgroundEffectProcessor, BackgroundBlurEffect, VirtualBackgroundEffect } from "@vonage/video-effects";

    export default {
        data() {
            return {
                effectProcessor: null,
            }
       },

      methods: {
          async onStartEffect() {
              this.effectProcessor = new BackgroundEffectProcessor({assetsPath: '/tflow/assets',});
              await this.effectProcessor.setInputStream(await navigator.mediaDevices.getUserMedia({ audio: false, video: true }));
              await this.effectProcessor.loadEffect(new BackgroundBlurEffect({});
              this.effectProcessor.pauseStreamProcessing(false);
              this.effectProcessor.enableEffect(true);

              // this.recorder = new MediaRecorder(this.effectProcessor.outputStream, this.options);
              // this.recorder.ondataavailable = this.videoDataHandler;

              this.$refs.videoRef.src = null;
              this.$refs.videoRef.srcObject = this.effectProcessor.outputStream;
          },
     },
}
</script>