Custom Filter not visible on Web

SDK
1

Hello, I’m trying to use a custom filter that was designed in Studio and is hosted via AWS S3 and CloudFront at this url https://d2k1jaddzcz80y.cloudfront.net/effects/Smooth25per.deepar

This is the code I’m using currently const deepAR = await deepar.initialize({
licenseKey: ‘…’,
canvas: document.getElementById(‘deepar-canvas’),
effect: ‘https://cdn.jsdelivr.net/npm/deepar/effects/aviators’
});.

The effect works fine for the aviators effect but when using my filter it only shows a blank canvas.

2

Hey @Crishon_Washington , welcome to the DeepAR forum :slight_smile:

I downloaded your effect and tested it in DeepAR Studio - it seemed to work fine (it looked like a very subtle skin smoothing effect?)

I also tried to use the file from the link you sent above while initializing DeepAR, and I had the same error. It looks like you have a CORS error - your S3 server isn’t happy to serve the file to your app location.

You can verify this by testing with cors-anywhere (just visit the url once in the browser to request temporary access, then use this link in your app temporarily) https://cors-anywhere.herokuapp.com/https://d2k1jaddzcz80y.cloudfront.net/effects/Smooth25per.deepar

To fix this, you’ll just need to update your CORS settings in your S3 bucket: Using cross-origin resource sharing (CORS) - Amazon Simple Storage Service

Also - it’s probably best to edit your message to remove your license key. Nobody can use it except for the domain you have it scoped to, and it is technically visible from the browser in your app, but just to be on the safe side!

Hope that helps

3

Hey Zak,

Thank you so much! That was the issue. Also, appreciate the warning about the license key lol.

1 Like