Unable to load background if image component is set with non local image.

[JaekwanLee]

Hi,

I have started integrating a video processor for setting up background image. Unlike given example in the repository, we uses images from an external url. However, if an image component is created with an external URL - we uses a public image from aws s3 -, the video becomes blank and not rendering anything.

For example, the below image component works.

<img src="/backgrounds/vacation.jpg">

However, the below image component will break the video.

<img src="http://[another domain]/backgrounds/vacation.jpg">

To test this I locally ran two http server(Port 3000 as processor example and 8080 to serve the same asset but using domain). To simply avoid img component creation, I directly put the image component and put it into backgroundImage of VirtualBackgroundProcessor.

index.html
<img src="http://localhost:8080/backgrounds/vacation.jpg" id="remoteImage">

index.js
     virtualBackgroundProcessor = new VirtualBackgroundProcessor({
       assetsPath: '',
       maskBlurRadius,
       backgroundImage: document.getElementById('remoteImage'),
       fitType,
     })

• [x] I have verified that the issue occurs with the latest twilio-video-processors.js release and is not marked as a known issue in the CHANGELOG.md.
• [x] I reviewed the Common Issues and open GitHub issues and verified that this report represents a potentially new issue.
• [x] I am not sharing any Personally Identifiable Information (PII) or sensitive account information (API keys, credentials, etc.) when reporting this issue.

Code to reproduce the issue:

// TODO

Expected behavior:

TODO

Actual behavior:

TODO

Software versions:

• [ ] Browser(s):
• [ ] Operating System:
• [x] twilio-video-processors.js:
• [ ] Third-party libraries (e.g., Angular, React, etc.):

[manjeshbhargav]

Hi @JaekwanLee ,

The documentation for VirtualBackgroundProcessorOptions.backgroundImage contains a link to the security guidelines required for loading images from a different origin. Please follow them and let me know if that works for you.

[JaekwanLee]

@manjeshbhargav Thanks. It worked after setting CORS on the image

[Moavia-00]

@manjeshbhargav Thanks. It worked after setting CORS on the image

@JaekwanLee can you show me how you did that?