applyVideoFilter: Multiple readback operations using getImageData are faster with the willReadFrequently attribute set to true.

[kobrynovych]

Hello,

I use: Vue 2, "@opentok/client": "2.24.0",

When adding a blur or adding an image to the background I get this message: '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'

Filters are added but the page hangs.

How can it be fixed?

Thanks for any help

My code:

this.publisher = OT.initPublisher(
    this.$el, 
    {
              insertMode: 'append',
              width: `'100%',`
              height: '100%',
              style: {buttonDisplayMode: 'off'},
              resolution: "1280x720",
              videoContentHint: "motion",
              frameRate: 7,
              audioBitrate: 48000,
              enableDtx: true,
    }, 
    err => {
        if (err) {
            this.$emit('error', err);
        } else {
            this.$emit('publisherCompleted');
        }
    }
);

onStartVideoFilter1() {
    this.publisher.applyVideoFilter({
        type: 'backgroundBlur',
        // blurStrength: 'low',
        blurStrength: 'high',
    });
},

onStartVideoFilter2(imgUrl) {
      this.publisher.applyVideoFilter({
          type: 'backgroundReplacement',
          backgroundImgUrl: imgUrl,
      });
}

[pardel]

@IgorKob this repo is now deprecated. Please consider using OpenTok Web Components instead.