opentok / opentok-react

React components for OpenTok.js
https://www.npmjs.com/package/opentok-react
MIT License
107 stars 105 forks source link

applyVideoFilter not working #233

Open gustavostuff opened 2 years ago

gustavostuff commented 2 years ago

There's some code without context in here but still, this seems to work OK:

let publisherData = {
  resolution,
  audioSource: this.normalizeSource(config.audioSource),
  videoSource: this.normalizeSource(config.videoSource),
  name: id,
  showControls: false,
  frameRate: fps,
  insertDefaultUI: false,
  publishAudio: !isMuted,
  publishVideo: !isHidden,
  videoFilter: {
    type: 'backgroundBlur'  // <-- Sending filter here
  }
};

let pub = OT.initPublisher(
  undefined, {
    ...publisherData
  }, (error: OT.OTError) => {
    console.error('There was an error while initializing the publisher', error);
  }
);
this.publishers.set(id, pub);

Result: blur.png

While this doesn't:

let publisherData = {
  resolution,
  audioSource: this.normalizeSource(config.audioSource),
  videoSource: this.normalizeSource(config.videoSource),
  name: id,
  showControls: false,
  frameRate: fps,
  insertDefaultUI: false,
  publishAudio: !isMuted,
  publishVideo: !isHidden,
};

let pub = OT.initPublisher(
  undefined, {
    ...publisherData
  }, (error: OT.OTError) => {
    console.error('There was an error while initializing the publisher', error);
  }
);
pub.applyVideoFilter({     //  <-- Doing it here instead
  type: 'backgroundBlur'
});
this.publishers.set(id, pub);

Result: noblur.png

gustavostuff commented 2 years ago

I just realized this may not be the correct repo for this, but still, this is core functionality. We're using OpenTok by importing: <script src="https://static.opentok.com/v2.23.1/js/opentok.min.js"></script>